From 01c896d48c601523f8a5b630e7171f8f0f3cbfd7 Mon Sep 17 00:00:00 2001 From: Peter Johanson Date: Fri, 2 Feb 2024 14:25:33 -0800 Subject: [PATCH] Small webhid example. --- app/webhid-app/index.html | 16 +++++++++ app/webhid-app/index.js | 74 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 90 insertions(+) create mode 100644 app/webhid-app/index.html create mode 100644 app/webhid-app/index.js diff --git a/app/webhid-app/index.html b/app/webhid-app/index.html new file mode 100644 index 00000000000..ae4abe5fe2c --- /dev/null +++ b/app/webhid-app/index.html @@ -0,0 +1,16 @@ + + WebHID Example + + + + + + + diff --git a/app/webhid-app/index.js b/app/webhid-app/index.js new file mode 100644 index 00000000000..1dc77a8fc5d --- /dev/null +++ b/app/webhid-app/index.js @@ -0,0 +1,74 @@ +let deviceFilter = { usagePage: 0xff0b }; // Default Zephyr VID/PID +let requestParams = { filters: [deviceFilter] }; + +let device; + +function handleConnectedDevice(e) { + console.log("Device connected: " + e.device.productName); + e.device.open().then(() => { + e.device.addEventListener("inputreport", handleInputReport); + console.debug(e.device); + console.log("Re-opened device and re-attached featurereport listener"); + device = e.device; + readValue(); + }); +} + +function handleDisconnectedDevice(e) { + console.log("Device disconnected: " + e.device.productName); +} + +function handleInputReport(e) { + console.log(e.device.productName + ": got input report " + e.reportId); + const input = new Uint8Array(e.data.buffer); + console.log(new Uint8Array(e.data.buffer)); + + const range = document.querySelector("#range"); + + range.value = input[0]; +} + +function handleRangeUpdate(value) { + let report = new Uint8Array([value]); + device.sendReport(0x42, report).then(() => { + console.log("Sent output report " + report); + }); +} + +function saveValue() { + const range = document.querySelector("#range"); + + let report = new Uint8Array([range.value]); + device.sendReport(0x42, report).then(() => { + console.log("Sent output report " + report); + }); +} + +function readValue() { + let report = new Uint8Array([64]); + device.sendReport(0x42, report).then(() => { + console.log("Sent output report " + report); + }); +} + +function hidTest() { + navigator.hid.addEventListener("connect", handleConnectedDevice); + navigator.hid.addEventListener("disconnect", handleDisconnectedDevice); + + navigator.hid.requestDevice(requestParams).then((devices) => { + if (devices.length == 0) return; + devices[0] + .open() + .then(() => { + console.log("Opened device: " + devices[0].productName); + console.debug(devices[0]); + devices[0].addEventListener("inputreport", handleInputReport); + device = devices[0]; + readValue(); + }) + .catch((err) => { + console.debug(err); + debugger; + }); + }); +}