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