62 lines
1.9 KiB
JavaScript
62 lines
1.9 KiB
JavaScript
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}`);
|
|
};
|
|
}
|
|
|
|
var colorPicker = new iro.ColorPicker('#picker', {
|
|
colors: [
|
|
'hsl(0, 100, 50)', // pure red
|
|
'hsl(180, 50, 100)' // pure green
|
|
],
|
|
layout: [{
|
|
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'
|
|
}
|
|
}
|
|
],
|
|
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 + "}");
|
|
}
|
|
|
|
reconnect();
|
|
colorPicker.on("color:change", colorChangeCallback); |