lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2026-01-16 18:46:21 +00:00
Code Issues Releases Activity

Merge remote-tracking branch 'origin/master' into feature-setCustomCSS

Browse Source
This commit is contained in:
Mike Burton
2025-11-27 02:05:49 +00:00
parent 368eeff3f8 ed9d7d58a4
commit 9a088c090f
15 changed files with 71 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
data/css/style.css
View File

@@ -427,6 +427,12 @@ button:enabled:active {
transform: translateX(4px) translateY(4px);
}
/* Pressed state for touch events */
button.pressed {
background-color: #666666 !important;
transform: translateX(4px) translateY(4px);
}
/* Main Head Part
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -594,6 +600,14 @@ hr {
background-color:#777
}
/* Pressed state for touch events on pads */
.control:not(.disabled) a.pressed {
background-color: #777 !important;
}
.control:not(.disabled) li.pressed a {
background-color: #777 !important;
}
/* Switch
–––––––––––––––––––––––––––––––––––––––––––––––––– */

2
data/css/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
data/index.min.htm
View File

@@ -1 +1 @@
<!DOCTYPE html><html> <head><meta charset=utf-8><title>Control</title><meta name=viewport content="width=device-width, initial-scale=1"><link rel="shortcut icon" href=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC><link rel=stylesheet href=/css/normalize.css><link rel=stylesheet href=/css/style.css><link rel=stylesheet href=/css/custom.css><script src=/js/zepto.min.js></script><script src=/js/slider.js></script><script src=/js/graph.js></script><script src=/js/controls.js></script><script src=/js/tabbedcontent.js></script><script src=/js/custom.js></script></head> <body onload=javascript:start();> <div> <h4> <div id=mainHeader>Control</div> <span id=conStatus class=label>Offline</span> </h4> </div> <hr> <div class=container> <div id=row class="row u-full-width"></div> <ul id=tabsnav class="navigation navigation-tabs u-full-width"></ul> <div id=tabscontent class="tabscontent u-full-width"></div> </div> </body> </html>
<!doctype html><meta charset=utf-8><title>Control</title><meta content="width=device-width,initial-scale=1" name=viewport><link rel="shortcut icon" href=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC><link href=/css/normalize.css rel=stylesheet><link href=/css/style.css rel=stylesheet><script src=/js/zepto.min.js></script><script src=/js/slider.js></script><script src=/js/graph.js></script><script src=/js/controls.js></script><script src=/js/tabbedcontent.js></script><script src=/js/custom.js></script><body onload=javascript:start();><div><h4><div id=mainHeader>Control</div> <span class=label id=conStatus>Offline</span></h4></div><hr><div class=container><div class="row u-full-width" id=row></div><ul class="navigation navigation-tabs u-full-width" id=tabsnav></ul><div class="tabscontent u-full-width" id=tabscontent></div></div>

28
data/js/controls.js vendored
View File

