ESPUI/examples/gui/data/js/controls.js

const UI_TITEL = 0;
const UI_LABEL = 1;
const UI_BUTTON = 2;
const UI_SWITCHER = 3;
const UI_PAD = 4;
const UI_CPAD = 5;
const UPDATE_LABEL = 6;
const UPDATE_SWITCHER = 7;

const FOR = 0;
const BACK = 1;
const LEFT = 2;
const RIGHT = 3;
const CENTER = 4;

// Colors
const C_TURQUOISE = 0;
const C_EMERALD = 1;
const C_PETERRIVER = 2;
const C_WETASPHALT = 3;
const C_SUNFLOWER = 4;
const C_CARROT = 5;
const C_ALIZARIN = 6;
const C_NONE = 7;

function colorClass(colorId) {
    colorId = Number(colorId);
    switch (colorId) {
        case C_TURQUOISE:
            return "turquoise";
            break;

        case C_EMERALD:
            return "emerald";
            break;

        case C_PETERRIVER:
            return "peterriver";
            break;

        case C_WETASPHALT:
            return "wetasphalt";
            break;

        case C_SUNFLOWER:
            return "sunflower";
            break;

        case C_CARROT:
            return "carrot"
            break;

        case C_ALIZARIN:
            return "alizarin"
            break;

        case C_NONE:
            return ""
            break;

        default:
            return "";
    }
}

var websock;

