brilliantsole 0.0.26 → 0.0.28

package/examples/basic/script.js

@@ -11,7 +11,9 @@ window.device = device;
 
 // GET DEVICES
 /** @type {HTMLTemplateElement} */
-const availableDeviceTemplate = document.getElementById("availableDeviceTemplate");
+const availableDeviceTemplate = document.getElementById(
+  "availableDeviceTemplate"
+);
 const availableDevicesContainer = document.getElementById("availableDevices");
 /** @param {BS.Device[]} availableDevices */
 function onAvailableDevices(availableDevices) {
@@ -23,19 +25,24 @@ function onAvailableDevices(availableDevices) {
       const availableDeviceContainer = availableDeviceTemplate.content
         .cloneNode(true)
         .querySelector(".availableDevice");
-      availableDeviceContainer.querySelector(".name").innerText = availableDevice.name;
-      availableDeviceContainer.querySelector(".type").innerText = availableDevice.type;
+      availableDeviceContainer.querySelector(".name").innerText =
+        availableDevice.name;
+      availableDeviceContainer.querySelector(".type").innerText =
+        availableDevice.type;
 
       /** @type {HTMLButtonElement} */
-      const toggleConnectionButton = availableDeviceContainer.querySelector(".toggleConnection");
+      const toggleConnectionButton =
+        availableDeviceContainer.querySelector(".toggleConnection");
       toggleConnectionButton.addEventListener("click", () => {
         device.connectionManager = availableDevice.connectionManager;
         device.reconnect();
       });
       device.addEventListener("connectionStatus", () => {
-        toggleConnectionButton.disabled = device.connectionStatus != "notConnected";
+        toggleConnectionButton.disabled =
+          device.connectionStatus != "notConnected";
       });
-      toggleConnectionButton.disabled = device.connectionStatus != "notConnected";
+      toggleConnectionButton.disabled =
+        device.connectionStatus != "notConnected";
 
       availableDevicesContainer.appendChild(availableDeviceContainer);
     });
