LedBars/RpiLedBars/web/index.js

62 lines
1.9 KiB
JavaScript
Raw Normal View History

2021-09-30 16:58:56 +02:00
let socket;
function reconnect() {
socket = new WebSocket("ws://192.168.1.130:8080");
socket.onopen = function(e) {
console.log("[open] ws: Connection established");
document.getElementById("reconnect").style.visibility = 'hidden';
};
socket.onmessage = function(event) {
console.log(`[message] ws: Data received from server: ${event.data}`);
};
socket.onclose = function(event) {
if (event.wasClean) {
console.log(`[close] ws: Connection closed cleanly, code=${event.code} reason=${event.reason}`);
} else {
// e.g. server process killed or network down
// event.code is usually 1006 in this case
console.log('[close] ws: Connection died');
document.getElementById("reconnect").style.visibility = 'visible';
}
};
socket.onerror = function(error) {
console.log(`[error] ws: ${error.message}`);
};
}
2021-09-29 23:56:10 +02:00
var colorPicker = new iro.ColorPicker('#picker', {
colors: [
'hsl(0, 100, 50)', // pure red
'hsl(180, 50, 100)' // pure green
],
layout: [{
2021-09-30 16:58:56 +02:00
component: iro.ui.Wheel,
options: {}
}, {
component: iro.ui.Box,
options: {}
},
{
component: iro.ui.Slider,
options: {
// can also be 'saturation', 'value', 'red', 'green', 'blue', 'alpha' or 'kelvin'
sliderType: 'value'
}
}
],
2021-09-29 23:56:10 +02:00
display: "flex",
handleRadius: 14,
});
// make a handler function
function colorChangeCallback(color) {
console.log("{index: " + color.index + ", h: " + color.hsl.h + ", s: " + color.hsl.s + ", l: " + color.hsl.l + "}");
socket.send("{" + color.index + "," + color.hsl.h + "," + color.hsl.s + "," + color.hsl.l + "}");
}
2021-09-30 16:58:56 +02:00
reconnect();
2021-09-29 23:56:10 +02:00
colorPicker.on("color:change", colorChangeCallback);