main.js

var wsUrl = 'ws://' + document.location.host + '/ws';

var config = {
    brightness: 0,
    interval: 0,
};

$(document).ready(function () {
    uiEnabled(false);
    $("#wsMessages, #prompt").val("");
    startSocket();
});

$(document).on('input change', '.rangeConfig', function () {
    var setting = $(this).data('name');
    var value = $(this).val();
    switch (setting) {
        case 'brightness':
            value = mapRange(value, 1, 100, 8, 255);
            break;
        case 'interval':
            value = mapRange(value, 1, 100, 1000, 10);
            break;
    }
    config[setting] = value;
    var payload = {
        'config': config
    };
    wsSend(payload);
});

$('.btnAction').on('click', function () {
    var action = $(this).data('action');
    var payload = {
        'action': action
    };
    wsSend(payload);
});

$("#prompt").onkeydown = function (e) {
    if (e.keyCode == 13 && $("#prompt").value != "") {
        var val = $("#prompt").val();
        wsSend(val);
        $("#prompt").val("");
    }
}

function uiEnabled(enabled) {
    if (enabled) {
        $('#spinner').addClass('invisible');
        $('.btnAction').prop('disabled', false);
        $('.rangeConfig').prop('disabled', false);
    } else {
        $('#spinner').removeClass('invisible');
        $('.btnAction').prop('disabled', true);
        $('.rangeConfig').prop('disabled', true);
    }
}

function addMessage(msg) {
    var txt = $("#wsMessages");
    txt.val($.trim(txt.val() + "\n" + msg));
    txt.scrollTop(txt[0].scrollHeight - txt.height());
}

function wsSend(msg) {
    uiEnabled(false);
    var json = JSON.stringify(msg);
    ws.send(msg).done(function () {
        addMessage("➡️ " + json);
        uiEnabled(true);
    }).fail(function (e) {
        addMessage("❗️ " + json);
    });
}

var ws;
function startSocket() {
    ws = $.simpleWebSocket({
        url: wsUrl,
        onOpen: function (e) {
            console.log("WS: connected");
            addMessage("✅ connected");
            getConfig();
            uiEnabled(true);
        },
        onClose: function (e) {
            uiEnabled(false);
            console.log("WS: disconnected");
            addMessage("❌ disconnected");
        },
        onError: function (e) {
            uiEnabled(false);
            console.log("WS: error");
            addMessage("❗️ error");
        },
    });

    ws.listen(function (data) {
        console.log(data);
        var json = JSON.stringify(data);
        var msg = "⬅️ " + json;
        addMessage(msg);
        if (data.config) {
            loadConfig(data.config);
        }
    });
}

function getConfig() {
    var payload = {
        'action': 'load'
    };
    wsSend(payload);
}

function loadConfig(data) {
    config.brightness = data.brightness;
    config.interval = data.interval;
    $('#rangeBrightness').val(mapRange(data.brightness, 8, 255, 1, 100));
    $('#rangeSpeed').val(mapRange(data.interval, 1000, 10, 1, 100));
}

function mapRange(number, inMin, inMax, outMin, outMax) {
    return Math.round((number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin);
}