@@ -84,7 +91,9 @@ device.addEventListener("connectionStatus", () => {
     case "connected":
     case "notConnected":
       toggleConnectionButton.disabled = false;
-      toggleConnectionButton.innerText = device.isConnected ? "disconnect" : "connect";
+      toggleConnectionButton.innerText = device.isConnected
+        ? "disconnect"
+        : "connect";
       break;
     case "connecting":
     case "disconnecting":
@@ -95,7 +104,29 @@ device.addEventListener("connectionStatus", () => {
 });
 
 /** @type {HTMLInputElement} */
-const reconnectOnDisconnectionCheckbox = document.getElementById("reconnectOnDisconnection");
+const connectIpAddressInput = document.getElementById("connectIpAddress");
+connectIpAddressInput.addEventListener("input", () => {
+  const isValid = connectIpAddressInput.checkValidity();
+  connectViaIpAddressButton.disabled = !isValid;
+});
+/** @type {HTMLButtonElement} */
+const connectViaIpAddressButton = document.getElementById(
+  "connectViaIpAddress"
+);
+connectViaIpAddressButton.addEventListener("click", () => {
+  connectViaIpAddressButton.disabled = true;
+  console.log(`connecting via ipAddress "${connectIpAddressInput.value}"`);
+  device.connect({ type: "webSocket", ipAddress: connectIpAddressInput.value });
+});
+device.addEventListener("isConnected", () => {
+  connectIpAddressInput.disabled = device.isConnected;
+  connectViaIpAddressButton.disabled = device.isConnected;
+});
+
+/** @type {HTMLInputElement} */
+const reconnectOnDisconnectionCheckbox = document.getElementById(
+  "reconnectOnDisconnection"
+);
 reconnectOnDisconnectionCheckbox.addEventListener("input", () => {
   device.reconnectOnDisconnection = reconnectOnDisconnectionCheckbox.checked;
 });
@@ -103,7 +134,7 @@ reconnectOnDisconnectionCheckbox.addEventListener("input", () => {
 /** @type {HTMLButtonElement} */
 const resetDeviceButton = document.getElementById("resetDevice");
 device.addEventListener("isConnected", () => {
-  resetDeviceButton.disabled = !device.isConnected;
+  resetDeviceButton.disabled = !device.isConnected || !device.canReset;
 });
 resetDeviceButton.addEventListener("click", () => {
   device.reset();
@@ -114,7 +145,17 @@ resetDeviceButton.addEventListener("click", () => {
 /** @type {HTMLPreElement} */
 const deviceInformationPre = document.getElementById("deviceInformationPre");
 device.addEventListener("deviceInformation", () => {
-  deviceInformationPre.textContent = JSON.stringify(device.deviceInformation, null, 2);
+  deviceInformationPre.textContent = JSON.stringify(
+    device.deviceInformation,
+    null,
+    2
+  );
+});
+
+// MTU
+const deviceMtuSpan = document.getElementById("mtu");
+device.addEventListener("getMtu", () => {
+  deviceMtuSpan.innerText = device.mtu;
 });
 
 // BATTERY LEVEL
@@ -141,7 +182,9 @@ device.addEventListener("getBatteryCurrent", () => {
 });
 
 /** @type {HTMLButtonElement} */
-const updateBatteryCurrentButton = document.getElementById("updateBatteryCurrent");
+const updateBatteryCurrentButton = document.getElementById(
+  "updateBatteryCurrent"
+);
 device.addEventListener("isConnected", () => {
   updateBatteryCurrentButton.disabled = !device.isConnected;
 });
@@ -225,22 +268,33 @@ setTypeButton.addEventListener("click", () => {
 // SENSOR CONFIGURATION
 
 /** @type {HTMLPreElement} */
-const sensorConfigurationPre = document.getElementById("sensorConfigurationPre");
+const sensorConfigurationPre = document.getElementById(
+  "sensorConfigurationPre"
+);
 device.addEventListener("getSensorConfiguration", () => {
-  sensorConfigurationPre.textContent = JSON.stringify(device.sensorConfiguration, null, 2);
+  sensorConfigurationPre.textContent = JSON.stringify(
+    device.sensorConfiguration,
+    null,
+    2
+  );
 });
 
 /** @type {HTMLTemplateElement} */
-const sensorTypeConfigurationTemplate = document.getElementById("sensorTypeConfigurationTemplate");
+const sensorTypeConfigurationTemplate = document.getElementById(
+  "sensorTypeConfigurationTemplate"
+);
 BS.SensorTypes.forEach((sensorType) => {
   /** @type {HTMLElement} */
-  const sensorTypeConfigurationContainer = sensorTypeConfigurationTemplate.content
-    .cloneNode(true)
-    .querySelector(".sensorTypeConfiguration");
-  sensorTypeConfigurationContainer.querySelector(".sensorType").innerText = sensorType;
+  const sensorTypeConfigurationContainer =
+    sensorTypeConfigurationTemplate.content
+      .cloneNode(true)
+      .querySelector(".sensorTypeConfiguration");
+  sensorTypeConfigurationContainer.querySelector(".sensorType").innerText =
+    sensorType;
 
   /** @type {HTMLInputElement} */
-  const sensorRateInput = sensorTypeConfigurationContainer.querySelector(".sensorRate");
+  const sensorRateInput =
+    sensorTypeConfigurationContainer.querySelector(".sensorRate");
   sensorRateInput.value = 0;
   sensorRateInput.max = BS.MaxSensorRate;
   sensorRateInput.step = BS.SensorRateStep;
@@ -258,27 +312,44 @@ BS.SensorTypes.forEach((sensorType) => {
     }
   });
 
-  sensorTypeConfigurationTemplate.parentElement.appendChild(sensorTypeConfigurationContainer);
+  sensorTypeConfigurationTemplate.parentElement.appendChild(
+    sensorTypeConfigurationContainer
+  );
   sensorTypeConfigurationContainer.dataset.sensorType = sensorType;
 });
 device.addEventListener("getSensorConfiguration", () => {
   for (const sensorType in device.sensorConfiguration) {
-    document.querySelector(`.sensorTypeConfiguration[data-sensor-type="${sensorType}"] input`).value =
-      device.sensorConfiguration[sensorType];
+    document.querySelector(
+      `.sensorTypeConfiguration[data-sensor-type="${sensorType}"] .input`
+    ).value = device.sensorConfiguration[sensorType];
   }
 });
 device.addEventListener("isConnected", () => {
   for (const sensorType in device.sensorConfiguration) {
-    document.querySelector(`[data-sensor-type="${sensorType}"] input`).disabled = !device.isConnected;
+    document.querySelector(
+      `[data-sensor-type="${sensorType}"] .input`
+    ).disabled = !device.isConnected;
   }
 });
 
+// PRESSURE RANGE
+
+/** @type {HTMLButtonElement} */
+const resetPressureRangeButton = document.getElementById("resetPressureRange");
+resetPressureRangeButton.addEventListener("click", () => {
+  device.resetPressureRange();
+});
+
 // SENSOR DATA
 
 /** @type {HTMLTemplateElement} */
-const sensorTypeDataTemplate = document.getElementById("sensorTypeDataTemplate");
+const sensorTypeDataTemplate = document.getElementById(
+  "sensorTypeDataTemplate"
+);
 BS.SensorTypes.forEach((sensorType) => {
-  const sensorTypeDataContainer = sensorTypeDataTemplate.content.cloneNode(true).querySelector(".sensorTypeData");
+  const sensorTypeDataContainer = sensorTypeDataTemplate.content
+    .cloneNode(true)
+    .querySelector(".sensorTypeData");
   sensorTypeDataContainer.querySelector(".sensorType").innerText = sensorType;
 
   /** @type {HTMLPreElement} */
@@ -297,38 +368,52 @@ BS.SensorTypes.forEach((sensorType) => {
 const vibrationTemplate = document.getElementById("vibrationTemplate");
 {
   /** @type {HTMLInputElement} */
-  const waveformEffectSequenceLoopCountInput = vibrationTemplate.content.querySelector(
-    ".waveformEffect .sequenceLoopCount"
-  );
-  waveformEffectSequenceLoopCountInput.max = BS.MaxVibrationWaveformEffectSequenceLoopCount;
+  const waveformEffectSequenceLoopCountInput =
+    vibrationTemplate.content.querySelector(
+      ".waveformEffect .sequenceLoopCount"
+    );
+  waveformEffectSequenceLoopCountInput.max =
+    BS.MaxVibrationWaveformEffectSequenceLoopCount;
 }
 /** @type {HTMLTemplateElement} */
-const vibrationLocationTemplate = document.getElementById("vibrationLocationTemplate");
+const vibrationLocationTemplate = document.getElementById(
+  "vibrationLocationTemplate"
+);
 
 /** @type {HTMLTemplateElement} */
-const waveformEffectSegmentTemplate = document.getElementById("waveformEffectSegmentTemplate");
+const waveformEffectSegmentTemplate = document.getElementById(
+  "waveformEffectSegmentTemplate"
+);
 {
   /** @type {HTMLSelectElement} */
-  const waveformEffectSelect = waveformEffectSegmentTemplate.content.querySelector(".effect");
+  const waveformEffectSelect =
+    waveformEffectSegmentTemplate.content.querySelector(".effect");
   const waveformEffectOptgroup = waveformEffectSelect.querySelector("optgroup");
   BS.VibrationWaveformEffects.forEach((waveformEffect) => {
     waveformEffectOptgroup.appendChild(new Option(waveformEffect));
   });
 
   /** @type {HTMLInputElement} */
-  const waveformEffectSegmentDelayInput = waveformEffectSegmentTemplate.content.querySelector(".delay");
-  waveformEffectSegmentDelayInput.max = BS.MaxVibrationWaveformEffectSegmentDelay;
+  const waveformEffectSegmentDelayInput =
+    waveformEffectSegmentTemplate.content.querySelector(".delay");
+  waveformEffectSegmentDelayInput.max =
+    BS.MaxVibrationWaveformEffectSegmentDelay;
 
   /** @type {HTMLInputElement} */
-  const waveformEffectLoopCountInput = waveformEffectSegmentTemplate.content.querySelector(".loopCount");
-  waveformEffectLoopCountInput.max = BS.MaxVibrationWaveformEffectSegmentLoopCount;
+  const waveformEffectLoopCountInput =
+    waveformEffectSegmentTemplate.content.querySelector(".loopCount");
+  waveformEffectLoopCountInput.max =
+    BS.MaxVibrationWaveformEffectSegmentLoopCount;
 }
 
 /** @type {HTMLTemplateElement} */
-const waveformSegmentTemplate = document.getElementById("waveformSegmentTemplate");
+const waveformSegmentTemplate = document.getElementById(
+  "waveformSegmentTemplate"
+);
 {
   /** @type {HTMLInputElement} */
-  const waveformDurationSegmentInput = waveformSegmentTemplate.content.querySelector(".duration");
+  const waveformDurationSegmentInput =
+    waveformSegmentTemplate.content.querySelector(".duration");
   waveformDurationSegmentInput.max = BS.MaxVibrationWaveformSegmentDuration;
 }
 
@@ -336,7 +421,9 @@ const waveformSegmentTemplate = document.getElementById("waveformSegmentTemplate
 const addVibrationButton = document.getElementById("addVibration");
 addVibrationButton.addEventListener("click", () => {
   /** @type {HTMLElement} */
-  const vibrationContainer = vibrationTemplate.content.cloneNode(true).querySelector(".vibration");
+  const vibrationContainer = vibrationTemplate.content
+    .cloneNode(true)
+    .querySelector(".vibration");
 
   /** @type {HTMLButtonElement} */
   const deleteButton = vibrationContainer.querySelector(".delete");
@@ -346,25 +433,33 @@ addVibrationButton.addEventListener("click", () => {
   });
 
   /** @type {HTMLUListElement} */
-  const vibrationLocationsContainer = vibrationContainer.querySelector(".locations");
-  BS.VibrationLocations.forEach((vibrationLocation) => {
+  const vibrationLocationsContainer =
+    vibrationContainer.querySelector(".locations");
+  device.vibrationLocations.forEach((vibrationLocation) => {
     const vibrationLocationContainer = vibrationLocationTemplate.content
       .cloneNode(true)
       .querySelector(".vibrationLocation");
-    vibrationLocationContainer.querySelector("span").innerText = vibrationLocation;
-    vibrationLocationContainer.querySelector("input").dataset.vibrationLocation = vibrationLocation;
+    vibrationLocationContainer.querySelector("span").innerText =
+      vibrationLocation;
+    vibrationLocationContainer.querySelector(
+      "input"
+    ).dataset.vibrationLocation = vibrationLocation;
     vibrationLocationsContainer.appendChild(vibrationLocationContainer);
   });
 
   /** @type {HTMLElement} */
-  const waveformEffectContainer = vibrationContainer.querySelector(".waveformEffect");
+  const waveformEffectContainer =
+    vibrationContainer.querySelector(".waveformEffect");
   /** @type {HTMLUListElement} */
-  const waveformEffectSegmentsContainer = waveformEffectContainer.querySelector(".segments");
+  const waveformEffectSegmentsContainer =
+    waveformEffectContainer.querySelector(".segments");
   /** @type {HTMLButtonElement} */
-  const addWaveformEffectSegmentButton = waveformEffectContainer.querySelector(".add");
+  const addWaveformEffectSegmentButton =
+    waveformEffectContainer.querySelector(".add");
   const updateAddWaveformEffectSegmentButton = () => {
     addWaveformEffectSegmentButton.disabled =
-      waveformEffectSegmentsContainer.children.length >= BS.MaxNumberOfVibrationWaveformEffectSegments;
+      waveformEffectSegmentsContainer.children.length >=
+      BS.MaxNumberOfVibrationWaveformEffectSegments;
   };
   addWaveformEffectSegmentButton.addEventListener("click", () => {
     /** @type {HTMLElement} */
@@ -372,11 +467,14 @@ addVibrationButton.addEventListener("click", () => {
       .cloneNode(true)
       .querySelector(".waveformEffectSegment");
 
-    const effectContainer = waveformEffectSegmentContainer.querySelector(".effect").parentElement;
-    const delayContainer = waveformEffectSegmentContainer.querySelector(".delay").parentElement;
+    const effectContainer =
+      waveformEffectSegmentContainer.querySelector(".effect").parentElement;
+    const delayContainer =
+      waveformEffectSegmentContainer.querySelector(".delay").parentElement;
 
     /** @type {HTMLSelectElement} */
-    const waveformEffectTypeSelect = waveformEffectSegmentContainer.querySelector(".type");
+    const waveformEffectTypeSelect =
+      waveformEffectSegmentContainer.querySelector(".type");
     waveformEffectTypeSelect.addEventListener("input", () => {
       let shouldShowEffectContainer = false;
       let shouldShowDelayContainer = false;
@@ -389,7 +487,9 @@ addVibrationButton.addEventListener("click", () => {
           shouldShowDelayContainer = true;
           break;
         default:
-          throw Error(`uncaught waveformEffectTypeSelect value "${waveformEffectTypeSelect.value}"`);
+          throw Error(
+            `uncaught waveformEffectTypeSelect value "${waveformEffectTypeSelect.value}"`
+          );
       }
 
       effectContainer.style.display = shouldShowEffectContainer ? "" : "none";
@@ -397,10 +497,12 @@ addVibrationButton.addEventListener("click", () => {
     });
     waveformEffectTypeSelect.dispatchEvent(new Event("input"));
 
-    waveformEffectSegmentContainer.querySelector(".delete").addEventListener("click", () => {
-      waveformEffectSegmentContainer.remove();
-      updateAddWaveformEffectSegmentButton();
-    });
+    waveformEffectSegmentContainer
+      .querySelector(".delete")
+      .addEventListener("click", () => {
+        waveformEffectSegmentContainer.remove();
+        updateAddWaveformEffectSegmentButton();
+      });
 
     waveformEffectSegmentsContainer.appendChild(waveformEffectSegmentContainer);
     updateAddWaveformEffectSegmentButton();
@@ -409,22 +511,28 @@ addVibrationButton.addEventListener("click", () => {
   /** @type {HTMLElement} */
   const waveformContainer = vibrationContainer.querySelector(".waveform");
   /** @type {HTMLUListElement} */
-  const waveformSegmentsContainer = waveformContainer.querySelector(".segments");
+  const waveformSegmentsContainer =
+    waveformContainer.querySelector(".segments");
 
   /** @type {HTMLButtonElement} */
   const addWaveformSegmentButton = waveformContainer.querySelector(".add");
   const updateAddWaveformSegmentButton = () => {
     addWaveformSegmentButton.disabled =
-      waveformSegmentsContainer.children.length >= BS.MaxNumberOfVibrationWaveformSegments;
+      waveformSegmentsContainer.children.length >=
+      BS.MaxNumberOfVibrationWaveformSegments;
   };
   addWaveformSegmentButton.addEventListener("click", () => {
     /** @type {HTMLElement} */
-    const waveformSegmentContainer = waveformSegmentTemplate.content.cloneNode(true).querySelector(".waveformSegment");
+    const waveformSegmentContainer = waveformSegmentTemplate.content
+      .cloneNode(true)
+      .querySelector(".waveformSegment");
 
-    waveformSegmentContainer.querySelector(".delete").addEventListener("click", () => {
-      waveformSegmentContainer.remove();
-      updateAddWaveformSegmentButton();
-    });
+    waveformSegmentContainer
+      .querySelector(".delete")
+      .addEventListener("click", () => {
+        waveformSegmentContainer.remove();
+        updateAddWaveformSegmentButton();
+      });
 
     waveformSegmentsContainer.appendChild(waveformSegmentContainer);
     updateAddWaveformSegmentButton();
@@ -433,7 +541,8 @@ addVibrationButton.addEventListener("click", () => {
   /** @type {HTMLSelectElement} */
   const vibrationTypeSelect = vibrationContainer.querySelector(".type");
   /** @type {HTMLOptGroupElement} */
-  const vibrationTypeSelectOptgroup = vibrationTypeSelect.querySelector("optgroup");
+  const vibrationTypeSelectOptgroup =
+    vibrationTypeSelect.querySelector("optgroup");
   BS.VibrationTypes.forEach((vibrationType) => {
     vibrationTypeSelectOptgroup.appendChild(new Option(vibrationType));
   });
@@ -455,7 +564,9 @@ addVibrationButton.addEventListener("click", () => {
         throw Error(`invalid vibrationType "${vibrationType}"`);
     }
 
-    waveformEffectContainer.style.display = showWaveformEffectContainer ? "" : "none";
+    waveformEffectContainer.style.display = showWaveformEffectContainer
+      ? ""
+      : "none";
     waveformContainer.style.display = showWaveformContainer ? "" : "none";
   });
   vibrationTypeSelect.dispatchEvent(new Event("input"));
@@ -470,40 +581,60 @@ triggerVibrationsButton.addEventListener("click", () => {
   /** @type {BS.VibrationConfiguration[]} */
   let vibrationConfigurations = [];
   Array.from(vibrationTemplate.parentElement.querySelectorAll(".vibration"))
-    .filter((vibrationContainer) => vibrationContainer.querySelector(".shouldTrigger").checked)
+    .filter(
+      (vibrationContainer) =>
+        vibrationContainer.querySelector(".shouldTrigger").checked
+    )
     .forEach((vibrationContainer) => {
       /** @type {BS.VibrationConfiguration} */
       const vibrationConfiguration = {
         locations: [],
       };
-      Array.from(vibrationContainer.querySelectorAll(`[data-vibration-location]`))
+      Array.from(
+        vibrationContainer.querySelectorAll(`[data-vibration-location]`)
+      )
         .filter((input) => input.checked)
         .forEach((input) => {
-          vibrationConfiguration.locations.push(input.dataset.vibrationLocation);
+          vibrationConfiguration.locations.push(
+            input.dataset.vibrationLocation
+          );
         });
       if (vibrationConfiguration.locations.length == 0) {
         return;
       }
 
-      vibrationConfiguration.type = vibrationContainer.querySelector("select.type").value;
+      vibrationConfiguration.type =
+        vibrationContainer.querySelector("select.type").value;
       switch (vibrationConfiguration.type) {
         case "waveformEffect":
           vibrationConfiguration.segments = Array.from(
-            vibrationContainer.querySelectorAll(".waveformEffect .waveformEffectSegment")
+            vibrationContainer.querySelectorAll(
+              ".waveformEffect .waveformEffectSegment"
+            )
           ).map((waveformEffectSegmentContainer) => {
             /** @type {BS.VibrationWaveformEffectSegment} */
             const waveformEffectSegment = {
-              loopCount: Number(waveformEffectSegmentContainer.querySelector(".loopCount").value),
+              loopCount: Number(
+                waveformEffectSegmentContainer.querySelector(".loopCount").value
+              ),
             };
-            if (waveformEffectSegmentContainer.querySelector(".type").value == "effect") {
-              waveformEffectSegment.effect = waveformEffectSegmentContainer.querySelector(".effect").value;
+            if (
+              waveformEffectSegmentContainer.querySelector(".type").value ==
+              "effect"
+            ) {
+              waveformEffectSegment.effect =
+                waveformEffectSegmentContainer.querySelector(".effect").value;
             } else {
-              waveformEffectSegment.delay = Number(waveformEffectSegmentContainer.querySelector(".delay").value);
+              waveformEffectSegment.delay = Number(
+                waveformEffectSegmentContainer.querySelector(".delay").value
+              );
             }
             return waveformEffectSegment;
           });
           vibrationConfiguration.loopCount = Number(
-            vibrationContainer.querySelector(".waveformEffect .sequenceLoopCount").value
+            vibrationContainer.querySelector(
+              ".waveformEffect .sequenceLoopCount"
+            ).value
           );
           break;
         case "waveform":
@@ -511,8 +642,12 @@ triggerVibrationsButton.addEventListener("click", () => {
             vibrationContainer.querySelectorAll(".waveform .waveformSegment")
           ).map((waveformSegmentContainer) => {
             return {
-              amplitude: Number(waveformSegmentContainer.querySelector(".amplitude").value),
-              duration: Number(waveformSegmentContainer.querySelector(".duration").value),
+              amplitude: Number(
+                waveformSegmentContainer.querySelector(".amplitude").value
+              ),
+              duration: Number(
+                waveformSegmentContainer.querySelector(".duration").value
+              ),
             };
           });
           break;
@@ -532,7 +667,8 @@ device.addEventListener("isConnected", () => {
 
 function updateTriggerVibrationsButtonDisabled() {
   triggerVibrationsButton.disabled =
-    !device.isConnected || vibrationTemplate.parentElement.querySelectorAll(".vibration").length == 0;
+    !device.isConnected ||
+    vibrationTemplate.parentElement.querySelectorAll(".vibration").length == 0;
 }
 
 // FILE TRANSFER
@@ -573,14 +709,28 @@ fileTransferTypesSelect.addEventListener("input", () => {
     case "tflite":
       fileInput.accept = ".tflite";
       break;
+    case "wifiServerCert":
+      fileInput.accept = ".crt";
+      break;
+    case "wifiServerKey":
+      fileInput.accept = ".key";
+      break;
   }
 });
 /** @type {HTMLOptGroupElement} */
-const fileTransferTypesOptgroup = fileTransferTypesSelect.querySelector("optgroup");
+const fileTransferTypesOptgroup =
+  fileTransferTypesSelect.querySelector("optgroup");
 BS.FileTypes.forEach((fileType) => {
   fileTransferTypesOptgroup.appendChild(new Option(fileType));
 });
 fileTransferTypesSelect.dispatchEvent(new Event("input"));
+device.addEventListener("connected", () => {
+  fileTransferTypesSelect.querySelectorAll("option").forEach((option) => {
+    option.hidden =
+      BS.FileTypes.includes(option.value) &&
+      !device.fileTypes.includes(option.value);
+  });
+});
 
 /** @type {HTMLProgressElement} */
 const fileTransferProgress = document.getElementById("fileTransferProgress");
@@ -613,7 +763,8 @@ toggleFileTransferButton.addEventListener("click", async () => {
   }
 });
 const updateToggleFileTransferButton = () => {
-  const enabled = device.isConnected && (file || fileTransferDirection == "receive");
+  const enabled =
+    device.isConnected && (file || fileTransferDirection == "receive");
   toggleFileTransferButton.disabled = !enabled;
 
   /** @type {String} */
@@ -641,7 +792,9 @@ device.addEventListener("fileTransferStatus", () => {
 /** @type {BS.FileTransferDirection} */
 let fileTransferDirection;
 /** @type {HTMLSelectElement} */
-const fileTransferDirectionSelect = document.getElementById("fileTransferDirection");
+const fileTransferDirectionSelect = document.getElementById(
+  "fileTransferDirection"
+);
 fileTransferDirectionSelect.addEventListener("input", () => {
   fileTransferDirection = fileTransferDirectionSelect.value;
   console.log({ fileTransferDirection });
@@ -745,9 +898,13 @@ device.addEventListener("getTfliteInferencingEnabled", () => {
 /** @type {HTMLSpanElement} */
 const tfliteSampleRateSpan = document.getElementById("tfliteSampleRate");
 /** @type {HTMLInputElement} */
-const setTfliteSampleRateInput = document.getElementById("setTfliteSampleRateInput");
+const setTfliteSampleRateInput = document.getElementById(
+  "setTfliteSampleRateInput"
+);
 /** @type {HTMLButtonElement} */
-const setTfliteSampleRateButton = document.getElementById("setTfliteSampleRateButton");
+const setTfliteSampleRateButton = document.getElementById(
+  "setTfliteSampleRateButton"
+);
 
 device.addEventListener("isConnected", () => {
   const disabled = !device.isConnected;
@@ -779,16 +936,22 @@ device.addEventListener("getTfliteInferencingEnabled", () => {
 
 const tfliteSensorTypesContainer = document.getElementById("tfliteSensorTypes");
 /** @type {HTMLTemplateElement} */
-const tfliteSensorTypeTemplate = document.getElementById("tfliteSensorTypeTemplate");
+const tfliteSensorTypeTemplate = document.getElementById(
+  "tfliteSensorTypeTemplate"
+);
 /** @type {Object.<string, HTMLElement>} */
 const tfliteSensorTypeContainers = {};
 /** @type {BS.SensorType[]} */
 let tfliteSensorTypes = [];
 /** @type {HTMLButtonElement} */
-const setTfliteSensorTypesButton = document.getElementById("setTfliteSensorTypes");
+const setTfliteSensorTypesButton = document.getElementById(
+  "setTfliteSensorTypes"
+);
 
 BS.TfliteSensorTypes.forEach((sensorType) => {
-  const sensorTypeContainer = tfliteSensorTypeTemplate.content.cloneNode(true).querySelector(".sensorType");
+  const sensorTypeContainer = tfliteSensorTypeTemplate.content
+    .cloneNode(true)
+    .querySelector(".sensorType");
   sensorTypeContainer.querySelector(".name").innerText = sensorType;
 
   /** @type {HTMLInputElement} */
@@ -803,7 +966,8 @@ BS.TfliteSensorTypes.forEach((sensorType) => {
   });
 
   device.addEventListener("getTfliteSensorTypes", () => {
-    isSensorEnabledInput.checked = device.tfliteSensorTypes.includes(sensorType);
+    isSensorEnabledInput.checked =
+      device.tfliteSensorTypes.includes(sensorType);
   });
   isSensorEnabledInput.checked = device.tfliteSensorTypes.includes(sensorType);
 
@@ -838,9 +1002,13 @@ device.addEventListener("tfliteIsReady", () => {
 /** @type {HTMLSpanElement} */
 const tfliteThresholdSpan = document.getElementById("tfliteThreshold");
 /** @type {HTMLInputElement} */
-const setTfliteThresholdInput = document.getElementById("setTfliteThresholdInput");
+const setTfliteThresholdInput = document.getElementById(
+  "setTfliteThresholdInput"
+);
 /** @type {HTMLButtonElement} */
-const setTfliteThresholdButton = document.getElementById("setTfliteThresholdButton");
+const setTfliteThresholdButton = document.getElementById(
+  "setTfliteThresholdButton"
+);
 
 device.addEventListener("isConnected", () => {
   const disabled = !device.isConnected;
@@ -870,9 +1038,13 @@ setTfliteThresholdButton.addEventListener("click", () => {
 /** @type {HTMLSpanElement} */
 const tfliteCaptureDelaySpan = document.getElementById("tfliteCaptureDelay");
 /** @type {HTMLInputElement} */
-const setTfliteCaptureDelayInput = document.getElementById("setTfliteCaptureDelayInput");
+const setTfliteCaptureDelayInput = document.getElementById(
+  "setTfliteCaptureDelayInput"
+);
 /** @type {HTMLButtonElement} */
-const setTfliteCaptureDelayButton = document.getElementById("setTfliteCaptureDelayButton");
+const setTfliteCaptureDelayButton = document.getElementById(
+  "setTfliteCaptureDelayButton"
+);
 
 device.addEventListener("isConnected", () => {
   const disabled = !device.isConnected;
@@ -900,18 +1072,23 @@ setTfliteCaptureDelayButton.addEventListener("click", () => {
 });
 
 /** @type {HTMLInputElement} */
-const tfliteInferencingEnabledInput = document.getElementById("tfliteInferencingEnabled");
+const tfliteInferencingEnabledInput = document.getElementById(
+  "tfliteInferencingEnabled"
+);
 /** @type {HTMLButtonElement} */
-const toggleTfliteInferencingEnabledButton = document.getElementById("toggleTfliteInferencingEnabled");
+const toggleTfliteInferencingEnabledButton = document.getElementById(
+  "toggleTfliteInferencingEnabled"
+);
 
 device.addEventListener("tfliteIsReady", () => {
   toggleTfliteInferencingEnabledButton.disabled = !device.tfliteIsReady;
 });
 device.addEventListener("getTfliteInferencingEnabled", () => {
   tfliteInferencingEnabledInput.checked = device.tfliteInferencingEnabled;
-  toggleTfliteInferencingEnabledButton.innerText = device.tfliteInferencingEnabled
-    ? "disable inferencing"
-    : "enable inferencing";
+  toggleTfliteInferencingEnabledButton.innerText =
+    device.tfliteInferencingEnabled
+      ? "disable inferencing"
+      : "enable inferencing";
 });
 
 toggleTfliteInferencingEnabledButton.addEventListener("click", () => {
@@ -944,7 +1121,8 @@ device.addEventListener("tfliteInference", (event) => {
   tfliteInferencePre.textContent = JSON.stringify(tfliteInference, null, 2);
 
   if (device.tfliteTask == "classification") {
-    topInferenceClassElement.innerText = inferenceClasses[tfliteInference.maxIndex - 1] ?? "";
+    topInferenceClassElement.innerText =
+      inferenceClasses[tfliteInference.maxIndex - 1] ?? "";
   }
 });
 
@@ -960,7 +1138,9 @@ firmwareInput.addEventListener("input", () => {
   updateToggleFirmwareUploadButton();
 });
 /** @type {HTMLButtonElement} */
-const toggleFirmwareUploadButton = document.getElementById("toggleFirmwareUpload");
+const toggleFirmwareUploadButton = document.getElementById(
+  "toggleFirmwareUpload"
+);
 toggleFirmwareUploadButton.addEventListener("click", () => {
   device.uploadFirmware(firmware);
 });
@@ -973,20 +1153,28 @@ device.addEventListener("isConnected", () => {
 });
 
 /** @type {HTMLProgressElement} */
-const firmwareUploadProgress = document.getElementById("firmwareUploadProgress");
+const firmwareUploadProgress = document.getElementById(
+  "firmwareUploadProgress"
+);
 /** @type {HTMLSpanElement} */
-const firmwareUploadProgressPercentageSpan = document.getElementById("firmwareUploadProgressPercentage");
+const firmwareUploadProgressPercentageSpan = document.getElementById(
+  "firmwareUploadProgressPercentage"
+);
 device.addEventListener("firmwareUploadProgress", (event) => {
   const progress = event.message.progress;
   firmwareUploadProgress.value = progress;
-  firmwareUploadProgressPercentageSpan.innerText = `${Math.floor(100 * progress)}%`;
+  firmwareUploadProgressPercentageSpan.innerText = `${Math.floor(
+    100 * progress
+  )}%`;
 });
 device.addEventListener("firmwareUploadComplete", () => {
   firmwareUploadProgress.value = 0;
 });
 device.addEventListener("firmwareStatus", () => {
   const isUploading = device.firmwareStatus == "uploading";
-  firmwareUploadProgressPercentageSpan.style.display = isUploading ? "" : "none";
+  firmwareUploadProgressPercentageSpan.style.display = isUploading
+    ? ""
+    : "none";
 });
 
 /** @type {HTMLPreElement} */
@@ -1000,7 +1188,7 @@ device.addEventListener("firmwareImages", () => {
 });
 
 device.addEventListener("isConnected", () => {
-  if (device.isConnected) {
+  if (device.isConnected && device.canUpdateFirmware) {
     device.getFirmwareImages();
   }
 });
@@ -1026,7 +1214,7 @@ resetButton.addEventListener("click", () => {
 const updateResetButton = () => {
   const status = device.firmwareStatus;
   const enabled = status == "pending" || status == "testing";
-  resetButton.disabled = !enabled;
+  resetButton.disabled = !enabled || !device.canReset;
 };
 
 /** @type {HTMLButtonElement} */
@@ -1040,12 +1228,15 @@ const updateTestFirmwareImageButton = () => {
 };
 
 /** @type {HTMLButtonElement} */
-const confirmFirmwareImageButton = document.getElementById("confirmFirmwareImage");
+const confirmFirmwareImageButton = document.getElementById(
+  "confirmFirmwareImage"
+);
 confirmFirmwareImageButton.addEventListener("click", () => {
   device.confirmFirmwareImage(selectedImageIndex);
 });
 const updateConfirmFirmwareImageButton = () => {
-  const enabled = device.firmwareStatus == "testing" || device.firmwareStatus == "uploaded";
+  const enabled =
+    device.firmwareStatus == "testing" || device.firmwareStatus == "uploaded";
   confirmFirmwareImageButton.disabled = !enabled;
 };
 
@@ -1066,7 +1257,10 @@ const imageSelectionOptGroup = imageSelectionSelect.querySelector("optgroup");
 device.addEventListener("firmwareImages", () => {
   imageSelectionOptGroup.innerHTML = "";
   device.firmwareImages.forEach((firmwareImage, index) => {
-    const option = new Option(`${firmwareImage.version} (slot ${index})`, index);
+    const option = new Option(
+      `${firmwareImage.version} (slot ${index})`,
+      index
+    );
     option.disabled = firmwareImage.empty;
     imageSelectionOptGroup.appendChild(option);
   });
@@ -1091,3 +1285,449 @@ function updateSelectImageSelect() {
   }
   imageSelectionSelect.disabled = !enabled;
 }
+
+// WIFI
+
+/** @type {HTMLSpanElement} */
+const isWifiAvailableSpan = document.getElementById("isWifiAvailable");
+device.addEventListener("isWifiAvailable", (event) => {
+  isWifiAvailableSpan.innerText = event.message.isWifiAvailable;
+});
+
+/** @type {HTMLSpanElement} */
+const wifiSSIDSpan = document.getElementById("wifiSSID");
+device.addEventListener("getWifiSSID", (event) => {
+  wifiSSIDSpan.innerText = event.message.wifiSSID;
+});
+/** @type {HTMLInputElement} */
+const setWifiSSIDInput = document.getElementById("setWifiSSIDInput");
+setWifiSSIDInput.min = BS.MinWifiSSIDLength;
+setWifiSSIDInput.max = BS.MaxWifiSSIDLength;
+setWifiSSIDInput.addEventListener("input", () => {
+  setWifiSSIDButton.disabled = !(
+    setWifiSSIDInput.value.length > BS.MinWifiSSIDLength &&
+    setWifiSSIDInput.value.length < BS.MaxWifiSSIDLength
+  );
+});
+/** @type {HTMLButtonElement} */
+const setWifiSSIDButton = document.getElementById("setWifiSSIDButton");
+setWifiSSIDButton.addEventListener("click", async () => {
+  setWifiSSIDButton.disabled = true;
+  setWifiSSIDButton.innerText = "setting wifi ssid";
+  await device.setWifiSSID(setWifiSSIDInput.value);
+  setWifiSSIDInput.value = "";
+  setWifiSSIDButton.disabled = false;
+  setWifiSSIDButton.innerText = "set wifi ssid";
+});
+
+/** @type {HTMLSpanElement} */
+const wifiPasswordSpan = document.getElementById("wifiPassword");
+device.addEventListener("getWifiPassword", (event) => {
+  wifiPasswordSpan.innerText = event.message.wifiPassword;
+});
+/** @type {HTMLInputElement} */
+const setWifiPasswordInput = document.getElementById("setWifiPasswordInput");
+setWifiPasswordInput.min = BS.MinWifiPasswordLength;
+setWifiPasswordInput.max = BS.MaxWifiPasswordLength;
+setWifiPasswordInput.addEventListener("input", () => {
+  const length = setWifiPasswordInput.value.length;
+  setWifiPasswordButton.disabled = !(
+    length == 0 ||
+    (length > BS.MinWifiPasswordLength && length < BS.MaxWifiPasswordLength)
+  );
+});
+/** @type {HTMLButtonElement} */
+const setWifiPasswordButton = document.getElementById("setWifiPasswordButton");
+setWifiPasswordButton.addEventListener("click", async () => {
+  setWifiPasswordButton.disabled = true;
+  setWifiPasswordButton.innerText = "setting wifi password";
+  await device.setWifiPassword(setWifiPasswordInput.value);
+  setWifiPasswordInput.value = "";
+  setWifiPasswordButton.disabled = false;
+  setWifiPasswordButton.innerText = "set wifi password";
+});
+
+const updateWifiInputs = () => {
+  const enabled =
+    device.isConnected &&
+    device.isWifiAvailable &&
+    !device.wifiConnectionEnabled;
+  const disabled = !enabled;
+
+  setWifiPasswordInput.disabled = disabled;
+  setWifiPasswordButton.disabled = disabled;
+
+  setWifiSSIDInput.disabled = disabled;
+  setWifiSSIDButton.disabled = disabled;
+
+  toggleWifiConnectionButton.disabled = !(
+    device.isConnected && device.isWifiAvailable
+  );
+};
+device.addEventListener("isConnected", () => {
+  updateWifiInputs();
+});
+device.addEventListener("getWifiConnectionEnabled", () => {
+  updateWifiInputs();
+});
+
+/** @type {HTMLSpanElement} */
+const wifiConnectionEnabledSpan = document.getElementById(
+  "wifiConnectionEnabled"
+);
+device.addEventListener("getWifiConnectionEnabled", (event) => {
+  wifiConnectionEnabledSpan.innerText = event.message.wifiConnectionEnabled;
+});
+
+/** @type {HTMLSpanElement} */
+const isWifiConnectedSpan = document.getElementById("isWifiConnected");
+device.addEventListener("isWifiConnected", (event) => {
+  isWifiConnectedSpan.innerText = event.message.isWifiConnected;
+});
+
+/** @type {HTMLSpanElement} */
+const ipAddressSpan = document.getElementById("ipAddress");
+device.addEventListener("ipAddress", (event) => {
+  ipAddressSpan.innerText = event.message.ipAddress || "none";
+});
+
+/** @type {HTMLButtonElement} */
+const toggleWifiConnectionButton = document.getElementById(
+  "toggleWifiConnection"
+);
+toggleWifiConnectionButton.addEventListener("click", async () => {
+  toggleWifiConnectionButton.disabled = true;
+  await device.toggleWifiConnection();
+  toggleWifiConnectionButton.disabled = false;
+});
+device.addEventListener("getWifiConnectionEnabled", (event) => {
+  toggleWifiConnectionButton.innerText = event.message.wifiConnectionEnabled
+    ? "disable wifi connection"
+    : "enable wifi connection";
+});
+
+/** @type {HTMLButtonElement} */
+const connectViaWebSocketsButton = document.getElementById(
+  "connectViaWebSockets"
+);
+connectViaWebSocketsButton.addEventListener("click", async () => {
+  toggleWifiConnectionButton.disabled = true;
+  device.reconnectViaWebSockets();
+});
+const updateConnectViaWebSocketsButton = () => {
+  const enabled =
+    device.isConnected &&
+    device.connectionType == "webBluetooth" &&
+    device.isWifiConnected;
+  console.log({ enabled });
+  connectViaWebSocketsButton.disabled = !enabled;
+};
+device.addEventListener("isWifiConnected", () =>
+  updateConnectViaWebSocketsButton()
+);
+device.addEventListener("isConnected", () =>
+  updateConnectViaWebSocketsButton()
+);
+
+// CAMERA
+/** @type {HTMLSpanElement} */
+const isCameraAvailableSpan = document.getElementById("isCameraAvailable");
+device.addEventListener("connected", () => {
+  isCameraAvailableSpan.innerText = device.hasCamera;
+});
+
+/** @type {HTMLSpanElement} */
+const cameraStatusSpan = document.getElementById("cameraStatus");
+device.addEventListener("cameraStatus", () => {
+  cameraStatusSpan.innerText = device.cameraStatus;
+});
+
+/** @type {HTMLButtonElement} */
+const takePictureButton = document.getElementById("takePicture");
+takePictureButton.addEventListener("click", () => {
+  if (device.cameraStatus == "idle") {
+    device.takePicture();
+  } else {
+    device.stopCamera();
+  }
+});
+device.addEventListener("connected", () => {
+  updateTakePictureButton();
+});
+device.addEventListener("getSensorConfiguration", () => {
+  updateTakePictureButton();
+});
+const updateTakePictureButton = () => {
+  takePictureButton.disabled =
+    !device.isConnected ||
+    device.sensorConfiguration.camera == 0 ||
+    device.cameraStatus != "idle";
+};
+device.addEventListener("cameraStatus", () => {
+  updateTakePictureButton();
+});
+
+/** @type {HTMLButtonElement} */
+const focusCameraButton = document.getElementById("focusCamera");
+focusCameraButton.addEventListener("click", () => {
+  if (device.cameraStatus == "idle") {
+    device.focusCamera();
+  } else {
+    device.stopCamera();
+  }
+});
+device.addEventListener("connected", () => {
+  updateFocusCameraButton();
+});
+device.addEventListener("getSensorConfiguration", () => {
+  updateFocusCameraButton();
+});
+const updateFocusCameraButton = () => {
+  focusCameraButton.disabled =
+    !device.isConnected ||
+    device.sensorConfiguration.camera == 0 ||
+    device.cameraStatus != "idle";
+};
+device.addEventListener("cameraStatus", (event) => {
+  updateFocusCameraButton();
+  if (
+    device.cameraStatus == "idle" &&
+    event.message.previousCameraStatus == "focusing"
+  ) {
+    device.takePicture();
+  }
+});
+
+/** @type {HTMLButtonElement} */
+const sleepCameraButton = document.getElementById("sleepCamera");
+sleepCameraButton.addEventListener("click", () => {
+  if (device.cameraStatus == "asleep") {
+    device.wakeCamera();
+  } else {
+    device.sleepCamera();
+  }
+});
+device.addEventListener("connected", () => {
+  updateSleepCameraButton();
+});
+device.addEventListener("getSensorConfiguration", () => {
+  updateSleepCameraButton();
+});
+const updateSleepCameraButton = () => {
+  let disabled = !device.isConnected || !device.hasCamera;
+  switch (device.cameraStatus) {
+    case "asleep":
+      sleepCameraButton.innerText = "wake camera";
+      break;
+    case "idle":
+      sleepCameraButton.innerText = "sleep camera";
+      break;
+    default:
+      disabled = true;
+      break;
+  }
+  sleepCameraButton.disabled = disabled;
+};
+device.addEventListener("cameraStatus", () => {
+  updateSleepCameraButton();
+});
+
+/** @type {HTMLImageElement} */
+const cameraImage = document.getElementById("cameraImage");
+device.addEventListener("cameraImage", (event) => {
+  cameraImage.src = event.message.url;
+});
+
+/** @type {HTMLProgressElement} */
+const cameraImageProgress = document.getElementById("cameraImageProgress");
+device.addEventListener("cameraImageProgress", (event) => {
+  if (event.message.type == "image") {
+    cameraImageProgress.value = event.message.progress;
+  }
+});
+
+/** @type {HTMLInputElement} */
+const autoPictureCheckbox = document.getElementById("autoPicture");
+let autoPicture = autoPictureCheckbox.checked;
+autoPictureCheckbox.addEventListener("input", () => {
+  autoPicture = autoPictureCheckbox.checked;
+});
+device.addEventListener("cameraImage", () => {
+  if (autoPicture) {
+    device.takePicture();
+  }
+});
+
+/** @type {HTMLPreElement} */
+const cameraConfigurationPre = document.getElementById(
+  "cameraConfigurationPre"
+);
+device.addEventListener("getCameraConfiguration", () => {
+  cameraConfigurationPre.textContent = JSON.stringify(
+    device.cameraConfiguration,
+    null,
+    2
+  );
+});
+
+const cameraConfigurationContainer = document.getElementById(
+  "cameraConfiguration"
+);
+/** @type {HTMLTemplateElement} */
+const cameraConfigurationTypeTemplate = document.getElementById(
+  "cameraConfigurationTypeTemplate"
+);
+BS.CameraConfigurationTypes.forEach((cameraConfigurationType) => {
+  const cameraConfigurationTypeContainer =
+    cameraConfigurationTypeTemplate.content
+      .cloneNode(true)
+      .querySelector(".cameraConfigurationType");
+
+  cameraConfigurationContainer.appendChild(cameraConfigurationTypeContainer);
+
+  cameraConfigurationTypeContainer.querySelector(".type").innerText =
+    cameraConfigurationType;
+
+  /** @type {HTMLInputElement} */
+  const input = cameraConfigurationTypeContainer.querySelector("input");
+
+  /** @type {HTMLSpanElement} */
+  const span = cameraConfigurationTypeContainer.querySelector("span");
+
+  device.addEventListener("isConnected", () => {
+    updateisInputDisabled();
+  });
+  device.addEventListener("cameraStatus", () => {
+    updateisInputDisabled();
+  });
+  const updateisInputDisabled = () => {
+    input.disabled =
+      !device.isConnected || !device.hasCamera || device.cameraStatus != "idle";
+  };
+
+  const updateInput = () => {
+    const value = device.cameraConfiguration[cameraConfigurationType];
+    span.innerText = value;
+    input.value = value;
+  };
+
+  device.addEventListener("connected", () => {
+    if (!device.hasCamera) {
+      return;
+    }
+    const range = device.cameraConfigurationRanges[cameraConfigurationType];
+    input.min = range.min;
+    input.max = range.max;
+
+    updateInput();
+  });
+
+  device.addEventListener("getCameraConfiguration", () => {
+    updateInput();
+  });
+
+  input.addEventListener("change", () => {
+    const value = Number(input.value);
+    // console.log(`updating ${cameraConfigurationType} to ${value}`);
+    device.setCameraConfiguration({
+      [cameraConfigurationType]: value,
+    });
+    if (takePictureAfterUpdate) {
+      device.addEventListener(
+        "getCameraConfiguration",
+        () => {
+          setTimeout(() => device.takePicture()), 100;
+        },
+        { once: true }
+      );
+    }
+  });
+});
+
+/** @type {HTMLInputElement} */
+const takePictureAfterUpdateCheckbox = document.getElementById(
+  "takePictureAfterUpdate"
+);
+let takePictureAfterUpdate = false;
+takePictureAfterUpdateCheckbox.addEventListener("input", () => {
+  takePictureAfterUpdate = takePictureAfterUpdateCheckbox.checked;
+  console.log({ takePictureAfterUpdate });
+});
+
+let barcodeDetector;
+BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
+  console.log({ supportedFormats });
+  // create new detector
+  barcodeDetector = new BarcodeDetector({
+    formats: supportedFormats,
+  });
+});
+cameraImage.addEventListener("load", () => {
+  if (barcodeDetector) {
+    barcodeDetector
+      .detect(cameraImage)
+      .then((barcodes) => {
+        barcodes.forEach((barcode) => console.log(barcode.rawValue));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }
+});
+
+/** @type {HTMLInputElement} */
+const cameraWhiteBalanceInput = document.getElementById("cameraWhiteBalance");
+const updateWhiteBalance = BS.ThrottleUtils.throttle(
+  (config) => {
+    if (device.cameraStatus != "idle") {
+      return;
+    }
+
+    device.setCameraConfiguration(config);
+
+    if (takePictureAfterUpdate) {
+      device.addEventListener(
+        "getCameraConfiguration",
+        () => {
+          setTimeout(() => device.takePicture()), 100;
+        },
+        { once: true }
+      );
+    }
+  },
+  200,
+  true
+);
+cameraWhiteBalanceInput.addEventListener("input", () => {
+  let [redGain, greenGain, blueGain] = cameraWhiteBalanceInput.value
+    .replace("#", "")
+    .match(/.{1,2}/g)
+    .map((value) => Number(`0x${value}`))
+    .map((value) => value / 255)
+    .map((value) => value * device.cameraConfigurationRanges.blueGain.max)
+    .map((value) => Math.round(value));
+
+  updateWhiteBalance({ redGain, greenGain, blueGain });
+});
+const updateCameraWhiteBalanceInput = () => {
+  if (!device.hasCamera) {
+    return;
+  }
+  cameraWhiteBalanceInput.disabled =
+    !device.isConnected || !device.hasCamera || device.cameraStatus != "idle";
+
+  const { redGain, blueGain, greenGain } = device.cameraConfiguration;
+
+  cameraWhiteBalanceInput.value = `#${[redGain, blueGain, greenGain]
+    .map((value) => value / device.cameraConfigurationRanges.redGain.max)
+    .map((value) => value * 255)
+    .map((value) => Math.round(value))
+    .map((value) => value.toString(16))
+    .join("")}`;
+};
+device.addEventListener("connected", () => {
+  updateCameraWhiteBalanceInput();
+});
+device.addEventListener("getCameraConfiguration", () => {
+  updateCameraWhiteBalanceInput();
+});