display ranges

docs/tools/streaming.html

@@ -6,9 +6,11 @@
             font-family: monospace;
         }
 
-        .segment {
-            padding: 0.5rem;
-            margin: 0.5rem;
+        #streams {
+            margin-top: 1rem;
+        }
+        .stream input {
+            margin-left: 1rem;            
         }
 
         #log {
@@ -27,15 +29,13 @@
         <button id="connect">connect to jacdac device</button>
     </div>
     <div id="devices" class="segment"></div>
-    <div id="log" class="segment">
-        <div>waiting for message...</div>
-    </div>
+    <div id="streams" class="segment"></div>
 
     <script src="/dist/jacdac.umd.js"></script>
     <script>
         const devicesDiv = document.getElementById("devices");
         async function sniff() {
-            log('starting')
+            console.log('starting')
             let bus;
             try {
                 bus = await jacdac.requestUSBBus();
@@ -43,7 +43,7 @@
                     // if the device is a sensor, start streaming
                     const sensor = jacdac.SensorClient.fromFirstServiceClass(d, jacdac.JD_SERVICE_SLIDER);
                     if (sensor) {
-                        log(`start streaming ${d}: ${jacdac.printServices(d)}`)
+                        console.log(`start streaming ${d}: ${jacdac.printServices(d)}`)
                         sensor.setStreamingAsync(true);
                     }
                 })
@@ -52,25 +52,47 @@
                 })
                 bus.on('packetreceive', pkt => {
                     const decoded = jacdac.decodePacketData(pkt);
-                    if (decoded)
-                        log(`${pkt.dev} (${jacdac.serviceName(pkt.service_class)}): ${decoded}`)
+                    if (decoded) {
+                        console.log(`${pkt.dev} (${jacdac.serviceName(pkt.service_class)}): ${decoded}`)
+                        slider(pkt)
+                    }
                 })
-                log('started')
+                console.log('started')
             } catch (err) {
-                log(err)
+                console.log(err)
                 await bus.disconnect()
             }
         }
 
         const connect = document.getElementById("connect");
         connect.onclick = sniff;
-        function log(msg) {
-            const logDiv = document.getElementById("log");
-            const line = document.createElement("div");
-            line.innerText = "" + msg;
-            logDiv.insertBefore(line, logDiv.firstElementChild);
-            if (logDiv.childElementCount > 100)
-                logDiv.lastElementChild.remove();
+
+        function slider(pkt) {
+            let el = document.getElementById(pkt.device_identifier);
+            if (!el) {
+                const div = document.createElement("div")
+                div.className = "stream"
+                el = document.createElement("input");
+                el.id = pkt.device_identifier
+                el.type = "range"
+                el.min = 0
+                el.max = 1
+                el.readonly = true
+                const label = document.createElement("label")
+                label.id = el.id + ":label"
+                label.for = el.id
+                div.append(label)
+                div.append(el)
+                const streams = document.getElementById("streams")
+                streams.append(div)
+            }
+
+            const v = jacdac.intOfBuffer(pkt.data);
+            el.max = Math.max(parseInt(el.max), v)
+            el.value = v;
+
+            const lbl = document.getElementById(el.id + ":label");
+            lbl.innerText = `${pkt.dev.shortId}: ${v}`;
         }
     </script>
 </body>