Projets/LedBars
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updates from pi

Browse Source
This commit is contained in:
Tropicananass
2022-07-20 16:57:01 +02:00
parent 84612aded5
commit c1fb89271c
18 changed files with 468 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
RpiLedBars/frontend/web/index.html
View File

@@ -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>

3
RpiLedBars/frontend/web/index.js
View File

@@ -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);

18
RpiLedBars/frontend/web/index_network_handler.js
View File

@@ -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;
};
}

57
RpiLedBars/frontend/web/index_ui_handler.js
View File

@@ -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;