1
0
mirror of https://github.com/s00500/ESPUI.git synced 2024-06-15 00:53:34 +00:00

Dynamic visibility support

The ability to make controls visible and invisible
was basically already supported, we just need to add
some minor handling in controls.js.
This commit is contained in:
Ian Gray 2022-01-28 20:31:25 +00:00
parent d9a4854855
commit 576890e033
6 changed files with 36 additions and 1 deletions

View File

@ -35,6 +35,7 @@ The Library runs on any kind of **ESP8266** and **ESP32** (NodeMCU, AI Thinker,
- [Log output](#log-output) - [Log output](#log-output)
- [Colours](#colours) - [Colours](#colours)
- [Advanced Features](#advanced-features) - [Advanced Features](#advanced-features)
* [Dynamic Visibility](#dynamic-visibility)
* [Inline Styles](#inline-styles) * [Inline Styles](#inline-styles)
* [Grouped controls](#grouped-controls) * [Grouped controls](#grouped-controls)
* [Wide controls](#wide-controls) * [Wide controls](#wide-controls)
@ -423,6 +424,17 @@ If you want more control over the UI design, see the Inline Styles section below
ESPUI includes a range of advanced features that can customise your UIs. ESPUI includes a range of advanced features that can customise your UIs.
### Dynamic Visibility
Cotrols can be made visible or invisible at runtime with the `updateVisibility()` function.
```
ESPUI.updateVisibility(controlId, false);
```
Note that you cannot hide individual controls from a [control group](#grouped-controls), you have to hide the entire group.
### Inline Styles ### Inline Styles
You can add custom CSS styles to controls. This allows you to style the UI with custom colors, drop shadows, You can add custom CSS styles to controls. This allows you to style the UI with custom colors, drop shadows,

7
data/js/controls.js vendored
View File

@ -575,6 +575,13 @@ function start() {
$("#id" + data.id).attr("style", data.panelStyle); $("#id" + data.id).attr("style", data.panelStyle);
} }
if(data.hasOwnProperty('visible')) {
if(data['visible'])
$("#id" + data.id).show();
else
$("#id" + data.id).hide();
}
if (data.type == UPDATE_SLIDER) { if (data.type == UPDATE_SLIDER) {
element.removeClass( element.removeClass(
"slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin" "slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin"

View File

@ -41,6 +41,9 @@ break;case UPDATE_BUTTON:$("#btn"+data.id).val(data.value);$("#btn"+data.id).tex
break;case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#gauge"+data.id).attr("style",data.elementStyle);} break;case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#gauge"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_ACCEL:break;case UPDATE_TIME:var rv=new Date().toISOString();websock.send("time:"+rv+":"+data.id);break;default:console.error("Unknown type or event");break;} break;case UPDATE_ACCEL:break;case UPDATE_TIME:var rv=new Date().toISOString();websock.send("time:"+rv+":"+data.id);break;default:console.error("Unknown type or event");break;}
if(data.type>=UPDATE_OFFSET&&data.type<UI_INITIAL_GUI){var element=$("#id"+data.id);if(data.hasOwnProperty('panelStyle')){$("#id"+data.id).attr("style",data.panelStyle);} if(data.type>=UPDATE_OFFSET&&data.type<UI_INITIAL_GUI){var element=$("#id"+data.id);if(data.hasOwnProperty('panelStyle')){$("#id"+data.id).attr("style",data.panelStyle);}
if(data.hasOwnProperty('visible')){if(data['visible'])
$("#id"+data.id).show();else
$("#id"+data.id).hide();}
if(data.type==UPDATE_SLIDER){element.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin");element.addClass("slider-"+colorClass(data.color));}else{element.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin");element.addClass(colorClass(data.color));}} if(data.type==UPDATE_SLIDER){element.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin");element.addClass("slider-"+colorClass(data.color));}else{element.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin");element.addClass(colorClass(data.color));}}
$(".range-slider__range").each(function(){$(this)[0].value=$(this).attr("value");$(this).next().html($(this).attr("value"));});};websock.onmessage=handleEvent;} $(".range-slider__range").each(function(){$(this)[0].value=$(this).attr("value");$(this).next().html($(this).attr("value"));});};websock.onmessage=handleEvent;}
function sliderchange(number){var val=$("#sl"+number).val();websock.send("slvalue:"+val+":"+number);$(".range-slider__range").each(function(){$(this).attr("value",$(this)[0].value);});} function sliderchange(number){var val=$("#sl"+number).val();websock.send("slvalue:"+val+":"+number);$(".range-slider__range").each(function(){$(this).attr("value",$(this)[0].value);});}

View File

@ -910,6 +910,15 @@ void ESPUIClass::updateControlValue(uint16_t id, const String& value, int client
updateControlValue(control, value, clientId); updateControlValue(control, value, clientId);
} }
void ESPUIClass::updateVisibility(uint16_t id, bool visibility, int clientId) {
Control* control = getControl(id);
if(control)
{
control->visible = visibility;
updateControl(id);
}
}
void ESPUIClass::print(uint16_t id, const String& value) void ESPUIClass::print(uint16_t id, const String& value)
{ {
updateControlValue(id, value); updateControlValue(id, value);

View File

@ -301,6 +301,7 @@ public:
void setPanelWide(uint16_t id, bool wide); void setPanelWide(uint16_t id, bool wide);
void setVertical(uint16_t id, bool vert = true); void setVertical(uint16_t id, bool vert = true);
void updateVisibility(uint16_t id, bool visibility, int clientId = -1);
// Variables // Variables
const char* ui_title = "ESPUI"; // Store UI Title and Header Name const char* ui_title = "ESPUI"; // Store UI Title and Header Name

File diff suppressed because one or more lines are too long