Updates from pi

RpiLedBars/frontend/ledbars.nginx

@@ -38,6 +38,6 @@ server {
 		alias /home/pi/LedBars/RpiLedBars/frontend/web/;
 		# First attempt to serve request as file, then
 		# as directory, then fall back to displaying a 404.
-		try_files $uri $uri/ index.html =404;
+		try_files $uri $uri/ =404;
 	}
 }

RpiLedBars/frontend/web/index.html

@@ -30,6 +30,11 @@
                 <div class="modal-body">
                     Try reconnecting in <span id="time-left">60s</span>
                 </div>
+                <form id="ws-input" class="btn-group" role="group" aria-label="Select ws">
+                    <input type="radio" class="btn-check" name="ws-selection" id="hotspot-ws" autocomplete="off" value="0" checked>
+                    <input type="radio" class="btn-check" name="ws-selection" id="local-ws" autocomplete="off" value="1">
+                    <input type="radio" class="btn-check" name="ws-selection" id="distant-ws" autocomplete="off" value="2">
+                </form>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-primary" onclick="{timeout=1;}">Reconnect now</button>
                 </div>
@@ -72,32 +77,32 @@
             <div class="col d-flex justify-content-center">
                 <form id="channel-input" class="btn-group" role="group" aria-label="Select channel">
                     <!-- todo: Change to checkbox -->
-                    <input type="radio" class="btn-check" name="channel-selection" id="all-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="0-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="1-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="2-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="3-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="4-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="5-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="6-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="7-channel" autocomplete="off" checked>
+                    <input type="radio" class="btn-check" name="channel-selection" id="all-channel" autocomplete="off" value="8" checked>
+                    <input type="radio" class="btn-check" name="channel-selection" id="0-channel" autocomplete="off" value="0">
+                    <input type="radio" class="btn-check" name="channel-selection" id="1-channel" autocomplete="off" value="1">
+                    <input type="radio" class="btn-check" name="channel-selection" id="2-channel" autocomplete="off" value="2">
+                    <input type="radio" class="btn-check" name="channel-selection" id="3-channel" autocomplete="off" value="3">
+                    <input type="radio" class="btn-check" name="channel-selection" id="4-channel" autocomplete="off" value="4">
+                    <input type="radio" class="btn-check" name="channel-selection" id="5-channel" autocomplete="off" value="5">
+                    <input type="radio" class="btn-check" name="channel-selection" id="6-channel" autocomplete="off" value="6">
+                    <input type="radio" class="btn-check" name="channel-selection" id="7-channel" autocomplete="off" value="7">
                 </form>
             </div>
         </div>
 
         <div class="row pt-2 gy-2">
             <label class="form-label col-9 col-sm-2 text-sm-end" for="formControlRange">Sensitivity</label>
-            <span class="col-3 col-sm-1 text-end">50</span>
+            <span class="col-3 col-sm-1 text-end">64</span>
             <div class="col col-sm-9">
-                <input type="range" class="form-range" id="formControlRange" oninput="rangeCallback(this)">
+                <input type="range" class="form-range" id="formControlRange" max="127" oninput="sensitivityCallback(this)">
             </div>
         </div>
 
         <div class="row pt-2 gy-2">
             <label class="form-label col-9 col-sm-2 text-sm-end" for="formControlRange">Gravity</label>
-            <span class="col-3 col-sm-1 text-end">50</span>
+            <span class="col-3 col-sm-1 text-end">64</span>
             <div class="col col-sm-9">
-                <input type="range" class="form-range col-auto" id="formControlRange" oninput="rangeCallback(this)">
+                <input type="range" class="form-range col-auto" id="formControlRange" max="127" oninput="gravityCallback(this)">
             </div>
         </div>
 

RpiLedBars/frontend/web/index.js

@@ -22,6 +22,7 @@ function addLabelAndListener(name, callback) {
     }
 }
 
+addLabelAndListener("ws", wsSelectCallback);
 addLabelAndListener("mode", modeSelectCallback);
 addLabelAndListener("pattern", patternSelectCallback);
 addLabelAndListener("channel", channelSelectCallback);
