Create an axes structure to reduce duplication

diff --git a/test.html.jst b/test.html.jst
index 4a00709..489b73e 100644 (file)
--- a/test.html.jst
+++ b/test.html.jst
@@ -27,7 +27,7 @@ return async env => {
               input.slider#slider-a(type="range" min="-90" max="90" value="0") {}
             }
             div.col-sm-4 {
-              'Value: '
+              'Axis A: '
               span#value-a {'0'}
             }
           }
@@ -40,7 +40,7 @@ return async env => {
               input.slider#slider-b(type="range" min="-90" max="90" value="0") {}
             }
             div.col-sm-4 {
-              'Value: '
+              'Axis B: '
               span#value-b {'0'}
             }
           }
@@ -53,7 +53,7 @@ return async env => {
               input.slider#slider-c(type="range" min="-90" max="90" value="0") {}
             }
             div.col-sm-4 {
-              'Value: '
+              'Axis C: '
               span#value-c {'0'}
             }
           }
@@ -66,7 +66,7 @@ return async env => {
               input.slider#slider-d(type="range" min="-90" max="90" value="0") {}
             }
             div.col-sm-4 {
-              'Value: '
+              'Axis D: '
               span#value-d {'0'}
             }
           }
@@ -124,122 +124,132 @@ return async env => {
           await device.transferOut(2, data.buffer)
         }
 
