mirror of
https://github.com/s00500/ESPUI.git
synced 2024-11-14 05:30:54 +00:00
77 lines
3.7 KiB
JavaScript
77 lines
3.7 KiB
JavaScript
|
/*
|
||
|
|
var keys = {};
|
||
|
|
connection.onopen = function () {
|
||
|
|
wsString += " $(\"#connection_status\").toggleClass(\"color-green\");";
|
||
|
|
wsString += " $(\"#connection_status\").text(\"Connected\");";
|
||
|
|
wsString += String(" connection.send(")+"\"{'mode': 'check_tb_status'}\");";
|
||
|
|
for(int i=0; i<tb_index; i++){
|
||
|
|
wsString += String(" $(document).on('click',")+"'#tb"+i+"', function() {";
|
||
|
|
wsString += String(" if($('#tb")+i+"').hasClass(\"button\")){ console.log(\"Button Clicked!\"); connection.send("+"\"{'mode': 'tb_click', 'index': '"+i+"', 'status': 'on'}\""+"); }";
|
||
|
|
wsString += String(" else if($('#tb")+i+"').hasClass(\"button-primary\")){ connection.send("+"\"{'mode': 'tb_click', 'index': '"+i+"', 'status': 'off'}\""+"); } });";
|
||
|
|
}
|
||
|
|
wsString += " };";
|
||
|
|
wsString += " connection.onerror = function (error) { $('#connection_status').toggleClass(\"color-red\"); $(\"#connection_status\").text(\"Error / No Connection\"); };";
|
||
|
|
wsString += " connection.onmessage = function (e) {";
|
||
|
|
wsString += " console.log(e.data); ";
|
||
|
|
wsString += " var obj = jQuery.parseJSON(e.data);";
|
||
|
|
wsString += " if(obj.mode === 'create_label'){ $('#row').append(\"<div class='two columns card'><h5>\"+obj.l_title+\"</h5><hr /><h3><span class='label'>\"+obj.l_value+\"</span></h3></div>\");}";
|
||
|
|
wsString += " else if(obj.mode === 't_button_startup'){ var tb_index = obj.index; for(i=0; i<tb_index; i++){ var tb_index2 = \"tb\"+i; var tb_status = obj[tb_index2]; var tb_index3 = \"#\"+tb_index2; console.log(tb_status); if(tb_status === \"1\"){$(tb_index3).toggleClass('button-primary'); $(tb_index3).text('Turn Off');} else if(tb_status === \"0\"){$(tb_index3).toggleClass('button'); $(tb_index3).text('Turn On');} } }";
|
||
|
|
wsString += " else if(obj.mode === 't_button_click'){ var tb_index = \"tb\"+obj.index; var tb_status = obj[tb_index]; var tb_index3 = \"#\"+tb_index; console.log(tb_status); if(tb_status == \"1\"){ console.log(\"Status Tuned ON\"); $(tb_index3).text('Turn Off'); $(tb_index3).removeClass( \"button\" ).addClass( \"button-primary\" );} else if(tb_status == \"0\"){console.log(\"Status Tuned OFF\"); $(tb_index3).text('Turn On'); $(tb_index3).removeClass( \"button-primary\" ).addClass( \"button\" ); } } };";
|
||
|
|
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// TASKS:
|
||
|
|
// Control statuses and color TAG
|
||
|
|
// Request and add JSONFile for dom assembly
|
||
|
|
// Send WS Commands
|
||
|
|
|
||
|
|
// Roadmap
|
||
|
|
// Build changeable Labels
|
||
|
|
// Build a serial Console?
|
||
|
|
var websock;
|
||
|
|
function start() {
|
||
|
|
websock = new WebSocket('ws://' + window.location.hostname + '/ws');
|
||
|
|
websock.onopen = function(evt) {
|
||
|
|
console.log('websock open');
|
||
|
|
$("#conStatus").toggleClass("color-green");
|
||
|
|
$("#conStatus").text("Connected");
|
||
|
|
};
|
||
|
|
websock.onclose = function(evt) {
|
||
|
|
console.log('websock close');
|
||
|
|
$("#conStatus").toggleClass("color-red");
|
||
|
|
$("#conStatus").text("Error / No Connection");
|
||
|
|
};
|
||
|
|
websock.onerror = function(evt) {
|
||
|
|
console.log(evt);
|
||
|
|
$("#conStatus").toggleClass("color-red");
|
||
|
|
$("#conStatus").text("Error / No Connection");
|
||
|
|
};
|
||
|
|
websock.onmessage = function(evt) {
|
||
|
|
console.log(evt);
|
||
|
|
var data = JSON.parse(evt.data);
|
||
|
|
console.log(data);
|
||
|
|
var e = document.body;
|
||
|
|
if (data.type === 'domButton') {
|
||
|
|
//initial rendering of the Buttons
|
||
|
|
$('#row').append("<div class='two columns card'><h5>"+data.label+"</h5><hr/><button id="+"tb"+data.index+"></button></div>");
|
||
|
|
}
|
||
|
|
if (data.type === 'domLabel') {
|
||
|
|
//initial rendering of the Labels
|
||
|
|
$('#row').append("<div class='two columns card'><h5>"+data.l_title+"</h5><hr /><h3><span class='label'>"+data.label+"</span></h3></div>");
|
||
|
|
}
|
||
|
|
else if (data.type === 'value') {
|
||
|
|
// Display some kind of value
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
console.log('unknown event');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function buttonclick(e) {
|
||
|
|
// TODO: Make this more generic
|
||
|
|
websock.send(e.id);
|
||
|
|
}
|