@@ -74,4 +75,4 @@ var modulationPicker = new iro.ColorPicker('#modulationPicker', {
 
 reconnect();
 colorPicker.on("color:change", colorChangeCallback);
-modulationPicker.on("color:change", colorChangeCallback);
+modulationPicker.on("color:change", modulationColorChangeCallback);

RpiLedBars/frontend/web/index_network_handler.js

@@ -1,3 +1,6 @@
+var ws_index = 0
+const ws_address_list = ["ws://192.168.4.1:8080", "ws://192.168.1.130:8080", "ws://tropicananass.ovh:8080"]
+
 function wait_reconnection() {
     --timeout;
     document.getElementById("time-left").innerHTML = timeout + "s";
@@ -8,7 +11,15 @@ function wait_reconnection() {
 }
 
 function reconnect() {
-    socket = new WebSocket("ws://tropicananass.ovh:8080");
+    // for (i in ws_address_list) {
+    //     console.log("try to connect " + ws_address_list[i])
+    //     try {
+    socket = new WebSocket(ws_address_list[ws_index]);
+    //     } catch (error) {
+    //         console.error("failed to connect to " + ws_address_list[i] + "\n" + error);
+    //     }
+    // }
+    // socket = new WebSocket("ws://192.168.1.130");
     timeout = 60;
 
     socket.onopen = function(e) {
@@ -47,5 +58,10 @@ function reconnect() {
 
     socket.onerror = function(error) {
         console.log(`[error] ws: ${error.message}`);
+        ++ws_index;
+        if (ws_index >= ws_address_list.length) {
+            ws_index = 0;
+        }
+        document.getElementById("ws-input").elements["ws-selection"][ws_index].checked = true;
     };
 }

RpiLedBars/frontend/web/index_ui_handler.js

@@ -1,3 +1,11 @@
+function wsSelectCallback(event) {
+    // todo: disable form on this != auto
+    if (event.target.nodeName == 'INPUT') {
+        console.log("ws:" + event.target.value);
+        ws_index = event.target.value;
+    }
+}
+
 function modeSelectCallback(event) {
     // todo: disable form on this != auto
     if (event.target.nodeName == 'INPUT') {
@@ -20,30 +28,29 @@ function patternSelectCallback(event) {
 
 function channelSelectCallback(event) {
     if (event.target.nodeName == 'INPUT') {
-        channel = event.target.id.split("-")[0];
-        if (channel == "all") {
-            // inputArray = document.getElementById("channel-input").elements[name + "channel-selection"]
-            // for (let inputIndex = 0; inputIndex < inputArray.length; inputIndex++) {
-            //     inputArray[inputIndex].checked = false;
-            // }
-            selectedChannel = 8;
-        } else if (channel == "none") {
-            inputArray = document.getElementById("channel-input").elements[name + "channel-selection"]
-            for (let inputIndex = 0; inputIndex < inputArray.length; inputIndex++) {
-                inputArray[inputIndex].checked = false;
-            }
-            selectedChannel = -1;
-        } else {
-            inputArray = document.getElementById("channelGlobal-input").elements[name + "channelGlobal-selection"]
-            for (let inputIndex = 0; inputIndex < inputArray.length; inputIndex++) {
-                inputArray[inputIndex].checked = false;
-            }
-            selectedChannel = channel;
+        console.log("h:" + event.target.value);
+        if (socket.readyState == WebSocket.OPEN) {
+            socket.send("h:" + event.target.value);
         }
-        console.log("channel:" + selectedChannel);
     }
 }
 
+function sensitivityCallback(element) {
+    console.log("e:" + element.value);
+    if (socket.readyState == WebSocket.OPEN) {
+        socket.send("e:" + element.value);
+    }
+    rangeCallback(element);
+}
+
+function gravityCallback(element) {
+    console.log("g:" + element.value);
+    if (socket.readyState == WebSocket.OPEN) {
+        socket.send("g:" + element.value);
+    }
+    rangeCallback(element);
+}
+
 var eventd;
 
 function colorModulateCallback(element) {
@@ -54,6 +61,9 @@ function colorModulateCallback(element) {
         document.getElementById("modulationPicker").classList.add("d-none");
     }
     console.log("s: " + element.checked);
+    if (socket.readyState == WebSocket.OPEN) {
+        socket.send("s:" + element.checked);
+    }
 }
 
 function colorChangeCallback(color) {
@@ -63,6 +73,13 @@ function colorChangeCallback(color) {
     }
 }
 
+function modulationColorChangeCallback(color) {
+    console.log("c: " + (color.index + 2) + ", h: " + color.hsl.h + ", s: " + color.hsl.s + ", l: " + color.hsl.l + "}");
+    if (socket.readyState == WebSocket.OPEN) {
+        socket.send("c:" + (color.index + 2) + "," + color.hsl.h + "," + color.hsl.s + "," + color.hsl.l);
+    }
+}
+
 function rangeCallback(element) {
     eventd = this
     element.parentNode.parentElement.getElementsByTagName('span')[0].innerText = element.value;

RpiLedBars/frontend/webapp/src/App.vue

@@ -1,123 +1,295 @@
 <template>
-<div class="bg-dark text-white">
+  <div class="bg-dark text-white">
     <div class="container">
-        <div class="row py-4 text-center" id="header">
-            <h1> Tropicananass Leds </h1>
+      <div class="row py-4 text-center" id="header">
+        <h1>Tropicananass Leds</h1>
+      </div>
+
+      <Reconnect></Reconnect>
+
+      <ModeSelect mode_list="{Test, Artnet, Auto, Manual}"></ModeSelect>
+
+      <div class="row pt-2 gy-2">
+        <div class="col d-flex justify-content-center">
+          <form
+            id="mode-input"
+            class="btn-group"
+            role="group"
+            aria-label="Select mode"
+          >
+            <input
+              type="radio"
+              class="btn-check"
+              name="mode-selection"
+              id="test-mode"
+              autocomplete="off"
+              value="0"
+              checked
+            />
+            <input
+              type="radio"
+              class="btn-check"
+              name="mode-selection"
+              id="artnet-mode"
+              autocomplete="off"
+              value="1"
+            />
+            <input
+              type="radio"
+              class="btn-check"
+              name="mode-selection"
+              id="auto-mode"
+              autocomplete="off"
+              value="2"
+            />
+            <input
+              type="radio"
+              class="btn-check"
+              name="mode-selection"
+              id="manual-mode"
+              autocomplete="off"
+              value="3"
+            />
+          </form>
         </div>
-
-        <Reconnect></Reconnect>
-
-        <ModeSelect :mode_list="{Test, Artnet, Auto, Manual}"></ModeSelect>
-
-        <div class="row pt-2 gy-2">
-            <div class="col d-flex justify-content-center">
-                <form id="mode-input" class="btn-group" role="group" aria-label="Select mode">
-                    <input type="radio" class="btn-check" name="mode-selection" id="test-mode" autocomplete="off" value="0" checked>
-                    <input type="radio" class="btn-check" name="mode-selection" id="artnet-mode" autocomplete="off" value="1">
-                    <input type="radio" class="btn-check" name="mode-selection" id="auto-mode" autocomplete="off" value="2">
-                    <input type="radio" class="btn-check" name="mode-selection" id="manual-mode" autocomplete="off" value="3">
-                </form>
-            </div>
-            <div class="col d-flex justify-content-center">
-                <form id="pattern-input" class="btn-group" role="group" aria-label="Select pattern">
-                    <input type="radio" class="btn-check" name="pattern-selection" id="pulse-pattern" autocomplete="off" value="0" checked>
-                    <input type="radio" class="btn-check" name="pattern-selection" id="travel-pattern" autocomplete="off" value="1">
-                    <input type="radio" class="btn-check" name="pattern-selection" id="strobe-pattern" autocomplete="off" value="2">
-                </form>
-            </div>
+        <div class="col d-flex justify-content-center">
+          <form
+            id="pattern-input"
+            class="btn-group"
+            role="group"
+            aria-label="Select pattern"
+          >
+            <input
+              type="radio"
+              class="btn-check"
+              name="pattern-selection"
+              id="pulse-pattern"
+              autocomplete="off"
+              value="0"
+              checked
+            />
+            <input
+              type="radio"
+              class="btn-check"
+              name="pattern-selection"
+              id="travel-pattern"
+              autocomplete="off"
+              value="1"
+            />
+            <input
+              type="radio"
+              class="btn-check"
+              name="pattern-selection"
+              id="strobe-pattern"
+              autocomplete="off"
+              value="2"
+            />
+          </form>
         </div>
+      </div>
 
-
-        <div class="row pt-2 gy-2">
-            <legend class="col-12 col-sm-auto">Channel</legend>
-            <!-- <div class="col d-flex justify-content-center">
+      <div class="row pt-2 gy-2">
+        <legend class="col-12 col-sm-auto">Channel</legend>
+        <!-- <div class="col d-flex justify-content-center">
                 <form id="channelGlobal-input" class="btn-group" role="group" aria-label="Select channel">
                     <input type="radio" class="btn-check" name="channelGlobal-selection" id="all-channel" autocomplete="off" checked>
                     <input type="radio" class="btn-check" name="channelGlobal-selection" id="none-channel" autocomplete="off">
                 </form>
             </div> -->
-            <div class="col d-flex justify-content-center">
-                <form id="channel-input" class="btn-group" role="group" aria-label="Select channel">
-                    <!-- todo: Change to checkbox -->
-                    <input type="radio" class="btn-check" name="channel-selection" id="all-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="0-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="1-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="2-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="3-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="4-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="5-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="6-channel" autocomplete="off" checked>
-                    <input type="radio" class="btn-check" name="channel-selection" id="7-channel" autocomplete="off" checked>
-                </form>
-            </div>
+        <div class="col d-flex justify-content-center">
+          <form
+            id="channel-input"
+            class="btn-group"
+            role="group"
+            aria-label="Select channel"
+          >
+            <!-- todo: Change to checkbox -->
+            <input
+              type="radio"
+              class="btn-check"
+              name="channel-selection"
+              id="all-channel"
+              autocomplete="off"
+              checked
+            />
+            <input
+              type="radio"
+              class="btn-check"
+              name="channel-selection"
+              id="0-channel"
+              autocomplete="off"
+              checked
+            />
+            <input
+              type="radio"
+              class="btn-check"
+              name="channel-selection"
+              id="1-channel"
+              autocomplete="off"
+              checked
+            />
+            <input
+              type="radio"
+              class="btn-check"
+              name="channel-selection"
+              id="2-channel"
+              autocomplete="off"
+              checked
+            />
+            <input
+              type="radio"
+              class="btn-check"
+              name="channel-selection"
+              id="3-channel"
+              autocomplete="off"
+              checked
+            />
+            <input
+              type="radio"
+              class="btn-check"
+              name="channel-selection"
+              id="4-channel"
+              autocomplete="off"
+              checked
+            />
+            <input
+              type="radio"
+              class="btn-check"
+              name="channel-selection"
+              id="5-channel"
+              autocomplete="off"
+              checked
+            />
+            <input
+              type="radio"
+              class="btn-check"
+              name="channel-selection"
+              id="6-channel"
+              autocomplete="off"
+              checked
+            />
+            <input
+              type="radio"
+              class="btn-check"
+              name="channel-selection"
+              id="7-channel"
+              autocomplete="off"
+              checked
+            />
+          </form>
         </div>
+      </div>
 
-        <div class="row pt-2 gy-2">
-            <label class="form-label col-9 col-sm-2 text-sm-end" for="formControlRange">Sensitivity</label>
-            <span class="col-3 col-sm-1 text-end">50</span>
-            <div class="col col-sm-9">
-                <input type="range" class="form-range" id="formControlRange" oninput="rangeCallback(this)">
-            </div>
+      <div class="row pt-2 gy-2">
+        <label
+          class="form-label col-9 col-sm-2 text-sm-end"
+          for="formControlRange"
+          >Sensitivity</label
+        >
+        <span class="col-3 col-sm-1 text-end">50</span>
+        <div class="col col-sm-9">
+          <input
+            type="range"
+            class="form-range"
+            id="formControlRange"
+            oninput="rangeCallback(this)"
+          />
         </div>
+      </div>
 
-        <div class="row pt-2 gy-2">
-            <label class="form-label col-9 col-sm-2 text-sm-end" for="formControlRange">Gravity</label>
-            <span class="col-3 col-sm-1 text-end">50</span>
-            <div class="col col-sm-9">
-                <input type="range" class="form-range col-auto" id="formControlRange" oninput="rangeCallback(this)">
-            </div>
+      <div class="row pt-2 gy-2">
+        <label
+          class="form-label col-9 col-sm-2 text-sm-end"
+          for="formControlRange"
+          >Gravity</label
+        >
+        <span class="col-3 col-sm-1 text-end">50</span>
+        <div class="col col-sm-9">
+          <input
+            type="range"
+            class="form-range col-auto"
+            id="formControlRange"
+            oninput="rangeCallback(this)"
+          />
         </div>
+      </div>
 
-
-        <div class="row pt-2 gy-2">
-            <div class="col">
-                <div class="form-check form-switch">
-                    <input class="form-check-input" type="checkbox" id="modulateColor" onclick="colorModulateCallback(this)">
-                    <label class="form-check-label" for="modulateColor">Modulate color</label>
-                </div>
-            </div>
+      <div class="row pt-2 gy-2">
+        <div class="col">
+          <div class="form-check form-switch">
+            <input
+              class="form-check-input"
+              type="checkbox"
+              id="modulateColor"
+              onclick="colorModulateCallback(this)"
+            />
+            <label class="form-check-label" for="modulateColor"
+              >Modulate color</label
+            >
+          </div>
         </div>
+      </div>
 
-        <div class="row pt-2 gy-2">
-            <div id="mainPicker" class="col d-flex justify-content-center"></div>
-            <div id="modulationPicker" class="col d-none d-flex justify-content-center"></div>
-        </div>
+      <div class="row pt-2 gy-2">
+        <div id="mainPicker" class="col d-flex justify-content-center"></div>
+        <div
+          id="modulationPicker"
+          class="col d-none d-flex justify-content-center"
+        ></div>
+      </div>
 
-        <div class="row pt-2 gy-2">
-            <label class="form-label col-9 col-sm-2 text-sm-end" for="formControlRange">Modulation speed</label>
-            <span class="col-3 col-sm-auto text-end" id="rangeval">50</span>
-            <div class="col col-sm-9">
-                <input type="range" class="form-range col-auto" id="formControlRange" oninput="rangeCallback(this)">
-            </div>
+      <div class="row pt-2 gy-2">
+        <label
+          class="form-label col-9 col-sm-2 text-sm-end"
+          for="formControlRange"
+          >Modulation speed</label
+        >
+        <span class="col-3 col-sm-auto text-end" id="rangeval">50</span>
+        <div class="col col-sm-9">
+          <input
+            type="range"
+            class="form-range col-auto"
+            id="formControlRange"
+            oninput="rangeCallback(this)"
+          />
         </div>
+      </div>
 
-        <div class="row pt-2 gy-2">
-            <label class="form-label col-9 col-sm-2 text-sm-end" for="formControlRange">Freq</label>
-            <span class="col-3 col-sm-auto text-end" id="rangeval">50</span>
-            <div class="col col-sm-9">
-                <input type="range" class="form-range col-auto" id="formControlRange" oninput="rangeCallback(this)">
-            </div>
+      <div class="row pt-2 gy-2">
+        <label
+          class="form-label col-9 col-sm-2 text-sm-end"
+          for="formControlRange"
+          >Freq</label
+        >
+        <span class="col-3 col-sm-auto text-end" id="rangeval">50</span>
+        <div class="col col-sm-9">
+          <input
+            type="range"
+            class="form-range col-auto"
+            id="formControlRange"
+            oninput="rangeCallback(this)"
+          />
         </div>
+      </div>
     </div>
   </div>
 
   <h1>Hello !!</h1>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Welcome to Your Vue.js App" />
 </template>
 
 <script>
-import Reconnect from './components/Reconnect.vue'
-import ModeSelect from './components/ModeSelect.vue'
+import Reconnect from "./components/Reconnect.vue";
+import ModeSelect from "./components/ModeSelect.vue";
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
-      Reconnect,
-      ModeSelect
-  }
-}
+    Reconnect,
+    ModeSelect,
+  },
+};
 </script>
 
-<style>
-</style>
+<style></style>