LedBars/RpiLedBars/web/index.js

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