function start() {
    websock = new WebSocket('ws://' + window.location.hostname + '/ws');
    websock.onopen = function(evt) {
        console.log('websock open');
        $("#conStatus").addClass("color-green");
        $("#conStatus").text("Connected");
    };
    websock.onclose = function(evt) {
        console.log('websock close');
        $("#conStatus").removeClass("color-green");
        $("#conStatus").addClass("color-red");
        $("#conStatus").text("Error / No Connection");
    };
    websock.onerror = function(evt) {
        console.log(evt);
        $("#conStatus").removeClass("color-green");
        $("#conStatus").addClass("color-red");
        $("#conStatus").text("Error / No Connection");
    };
    websock.onmessage = function(evt) {
        console.log(evt);
        var data = JSON.parse(evt.data);
        var e = document.body;
        var center = "";
        switch (data.type) {
            case UI_TITEL:
                document.title = data.label;
                $('#mainHeader').html(data.label);
                break;
            case UI_LABEL:
                $('#row').append("<div class='two columns card tcenter " + colorClass(data.color) + "'><h5 id='" + data.id + "'>" + data.label + "</h5><hr /><span id='l" + data.id + "' class='label'>" + data.value + "</span></div>");
                break;
            case UI_BUTTON:
                $('#row').append("<div class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/><button onmousedown='buttonclick(" + data.id + ", true)' onmouseup='buttonclick(" + data.id + ", false)' id='" + data.id + "'>" + data.value + "</button></div>");
                $('#' + data.id).on({
                    'touchstart': function(e) {
                        e.preventDefault();
                        buttonclick(data.id, true)
                    }
                });
                $('#' + data.id).on({
                    'touchend': function(e) {
                        e.preventDefault();
                        buttonclick(data.id, false)
                    }
                });
                break;
            case UI_SWITCHER:
                var label = "<label id='sl" + data.id + "' class='switch checked'>";
                var input = "<input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' checked>";
                if (data.value == "0") {
                    label = "<label id='sl" + data.id + "' class='switch'>";
                    input = "<input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' >";
                }
                $('#row').append(
                    "<div id='" + data.id + "' class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
                    label + "<i class='icon-ok'></i>" +
                    "<i class='icon-remove'></i>" + input +
                    "</label>" +
                    "</div>");
                break;
            case UI_CPAD:
                center = "<a class='confirm' onmousedown='padclick(CENTER, " + data.id + ", true)' onmouseup='padclick(CENTER, " + data.id + ", false)' href='#' id='pc" + data.id + "'>OK</a>";
                //NO BREAK
            case UI_PAD:
                $('#row').append(
                    "<div class='two columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
                    "<nav class='control'>" +
                    "<ul>" +
                    "<li><a onmousedown='padclick(FOR, " + data.id + ", true)' onmouseup='padclick(FOR, " + data.id + ", false)' href='#' id='pf" + data.id + "'>▲</a></li>" +
                    "<li><a onmousedown='padclick(RIGHT, " + data.id + ", true)' onmouseup='padclick(RIGHT, " + data.id + ", false)' href='#' id='pr" + data.id + "'>▲</a></li>" +
                    "<li><a onmousedown='padclick(LEFT, " + data.id + ", true)' onmouseup='padclick(LEFT, " + data.id + ", false)' href='#' id='pl" + data.id + "'>▲</a></li>" +
                    "<li><a onmousedown='padclick(BACK, " + data.id + ", true)' onmouseup='padclick(BACK, " + data.id + ", false)' href='#' id='pb" + data.id + "'>▲</a></li>" +
                    "</ul>" +
                    center +
                    "</nav>" +
                    "</div>");

                $('#pf' + data.id).on({
                    'touchstart': function(e) {
                        e.preventDefault();
                        padclick(FOR, data.id, true)
                    }
                });
                $('#pf' + data.id).on({
                    'touchend': function(e) {
                        e.preventDefault();
                        padclick(FOR, data.id, false)
                    }
                });
                $('#pl' + data.id).on({
                    'touchstart': function(e) {
                        e.preventDefault();
                        padclick(LEFT, data.id, true)
                    }
                });
                $('#pl' + data.id).on({
                    'touchend': function(e) {
                        e.preventDefault();
                        padclick(LEFT, data.id, false)
                    }
                });
                $('#pr' + data.id).on({
                    'touchstart': function(e) {
                        e.preventDefault();
                        padclick(RIGHT, data.id, true)
                    }
                });
                $('#pr' + data.id).on({
                    'touchend': function(e) {
                        e.preventDefault();
                        padclick(RIGHT, data.id, false)
                    }
                });
                $('#pb' + data.id).on({
                    'touchstart': function(e) {
                        e.preventDefault();
                        padclick(BACK, data.id, true)
                    }
                });
                $('#pb' + data.id).on({
                    'touchend': function(e) {
                        e.preventDefault();
                        padclick(BACK, data.id, false)
                    }
                });
                $('#pc' + data.id).on({
                    'touchstart': function(e) {
                        e.preventDefault();
                        padclick(CENTER, data.id, true)
                    }
                });
                $('#pc' + data.id).on({
                    'touchend': function(e) {
                        e.preventDefault();
                        padclick(CENTER, data.id, false)
                    }
                });

                break;
            case UPDATE_LABEL:
                $('#l' + data.id).html(data.value);
                break;
            case UPDATE_SWITCHER:
                if (data.value == "0")
                    switcher(data.id, 0);
                else
                    switcher(data.id, 1);
                break;
            default:
                console.error('Unknown type or event');
                break;
        }
    };
}


function buttonclick(number, isdown) {
    if (isdown) websock.send("bdown:" + number);
    else websock.send("bup:" + number);
}

function padclick(type, number, isdown) {
    switch (type) {
        case CENTER:
            if (isdown) websock.send("pcdown:" + number);
            else websock.send("pcup:" + number);
            break;
        case FOR:
            if (isdown) websock.send("pfdown:" + number);
            else websock.send("pfup:" + number);
            break;
        case BACK:
            if (isdown) websock.send("pbdown:" + number);
            else websock.send("pbup:" + number);
            break;
        case LEFT:
            if (isdown) websock.send("pldown:" + number);
            else websock.send("plup:" + number);
            break;
        case RIGHT:
            if (isdown) websock.send("prdown:" + number);
            else websock.send("prup:" + number);
            break;

    }
}

function switcher(number, state) {
    if (state == null) {
        if ($('#s' + number).is(':checked')) {
            websock.send("sactive:" + number);
            $('#sl' + number).addClass('checked');
        } else {
            websock.send("sinactive:" + number);
            $('#sl' + number).removeClass('checked');
        }
    } else if (state == 1) {
        $('#sl' + number).addClass('checked');
        $('#sl' + number).prop("checked", true);
    } else if (state == 0) {
        $('#sl' + number).removeClass('checked');
        $('#sl' + number).prop("checked", false);
    }
}