lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2024-11-21 22:50:55 +00:00
Code Issues Releases Activity

Initial support for vertical switchers and sliders.

Browse Source 
Documentation to be added in a later commit.
This commit is contained in:
Ian Gray 2022-01-21 23:30:08 +00:00
parent 9cd15db1ad
commit 334bf16b09
7 changed files with 99 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
data/css/style.css
View File

@ -1128,3 +1128,23 @@ svg {
text { text {
text-anchor: end; text-anchor: end;
} }
/* Styles to implement vertical orientations */
.vert-switcher {
transform: rotate(270deg);
margin-top: 15px;
margin-bottom: 25px;
}
.vert-slider {
width: 150px;
transform: rotate(270deg);
display: inline-block;
margin: 50px -45px 70px -45px;
}
.vert-slider span {
transform: rotate(90deg);
}

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

File diff suppressed because one or more lines are too long

39
data/js/controls.js vendored
View File

@ -700,7 +700,6 @@ var rangeSlider = function (isDiscrete) {
var addToHTML = function(data) { var addToHTML = function(data) {
panelStyle = data.hasOwnProperty('panelStyle') ? " style='" + data.panelStyle + "' " : ""; panelStyle = data.hasOwnProperty('panelStyle') ? " style='" + data.panelStyle + "' " : "";
elementStyle = data.hasOwnProperty('elementStyle') ? " style='" + data.elementStyle + "' " : "";
panelwide = data.hasOwnProperty('wide') ? "wide" : ""; panelwide = data.hasOwnProperty('wide') ? "wide" : "";
if(!data.hasOwnProperty('parentControl') || $("#tab" + data.parentControl).length > 0) { if(!data.hasOwnProperty('parentControl') || $("#tab" + data.parentControl).length > 0) {
@ -725,7 +724,7 @@ var addToHTML = function(data) {
case UI_ACCEL: case UI_ACCEL:
html = "<div id='id" + data.id + "' " + panelStyle + " class='two columns " + panelwide + " card tcenter " + html = "<div id='id" + data.id + "' " + panelStyle + " class='two columns " + panelwide + " card tcenter " +
colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
elementHTML(data.type, data.id, data.value, data.label, elementStyle) + elementHTML(data) +
"</div>"; "</div>";
break; break;
case UI_SEPARATOR: case UI_SEPARATOR:
@ -742,26 +741,30 @@ var addToHTML = function(data) {
} else { } else {
//We are adding to an existing panel so we only need the HTML for the element //We are adding to an existing panel so we only need the HTML for the element
var parent = $("#id" + data.parentControl); var parent = $("#id" + data.parentControl);
parent.append(elementHTML(data.type, data.id, data.value, data.label, elementStyle)); parent.append(elementHTML(data));
} }
} }
var elementHTML = function(type, id, value, label, elementStyle) { var elementHTML = function(data) {
switch(type) { var id = data.id
var elementStyle = data.hasOwnProperty('elementStyle') ? " style='" + data.elementStyle + "' " : "";
switch(data.type) {
case UI_LABEL: case UI_LABEL:
return "<span id='l" + id + "' " + elementStyle + return "<span id='l" + id + "' " + elementStyle +
" class='label label-wrap'>" + value + "</span>"; " class='label label-wrap'>" + data.value + "</span>";
case UI_BUTTON: case UI_BUTTON:
return "<button id='btn" + id + "' " + elementStyle + return "<button id='btn" + id + "' " + elementStyle +
" onmousedown='buttonclick(" + id + ", true)'" + " onmousedown='buttonclick(" + id + ", true)'" +
" onmouseup='buttonclick(" + id + ", false)'>" + " onmouseup='buttonclick(" + id + ", false)'>" +
value + "</button>"; data.value + "</button>";
case UI_SWITCHER: case UI_SWITCHER:
return "<label id='sl" + id + "' " + elementStyle + return "<label id='sl" + id + "' " + elementStyle +
" class='switch " + (value == "1" ? "checked" : "") + "'>" + " class='switch " + (data.value == "1" ? "checked" : "") +
(data.hasOwnProperty('vertical') ? " vert-switcher " : "") +
"'>" +
"<div class='in'>" + "<div class='in'>" +
"<input type='checkbox' id='s" + id + "' onClick='switcher(" + id + ",null)' " + "<input type='checkbox' id='s" + id + "' onClick='switcher(" + id + ",null)' " +
(value == "1" ? "checked" : "") + "/></div></label>"; (data.value == "1" ? "checked" : "") + "/></div></label>";
case UI_CPAD: case UI_CPAD:
case UI_PAD: case UI_PAD:
return "<nav class='control'><ul>" + return "<nav class='control'><ul>" +
@ -774,30 +777,32 @@ var elementHTML = function(type, id, value, label, elementStyle) {
"<li><a onmousedown='padclick(DOWN, " + id + ", true)' " + "<li><a onmousedown='padclick(DOWN, " + id + ", true)' " +
"onmouseup='padclick(DOWN, " + id + ", false)' id='pb" + id + "'>&#9650;</a></li>" + "onmouseup='padclick(DOWN, " + id + ", false)' id='pb" + id + "'>&#9650;</a></li>" +
"</ul>" + "</ul>" +
(type == UI_CPAD (data.type == UI_CPAD
? "<a class='confirm' onmousedown='padclick(CENTER," + id + ", true)' " + ? "<a class='confirm' onmousedown='padclick(CENTER," + id + ", true)' " +
"onmouseup='padclick(CENTER, " + id + ", false)' id='pc" + id + "'>OK</a>" "onmouseup='padclick(CENTER, " + id + ", false)' id='pc" + id + "'>OK</a>"
: "") + : "") +
"</nav>"; "</nav>";
case UI_SLIDER: case UI_SLIDER:
return "<div class='range-slider'>" + return "<div class='range-slider " +
"<input id='sl" + id + "' type='range' min='0' max='100' value='" + value + "' " + (data.hasOwnProperty('vertical') ? " vert-slider " : "") +
"'>" +
"<input id='sl" + id + "' type='range' min='0' max='100' value='" + data.value + "' " +
elementStyle + " class='range-slider__range'><span class='range-slider__value'>" + elementStyle + " class='range-slider__range'><span class='range-slider__value'>" +
value + "</span></div>"; data.value + "</span></div>";
case UI_NUMBER: case UI_NUMBER:
return "<input style='color:black;' " + elementStyle + " id='num" + id + return "<input style='color:black;' " + elementStyle + " id='num" + id +
"' type='number' value='" + value + "' onchange='numberchange(" + id + ")' />"; "' type='number' value='" + data.value + "' onchange='numberchange(" + id + ")' />";
case UI_TEXT_INPUT: case UI_TEXT_INPUT:
return "<input style='color:black;' " + elementStyle + " id='text" + id + return "<input style='color:black;' " + elementStyle + " id='text" + id +
"' value='" + value + "' onchange='textchange(" + id + ")' />"; "' value='" + data.value + "' onchange='textchange(" + id + ")' />";
case UI_SELECT: case UI_SELECT:
return "<select style='color:black;' " + elementStyle + " id='select" + id + return "<select style='color:black;' " + elementStyle + " id='select" + id +
"' onchange='selectchange(" + id + ")' />"; "' onchange='selectchange(" + id + ")' />";
case UI_GRAPH: case UI_GRAPH:
return "<figure id='graph" + id + "'><figcaption>" + label + "</figcaption></figure>"; return "<figure id='graph" + id + "'><figcaption>" + data.label + "</figcaption></figure>";
case UI_GAUGE: case UI_GAUGE:
return "WILL BE A GAUGE <input style='color:black;' id='gauge" + id + return "WILL BE A GAUGE <input style='color:black;' id='gauge" + id +
"' type='number' value='" + value + "' onchange='numberchange(" + id + ")' />"; "' type='number' value='" + data.value + "' onchange='numberchange(" + id + ")' />";
case UI_ACCEL: case UI_ACCEL:
return "ACCEL // Not implemented fully!<div class='accelerometer' id='accel" + id + return "ACCEL // Not implemented fully!<div class='accelerometer' id='accel" + id +
"' ><div class='ball" + id + "'></div><pre class='accelerometeroutput" + id + "'></pre>"; "' ><div class='ball" + id + "'></div><pre class='accelerometeroutput" + id + "'></pre>";

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

@ -52,21 +52,24 @@ function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else
function padclick(type,number,isdown){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 padclick(type,number,isdown){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);}} 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);}}
var rangeSlider=function(isDiscrete){var range=$(".range-slider__range");var slidercb=function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));};range.on({input:function(){$(this).next().html(this.value)}});range.each(function(){$(this).next().html(this.value);if($(this).attr("callbackSet")!="true"){if(!isDiscrete){$(this).on({input:slidercb});}else{$(this).on({change:slidercb});} var rangeSlider=function(isDiscrete){var range=$(".range-slider__range");var slidercb=function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));};range.on({input:function(){$(this).next().html(this.value)}});range.each(function(){$(this).next().html(this.value);if($(this).attr("callbackSet")!="true"){if(!isDiscrete){$(this).on({input:slidercb});}else{$(this).on({change:slidercb});}
$(this).attr("callbackSet","true");}});};var addToHTML=function(data){panelStyle=data.hasOwnProperty('panelStyle')?" style='"+data.panelStyle+"' ":"";elementStyle=data.hasOwnProperty('elementStyle')?" style='"+data.elementStyle+"' ":"";panelwide=data.hasOwnProperty('wide')?"wide":"";if(!data.hasOwnProperty('parentControl')||$("#tab"+data.parentControl).length>0){var parent=data.hasOwnProperty('parentControl')?$("#tab"+data.parentControl):$("#row");var html="";switch(data.type){case UI_LABEL:case UI_BUTTON:case UI_SWITCHER:case UI_CPAD:case UI_PAD:case UI_SLIDER:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GRAPH:case UI_GAUGE:case UI_ACCEL:html="<div id='id"+data.id+"' "+panelStyle+" class='two columns "+panelwide+" card tcenter "+ $(this).attr("callbackSet","true");}});};var addToHTML=function(data){panelStyle=data.hasOwnProperty('panelStyle')?" style='"+data.panelStyle+"' ":"";panelwide=data.hasOwnProperty('wide')?"wide":"";if(!data.hasOwnProperty('parentControl')||$("#tab"+data.parentControl).length>0){var parent=data.hasOwnProperty('parentControl')?$("#tab"+data.parentControl):$("#row");var html="";switch(data.type){case UI_LABEL:case UI_BUTTON:case UI_SWITCHER:case UI_CPAD:case UI_PAD:case UI_SLIDER:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GRAPH:case UI_GAUGE:case UI_ACCEL:html="<div id='id"+data.id+"' "+panelStyle+" class='two columns "+panelwide+" card tcenter "+
colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>"+ colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>"+
elementHTML(data.type,data.id,data.value,data.label,elementStyle)+ elementHTML(data)+
"</div>";break;case UI_SEPARATOR:html="<div id='id"+data.id+"' "+panelStyle+" class='sectionbreak columns'>"+ "</div>";break;case UI_SEPARATOR:html="<div id='id"+data.id+"' "+panelStyle+" class='sectionbreak columns'>"+
"<h5>"+data.label+"</h5><hr/></div>";break;case UI_TIME:break;} "<h5>"+data.label+"</h5><hr/></div>";break;case UI_TIME:break;}
parent.append(html);}else{var parent=$("#id"+data.parentControl);parent.append(elementHTML(data.type,data.id,data.value,data.label,elementStyle));}} parent.append(html);}else{var parent=$("#id"+data.parentControl);parent.append(elementHTML(data));}}
var elementHTML=function(type,id,value,label,elementStyle){switch(type){case UI_LABEL:return"<span id='l"+id+"' "+elementStyle+ var elementHTML=function(data){var id=data.id
" class='label label-wrap'>"+value+"</span>";case UI_BUTTON:return"<button id='btn"+id+"' "+elementStyle+ var elementStyle=data.hasOwnProperty('elementStyle')?" style='"+data.elementStyle+"' ":"";switch(data.type){case UI_LABEL:return"<span id='l"+id+"' "+elementStyle+
" class='label label-wrap'>"+data.value+"</span>";case UI_BUTTON:return"<button id='btn"+id+"' "+elementStyle+
" onmousedown='buttonclick("+id+", true)'"+ " onmousedown='buttonclick("+id+", true)'"+
" onmouseup='buttonclick("+id+", false)'>"+ " onmouseup='buttonclick("+id+", false)'>"+
value+"</button>";case UI_SWITCHER:return"<label id='sl"+id+"' "+elementStyle+ data.value+"</button>";case UI_SWITCHER:return"<label id='sl"+id+"' "+elementStyle+
" class='switch "+(value=="1"?"checked":"")+"'>"+ " class='switch "+(data.value=="1"?"checked":"")+
(data.hasOwnProperty('vertical')?" vert-switcher ":"")+
"'>"+
"<div class='in'>"+ "<div class='in'>"+
"<input type='checkbox' id='s"+id+"' onClick='switcher("+id+",null)' "+ "<input type='checkbox' id='s"+id+"' onClick='switcher("+id+",null)' "+
(value=="1"?"checked":"")+"/></div></label>";case UI_CPAD:case UI_PAD:return"<nav class='control'><ul>"+ (data.value=="1"?"checked":"")+"/></div></label>";case UI_CPAD:case UI_PAD:return"<nav class='control'><ul>"+
"<li><a onmousedown='padclick(UP, "+id+", true)' "+ "<li><a onmousedown='padclick(UP, "+id+", true)' "+
"onmouseup='padclick(UP, "+id+", false)' id='pf"+id+"'>&#9650;</a></li>"+ "onmouseup='padclick(UP, "+id+", false)' id='pf"+id+"'>&#9650;</a></li>"+
"<li><a onmousedown='padclick(RIGHT, "+id+", true)' "+ "<li><a onmousedown='padclick(RIGHT, "+id+", true)' "+
@ -76,14 +79,16 @@ value+"</button>";case UI_SWITCHER:return"<label id='sl"+id+"' "+elementStyle+
"<li><a onmousedown='padclick(DOWN, "+id+", true)' "+ "<li><a onmousedown='padclick(DOWN, "+id+", true)' "+
"onmouseup='padclick(DOWN, "+id+", false)' id='pb"+id+"'>&#9650;</a></li>"+ "onmouseup='padclick(DOWN, "+id+", false)' id='pb"+id+"'>&#9650;</a></li>"+
"</ul>"+ "</ul>"+
(type==UI_CPAD?"<a class='confirm' onmousedown='padclick(CENTER,"+id+", true)' "+ (data.type==UI_CPAD?"<a class='confirm' onmousedown='padclick(CENTER,"+id+", true)' "+
"onmouseup='padclick(CENTER, "+id+", false)' id='pc"+id+"'>OK</a>":"")+ "onmouseup='padclick(CENTER, "+id+", false)' id='pc"+id+"'>OK</a>":"")+
"</nav>";case UI_SLIDER:return"<div class='range-slider'>"+ "</nav>";case UI_SLIDER:return"<div class='range-slider "+
"<input id='sl"+id+"' type='range' min='0' max='100' value='"+value+"' "+ (data.hasOwnProperty('vertical')?" vert-slider ":"")+
"'>"+
"<input id='sl"+id+"' type='range' min='0' max='100' value='"+data.value+"' "+
elementStyle+" class='range-slider__range'><span class='range-slider__value'>"+ elementStyle+" class='range-slider__range'><span class='range-slider__value'>"+
value+"</span></div>";case UI_NUMBER:return"<input style='color:black;' "+elementStyle+" id='num"+id+ data.value+"</span></div>";case UI_NUMBER:return"<input style='color:black;' "+elementStyle+" id='num"+id+
"' type='number' value='"+value+"' onchange='numberchange("+id+")' />";case UI_TEXT_INPUT:return"<input style='color:black;' "+elementStyle+" id='text"+id+ "' type='number' value='"+data.value+"' onchange='numberchange("+id+")' />";case UI_TEXT_INPUT:return"<input style='color:black;' "+elementStyle+" id='text"+id+
"' value='"+value+"' onchange='textchange("+id+")' />";case UI_SELECT:return"<select style='color:black;' "+elementStyle+" id='select"+id+ "' value='"+data.value+"' onchange='textchange("+id+")' />";case UI_SELECT:return"<select style='color:black;' "+elementStyle+" id='select"+id+
"' onchange='selectchange("+id+")' />";case UI_GRAPH:return"<figure id='graph"+id+"'><figcaption>"+label+"</figcaption></figure>";case UI_GAUGE:return"WILL BE A GAUGE <input style='color:black;' id='gauge"+id+ "' onchange='selectchange("+id+")' />";case UI_GRAPH:return"<figure id='graph"+id+"'><figcaption>"+data.label+"</figcaption></figure>";case UI_GAUGE:return"WILL BE A GAUGE <input style='color:black;' id='gauge"+id+
"' type='number' value='"+value+"' onchange='numberchange("+id+")' />";case UI_ACCEL:return"ACCEL // Not implemented fully!<div class='accelerometer' id='accel"+id+ "' type='number' value='"+data.value+"' onchange='numberchange("+id+")' />";case UI_ACCEL:return"ACCEL // Not implemented fully!<div class='accelerometer' id='accel"+id+
"' ><div class='ball"+id+"'></div><pre class='accelerometeroutput"+id+"'></pre>";default:return"";}} "' ><div class='ball"+id+"'></div><pre class='accelerometeroutput"+id+"'></pre>";default:return"";}}