-        let device, device_busy = false
-        document.getElementById('connect-disconnect').addEventListener(
-          'click',
+        document.addEventListener(
+          'DOMContentLoaded',
           () => {
-            ;(
-              async () => {
-                if (!device_busy) {
-                  device_busy = true
-                  if (device === undefined) {
-                    // connect request
-                    try {
-                      device = await navigator.usb.requestDevice(
-                        {filters: [{vendorId: 0x1a86, productId: 0x7523}]}
-                      )
-                      await device.open()
-                      try {
-                        await device.selectConfiguration(1)
-                        await device.claimInterface(0)
-  
-                        console.assert(!rx_active, '!rx_active')
-                        rx_cont = true
-                        rx_task(device)
-  
-                        await sleep(100)
-                        rx_buf = ''
-  
-                        tx_immediate(device, '\n')
-                        await sleep(100)
-                        if (rx_buf.slice(0, 1) === '>') {
-                          console.log('prompt detected')
-                          rx_buf = rx_buf.slice(1)
-                          document.getElementById('connection-status').innerHTML = 'Connected'
-                          document.getElementById('connect-disconnect').innerHTML = 'Disconnect'
+            let device, device_busy = false
+            let axes = [
+              {
+                slider: document.getElementById("slider-a"),
+                value: document.getElementById("value-a"),
+                min_degrees: -90,
+                min_position: 8000,
+                max_degrees: 90,
+                max_position: 40000
+              },
+              {
+                slider: document.getElementById("slider-b"),
+                value: document.getElementById("value-b"),
+                min_degrees: -90,
+                min_position: 8000,
+                max_degrees: 90,
+                max_position: 40000
+              },
+              {
+                slider: document.getElementById("slider-c"),
+                value: document.getElementById("value-c"),
+                min_degrees: -90,
+                min_position: 8000,
+                max_degrees: 90,
+                max_position: 40000
+              },
+              {
+                slider: document.getElementById("slider-d"),
+                value: document.getElementById("value-d"),
+                min_degrees: -90,
+                min_position: 8000,
+                max_degrees: 90,
+                max_position: 40000
+              }
+            ]
+            for (let i = 0; i < axes.length; ++i) {
+              axes[i].value.innerHTML = axes[i].slider.value
+
+              let axis = i
+              axes[i].slider.oninput = function() {
+                axes[axis].value.innerHTML = this.value
+                if (device && !device_busy) {
+                  axes[axis].position =
+                    Math.round(axes[axis].min_position +
+                      (this.value - axes[axis].min_degrees) *
+                      (axes[axis].max_position - axes[axis].min_position) /
+                      (axes[axis].max_degrees - axes[axis].min_degrees))
+                  tx_immediate(
+                    device,
+                    `${String.fromCharCode(97 + axis)}32000 ${String.fromCharCode(65 + axis)}${axes[axis].position}\n`
+                  )
+                }
+              }
+            }
+
+            document.getElementById('connect-disconnect').addEventListener(
+              'click',
+              () => {
+                ;(
+                  async () => {
+                    if (!device_busy) {
+                      device_busy = true
+                      if (device === undefined) {
+                        // connect request
+                        try {
+                          device = await navigator.usb.requestDevice(
+                            {filters: [{vendorId: 0x1a86, productId: 0x7523}]}
+                          )
+                          await device.open()
+                          try {
+                            await device.selectConfiguration(1)
+                            await device.claimInterface(0)
+      
+                            console.assert(!rx_active, '!rx_active')
+                            rx_cont = true
+                            rx_task(device)
+      
+                            await sleep(100)
+                            rx_buf = ''
+      
+                            tx_immediate(device, '\n')
+                            await sleep(100)
+                            if (rx_buf.slice(0, 1) === '>') {
+                              console.log('prompt detected')
+                              rx_buf = rx_buf.slice(1)
+                              document.getElementById('connection-status').innerHTML = 'Connected'
+                              document.getElementById('connect-disconnect').innerHTML = 'Disconnect'
+                            }
+                            else {
+                              console.log('no prompt detected')
+                              device.close()
+                              await rx_stop()
+                              device = undefined
+                            }
+                          }
+                          catch (err) {
+                            console.log('exception', err.message)
+                            device.close()
+                            await rx_stop()
+                            device = undefined
+                          }
                         }
-                        else {
-                          console.log('no prompt detected')
-                          device.close()
-                          await rx_stop()
+                        catch (err) {
+                          console.log('exception', err.message)
                           device = undefined
                         }
                       }
-                      catch (err) {
-                        console.log('exception', err.message)
+                      else {
+                        // disconnect request
                         device.close()
                         await rx_stop()
                         device = undefined
+                        document.getElementById('connection-status').innerHTML = 'Disconnected'
+                        document.getElementById('connect-disconnect').innerHTML = 'Connect'
                       }
+                      device_busy = false
                     }
-                    catch (err) {
-                      console.log('exception', err.message)
-                      device = undefined
-                    }
-                  }
-                  else {
-                    // disconnect request
-                    device.close()
-                    await rx_stop()
-                    device = undefined
-                    document.getElementById('connection-status').innerHTML = 'Disconnected'
-                    document.getElementById('connect-disconnect').innerHTML = 'Connect'
                   }
-                  device_busy = false
-                }
+                )()
               }
-            )()
+            )
           }
         )
- 
-        // see https://www.w3schools.com/howto/howto_js_rangeslider.asp
-        var slider_a = document.getElementById("slider-a");
-        var value_a = document.getElementById("value-a");
-        value_a.innerHTML = slider_a.value;
-        slider_a.oninput = function() {
-          value_a.innerHTML = this.value
-          if (device && !device_busy)
-            tx_immediate(
-              device,
-              `a32000 A${Math.round(this.value * (16000 / 90) + 24000)}\n`
-            )
-        }
-
-        var slider_b = document.getElementById("slider-b");
-        var value_b = document.getElementById("value-b");
-        value_b.innerHTML = slider_b.value;
-        slider_b.oninput = function() {
-          value_b.innerHTML = this.value
-          if (device && !device_busy)
-            tx_immediate(
-              device,
-              `b32000 B${Math.round(this.value * (16000 / 90) + 24000)}\n`
-            )
-        }
-
-        var slider_c = document.getElementById("slider-c");
-        var value_c = document.getElementById("value-c");
-        value_c.innerHTML = slider_c.value;
-        slider_c.oninput = function() {
-          value_c.innerHTML = this.value
-          if (device && !device_busy)
-            tx_immediate(
-              device,
-              `c32000 C${Math.round(this.value * (16000 / 90) + 24000)}\n`
-            )
-        }
-
-        var slider_d = document.getElementById("slider-d");
-        var value_d = document.getElementById("value-d");
-        value_d.innerHTML = slider_d.value;
-        slider_d.oninput = function() {
-          value_d.innerHTML = this.value
-          if (device && !device_busy)
-            tx_immediate(
-              device,
-              `d32000 D${Math.round(this.value * (16000 / 90) + 24000)}\n`
-            )
-        }
       }
     }
   )