Also explains how to label groups of sliders/switchers.
Also makes a tiny tweak to the width of vertical sliders so they are the same width as switchers.
If two clients were connected at the same time, the chunked updates
from one could cause the other to recieve UI_EXTEND messages. This
is fixed by passing the client in to jsonDom.
A protocol has been implemented between the server and client to acknowledge
each UI_INITIAL_GUI and UI_EXTEND_GUI from the client javascript. This
prevents the internal websocket buffers from becoming flooded when the
number of controls gets too high.
Adds two functions in ESPUI.h:
setPanelStyle()
setElementStyle()
These allow for custom inline CSS styles to be applied to the panel and to
the specific UI element repectively.
For example:
```
char stylecol1[30]
sprintf(stylecol1, "background-color: #%06X;", (unsigned int) random(0x0, 0xFFFFFF));
ESPUI.setPanelStyle(switch1, stylecol1);
```
This will set the panel of the given control to a random hex colour.
This is supported by both the initial UI message, and by control update messages, so you
can change these styles dynamically in response to other events.
setElementStyle() is not perfect. Because CSS inline styles can only style one specific
DOM element, for controls made up of multiple elements (like the "pad") this is limited.
I have tried to make an appropriate choice for each supported control.
Adds two functions in ESPUI.h:
setPanelStyle()
setElementStyle()
These allow for custom inline CSS styles to be applied to the panel and to
the specific UI element repectively.
For example:
```
char stylecol1[30]
sprintf(stylecol1, "background-color: #%06X;", (unsigned int) random(0x0, 0xFFFFFF));
ESPUI.setPanelStyle(switch1, stylecol1);
```
This will set the panel of the given control to a random hex colour.
This is supported by both the initial UI message, and by control update messages, so you
can change these styles dynamically in response to other events.
setElementStyle() is not perfect. Because CSS inline styles can only style one specific
DOM element, for controls made up of multiple elements (like the "pad") this is limited.
I have tried to make an appropriate choice for each supported control.
