// Roadmap:
// Build a serial Console?
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 FOR = 0;
const BACK = 1;
const LEFT = 2;
const RIGHT = 3;
const CENTER = 4;
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("
"+data.label+"
");
break;
case UI_BUTTON:
$('#row').append(""+data.label+"
");
$('#'+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_CPAD:
center = "OK";
//NO BREAK
case UI_PAD:
$('#row').append(
""+data.label+"
"+
"
"+
"
");
$('#f'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(FOR, data.id, true) } });
$('#f'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(FOR, data.id, false) } });
$('#l'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(LEFT, data.id, true) } });
$('#l'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(LEFT, data.id, false) } });
$('#r'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(RIGHT, data.id, true) } });
$('#r'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(RIGHT, data.id, false) } });
$('#b'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(BACK, data.id, true) } });
$('#b'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(BACK,data.id, false) } });
$('#c'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(CENTER, data.id, true) } });
$('#c'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(CENTER,data.id, false) } });
break;
case UPDATE_LABEL:
$('#'+data.id).html(data.label);
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;
}
}