@@ -379,10 +379,12 @@ function start() {
$("#btn" + data.id).on({
touchstart: function (e) {
e.preventDefault();
$(this).addClass("pressed");
buttonclick(data.id, true);
},
touchend: function (e) {
e.preventDefault();
$(this).removeClass("pressed");
buttonclick(data.id, false);
},
});
@@ -403,50 +405,60 @@ function start() {
$("#pf" + data.id).on({
touchstart: function (e) {
e.preventDefault();
$(this).parent().addClass("pressed");
padclick(UP, data.id, true);
},
touchend: function (e) {
e.preventDefault();
$(this).parent().removeClass("pressed");
padclick(UP, data.id, false);
},
});
$("#pl" + data.id).on({
touchstart: function (e) {
e.preventDefault();
$(this).parent().addClass("pressed");
padclick(LEFT, data.id, true);
},
touchend: function (e) {
e.preventDefault();
$(this).parent().removeClass("pressed");
padclick(LEFT, data.id, false);
},
});
$("#pr" + data.id).on({
touchstart: function (e) {
e.preventDefault();
$(this).parent().addClass("pressed");
padclick(RIGHT, data.id, true);
},
touchend: function (e) {
e.preventDefault();
$(this).parent().removeClass("pressed");
padclick(RIGHT, data.id, false);
},
});
$("#pb" + data.id).on({
touchstart: function (e) {
e.preventDefault();
$(this).parent().addClass("pressed");
padclick(DOWN, data.id, true);
},
touchend: function (e) {
e.preventDefault();
$(this).parent().removeClass("pressed");
padclick(DOWN, data.id, false);
},
});
$("#pc" + data.id).on({
touchstart: function (e) {
e.preventDefault();
$(this).addClass("pressed");
padclick(CENTER, data.id, true);
},
touchend: function (e) {
e.preventDefault();
$(this).removeClass("pressed");
padclick(CENTER, data.id, false);
},
});
@@ -464,10 +476,21 @@ function start() {
case UI_TAB:
if (data.visible) {
$("#tabsnav").append(
"<li><a onmouseup='tabclick(" + data.id + ")' href='#tab" + data.id + "'>" + data.value + "</a></li>"
"<li><a id='tablink" + data.id + "' href='#tab" + data.id + "'>" + data.value + "</a></li>"
);
$("#tabscontent").append("<div id='tab" + data.id + "'></div>");
// Add touch and click handlers for tab
$("#tablink" + data.id).on({
touchend: function(e) {
e.preventDefault();
tabclick(data.id);
},
mouseup: function(e) {
tabclick(data.id);
}
});
tabs = $(".tabscontent").tabbedContent({ loop: true }).data("api");
// switch to tab...
$("a")
@@ -886,6 +909,9 @@ function selectchange(number) {
}
function buttonclick(number, isdown) {
if ($("#btn" + number).prop("disabled")) {
return;
}
if (isdown) websock.send("bdown:" + number);
else websock.send("bup:" + number);
}

9
data/js/controls.min.js vendored
View File

@@ -13,11 +13,11 @@ catch(Event){console.error(Event);websock.send("uiok:"+0);return;}
var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});if(data.totalcontrols>(data.controls.length-1)){websock.send("uiok:"+(data.controls.length-1));}
break;case UI_EXTEND_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});if(data.totalcontrols>data.startindex+(data.controls.length-1)){websock.send("uiok:"+(data.startindex+(data.controls.length-1)));}
break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GAUGE:case UI_SEPARATOR:if(data.visible)addToHTML(data);break;case UI_BUTTON:if(data.visible){addToHTML(data);$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);},touchend:function(e){e.preventDefault();buttonclick(data.id,false);},});}
break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GAUGE:case UI_SEPARATOR:if(data.visible)addToHTML(data);break;case UI_BUTTON:if(data.visible){addToHTML(data);$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();$(this).addClass("pressed");buttonclick(data.id,true);},touchend:function(e){e.preventDefault();$(this).removeClass("pressed");buttonclick(data.id,false);},});}
break;case UI_SWITCHER:if(data.visible){addToHTML(data);switcher(data.id,data.value);}
break;case UI_CPAD:case UI_PAD:if(data.visible){addToHTML(data);$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(UP,data.id,true);},touchend:function(e){e.preventDefault();padclick(UP,data.id,false);},});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);},touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);},});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);},touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);},});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(DOWN,data.id,true);},touchend:function(e){e.preventDefault();padclick(DOWN,data.id,false);},});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);},touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);},});}
break;case UI_CPAD:case UI_PAD:if(data.visible){addToHTML(data);$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();$(this).parent().addClass("pressed");padclick(UP,data.id,true);},touchend:function(e){e.preventDefault();$(this).parent().removeClass("pressed");padclick(UP,data.id,false);},});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();$(this).parent().addClass("pressed");padclick(LEFT,data.id,true);},touchend:function(e){e.preventDefault();$(this).parent().removeClass("pressed");padclick(LEFT,data.id,false);},});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();$(this).parent().addClass("pressed");padclick(RIGHT,data.id,true);},touchend:function(e){e.preventDefault();$(this).parent().removeClass("pressed");padclick(RIGHT,data.id,false);},});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();$(this).parent().addClass("pressed");padclick(DOWN,data.id,true);},touchend:function(e){e.preventDefault();$(this).parent().removeClass("pressed");padclick(DOWN,data.id,false);},});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();$(this).addClass("pressed");padclick(CENTER,data.id,true);},touchend:function(e){e.preventDefault();$(this).removeClass("pressed");padclick(CENTER,data.id,false);},});}
break;case UI_SLIDER:if(data.visible){addToHTML(data);rangeSlider(!sliderContinuous);}
break;case UI_TAB:if(data.visible){$("#tabsnav").append("<li><a onmouseup='tabclick("+data.id+")' href='#tab"+data.id+"'>"+data.value+"</a></li>");$("#tabscontent").append("<div id='tab"+data.id+"'></div>");tabs=$(".tabscontent").tabbedContent({loop:true}).data("api");$("a").filter(function(){return $(this).attr("href")==="#click-to-switch";}).on("click",function(e){var tab=prompt("Tab to switch to (number or id)?");if(!tabs.switchTab(tab)){alert("That tab does not exist :\\");}
break;case UI_TAB:if(data.visible){$("#tabsnav").append("<li><a id='tablink"+data.id+"' href='#tab"+data.id+"'>"+data.value+"</a></li>");$("#tabscontent").append("<div id='tab"+data.id+"'></div>");$("#tablink"+data.id).on({touchend:function(e){e.preventDefault();tabclick(data.id);},mouseup:function(e){tabclick(data.id);}});tabs=$(".tabscontent").tabbedContent({loop:true}).data("api");$("a").filter(function(){return $(this).attr("href")==="#click-to-switch";}).on("click",function(e){var tab=prompt("Tab to switch to (number or id)?");if(!tabs.switchTab(tab)){alert("That tab does not exist :\\");}
e.preventDefault();});}
break;case UI_OPTION:if(data.parentControl){var parent=$("#select"+data.parentControl);parent.append("<option id='option"+
data.id+
@@ -85,7 +85,8 @@ function numberchange(number){var val=$("#num"+number).val();websock.send("nvalu
function textchange(number){var val=$("#text"+number).val();websock.send("tvalue:"+val+":"+number);}
function tabclick(number){var val=$("#tab"+number).val();websock.send("tabvalue:"+val+":"+number);}
function selectchange(number){var val=$("#select"+number).val();websock.send("svalue:"+val+":"+number);}
function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}
function buttonclick(number,isdown){if($("#btn"+number).prop("disabled")){return;}
if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}
function padclick(type,number,isdown){if($("#id"+number+" nav").hasClass("disabled")){return;}
switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case UP:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case DOWN: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(!$("#sl"+number).hasClass("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);}}