49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
let socket = new WebSocket("ws://192.168.1.130:8080");
|
|
|
|
socket.onopen = function(e) {
|
|
alert("[open] Connection established");
|
|
};
|
|
|
|
socket.onmessage = function(event) {
|
|
alert(`[message] Data received from server: ${event.data}`);
|
|
};
|
|
|
|
socket.onclose = function(event) {
|
|
if (event.wasClean) {
|
|
alert(`[close] 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
|
|
alert('[close] Connection died');
|
|
}
|
|
};
|
|
|
|
socket.onerror = function(error) {
|
|
alert(`[error] ${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: {}
|
|
}],
|
|
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 + "}");
|
|
}
|
|
|
|
// start listening to the color change event
|
|
// colorChangeCallback will be called whenever the color changes
|
|
colorPicker.on("color:change", colorChangeCallback); |