10
src/ESPUI.cpp
View File

@ -855,6 +855,14 @@ void ESPUIClass::setPanelWide(uint16_t id, bool wide) {
} }
} }
void ESPUIClass::setVertical(uint16_t id, bool vert) {
Control* control = getControl(id);
if (control)
{
control->vertical = vert;
}
}
void ESPUIClass::updateControl(uint16_t id, int clientId) void ESPUIClass::updateControl(uint16_t id, int clientId)
{ {
Control* control = getControl(id); Control* control = getControl(id);
@ -1097,6 +1105,8 @@ void ESPUIClass::prepareJSONChunk(AsyncWebSocketClient* client, uint16_t startin
item["elementStyle"] = String(control->elementStyle); item["elementStyle"] = String(control->elementStyle);
if (control->wide == true) if (control->wide == true)
item["wide"] = true; item["wide"] = true;
if (control->vertical == true)
item["vertical"] = true;
if (control->parentControl != Control::noParent) if (control->parentControl != Control::noParent)
{ {

3
src/ESPUI.h
View File

@ -141,6 +141,7 @@ public:
ControlColor color; ControlColor color;
bool visible; bool visible;
bool wide; bool wide;
bool vertical;
uint16_t parentControl; uint16_t parentControl;
String panelStyle; String panelStyle;
String elementStyle; String elementStyle;
@ -157,6 +158,7 @@ public:
color(color), color(color),
visible(visible), visible(visible),
wide(false), wide(false),
vertical(false),
parentControl(parentControl), parentControl(parentControl),
next(nullptr) next(nullptr)
{ {
@ -298,6 +300,7 @@ public:
void setElementStyle(uint16_t id, String style, int clientId = -1); void setElementStyle(uint16_t id, String style, int clientId = -1);
void setPanelWide(uint16_t id, bool wide); void setPanelWide(uint16_t id, bool wide);
void setVertical(uint16_t id, bool vert = true);
// Variables // Variables
const char* ui_title = "ESPUI"; // Store UI Title and Header Name const char* ui_title = "ESPUI"; // Store UI Title and Header Name

39
src/dataControlsJS.h
View File

File diff suppressed because one or more lines are too long