1
+ /// UI elements
1
2
const connectButton = document . getElementById ( 'connect' ) ;
2
3
const batteryLevelElement = document . getElementById ( 'battery-level' ) ;
3
4
const batteryLabel = document . getElementById ( 'battery-label' ) ;
@@ -8,6 +9,7 @@ const serviceUuid = '19b10000-0000-537e-4f6c-d104768a1214';
8
9
let pollIntervalID ;
9
10
let peripheralDevice ;
10
11
12
+ /// Data structure to hold the characteristics and their values plus data conversion functions.
11
13
let data = {
12
14
"batteryPercentage" : {
13
15
"name" : "Battery Percentage" ,
@@ -81,6 +83,12 @@ function onDisconnected(event) {
81
83
externalPowerIconElement . style . display = "none" ;
82
84
}
83
85
86
+ /**
87
+ * Connects to the Arduino board and starts reading the characteristics.
88
+ * @param {Boolean } usePolling The default is to use notifications, but polling can be used instead.
89
+ * In that case a poll interval can be defined.
90
+ * @param {Number } pollInterval The interval in milliseconds to poll the characteristics from the device.
91
+ */
84
92
async function connectToPeripheralDevice ( usePolling = false , pollInterval = 5000 ) {
85
93
if ( peripheralDevice && peripheralDevice . gatt . connected ) {
86
94
console . log ( "Already connected" ) ;
@@ -131,6 +139,12 @@ connectButton.addEventListener('click', async () => {
131
139
}
132
140
} ) ;
133
141
142
+ /**
143
+ * Renders the data from the device in the UI.
144
+ * It displays the battery level as a visual bar color coded from red to green.
145
+ * It also displays the battery voltage and the percentage of the regulated voltage.
146
+ * It also displays the charging and external power status.
147
+ */
134
148
function displayBatteryData ( ) {
135
149
const batteryPercentage = data . batteryPercentage . value ;
136
150
const batteryVoltage = data . batteryVoltage . value ;
@@ -146,6 +160,10 @@ function displayBatteryData() {
146
160
externalPowerIconElement . style . display = data . runsOnBattery . value ? "none" : "block" ;
147
161
}
148
162
163
+ /**
164
+ * Used together with polling to read the characteristics from the device.
165
+ * After reading the data it is displayed in the UI by calling displayBatteryData().
166
+ */
149
167
async function readCharacteristicsData ( ) {
150
168
await Promise . all (
151
169
Object . keys ( data ) . map ( async ( key ) => {
@@ -158,6 +176,11 @@ async function readCharacteristicsData() {
158
176
displayBatteryData ( ) ;
159
177
}
160
178
179
+ /**
180
+ * Callback function that is called when a characteristic value changes.
181
+ * Updates the data object with the new value and displays it in the UI by calling displayBatteryData().
182
+ * @param {* } event The event that contains the characteristic that changed.
183
+ */
161
184
function handleCharacteristicChange ( event ) {
162
185
// Find the characteristic that changed in the data object by matching the UUID
163
186
let dataItem = Object . values ( data ) . find ( item => item . characteristicUUID === event . target . uuid ) ;
0 commit comments