lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2025-07-04 06:10:18 +00:00
Code Issues Releases Activity

Implement separators, and grouped controls

Browse Source 
This adds separator elements, and allows arbitrary grouping of controls. For details
see the updates to README.md
This commit is contained in:
Ian Gray
2022-01-08 20:58:22 +00:00
parent cdd0f5bac3
commit 9b228800f9
12 changed files with 392 additions and 894 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
README.md
View File

@ -33,6 +33,8 @@ The Library runs fine on any kind of **ESP8266** and **ESP32** (NodeMCU Boards,
- Public Access to ESPAsyncServer
- Graph Widget (Persist save graph in local storage #10)
- Inline CSS styles by @iangray001
- Separators by @iangray001
- Grouped controls by @iangray001
## Further Roadmap
@ -304,6 +306,18 @@ Then all widgets for the tab need to be added to it by specifying the tab as the
`ESPUI.addControl( ControlType::Text, "Text Title:", "a Text Field", ControlColor::Alizarin, tab1, &textCall );`
### Separators
![separators](docs/ui_separators.png)
You can use separators to break up the UI and better organise your controls. Adding a separator will force any following controls onto the subsequent line. Add separators as follows:
```
ESPUI.separator("Separator name");
//or
ESPUI.addControl(ControlType::Separator, "Separator name", "", ControlColor::None, maintab);
```
### Initialisation of the UI
After all the elements are configured you can use `ESPUI.begin("Some Title");`
@ -389,6 +403,33 @@ Note: The images in this example are formed by setting a Label to contain an `<i
ESPUI.addControl(ControlType::Label, "Label", "<img src='path/to/image'>", ControlColor::Peterriver);
```
### Grouped controls
Normally, whenever a control is added to the UI, an new panel is generated. However, when addings the control you can
set the "parent" of the control to an existing other control. This allows you to add multiple widgets into the same
panel. For example:
```
panel1 = ESPUI.addControl(ControlType::Button, "Button Set", "Button A", ControlColor::Turquoise, Control::noParent, btncallback);
ESPUI.addControl(ControlType::Button, "", "Button B", ControlColor::None, panel1, btncallback);
ESPUI.addControl(ControlType::Button, "", "Button C", ControlColor::None, panel1, btncallback);
```
The first call to `addControl` has no parent (or it could be set to a tab), so therefore a new panel is added containing one button
with the value `Button A`. The two subsequent calls have their parent set to the control we added in the first so instead of adding
a new panel, buttons are added to the existing panel from `Button A`. The result is the following:
![Grouped buttons](docs/ui_groupedbuttons.png)
The grouped controls operate entirely independently, and can be assigned different callbacks, or updated separately. The grouping
is purely visual.
Most controls can be grouped this way, but the result is not always visually pleasant. This works best with labels, sliders, switchers,
and buttons.
![Other grouped elements](docs/ui_groupedbuttons2.png)
If you group too many elements it might throw the layout of the rest of the UI out of line. Consider adding separators to correct this.
# Notes for Development