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

Moved ControlType and ControlColor objects into class specific namespace. This resolves a conflict with some other libraries that also use global definitions.

Browse Source
This commit is contained in:
Martin 2024-07-14 16:45:20 -04:00
parent 2d023cce6d
commit c0b8a58864
11 changed files with 391 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
examples/completeExample/completeExample.cpp
View File

@ -96,59 +96,59 @@ void setUpUI() {
* Tab: Basic Controls * Tab: Basic Controls
* This tab contains all the basic ESPUI controls, and shows how to read and update them at runtime. * This tab contains all the basic ESPUI controls, and shows how to read and update them at runtime.
*-----------------------------------------------------------------------------------------------------------*/ *-----------------------------------------------------------------------------------------------------------*/
auto maintab = ESPUI.addControl(Tab, "", "Basic controls"); auto maintab = ESPUI.addControl(Control::Type::Tab, "", "Basic controls");
ESPUI.addControl(Separator, "General controls", "", None, maintab); ESPUI.addControl(Control::Type::Separator, "General controls", "", Control::Color::None, maintab);
ESPUI.addControl(Button, "Button", "Button 1", Alizarin, maintab, extendedCallback, (void*)19); ESPUI.addControl(Control::Type::Button, "Button", "Button 1", Control::Color::Alizarin, maintab, extendedCallback, (void*)19);
mainLabel = ESPUI.addControl(Label, "Label", "Label text", Emerald, maintab, generalCallback); mainLabel = ESPUI.addControl(Control::Type::Label, "Label", "Label text", Control::Color::Emerald, maintab, generalCallback);
mainSwitcher = ESPUI.addControl(Switcher, "Switcher", "", Sunflower, maintab, generalCallback); mainSwitcher = ESPUI.addControl(Control::Type::Switcher, "Switcher", "", Control::Color::Sunflower, maintab, generalCallback);
//Sliders default to being 0 to 100, but if you want different limits you can add a Min and Max control //Sliders default to being 0 to 100, but if you want different limits you can add a Min and Max control
mainSlider = ESPUI.addControl(Slider, "Slider", "200", Turquoise, maintab, generalCallback); mainSlider = ESPUI.addControl(Control::Type::Slider, "Slider", "200", Control::Color::Turquoise, maintab, generalCallback);
ESPUI.addControl(Min, "", "10", None, mainSlider); ESPUI.addControl(Control::Type::Min, "", "10", Control::Color::None, mainSlider);
ESPUI.addControl(Max, "", "400", None, mainSlider); ESPUI.addControl(Control::Type::Max, "", "400", Control::Color::None, mainSlider);
//These are the values for the selector's options. (Note that they *must* be declared static //These are the values for the selector's options. (Note that they *must* be declared static
//so that the storage is allocated in global memory and not just on the stack of this function.) //so that the storage is allocated in global memory and not just on the stack of this function.)
static String optionValues[] {"Value 1", "Value 2", "Value 3", "Value 4", "Value 5"}; static String optionValues[] {"Value 1", "Value 2", "Value 3", "Value 4", "Value 5"};
auto mainselector = ESPUI.addControl(Select, "Selector", "Selector", Wetasphalt, maintab, generalCallback); auto mainselector = ESPUI.addControl(Control::Type::Select, "Selector", "Selector", Control::Color::Wetasphalt, maintab, generalCallback);
for(auto const& v : optionValues) { for(auto const& v : optionValues) {
ESPUI.addControl(Option, v.c_str(), v, None, mainselector); ESPUI.addControl(Control::Type::Option, v.c_str(), v, Control::Color::None, mainselector);
} }
mainText = ESPUI.addControl(Text, "Text Input", "Initial value", Alizarin, maintab, generalCallback); mainText = ESPUI.addControl(Control::Type::Text, "Text Input", "Initial value", Control::Color::Alizarin, maintab, generalCallback);
//Number inputs also accept Min and Max components, but you should still validate the values. //Number inputs also accept Min and Max components, but you should still validate the values.
mainNumber = ESPUI.addControl(Number, "Number Input", "42", Emerald, maintab, generalCallback); mainNumber = ESPUI.addControl(Control::Type::Number, "Number Input", "42", Control::Color::Emerald, maintab, generalCallback);
ESPUI.addControl(Min, "", "10", None, mainNumber); ESPUI.addControl(Control::Type::Min, "", "10", Control::Color::None, mainNumber);
ESPUI.addControl(Max, "", "50", None, mainNumber); ESPUI.addControl(Control::Type::Max, "", "50", Control::Color::None, mainNumber);
ESPUI.addControl(Separator, "Updates", "", None, maintab); ESPUI.addControl(Control::Type::Separator, "Updates", "", Control::Color::None, maintab);
//This button will update all the updatable controls on this tab to random values //This button will update all the updatable controls on this tab to random values
mainScrambleButton = ESPUI.addControl(Button, "Scramble Values", "Scramble Values", Carrot, maintab, scrambleCallback); mainScrambleButton = ESPUI.addControl(Control::Type::Button, "Scramble Values", "Scramble Values", Control::Color::Carrot, maintab, scrambleCallback);
ESPUI.addControl(Switcher, "Constant updates", "0", Carrot, maintab, updateCallback); ESPUI.addControl(Control::Type::Switcher, "Constant updates", "0", Control::Color::Carrot, maintab, updateCallback);
mainTime = ESPUI.addControl(Time, "", "", None, 0, generalCallback); mainTime = ESPUI.addControl(Control::Type::Time, "", "", Control::Color::None, 0, generalCallback);
ESPUI.addControl(Button, "Get Time", "Get Time", Carrot, maintab, getTimeCallback); ESPUI.addControl(Control::Type::Button, "Get Time", "Get Time", Control::Color::Carrot, maintab, getTimeCallback);
ESPUI.addControl(Separator, "Control Pads", "", None, maintab); ESPUI.addControl(Control::Type::Separator, "Control Pads", "", Control::Color::None, maintab);
ESPUI.addControl(Pad, "Normal", "", Peterriver, maintab, generalCallback); ESPUI.addControl(Control::Type::Pad, "Normal", "", Control::Color::Peterriver, maintab, generalCallback);
ESPUI.addControl(PadWithCenter, "With center", "", Peterriver, maintab, generalCallback); ESPUI.addControl(Control::Type::PadWithCenter, "With center", "", Control::Color::Peterriver, maintab, generalCallback);
/* /*
* Tab: Colours * Tab: Colours
* This tab shows all the basic colours * This tab shows all the basic colours
*-----------------------------------------------------------------------------------------------------------*/ *-----------------------------------------------------------------------------------------------------------*/
auto colourtab = ESPUI.addControl(Tab, "", "Colours"); auto colourtab = ESPUI.addControl(Control::Type::Tab, "", "Colours");
ESPUI.addControl(Button, "Alizarin", "Alizarin", Alizarin, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Alizarin", "Alizarin", Control::Color::Alizarin, colourtab, generalCallback);
ESPUI.addControl(Button, "Turquoise", "Turquoise", Turquoise, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Turquoise", "Turquoise", Control::Color::Turquoise, colourtab, generalCallback);
ESPUI.addControl(Button, "Emerald", "Emerald", Emerald, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Emerald", "Emerald", Control::Color::Emerald, colourtab, generalCallback);
ESPUI.addControl(Button, "Peterriver", "Peterriver", Peterriver, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Peterriver", "Peterriver", Control::Color::Peterriver, colourtab, generalCallback);
ESPUI.addControl(Button, "Wetasphalt", "Wetasphalt", Wetasphalt, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Wetasphalt", "Wetasphalt", Control::Color::Wetasphalt, colourtab, generalCallback);
ESPUI.addControl(Button, "Sunflower", "Sunflower", Sunflower, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Sunflower", "Sunflower", Control::Color::Sunflower, colourtab, generalCallback);
ESPUI.addControl(Button, "Carrot", "Carrot", Carrot, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Carrot", "Carrot", Control::Color::Carrot, colourtab, generalCallback);
ESPUI.addControl(Button, "Dark", "Dark", Dark, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Dark", "Dark", Control::Color::Dark, colourtab, generalCallback);
/* /*
@ -156,24 +156,24 @@ void setUpUI() {
* This tab shows off how inline CSS styles can be applied to elements and panels in order * This tab shows off how inline CSS styles can be applied to elements and panels in order
* to customise the look of the UI. * to customise the look of the UI.
*-----------------------------------------------------------------------------------------------------------*/ *-----------------------------------------------------------------------------------------------------------*/
auto styletab = ESPUI.addControl(Tab, "", "Styled controls"); auto styletab = ESPUI.addControl(Control::Type::Tab, "", "Styled controls");
styleButton = ESPUI.addControl(Button, "Styled Button", "Button", Alizarin, styletab, generalCallback); styleButton = ESPUI.addControl(Control::Type::Button, "Styled Button", "Button", Control::Color::Alizarin, styletab, generalCallback);
styleLabel = ESPUI.addControl(Label, "Styled Label", "This is a label", Alizarin, styletab, generalCallback); styleLabel = ESPUI.addControl(Control::Type::Label, "Styled Label", "This is a label", Control::Color::Alizarin, styletab, generalCallback);
styleSwitcher = ESPUI.addControl(Switcher, "Styled Switcher", "1", Alizarin, styletab, generalCallback); styleSwitcher = ESPUI.addControl(Control::Type::Switcher, "Styled Switcher", "1", Control::Color::Alizarin, styletab, generalCallback);
styleSlider = ESPUI.addControl(Slider, "Styled Slider", "0", Alizarin, styletab, generalCallback); styleSlider = ESPUI.addControl(Control::Type::Slider, "Styled Slider", "0", Control::Color::Alizarin, styletab, generalCallback);
//This button will randomise the colours of the above controls to show updating of inline styles //This button will randomise the colours of the above controls to show updating of inline styles
ESPUI.addControl(Button, "Randomise Colours", "Randomise Colours", Sunflower, styletab, styleCallback); ESPUI.addControl(Control::Type::Button, "Randomise Colours", "Randomise Colours", Control::Color::Sunflower, styletab, styleCallback);
ESPUI.addControl(Separator, "Other styling examples", "", None, styletab); ESPUI.addControl(Control::Type::Separator, "Other styling examples", "", Control::Color::None, styletab);
styleButton2 = ESPUI.addControl(Button, "Styled Button", "Button", Alizarin, styletab, generalCallback); styleButton2 = ESPUI.addControl(Control::Type::Button, "Styled Button", "Button", Control::Color::Alizarin, styletab, generalCallback);
ESPUI.setPanelStyle(styleButton2, "background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); border-bottom: #555;"); ESPUI.setPanelStyle(styleButton2, "background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); border-bottom: #555;");
ESPUI.setElementStyle(styleButton2, "border-radius: 2em; border: 3px solid black; width: 30%; background-color: #8df;"); ESPUI.setElementStyle(styleButton2, "border-radius: 2em; border: 3px solid black; width: 30%; background-color: #8df;");
styleSlider2 = ESPUI.addControl(Slider, "Styled Slider", "0", Dark, styletab, generalCallback); styleSlider2 = ESPUI.addControl(Control::Type::Slider, "Styled Slider", "0", Control::Color::Dark, styletab, generalCallback);
ESPUI.setElementStyle(styleSlider2, "background: linear-gradient(to right, red, orange, yellow, green, blue);"); ESPUI.setElementStyle(styleSlider2, "background: linear-gradient(to right, red, orange, yellow, green, blue);");
styleLabel2 = ESPUI.addControl(Label, "Styled Label", "This is a label", Dark, styletab, generalCallback); styleLabel2 = ESPUI.addControl(Control::Type::Label, "Styled Label", "This is a label", Control::Color::Dark, styletab, generalCallback);
ESPUI.setElementStyle(styleLabel2, "text-shadow: 3px 3px #74b1ff, 6px 6px #c64ad7; font-size: 60px; font-variant-caps: small-caps; background-color: unset; color: #c4f0bb; -webkit-text-stroke: 1px black;"); ESPUI.setElementStyle(styleLabel2, "text-shadow: 3px 3px #74b1ff, 6px 6px #c64ad7; font-size: 60px; font-variant-caps: small-caps; background-color: unset; color: #c4f0bb; -webkit-text-stroke: 1px black;");
@ -182,14 +182,14 @@ void setUpUI() {
* This tab shows how multiple control can be grouped into the same panel through the use of the * This tab shows how multiple control can be grouped into the same panel through the use of the
* parentControl value. This also shows how to add labels to grouped controls, and how to use vertical controls. * parentControl value. This also shows how to add labels to grouped controls, and how to use vertical controls.
*-----------------------------------------------------------------------------------------------------------*/ *-----------------------------------------------------------------------------------------------------------*/
auto grouptab = ESPUI.addControl(Tab, "", "Grouped controls"); auto grouptab = ESPUI.addControl(Control::Type::Tab, "", "Grouped controls");
//The parent of this button is a tab, so it will create a new panel with one control. //The parent of this button is a tab, so it will create a new panel with one control.
auto groupbutton = ESPUI.addControl(Button, "Button Group", "Button A", Dark, grouptab, generalCallback); auto groupbutton = ESPUI.addControl(Control::Type::Button, "Button Group", "Button A", Control::Color::Dark, grouptab, generalCallback);
//However the parent of this button is another control, so therefore no new panel is //However the parent of this button is another control, so therefore no new panel is
//created and the button is added to the existing panel. //created and the button is added to the existing panel.
ESPUI.addControl(Button, "", "Button B", Alizarin, groupbutton, generalCallback); ESPUI.addControl(Control::Type::Button, "", "Button B", Control::Color::Alizarin, groupbutton, generalCallback);
ESPUI.addControl(Button, "", "Button C", Alizarin, groupbutton, generalCallback); ESPUI.addControl(Control::Type::Button, "", "Button C", Control::Color::Alizarin, groupbutton, generalCallback);
//Sliders can be grouped as well //Sliders can be grouped as well
@ -197,65 +197,65 @@ void setUpUI() {
//We need this CSS style rule, which will remove the label's background and ensure that it takes up the entire width of the panel //We need this CSS style rule, which will remove the label's background and ensure that it takes up the entire width of the panel
String clearLabelStyle = "background-color: unset; width: 100%;"; String clearLabelStyle = "background-color: unset; width: 100%;";
//First we add the main slider to create a panel //First we add the main slider to create a panel
auto groupsliders = ESPUI.addControl(Slider, "Slider Group", "10", Dark, grouptab, generalCallback); auto groupsliders = ESPUI.addControl(Control::Type::Slider, "Slider Group", "10", Control::Color::Dark, grouptab, generalCallback);
//Then we add a label and set its style to the clearLabelStyle. Here we've just given it the name "A" //Then we add a label and set its style to the clearLabelStyle. Here we've just given it the name "A"
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "A", None, groupsliders), clearLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "A", Control::Color::None, groupsliders), clearLabelStyle);
//We can now continue to add additional sliders and labels //We can now continue to add additional sliders and labels
ESPUI.addControl(Slider, "", "20", None, groupsliders, generalCallback); ESPUI.addControl(Control::Type::Slider, "", "20", Control::Color::None, groupsliders, generalCallback);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "B", None, groupsliders), clearLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "B", Control::Color::None, groupsliders), clearLabelStyle);
ESPUI.addControl(Slider, "", "30", None, groupsliders, generalCallback); ESPUI.addControl(Control::Type::Slider, "", "30", Control::Color::None, groupsliders, generalCallback);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "C", None, groupsliders), clearLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "C", Control::Color::None, groupsliders), clearLabelStyle);
//We can also usefully group switchers. //We can also usefully group switchers.
auto groupswitcher = ESPUI.addControl(Switcher, "Switcher Group", "0", Dark, grouptab, generalCallback); auto groupswitcher = ESPUI.addControl(Control::Type::Switcher, "Switcher Group", "0", Control::Color::Dark, grouptab, generalCallback);
ESPUI.addControl(Switcher, "", "1", Sunflower, groupswitcher, generalCallback); ESPUI.addControl(Control::Type::Switcher, "", "1", Control::Color::Sunflower, groupswitcher, generalCallback);
ESPUI.addControl(Switcher, "", "0", Sunflower, groupswitcher, generalCallback); ESPUI.addControl(Control::Type::Switcher, "", "0", Control::Color::Sunflower, groupswitcher, generalCallback);
ESPUI.addControl(Switcher, "", "1", Sunflower, groupswitcher, generalCallback); ESPUI.addControl(Control::Type::Switcher, "", "1", Control::Color::Sunflower, groupswitcher, generalCallback);
//To label these switchers we need to first go onto a "new line" below the line of switchers //To label these switchers we need to first go onto a "new line" below the line of switchers
//To do this we add an empty label set to be clear and full width (with our clearLabelStyle) //To do this we add an empty label set to be clear and full width (with our clearLabelStyle)
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "", None, groupswitcher), clearLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "", Control::Color::None, groupswitcher), clearLabelStyle);
//We will now need another label style. This one sets its width to the same as a switcher (and turns off the background) //We will now need another label style. This one sets its width to the same as a switcher (and turns off the background)
String switcherLabelStyle = "width: 60px; margin-left: .3rem; margin-right: .3rem; background-color: unset;"; String switcherLabelStyle = "width: 60px; margin-left: .3rem; margin-right: .3rem; background-color: unset;";
//We can now just add the styled labels. //We can now just add the styled labels.
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "A", None, groupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "A", Control::Color::None, groupswitcher), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "B", None, groupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "B", Control::Color::None, groupswitcher), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "C", None, groupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "C", Control::Color::None, groupswitcher), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "D", None, groupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "D", Control::Color::None, groupswitcher), switcherLabelStyle);
//You can mix and match different control types, but the results might sometimes //You can mix and match different control types, but the results might sometimes
//need additional styling to lay out nicely. //need additional styling to lay out nicely.
auto grouplabel = ESPUI.addControl(Label, "Mixed Group", "Main label", Dark, grouptab); auto grouplabel = ESPUI.addControl(Control::Type::Label, "Mixed Group", "Main label", Control::Color::Dark, grouptab);
auto grouplabel2 = ESPUI.addControl(Label, "", "Secondary label", Emerald, grouplabel); auto grouplabel2 = ESPUI.addControl(Control::Type::Label, "", "Secondary label", Control::Color::Emerald, grouplabel);
ESPUI.addControl(Button, "", "Button D", Alizarin, grouplabel, generalCallback); ESPUI.addControl(Control::Type::Button, "", "Button D", Control::Color::Alizarin, grouplabel, generalCallback);
ESPUI.addControl(Switcher, "", "1", Sunflower, grouplabel, generalCallback); ESPUI.addControl(Control::Type::Switcher, "", "1", Control::Color::Sunflower, grouplabel, generalCallback);
ESPUI.setElementStyle(grouplabel2, "font-size: x-large; font-family: serif;"); ESPUI.setElementStyle(grouplabel2, "font-size: x-large; font-family: serif;");
//Some controls can even support vertical orientation, currently Switchers and Sliders //Some controls can even support vertical orientation, currently Switchers and Sliders
ESPUI.addControl(Separator, "Vertical controls", "", None, grouptab); ESPUI.addControl(Control::Type::Separator, "Vertical controls", "", Control::Color::None, grouptab);
auto vertgroupswitcher = ESPUI.addControl(Switcher, "Vertical Switcher Group", "0", Dark, grouptab, generalCallback); auto vertgroupswitcher = ESPUI.addControl(Control::Type::Switcher, "Vertical Switcher Group", "0", Control::Color::Dark, grouptab, generalCallback);
ESPUI.setVertical(vertgroupswitcher); ESPUI.setVertical(vertgroupswitcher);
//On the following lines we wrap the value returned from addControl and send it straight to setVertical //On the following lines we wrap the value returned from addControl and send it straight to setVertical
ESPUI.setVertical(ESPUI.addControl(Switcher, "", "0", None, vertgroupswitcher, generalCallback)); ESPUI.setVertical(ESPUI.addControl(Control::Type::Switcher, "", "0", Control::Color::None, vertgroupswitcher, generalCallback));
ESPUI.setVertical(ESPUI.addControl(Switcher, "", "0", None, vertgroupswitcher, generalCallback)); ESPUI.setVertical(ESPUI.addControl(Control::Type::Switcher, "", "0", Control::Color::None, vertgroupswitcher, generalCallback));
ESPUI.setVertical(ESPUI.addControl(Switcher, "", "0", None, vertgroupswitcher, generalCallback)); ESPUI.setVertical(ESPUI.addControl(Control::Type::Switcher, "", "0", Control::Color::None, vertgroupswitcher, generalCallback));
//The mechanism for labelling vertical switchers is the same as we used above for horizontal ones //The mechanism for labelling vertical switchers is the same as we used above for horizontal ones
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "", None, vertgroupswitcher), clearLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "", Control::Color::None, vertgroupswitcher), clearLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "A", None, vertgroupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "A", Control::Color::None, vertgroupswitcher), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "B", None, vertgroupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "B", Control::Color::None, vertgroupswitcher), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "C", None, vertgroupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "C", Control::Color::None, vertgroupswitcher), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "D", None, vertgroupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "D", Control::Color::None, vertgroupswitcher), switcherLabelStyle);
auto vertgroupslider = ESPUI.addControl(Slider, "Vertical Slider Group", "15", Dark, grouptab, generalCallback); auto vertgroupslider = ESPUI.addControl(Control::Type::Slider, "Vertical Slider Group", "15", Control::Color::Dark, grouptab, generalCallback);
ESPUI.setVertical(vertgroupslider); ESPUI.setVertical(vertgroupslider);
ESPUI.setVertical(ESPUI.addControl(Slider, "", "25", None, vertgroupslider, generalCallback)); ESPUI.setVertical(ESPUI.addControl(Control::Type::Slider, "", "25", Control::Color::None, vertgroupslider, generalCallback));
ESPUI.setVertical(ESPUI.addControl(Slider, "", "35", None, vertgroupslider, generalCallback)); ESPUI.setVertical(ESPUI.addControl(Control::Type::Slider, "", "35", Control::Color::None, vertgroupslider, generalCallback));
ESPUI.setVertical(ESPUI.addControl(Slider, "", "45", None, vertgroupslider, generalCallback)); ESPUI.setVertical(ESPUI.addControl(Control::Type::Slider, "", "45", Control::Color::None, vertgroupslider, generalCallback));
//The mechanism for labelling vertical sliders is the same as we used above for switchers //The mechanism for labelling vertical sliders is the same as we used above for switchers
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "", None, vertgroupslider), clearLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "", Control::Color::None, vertgroupslider), clearLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "A", None, vertgroupslider), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "A", Control::Color::None, vertgroupslider), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "B", None, vertgroupslider), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "B", Control::Color::None, vertgroupslider), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "C", None, vertgroupslider), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "C", Control::Color::None, vertgroupslider), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "D", None, vertgroupslider), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "D", Control::Color::None, vertgroupslider), switcherLabelStyle);
//Note that combining vertical and horizontal sliders is going to result in very messy layout! //Note that combining vertical and horizontal sliders is going to result in very messy layout!
@ -263,29 +263,29 @@ void setUpUI() {
* Tab: Example UI * Tab: Example UI
* An example UI for the documentation * An example UI for the documentation
*-----------------------------------------------------------------------------------------------------------*/ *-----------------------------------------------------------------------------------------------------------*/
auto exampletab = ESPUI.addControl(Tab, "Example", "Example"); auto exampletab = ESPUI.addControl(Control::Type::Tab, "Example", "Example");
ESPUI.addControl(Separator, "Control and Status", "", None, exampletab); ESPUI.addControl(Control::Type::Separator, "Control and Status", "", Control::Color::None, exampletab);
ESPUI.addControl(Switcher, "Power", "1", Alizarin, exampletab, generalCallback); ESPUI.addControl(Control::Type::Switcher, "Power", "1", Control::Color::Alizarin, exampletab, generalCallback);
ESPUI.addControl(Label, "Status", "System status: OK", Wetasphalt, exampletab, generalCallback); ESPUI.addControl(Control::Type::Label, "Status", "System status: OK", Control::Color::Wetasphalt, exampletab, generalCallback);
ESPUI.addControl(Separator, "Settings", "", None, exampletab); ESPUI.addControl(Control::Type::Separator, "Settings", "", Control::Color::None, exampletab);
ESPUI.addControl(PadWithCenter, "Attitude Control", "", Dark, exampletab, generalCallback); ESPUI.addControl(Control::Type::PadWithCenter, "Attitude Control", "", Control::Color::Dark, exampletab, generalCallback);
auto examplegroup1 = ESPUI.addControl(Button, "Activate Features", "Feature A", Carrot, exampletab, generalCallback); auto examplegroup1 = ESPUI.addControl(Control::Type::Button, "Activate Features", "Feature A", Control::Color::Carrot, exampletab, generalCallback);
ESPUI.addControl(Button, "Activate Features", "Feature B", Carrot, examplegroup1, generalCallback); ESPUI.addControl(Control::Type::Button, "Activate Features", "Feature B", Control::Color::Carrot, examplegroup1, generalCallback);
ESPUI.addControl(Button, "Activate Features", "Feature C", Carrot, examplegroup1, generalCallback); ESPUI.addControl(Control::Type::Button, "Activate Features", "Feature C", Control::Color::Carrot, examplegroup1, generalCallback);
ESPUI.addControl(Slider, "Value control", "45", Peterriver, exampletab, generalCallback); ESPUI.addControl(Control::Type::Slider, "Value control", "45", Control::Color::Peterriver, exampletab, generalCallback);
/* /*
* Tab: WiFi Credentials * Tab: WiFi Credentials
* You use this tab to enter the SSID and password of a wifi network to autoconnect to. * You use this tab to enter the SSID and password of a wifi network to autoconnect to.
*-----------------------------------------------------------------------------------------------------------*/ *-----------------------------------------------------------------------------------------------------------*/
auto wifitab = ESPUI.addControl(Tab, "", "WiFi Credentials"); auto wifitab = ESPUI.addControl(Control::Type::Tab, "", "WiFi Credentials");
wifi_ssid_text = ESPUI.addControl(Text, "SSID", "", Alizarin, wifitab, textCallback); wifi_ssid_text = ESPUI.addControl(Control::Type::Text, "SSID", "", Control::Color::Alizarin, wifitab, textCallback);
//Note that adding a "Max" control to a text control sets the max length //Note that adding a "Max" control to a text control sets the max length
ESPUI.addControl(Max, "", "32", None, wifi_ssid_text); ESPUI.addControl(Control::Type::Max, "", "32", Control::Color::None, wifi_ssid_text);
wifi_pass_text = ESPUI.addControl(Text, "Password", "", Alizarin, wifitab, textCallback); wifi_pass_text = ESPUI.addControl(Control::Type::Text, "Password", "", Control::Color::Alizarin, wifitab, textCallback);
ESPUI.addControl(Max, "", "64", None, wifi_pass_text); ESPUI.addControl(Control::Type::Max, "", "64", Control::Color::None, wifi_pass_text);
ESPUI.addControl(Button, "Save", "Save", Peterriver, wifitab, enterWifiDetailsCallback); ESPUI.addControl(Control::Type::Button, "Save", "Save", Control::Color::Peterriver, wifitab, enterWifiDetailsCallback);
//Finally, start up the UI. //Finally, start up the UI.

200
examples/completeLambda/completeLambda.ino
View File

@ -36,7 +36,7 @@
#ifndef CORE_MOCK #ifndef CORE_MOCK
#ifndef MMU_IRAM_HEAP #ifndef MMU_IRAM_HEAP
#warning Try MMU option '2nd heap shared' in 'tools' IDE menu (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#option-summary) #warning Try MMU option '2nd heap shared' in 'tools' IDE menu (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#option-summary)
#warning use decorators: { HeapSelectIram doAllocationsInIRAM; ESPUI.addControl(...) ... } (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#how-to-select-heap) #warning use decorators: { HeapSelectIram doAllocationsInIRAM; ESPUI.addControl(Control::Type::...) ... } (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#how-to-select-heap)
#warning then check http://<ip>/heap #warning then check http://<ip>/heap
#endif // MMU_IRAM_HEAP #endif // MMU_IRAM_HEAP
#ifndef DEBUG_ESP_OOM #ifndef DEBUG_ESP_OOM
@ -92,37 +92,37 @@ void setUpUI() {
* Tab: Basic Controls * Tab: Basic Controls
* This tab contains all the basic ESPUI controls, and shows how to read and update them at runtime. * This tab contains all the basic ESPUI controls, and shows how to read and update them at runtime.
*-----------------------------------------------------------------------------------------------------------*/ *-----------------------------------------------------------------------------------------------------------*/
auto maintab = ESPUI.addControl(Tab, "", "Basic controls"); auto maintab = ESPUI.addControl(Control::Type::Tab, "", "Basic controls");
ESPUI.addControl(Separator, "General controls", "", None, maintab); ESPUI.addControl(Control::Type::Separator, "General controls", "", Control::Color::None, maintab);
ESPUI.addControl(Button, "Button", "Button 1", Alizarin, maintab, [](Control *sender, int type){ paramCallback(sender, type, 19); }); ESPUI.addControl(Control::Type::Button, "Button", "Button 1", Control::Color::Alizarin, maintab, [](Control *sender, int type){ paramCallback(sender, type, 19); });
mainLabel = ESPUI.addControl(Label, "Label", "Label text", Emerald, maintab, generalCallback); mainLabel = ESPUI.addControl(Control::Type::Label, "Label", "Label text", Control::Color::Emerald, maintab, generalCallback);
mainSwitcher = ESPUI.addControl(Switcher, "Switcher", "", Sunflower, maintab, generalCallback); mainSwitcher = ESPUI.addControl(Control::Type::Switcher, "Switcher", "", Control::Color::Sunflower, maintab, generalCallback);
//Sliders default to being 0 to 100, but if you want different limits you can add a Min and Max control //Sliders default to being 0 to 100, but if you want different limits you can add a Min and Max control
mainSlider = ESPUI.addControl(Slider, "Slider", "200", Turquoise, maintab, generalCallback); mainSlider = ESPUI.addControl(Control::Type::Slider, "Slider", "200", Control::Color::Turquoise, maintab, generalCallback);
ESPUI.addControl(Min, "", "10", None, mainSlider); ESPUI.addControl(Control::Type::Min, "", "10", Control::Color::None, mainSlider);
ESPUI.addControl(Max, "", "400", None, mainSlider); ESPUI.addControl(Control::Type::Max, "", "400", Control::Color::None, mainSlider);
//These are the values for the selector's options. (Note that they *must* be declared static //These are the values for the selector's options. (Note that they *must* be declared static
//so that the storage is allocated in global memory and not just on the stack of this function.) //so that the storage is allocated in global memory and not just on the stack of this function.)
static String optionValues[] {"Value 1", "Value 2", "Value 3", "Value 4", "Value 5"}; static String optionValues[] {"Value 1", "Value 2", "Value 3", "Value 4", "Value 5"};
auto mainselector = ESPUI.addControl(Select, "Selector", "Selector", Wetasphalt, maintab, generalCallback); auto mainselector = ESPUI.addControl(Control::Type::Select, "Selector", "Selector", Control::Color::Wetasphalt, maintab, generalCallback);
for(auto const& v : optionValues) { for(auto const& v : optionValues) {
ESPUI.addControl(Option, v.c_str(), v, None, mainselector); ESPUI.addControl(Control::Type::Option, v.c_str(), v, Control::Color::None, mainselector);
} }
mainText = ESPUI.addControl(Text, "Text Input", "Initial value", Alizarin, maintab, generalCallback); mainText = ESPUI.addControl(Control::Type::Text, "Text Input", "Initial value", Control::Color::Alizarin, maintab, generalCallback);
//Number inputs also accept Min and Max components, but you should still validate the values. //Number inputs also accept Min and Max components, but you should still validate the values.
mainNumber = ESPUI.addControl(Number, "Number Input", "42", Emerald, maintab, generalCallback); mainNumber = ESPUI.addControl(Control::Type::Number, "Number Input", "42", Control::Color::Emerald, maintab, generalCallback);
ESPUI.addControl(Min, "", "10", None, mainNumber); ESPUI.addControl(Control::Type::Min, "", "10", Control::Color::None, mainNumber);
ESPUI.addControl(Max, "", "50", None, mainNumber); ESPUI.addControl(Control::Type::Max, "", "50", Control::Color::None, mainNumber);
ESPUI.addControl(Separator, "Updates", "", None, maintab); ESPUI.addControl(Control::Type::Separator, "Updates", "", Control::Color::None, maintab);
//This button will update all the updatable controls on this tab to random values //This button will update all the updatable controls on this tab to random values
mainScrambleButton = ESPUI.addControl(Button, "Scramble Values", "Scramble Values", Carrot, maintab, mainScrambleButton = ESPUI.addControl(Control::Type::Button, "Scramble Values", "Scramble Values", Control::Color::Carrot, maintab,
//This callback updates the "values" of a bunch of controls //This callback updates the "values" of a bunch of controls
[](Control *sender, int type) { [](Control *sender, int type) {
static char rndString1[10]; static char rndString1[10];
@ -145,38 +145,38 @@ void setUpUI() {
} }
}); });
ESPUI.addControl(Switcher, "Constant updates", "0", Carrot, maintab, ESPUI.addControl(Control::Type::Switcher, "Constant updates", "0", Control::Color::Carrot, maintab,
[](Control *sender, int type) { [](Control *sender, int type) {
updates = (sender->value.toInt() > 0); updates = (sender->value.toInt() > 0);
}); });
mainTime = ESPUI.addControl(Time, "", "", None, 0, generalCallback); mainTime = ESPUI.addControl(Control::Type::Time, "", "", Control::Color::None, 0, generalCallback);
ESPUI.addControl(Button, "Get Time", "Get Time", Carrot, maintab, ESPUI.addControl(Control::Type::Button, "Get Time", "Get Time", Control::Color::Carrot, maintab,
[](Control *sender, int type) { [](Control *sender, int type) {
if(type == B_UP) { if(type == B_UP) {
ESPUI.updateTime(mainTime); ESPUI.updateTime(mainTime);
} }
}); });
ESPUI.addControl(Separator, "Control Pads", "", None, maintab); ESPUI.addControl(Control::Type::Separator, "Control Pads", "", Control::Color::None, maintab);
ESPUI.addControl(Pad, "Normal", "", Peterriver, maintab, generalCallback); ESPUI.addControl(Control::Type::Pad, "Normal", "", Control::Color::Peterriver, maintab, generalCallback);
ESPUI.addControl(PadWithCenter, "With center", "", Peterriver, maintab, generalCallback); ESPUI.addControl(Control::Type::PadWithCenter, "With center", "", Control::Color::Peterriver, maintab, generalCallback);
/* /*
* Tab: Colours * Tab: Colours
* This tab shows all the basic colours * This tab shows all the basic colours
*-----------------------------------------------------------------------------------------------------------*/ *-----------------------------------------------------------------------------------------------------------*/
auto colourtab = ESPUI.addControl(Tab, "", "Colours"); auto colourtab = ESPUI.addControl(Control::Type::Tab, "", "Colours");
ESPUI.addControl(Button, "Alizarin", "Alizarin", Alizarin, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Alizarin", "Alizarin", Control::Color::Alizarin, colourtab, generalCallback);
ESPUI.addControl(Button, "Turquoise", "Turquoise", Turquoise, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Turquoise", "Turquoise", Control::Color::Turquoise, colourtab, generalCallback);
ESPUI.addControl(Button, "Emerald", "Emerald", Emerald, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Emerald", "Emerald", Control::Color::Emerald, colourtab, generalCallback);
ESPUI.addControl(Button, "Peterriver", "Peterriver", Peterriver, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Peterriver", "Peterriver", Control::Color::Peterriver, colourtab, generalCallback);
ESPUI.addControl(Button, "Wetasphalt", "Wetasphalt", Wetasphalt, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Wetasphalt", "Wetasphalt", Control::Color::Wetasphalt, colourtab, generalCallback);
ESPUI.addControl(Button, "Sunflower", "Sunflower", Sunflower, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Sunflower", "Sunflower", Control::Color::Sunflower, colourtab, generalCallback);
ESPUI.addControl(Button, "Carrot", "Carrot", Carrot, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Carrot", "Carrot", Control::Color::Carrot, colourtab, generalCallback);
ESPUI.addControl(Button, "Dark", "Dark", Dark, colourtab, generalCallback); ESPUI.addControl(Control::Type::Button, "Dark", "Dark", Control::Color::Dark, colourtab, generalCallback);
/* /*
@ -184,14 +184,14 @@ void setUpUI() {
* This tab shows off how inline CSS styles can be applied to elements and panels in order * This tab shows off how inline CSS styles can be applied to elements and panels in order
* to customise the look of the UI. * to customise the look of the UI.
*-----------------------------------------------------------------------------------------------------------*/ *-----------------------------------------------------------------------------------------------------------*/
auto styletab = ESPUI.addControl(Tab, "", "Styled controls"); auto styletab = ESPUI.addControl(Control::Type::Tab, "", "Styled controls");
styleButton = ESPUI.addControl(Button, "Styled Button", "Button", Alizarin, styletab, generalCallback); styleButton = ESPUI.addControl(Control::Type::Button, "Styled Button", "Button", Control::Color::Alizarin, styletab, generalCallback);
styleLabel = ESPUI.addControl(Label, "Styled Label", "This is a label", Alizarin, styletab, generalCallback); styleLabel = ESPUI.addControl(Control::Type::Label, "Styled Label", "This is a label", Control::Color::Alizarin, styletab, generalCallback);
styleSwitcher = ESPUI.addControl(Switcher, "Styled Switcher", "1", Alizarin, styletab, generalCallback); styleSwitcher = ESPUI.addControl(Control::Type::Switcher, "Styled Switcher", "1", Control::Color::Alizarin, styletab, generalCallback);
styleSlider = ESPUI.addControl(Slider, "Styled Slider", "0", Alizarin, styletab, generalCallback); styleSlider = ESPUI.addControl(Control::Type::Slider, "Styled Slider", "0", Control::Color::Alizarin, styletab, generalCallback);
//This button will randomise the colours of the above controls to show updating of inline styles //This button will randomise the colours of the above controls to show updating of inline styles
ESPUI.addControl(Button, "Randomise Colours", "Randomise Colours", Sunflower, styletab, ESPUI.addControl(Control::Type::Button, "Randomise Colours", "Randomise Colours", Control::Color::Sunflower, styletab,
//This callback generates and applies inline styles to a bunch of controls to change their colour. //This callback generates and applies inline styles to a bunch of controls to change their colour.
//The styles created are of the form: //The styles created are of the form:
// "border-bottom: #999 3px solid; background-color: #aabbcc;" // "border-bottom: #999 3px solid; background-color: #aabbcc;"
@ -218,15 +218,15 @@ void setUpUI() {
} }
}); });
ESPUI.addControl(Separator, "Other styling examples", "", None, styletab); ESPUI.addControl(Control::Type::Separator, "Other styling examples", "", Control::Color::None, styletab);
styleButton2 = ESPUI.addControl(Button, "Styled Button", "Button", Alizarin, styletab, generalCallback); styleButton2 = ESPUI.addControl(Control::Type::Button, "Styled Button", "Button", Control::Color::Alizarin, styletab, generalCallback);
ESPUI.setPanelStyle(styleButton2, "background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); border-bottom: #555;"); ESPUI.setPanelStyle(styleButton2, "background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); border-bottom: #555;");
ESPUI.setElementStyle(styleButton2, "border-radius: 2em; border: 3px solid black; width: 30%; background-color: #8df;"); ESPUI.setElementStyle(styleButton2, "border-radius: 2em; border: 3px solid black; width: 30%; background-color: #8df;");
styleSlider2 = ESPUI.addControl(Slider, "Styled Slider", "0", Dark, styletab, generalCallback); styleSlider2 = ESPUI.addControl(Control::Type::Slider, "Styled Slider", "0", Control::Color::Dark, styletab, generalCallback);
ESPUI.setElementStyle(styleSlider2, "background: linear-gradient(to right, red, orange, yellow, green, blue);"); ESPUI.setElementStyle(styleSlider2, "background: linear-gradient(to right, red, orange, yellow, green, blue);");
styleLabel2 = ESPUI.addControl(Label, "Styled Label", "This is a label", Dark, styletab, generalCallback); styleLabel2 = ESPUI.addControl(Control::Type::Label, "Styled Label", "This is a label", Control::Color::Dark, styletab, generalCallback);
ESPUI.setElementStyle(styleLabel2, "text-shadow: 3px 3px #74b1ff, 6px 6px #c64ad7; font-size: 60px; font-variant-caps: small-caps; background-color: unset; color: #c4f0bb; -webkit-text-stroke: 1px black;"); ESPUI.setElementStyle(styleLabel2, "text-shadow: 3px 3px #74b1ff, 6px 6px #c64ad7; font-size: 60px; font-variant-caps: small-caps; background-color: unset; color: #c4f0bb; -webkit-text-stroke: 1px black;");
@ -235,14 +235,14 @@ void setUpUI() {
* This tab shows how multiple control can be grouped into the same panel through the use of the * This tab shows how multiple control can be grouped into the same panel through the use of the
* parentControl value. This also shows how to add labels to grouped controls, and how to use vertical controls. * parentControl value. This also shows how to add labels to grouped controls, and how to use vertical controls.
*-----------------------------------------------------------------------------------------------------------*/ *-----------------------------------------------------------------------------------------------------------*/
auto grouptab = ESPUI.addControl(Tab, "", "Grouped controls"); auto grouptab = ESPUI.addControl(Control::Type::Tab, "", "Grouped controls");
//The parent of this button is a tab, so it will create a new panel with one control. //The parent of this button is a tab, so it will create a new panel with one control.
auto groupbutton = ESPUI.addControl(Button, "Button Group", "Button A", Dark, grouptab, generalCallback); auto groupbutton = ESPUI.addControl(Control::Type::Button, "Button Group", "Button A", Control::Color::Dark, grouptab, generalCallback);
//However the parent of this button is another control, so therefore no new panel is //However the parent of this button is another control, so therefore no new panel is
//created and the button is added to the existing panel. //created and the button is added to the existing panel.
ESPUI.addControl(Button, "", "Button B", Alizarin, groupbutton, generalCallback); ESPUI.addControl(Control::Type::Button, "", "Button B", Control::Color::Alizarin, groupbutton, generalCallback);
ESPUI.addControl(Button, "", "Button C", Alizarin, groupbutton, generalCallback); ESPUI.addControl(Control::Type::Button, "", "Button C", Control::Color::Alizarin, groupbutton, generalCallback);
//Sliders can be grouped as well //Sliders can be grouped as well
@ -250,65 +250,65 @@ void setUpUI() {
//We need this CSS style rule, which will remove the label's background and ensure that it takes up the entire width of the panel //We need this CSS style rule, which will remove the label's background and ensure that it takes up the entire width of the panel
String clearLabelStyle = "background-color: unset; width: 100%;"; String clearLabelStyle = "background-color: unset; width: 100%;";
//First we add the main slider to create a panel //First we add the main slider to create a panel
auto groupsliders = ESPUI.addControl(Slider, "Slider Group", "10", Dark, grouptab, generalCallback); auto groupsliders = ESPUI.addControl(Control::Type::Slider, "Slider Group", "10", Control::Color::Dark, grouptab, generalCallback);
//Then we add a label and set its style to the clearLabelStyle. Here we've just given it the name "A" //Then we add a label and set its style to the clearLabelStyle. Here we've just given it the name "A"
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "A", None, groupsliders), clearLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "A", Control::Color::None, groupsliders), clearLabelStyle);
//We can now continue to add additional sliders and labels //We can now continue to add additional sliders and labels
ESPUI.addControl(Slider, "", "20", None, groupsliders, generalCallback); ESPUI.addControl(Control::Type::Slider, "", "20", Control::Color::None, groupsliders, generalCallback);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "B", None, groupsliders), clearLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "B", Control::Color::None, groupsliders), clearLabelStyle);
ESPUI.addControl(Slider, "", "30", None, groupsliders, generalCallback); ESPUI.addControl(Control::Type::Slider, "", "30", Control::Color::None, groupsliders, generalCallback);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "C", None, groupsliders), clearLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "C", Control::Color::None, groupsliders), clearLabelStyle);
//We can also usefully group switchers. //We can also usefully group switchers.
auto groupswitcher = ESPUI.addControl(Switcher, "Switcher Group", "0", Dark, grouptab, generalCallback); auto groupswitcher = ESPUI.addControl(Control::Type::Switcher, "Switcher Group", "0", Control::Color::Dark, grouptab, generalCallback);
ESPUI.addControl(Switcher, "", "1", Sunflower, groupswitcher, generalCallback); ESPUI.addControl(Control::Type::Switcher, "", "1", Control::Color::Sunflower, groupswitcher, generalCallback);
ESPUI.addControl(Switcher, "", "0", Sunflower, groupswitcher, generalCallback); ESPUI.addControl(Control::Type::Switcher, "", "0", Control::Color::Sunflower, groupswitcher, generalCallback);
ESPUI.addControl(Switcher, "", "1", Sunflower, groupswitcher, generalCallback); ESPUI.addControl(Control::Type::Switcher, "", "1", Control::Color::Sunflower, groupswitcher, generalCallback);
//To label these switchers we need to first go onto a "new line" below the line of switchers //To label these switchers we need to first go onto a "new line" below the line of switchers
//To do this we add an empty label set to be clear and full width (with our clearLabelStyle) //To do this we add an empty label set to be clear and full width (with our clearLabelStyle)
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "", None, groupswitcher), clearLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "", Control::Color::None, groupswitcher), clearLabelStyle);
//We will now need another label style. This one sets its width to the same as a switcher (and turns off the background) //We will now need another label style. This one sets its width to the same as a switcher (and turns off the background)
String switcherLabelStyle = "width: 60px; margin-left: .3rem; margin-right: .3rem; background-color: unset;"; String switcherLabelStyle = "width: 60px; margin-left: .3rem; margin-right: .3rem; background-color: unset;";
//We can now just add the styled labels. //We can now just add the styled labels.
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "A", None, groupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "A", Control::Color::None, groupswitcher), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "B", None, groupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "B", Control::Color::None, groupswitcher), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "C", None, groupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "C", Control::Color::None, groupswitcher), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "D", None, groupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "D", Control::Color::None, groupswitcher), switcherLabelStyle);
//You can mix and match different control types, but the results might sometimes //You can mix and match different control types, but the results might sometimes
//need additional styling to lay out nicely. //need additional styling to lay out nicely.
auto grouplabel = ESPUI.addControl(Label, "Mixed Group", "Main label", Dark, grouptab); auto grouplabel = ESPUI.addControl(Control::Type::Label, "Mixed Group", "Main label", Control::Color::Dark, grouptab);
auto grouplabel2 = ESPUI.addControl(Label, "", "Secondary label", Emerald, grouplabel); auto grouplabel2 = ESPUI.addControl(Control::Type::Label, "", "Secondary label", Control::Color::Emerald, grouplabel);
ESPUI.addControl(Button, "", "Button D", Alizarin, grouplabel, generalCallback); ESPUI.addControl(Control::Type::Button, "", "Button D", Control::Color::Alizarin, grouplabel, generalCallback);
ESPUI.addControl(Switcher, "", "1", Sunflower, grouplabel, generalCallback); ESPUI.addControl(Control::Type::Switcher, "", "1", Control::Color::Sunflower, grouplabel, generalCallback);
ESPUI.setElementStyle(grouplabel2, "font-size: x-large; font-family: serif;"); ESPUI.setElementStyle(grouplabel2, "font-size: x-large; font-family: serif;");
//Some controls can even support vertical orientation, currently Switchers and Sliders //Some controls can even support vertical orientation, currently Switchers and Sliders
ESPUI.addControl(Separator, "Vertical controls", "", None, grouptab); ESPUI.addControl(Control::Type::Separator, "Vertical controls", "", Control::Color::None, grouptab);
auto vertgroupswitcher = ESPUI.addControl(Switcher, "Vertical Switcher Group", "0", Dark, grouptab, generalCallback); auto vertgroupswitcher = ESPUI.addControl(Control::Type::Switcher, "Vertical Switcher Group", "0", Control::Color::Dark, grouptab, generalCallback);
ESPUI.setVertical(vertgroupswitcher); ESPUI.setVertical(vertgroupswitcher);
//On the following lines we wrap the value returned from addControl and send it straight to setVertical //On the following lines we wrap the value returned from addControl and send it straight to setVertical
ESPUI.setVertical(ESPUI.addControl(Switcher, "", "0", None, vertgroupswitcher, generalCallback)); ESPUI.setVertical(ESPUI.addControl(Control::Type::Switcher, "", "0", Control::Color::None, vertgroupswitcher, generalCallback));
ESPUI.setVertical(ESPUI.addControl(Switcher, "", "0", None, vertgroupswitcher, generalCallback)); ESPUI.setVertical(ESPUI.addControl(Control::Type::Switcher, "", "0", Control::Color::None, vertgroupswitcher, generalCallback));
ESPUI.setVertical(ESPUI.addControl(Switcher, "", "0", None, vertgroupswitcher, generalCallback)); ESPUI.setVertical(ESPUI.addControl(Control::Type::Switcher, "", "0", Control::Color::None, vertgroupswitcher, generalCallback));
//The mechanism for labelling vertical switchers is the same as we used above for horizontal ones //The mechanism for labelling vertical switchers is the same as we used above for horizontal ones
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "", None, vertgroupswitcher), clearLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "", Control::Color::None, vertgroupswitcher), clearLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "A", None, vertgroupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "A", Control::Color::None, vertgroupswitcher), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "B", None, vertgroupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "B", Control::Color::None, vertgroupswitcher), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "C", None, vertgroupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "C", Control::Color::None, vertgroupswitcher), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "D", None, vertgroupswitcher), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "D", Control::Color::None, vertgroupswitcher), switcherLabelStyle);
auto vertgroupslider = ESPUI.addControl(Slider, "Vertical Slider Group", "15", Dark, grouptab, generalCallback); auto vertgroupslider = ESPUI.addControl(Control::Type::Slider, "Vertical Slider Group", "15", Control::Color::Dark, grouptab, generalCallback);
ESPUI.setVertical(vertgroupslider); ESPUI.setVertical(vertgroupslider);
ESPUI.setVertical(ESPUI.addControl(Slider, "", "25", None, vertgroupslider, generalCallback)); ESPUI.setVertical(ESPUI.addControl(Control::Type::Slider, "", "25", Control::Color::None, vertgroupslider, generalCallback));
ESPUI.setVertical(ESPUI.addControl(Slider, "", "35", None, vertgroupslider, generalCallback)); ESPUI.setVertical(ESPUI.addControl(Control::Type::Slider, "", "35", Control::Color::None, vertgroupslider, generalCallback));
ESPUI.setVertical(ESPUI.addControl(Slider, "", "45", None, vertgroupslider, generalCallback)); ESPUI.setVertical(ESPUI.addControl(Control::Type::Slider, "", "45", Control::Color::None, vertgroupslider, generalCallback));
//The mechanism for labelling vertical sliders is the same as we used above for switchers //The mechanism for labelling vertical sliders is the same as we used above for switchers
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "", None, vertgroupslider), clearLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "", Control::Color::None, vertgroupslider), clearLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "A", None, vertgroupslider), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "A", Control::Color::None, vertgroupslider), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "B", None, vertgroupslider), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "B", Control::Color::None, vertgroupslider), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "C", None, vertgroupslider), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "C", Control::Color::None, vertgroupslider), switcherLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "D", None, vertgroupslider), switcherLabelStyle); ESPUI.setElementStyle(ESPUI.addControl(Control::Type::Label, "", "D", Control::Color::None, vertgroupslider), switcherLabelStyle);
//Note that combining vertical and horizontal sliders is going to result in very messy layout! //Note that combining vertical and horizontal sliders is going to result in very messy layout!
@ -316,29 +316,29 @@ void setUpUI() {
* Tab: Example UI * Tab: Example UI
* An example UI for the documentation * An example UI for the documentation
*-----------------------------------------------------------------------------------------------------------*/ *-----------------------------------------------------------------------------------------------------------*/
auto exampletab = ESPUI.addControl(Tab, "Example", "Example"); auto exampletab = ESPUI.addControl(Control::Type::Tab, "Example", "Example");
ESPUI.addControl(Separator, "Control and Status", "", None, exampletab); ESPUI.addControl(Control::Type::Separator, "Control and Status", "", Control::Color::None, exampletab);
ESPUI.addControl(Switcher, "Power", "1", Alizarin, exampletab, generalCallback); ESPUI.addControl(Control::Type::Switcher, "Power", "1", Control::Color::Alizarin, exampletab, generalCallback);
ESPUI.addControl(Label, "Status", "System status: OK", Wetasphalt, exampletab, generalCallback); ESPUI.addControl(Control::Type::Label, "Status", "System status: OK", Control::Color::Wetasphalt, exampletab, generalCallback);
ESPUI.addControl(Separator, "Settings", "", None, exampletab); ESPUI.addControl(Control::Type::Separator, "Settings", "", Control::Color::None, exampletab);
ESPUI.addControl(PadWithCenter, "Attitude Control", "", Dark, exampletab, generalCallback); ESPUI.addControl(Control::Type::PadWithCenter, "Attitude Control", "", Control::Color::Dark, exampletab, generalCallback);
auto examplegroup1 = ESPUI.addControl(Button, "Activate Features", "Feature A", Carrot, exampletab, generalCallback); auto examplegroup1 = ESPUI.addControl(Control::Type::Button, "Activate Features", "Feature A", Control::Color::Carrot, exampletab, generalCallback);
ESPUI.addControl(Button, "Activate Features", "Feature B", Carrot, examplegroup1, generalCallback); ESPUI.addControl(Control::Type::Button, "Activate Features", "Feature B", Control::Color::Carrot, examplegroup1, generalCallback);
ESPUI.addControl(Button, "Activate Features", "Feature C", Carrot, examplegroup1, generalCallback); ESPUI.addControl(Control::Type::Button, "Activate Features", "Feature C", Control::Color::Carrot, examplegroup1, generalCallback);
ESPUI.addControl(Slider, "Value control", "45", Peterriver, exampletab, generalCallback); ESPUI.addControl(Control::Type::Slider, "Value control", "45", Control::Color::Peterriver, exampletab, generalCallback);
/* /*
* Tab: WiFi Credentials * Tab: WiFi Credentials
* You use this tab to enter the SSID and password of a wifi network to autoconnect to. * You use this tab to enter the SSID and password of a wifi network to autoconnect to.
*-----------------------------------------------------------------------------------------------------------*/ *-----------------------------------------------------------------------------------------------------------*/
auto wifitab = ESPUI.addControl(Tab, "", "WiFi Credentials"); auto wifitab = ESPUI.addControl(Control::Type::Tab, "", "WiFi Credentials");
wifi_ssid_text = ESPUI.addControl(Text, "SSID", "", Alizarin, wifitab, textCallback); wifi_ssid_text = ESPUI.addControl(Control::Type::Text, "SSID", "", Control::Color::Alizarin, wifitab, textCallback);
//Note that adding a "Max" control to a text control sets the max length //Note that adding a "Max" control to a text control sets the max length
ESPUI.addControl(Max, "", "32", None, wifi_ssid_text); ESPUI.addControl(Control::Type::Max, "", "32", Control::Color::None, wifi_ssid_text);
wifi_pass_text = ESPUI.addControl(Text, "Password", "", Alizarin, wifitab, textCallback); wifi_pass_text = ESPUI.addControl(Control::Type::Text, "Password", "", Control::Color::Alizarin, wifitab, textCallback);
ESPUI.addControl(Max, "", "64", None, wifi_pass_text); ESPUI.addControl(Control::Type::Max, "", "64", Control::Color::None, wifi_pass_text);
ESPUI.addControl(Button, "Save", "Save", Peterriver, wifitab, ESPUI.addControl(Control::Type::Button, "Save", "Save", Control::Color::Peterriver, wifitab,
[](Control *sender, int type) { [](Control *sender, int type) {
if(type == B_UP) { if(type == B_UP) {
Serial.println("Saving credentials to EPROM..."); Serial.println("Saving credentials to EPROM...");

36
examples/gui-generic-api/gui-generic-api.ino
View File

@ -77,7 +77,7 @@ void buttonExample(Control* sender, int type, void* param)
Serial.println("Status: Start"); Serial.println("Status: Start");
ESPUI.updateControlValue(status, "Start"); ESPUI.updateControlValue(status, "Start");
ESPUI.getControl(button1)->color = ControlColor::Carrot; ESPUI.getControl(button1)->color = Control::Color::Carrot;
ESPUI.updateControl(button1); ESPUI.updateControl(button1);
break; break;
@ -85,7 +85,7 @@ void buttonExample(Control* sender, int type, void* param)
Serial.println("Status: Stop"); Serial.println("Status: Stop");
ESPUI.updateControlValue(status, "Stop"); ESPUI.updateControlValue(status, "Stop");
ESPUI.getControl(button1)->color = ControlColor::Peterriver; ESPUI.getControl(button1)->color = Control::Color::Peterriver;
ESPUI.updateControl(button1); ESPUI.updateControl(button1);
break; break;
} }
@ -252,33 +252,33 @@ void setup(void)
{ HeapSelectIram doAllocationsInIRAM; { HeapSelectIram doAllocationsInIRAM;
#endif #endif
status = ESPUI.addControl(ControlType::Label, "Status:", "Stop", ControlColor::Turquoise); status = ESPUI.addControl(Control::Type::Label, "Status:", "Stop", Control::Color::Turquoise);
uint16_t select1 = ESPUI.addControl( uint16_t select1 = ESPUI.addControl(
ControlType::Select, "Select:", "", ControlColor::Alizarin, Control::noParent, &selectExample); Control::Type::Select, "Select:", "", Control::Color::Alizarin, Control::noParent, &selectExample);
ESPUI.addControl(ControlType::Option, "Option1", "Opt1", ControlColor::Alizarin, select1); ESPUI.addControl(Control::Type::Option, "Option1", "Opt1", Control::Color::Alizarin, select1);
ESPUI.addControl(ControlType::Option, "Option2", "Opt2", ControlColor::Alizarin, select1); ESPUI.addControl(Control::Type::Option, "Option2", "Opt2", Control::Color::Alizarin, select1);
ESPUI.addControl(ControlType::Option, "Option3", "Opt3", ControlColor::Alizarin, select1); ESPUI.addControl(Control::Type::Option, "Option3", "Opt3", Control::Color::Alizarin, select1);
ESPUI.addControl( ESPUI.addControl(
ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, Control::noParent, &textCall); Control::Type::Text, "Text Test:", "a Text Field", Control::Color::Alizarin, Control::noParent, &textCall);
millisLabelId = ESPUI.addControl(ControlType::Label, "Millis:", "0", ControlColor::Emerald, Control::noParent); millisLabelId = ESPUI.addControl(Control::Type::Label, "Millis:", "0", Control::Color::Emerald, Control::noParent);
button1 = ESPUI.addControl( button1 = ESPUI.addControl(
ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, Control::noParent, &buttonCallback); Control::Type::Button, "Push Button", "Press", Control::Color::Peterriver, Control::noParent, &buttonCallback);
ESPUI.addControl( ESPUI.addControl(
ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, Control::noParent, &buttonExample, (void*)19); Control::Type::Button, "Other Button", "Press", Control::Color::Wetasphalt, Control::noParent, &buttonExample, (void*)19);
ESPUI.addControl( ESPUI.addControl(
ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, Control::noParent, &padExample); Control::Type::PadWithCenter, "Pad with center", "", Control::Color::Sunflower, Control::noParent, &padExample);
ESPUI.addControl(ControlType::Pad, "Pad without center", "", ControlColor::Carrot, Control::noParent, &padExample); ESPUI.addControl(Control::Type::Pad, "Pad without center", "", Control::Color::Carrot, Control::noParent, &padExample);
switchOne = ESPUI.addControl( switchOne = ESPUI.addControl(
ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, Control::noParent, &switchExample); Control::Type::Switcher, "Switch one", "", Control::Color::Alizarin, Control::noParent, &switchExample);
ESPUI.addControl( ESPUI.addControl(
ControlType::Switcher, "Switch two", "", ControlColor::None, Control::noParent, &otherSwitchExample); Control::Type::Switcher, "Switch two", "", Control::Color::None, Control::noParent, &otherSwitchExample);
ESPUI.addControl(ControlType::Slider, "Slider one", "30", ControlColor::Alizarin, Control::noParent, &slider); ESPUI.addControl(Control::Type::Slider, "Slider one", "30", Control::Color::Alizarin, Control::noParent, &slider);
ESPUI.addControl(ControlType::Slider, "Slider two", "100", ControlColor::Alizarin, Control::noParent, &slider); ESPUI.addControl(Control::Type::Slider, "Slider two", "100", Control::Color::Alizarin, Control::noParent, &slider);
ESPUI.addControl(ControlType::Number, "Number:", "50", ControlColor::Alizarin, Control::noParent, &numberCall); ESPUI.addControl(Control::Type::Number, "Number:", "50", Control::Color::Alizarin, Control::noParent, &numberCall);
/* /*
* .begin loads and serves all files from PROGMEM directly. * .begin loads and serves all files from PROGMEM directly.

28
examples/gui/gui.ino
View File

@ -14,7 +14,7 @@ DNSServer dnsServer;
#ifndef CORE_MOCK #ifndef CORE_MOCK
#ifndef MMU_IRAM_HEAP #ifndef MMU_IRAM_HEAP
#warning Try MMU option '2nd heap shared' in 'tools' IDE menu (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#option-summary) #warning Try MMU option '2nd heap shared' in 'tools' IDE menu (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#option-summary)
#warning use decorators: { HeapSelectIram doAllocationsInIRAM; ESPUI.addControl(...) ... } (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#how-to-select-heap) #warning use decorators: { HeapSelectIram doAllocationsInIRAM; ESPUI.addControl(Control::Type::...) ... } (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#how-to-select-heap)
#warning then check http://<ip>/heap #warning then check http://<ip>/heap
#endif // MMU_IRAM_HEAP #endif // MMU_IRAM_HEAP
#ifndef DEBUG_ESP_OOM #ifndef DEBUG_ESP_OOM
@ -242,20 +242,20 @@ void setup(void)
{ HeapSelectIram doAllocationsInIRAM; { HeapSelectIram doAllocationsInIRAM;
#endif #endif
statusLabelId = ESPUI.label("Status:", ControlColor::Turquoise, "Stop"); statusLabelId = ESPUI.label("Status:", Control::Color::Turquoise, "Stop");
millisLabelId = ESPUI.label("Millis:", ControlColor::Emerald, "0"); millisLabelId = ESPUI.label("Millis:", Control::Color::Emerald, "0");
ESPUI.button("Push Button", &buttonCallback, ControlColor::Peterriver, "Press"); ESPUI.button("Push Button", &buttonCallback, Control::Color::Peterriver, "Press");
ESPUI.button("Other Button", &buttonExample, ControlColor::Wetasphalt, "Press", (void*)19); ESPUI.button("Other Button", &buttonExample, Control::Color::Wetasphalt, "Press", (void*)19);
ESPUI.padWithCenter("Pad with center", &padExample, ControlColor::Sunflower); ESPUI.padWithCenter("Pad with center", &padExample, Control::Color::Sunflower);
ESPUI.pad("Pad without center", &padExample, ControlColor::Carrot); ESPUI.pad("Pad without center", &padExample, Control::Color::Carrot);
testSwitchId = ESPUI.switcher("Switch one", &switchExample, ControlColor::Alizarin, false); testSwitchId = ESPUI.switcher("Switch one", &switchExample, Control::Color::Alizarin, false);
ESPUI.switcher("Switch two", &otherSwitchExample, ControlColor::None, true); ESPUI.switcher("Switch two", &otherSwitchExample, Control::Color::None, true);
ESPUI.slider("Slider one", &slider, ControlColor::Alizarin, 30); ESPUI.slider("Slider one", &slider, Control::Color::Alizarin, 30);
ESPUI.slider("Slider two", &slider, ControlColor::None, 100); ESPUI.slider("Slider two", &slider, Control::Color::None, 100);
ESPUI.text("Text Test:", &textCall, ControlColor::Alizarin, "a Text Field"); ESPUI.text("Text Test:", &textCall, Control::Color::Alizarin, "a Text Field");
ESPUI.number("Numbertest", &numberCall, ControlColor::Alizarin, 5, 0, 10); ESPUI.number("Numbertest", &numberCall, Control::Color::Alizarin, 5, 0, 10);
graphId = ESPUI.graph("Graph Test", ControlColor::Wetasphalt); graphId = ESPUI.graph("Graph Test", Control::Color::Wetasphalt);
/* /*
* .begin loads and serves all files from PROGMEM directly. * .begin loads and serves all files from PROGMEM directly.

42
examples/tabbedGui/tabbedGui.ino
View File

@ -76,7 +76,7 @@ void buttonExample(Control* sender, int type, void* param)
Serial.println("Status: Start"); Serial.println("Status: Start");
ESPUI.updateControlValue(status, "Start"); ESPUI.updateControlValue(status, "Start");
ESPUI.getControl(button1)->color = ControlColor::Carrot; ESPUI.getControl(button1)->color = Control::Color::Carrot;
ESPUI.updateControl(button1); ESPUI.updateControl(button1);
break; break;
@ -84,7 +84,7 @@ void buttonExample(Control* sender, int type, void* param)
Serial.println("Status: Stop"); Serial.println("Status: Stop");
ESPUI.updateControlValue(status, "Stop"); ESPUI.updateControlValue(status, "Stop");
ESPUI.getControl(button1)->color = ControlColor::Peterriver; ESPUI.getControl(button1)->color = Control::Color::Peterriver;
ESPUI.updateControl(button1); ESPUI.updateControl(button1);
break; break;
} }
@ -250,33 +250,33 @@ void setup(void)
{ HeapSelectIram doAllocationsInIRAM; { HeapSelectIram doAllocationsInIRAM;
#endif #endif
uint16_t tab1 = ESPUI.addControl(ControlType::Tab, "Settings 1", "Settings 1"); uint16_t tab1 = ESPUI.addControl(Control::Type::Tab, "Settings 1", "Settings 1");
uint16_t tab2 = ESPUI.addControl(ControlType::Tab, "Settings 2", "Settings 2"); uint16_t tab2 = ESPUI.addControl(Control::Type::Tab, "Settings 2", "Settings 2");
uint16_t tab3 = ESPUI.addControl(ControlType::Tab, "Settings 3", "Settings 3"); uint16_t tab3 = ESPUI.addControl(Control::Type::Tab, "Settings 3", "Settings 3");
// shown above all tabs // shown above all tabs
status = ESPUI.addControl(ControlType::Label, "Status:", "Stop", ControlColor::Turquoise); status = ESPUI.addControl(Control::Type::Label, "Status:", "Stop", Control::Color::Turquoise);
uint16_t select1 uint16_t select1
= ESPUI.addControl(ControlType::Select, "Select:", "", ControlColor::Alizarin, tab1, &selectExample); = ESPUI.addControl(Control::Type::Select, "Select:", "", Control::Color::Alizarin, tab1, &selectExample);
ESPUI.addControl(ControlType::Option, "Option1", "Opt1", ControlColor::Alizarin, select1); ESPUI.addControl(Control::Type::Option, "Option1", "Opt1", Control::Color::Alizarin, select1);
ESPUI.addControl(ControlType::Option, "Option2", "Opt2", ControlColor::Alizarin, select1); ESPUI.addControl(Control::Type::Option, "Option2", "Opt2", Control::Color::Alizarin, select1);
ESPUI.addControl(ControlType::Option, "Option3", "Opt3", ControlColor::Alizarin, select1); ESPUI.addControl(Control::Type::Option, "Option3", "Opt3", Control::Color::Alizarin, select1);
ESPUI.addControl(ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, tab1, &textCall); ESPUI.addControl(Control::Type::Text, "Text Test:", "a Text Field", Control::Color::Alizarin, tab1, &textCall);
// tabbed controls // tabbed controls
ESPUI.addControl(ControlType::Label, "Millis:", "0", ControlColor::Emerald, tab1); ESPUI.addControl(Control::Type::Label, "Millis:", "0", Control::Color::Emerald, tab1);
button1 = ESPUI.addControl( button1 = ESPUI.addControl(
ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, tab1, &buttonCallback); Control::Type::Button, "Push Button", "Press", Control::Color::Peterriver, tab1, &buttonCallback);
ESPUI.addControl(ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, tab1, &buttonExample, (void*)19); ESPUI.addControl(Control::Type::Button, "Other Button", "Press", Control::Color::Wetasphalt, tab1, &buttonExample, (void*)19);
ESPUI.addControl(ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, tab2, &padExample); ESPUI.addControl(Control::Type::PadWithCenter, "Pad with center", "", Control::Color::Sunflower, tab2, &padExample);
ESPUI.addControl(ControlType::Pad, "Pad without center", "", ControlColor::Carrot, tab3, &padExample); ESPUI.addControl(Control::Type::Pad, "Pad without center", "", Control::Color::Carrot, tab3, &padExample);
switchOne = ESPUI.addControl(ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, tab3, &switchExample); switchOne = ESPUI.addControl(Control::Type::Switcher, "Switch one", "", Control::Color::Alizarin, tab3, &switchExample);
ESPUI.addControl(ControlType::Switcher, "Switch two", "", ControlColor::None, tab3, &otherSwitchExample); ESPUI.addControl(Control::Type::Switcher, "Switch two", "", Control::Color::None, tab3, &otherSwitchExample);
ESPUI.addControl(ControlType::Slider, "Slider one", "30", ControlColor::Alizarin, tab1, &slider); ESPUI.addControl(Control::Type::Slider, "Slider one", "30", Control::Color::Alizarin, tab1, &slider);
ESPUI.addControl(ControlType::Slider, "Slider two", "100", ControlColor::Alizarin, tab3, &slider); ESPUI.addControl(Control::Type::Slider, "Slider two", "100", Control::Color::Alizarin, tab3, &slider);
ESPUI.addControl(ControlType::Number, "Number:", "50", ControlColor::Alizarin, tab3, &numberCall); ESPUI.addControl(Control::Type::Number, "Number:", "50", Control::Color::Alizarin, tab3, &numberCall);
/* /*
* .begin loads and serves all files from PROGMEM directly. * .begin loads and serves all files from PROGMEM directly.

9
pio_examples/gui/platformio.ini
View File

@ -17,10 +17,8 @@ framework = arduino
board_build.filesystem = littlefs board_build.filesystem = littlefs
lib_extra_dirs = ../../ lib_extra_dirs = ../../
lib_deps = lib_deps =
; bblanchon/ArduinoJson @ ^6.18.5
bblanchon/ArduinoJson @ ^7.0.4 bblanchon/ArduinoJson @ ^7.0.4
https://github.com/bmedici/ESPAsyncWebServer ; Use a fork of the library that has a bugfix for the compile.... https://github.com/esphome/ESPAsyncWebServer/pull/17 https://github.com/bmedici/ESPAsyncWebServer ; Use a fork of the library that has a bugfix for the compile.... https://github.com/esphome/ESPAsyncWebServer/pull/17
lib_ignore = lib_ignore =
ESP Async WebServer ; force the use of the esphome version ESP Async WebServer ; force the use of the esphome version
AsyncTCP ; force the use of the esphome version AsyncTCP ; force the use of the esphome version
@ -36,6 +34,8 @@ board = nodemcuv2
upload_port = COM8 upload_port = COM8
monitor_port = COM8 monitor_port = COM8
monitor_speed = 115200 monitor_speed = 115200
build_flags =
; -D DEBUG_ESPUI
[env:esp32] [env:esp32]
platform = espressif32 platform = espressif32
@ -44,10 +44,9 @@ monitor_filters = esp32_exception_decoder
board_build.flash_mode = dout board_build.flash_mode = dout
build_flags = build_flags =
; -D DEBUG_ESPUI ; -D DEBUG_ESPUI
lib_deps = lib_deps =
${env.lib_deps} ${env.lib_deps}
me-no-dev/AsyncTCP me-no-dev/AsyncTCP
upload_port = COM6 upload_port = COM10
monitor_port = COM6 monitor_port = COM10
monitor_speed = 115200 monitor_speed = 115200

31
pio_examples/gui/src/gui.ino
View File

@ -172,6 +172,7 @@ void setup(void)
ESPUI.setVerbosity(Verbosity::VerboseJSON); ESPUI.setVerbosity(Verbosity::VerboseJSON);
Serial.begin(115200); Serial.begin(115200);
memset(HugeText, 0x0, sizeof(HugeText)); memset(HugeText, 0x0, sizeof(HugeText));
memset(HugeText, 'a', sizeof(HugeText)-1); memset(HugeText, 'a', sizeof(HugeText)-1);
@ -237,26 +238,26 @@ void setup(void)
Serial.print("IP address: "); Serial.print("IP address: ");
Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP()); Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());
statusLabelId = ESPUI.label("Status:", ControlColor::Turquoise, "Stop"); statusLabelId = ESPUI.label("Status:", Control::Color::Turquoise, "Stop");
millisLabelId = ESPUI.label("Millis:", ControlColor::Emerald, "0"); millisLabelId = ESPUI.label("Millis:",Control::Color::Emerald, "0");
ESPUI.button("Push Button", &buttonCallback, ControlColor::Peterriver, "Press"); ESPUI.button("Push Button", &buttonCallback,Control::Color::Peterriver, "Press");
ESPUI.button("Other Button", &buttonExample, ControlColor::Wetasphalt, "Press", (void*)19); ESPUI.button("Other Button", &buttonExample,Control::Color::Wetasphalt, "Press", (void*)19);
ESPUI.padWithCenter("Pad with center", &padExample, ControlColor::Sunflower); ESPUI.padWithCenter("Pad with center", &padExample,Control::Color::Sunflower);
ESPUI.pad("Pad without center", &padExample, ControlColor::Carrot); ESPUI.pad("Pad without center", &padExample,Control::Color::Carrot);
testSwitchId = ESPUI.switcher("Switch one", &switchExample, ControlColor::Alizarin, false); testSwitchId = ESPUI.switcher("Switch one", &switchExample,Control::Color::Alizarin, false);
ESPUI.switcher("Switch two", &otherSwitchExample, ControlColor::None, true); ESPUI.switcher("Switch two", &otherSwitchExample,Control::Color::None, true);
ESPUI.slider("Slider one", &slider, ControlColor::Alizarin, 30, 0, 30); ESPUI.slider("Slider one", &slider,Control::Color::Alizarin, 30, 0, 30);
ESPUI.slider("Slider two", &slider, ControlColor::None, 100); ESPUI.slider("Slider two", &slider,Control::Color::None, 100);
ESPUI.text("Text Test:", &textCall, ControlColor::Alizarin, "a Text Field"); ESPUI.text("Text Test:", &textCall,Control::Color::Alizarin, "a Text Field");
ESPUI.text("Huge Text Test:", &textCall, ControlColor::Alizarin, HugeText); ESPUI.text("Huge Text Test:", &textCall,Control::Color::Alizarin, HugeText);
ESPUI.number("Numbertest", &numberCall, ControlColor::Alizarin, 5, 0, 10); ESPUI.number("Numbertest", &numberCall,Control::Color::Alizarin, 5, 0, 10);
fileDisplayId = ESPUI.fileDisplay("Filetest", ControlColor::Turquoise, DisplayTestFileName); fileDisplayId = ESPUI.fileDisplay("Filetest",Control::Color::Turquoise, DisplayTestFileName);
#ifdef TEST_GRAPH #ifdef TEST_GRAPH
graphId = ESPUI.graph("Graph Test", ControlColor::Wetasphalt); graphId = ESPUI.graph("Graph Test",Control::Color::Wetasphalt);
#endif // def TEST_GRAPH #endif // def TEST_GRAPH
/* /*

82
src/ESPUI.cpp
View File

@ -470,28 +470,27 @@ void ESPUIClass::onWsEvent(
return; return;
} }
uint16_t ESPUIClass::addControl(ControlType type, const char* label) uint16_t ESPUIClass::addControl(Control::Type type, const char* label)
{ {
return addControl(type, label, String("")); return addControl(type, label, String(""));
} }
uint16_t ESPUIClass::addControl(ControlType type, const char* label, const String& value) uint16_t ESPUIClass::addControl(Control::Type type, const char* label, const String& value)
{ {
return addControl(type, label, value, ControlColor::Turquoise); return addControl(type, label, value, Control::Color::Turquoise);
} }
uint16_t ESPUIClass::addControl(ControlType type, const char* label, const String& value, ControlColor color) uint16_t ESPUIClass::addControl(Control::Type type, const char* label, const String& value, Control::Color color)
{ {
return addControl(type, label, value, color, Control::noParent); return addControl(type, label, value, color, Control::noParent);
} }
uint16_t ESPUIClass::addControl( uint16_t ESPUIClass::addControl(Control::Type type, const char* label, const String& value, Control::Color color, uint16_t parentControl)
ControlType type, const char* label, const String& value, ControlColor color, uint16_t parentControl)
{ {
return addControl(type, label, value, color, parentControl, new Control(type, label, nullptr, value, color, true, parentControl)); return addControl(type, label, value, color, parentControl, new Control(type, label, nullptr, value, color, true, parentControl));
} }
uint16_t ESPUIClass::addControl(ControlType type, const char* label, const String& value, ControlColor color, uint16_t ESPUIClass::addControl(Control::Type type, const char* label, const String& value, Control::Color color,
uint16_t parentControl, std::function<void(Control*, int)> callback) uint16_t parentControl, std::function<void(Control*, int)> callback)
{ {
uint16_t id = addControl(type, label, value, color, parentControl); uint16_t id = addControl(type, label, value, color, parentControl);
@ -500,8 +499,7 @@ uint16_t ESPUIClass::addControl(ControlType type, const char* label, const Strin
return id; return id;
} }
uint16_t ESPUIClass::addControl( uint16_t ESPUIClass::addControl(Control::Type type, const char* label, const String& value, Control::Color color, uint16_t parentControl, Control* control)
ControlType type, const char* label, const String& value, ControlColor color, uint16_t parentControl, Control* control)
{ {
#ifdef ESP32 #ifdef ESP32
xSemaphoreTake(ControlsSemaphore, portMAX_DELAY); xSemaphoreTake(ControlsSemaphore, portMAX_DELAY);
@ -601,81 +599,81 @@ void ESPUIClass::RemoveToBeDeletedControls()
#endif // def ESP32 #endif // def ESP32
} }
uint16_t ESPUIClass::label(const char* label, ControlColor color, const String& value) uint16_t ESPUIClass::label(const char* label, Control::Color color, const String& value)
{ {
return addControl(ControlType::Label, label, value, color); return addControl(Control::Type::Label, label, value, color);
} }
uint16_t ESPUIClass::graph(const char* label, ControlColor color) uint16_t ESPUIClass::graph(const char* label, Control::Color color)
{ {
return addControl(ControlType::Graph, label, "", color); return addControl(Control::Type::Graph, label, "", color);
} }
uint16_t ESPUIClass::slider( uint16_t ESPUIClass::slider(
const char* label, std::function<void(Control*, int)> callback, ControlColor color, int value, int min, int max) const char* label, std::function<void(Control*, int)> callback, Control::Color color, int value, int min, int max)
{ {
uint16_t sliderId uint16_t sliderId
= addControl(ControlType::Slider, label, String(value), color, Control::noParent, callback); = addControl(Control::Type::Slider, label, String(value), color, Control::noParent, callback);
addControl(ControlType::Min, label, String(min), ControlColor::None, sliderId); addControl(Control::Type::Min, label, String(min), Control::Color::None, sliderId);
addControl(ControlType::Max, label, String(max), ControlColor::None, sliderId); addControl(Control::Type::Max, label, String(max), Control::Color::None, sliderId);
return sliderId; return sliderId;
} }
uint16_t ESPUIClass::button(const char* label, std::function<void(Control*, int)> callback, ControlColor color, const String& value) uint16_t ESPUIClass::button(const char* label, std::function<void(Control*, int)> callback, Control::Color color, const String& value)
{ {
return addControl(ControlType::Button, label, value, color, Control::noParent, callback); return addControl(Control::Type::Button, label, value, color, Control::noParent, callback);
} }
uint16_t ESPUIClass::switcher(const char* label, std::function<void(Control*, int)> callback, ControlColor color, bool startState) uint16_t ESPUIClass::switcher(const char* label, std::function<void(Control*, int)> callback, Control::Color color, bool startState)
{ {
return addControl(ControlType::Switcher, label, startState ? "1" : "0", color, Control::noParent, callback); return addControl(Control::Type::Switcher, label, startState ? "1" : "0", color, Control::noParent, callback);
} }
uint16_t ESPUIClass::pad(const char* label, std::function<void(Control*, int)> callback, ControlColor color) uint16_t ESPUIClass::pad(const char* label, std::function<void(Control*, int)> callback, Control::Color color)
{ {
return addControl(ControlType::Pad, label, "", color, Control::noParent, callback); return addControl(Control::Type::Pad, label, "", color, Control::noParent, callback);
} }
uint16_t ESPUIClass::padWithCenter(const char* label, std::function<void(Control*, int)> callback, ControlColor color) uint16_t ESPUIClass::padWithCenter(const char* label, std::function<void(Control*, int)> callback, Control::Color color)
{ {
return addControl(ControlType::PadWithCenter, label, "", color, Control::noParent, callback); return addControl(Control::Type::PadWithCenter, label, "", color, Control::noParent, callback);
} }
uint16_t ESPUIClass::number( uint16_t ESPUIClass::number(
const char* label, std::function<void(Control*, int)> callback, ControlColor color, int number, int min, int max) const char* label, std::function<void(Control*, int)> callback, Control::Color color, int number, int min, int max)
{ {
uint16_t numberId = addControl(ControlType::Number, label, String(number), color, Control::noParent, callback); uint16_t numberId = addControl(Control::Type::Number, label, String(number), color, Control::noParent, callback);
addControl(ControlType::Min, label, String(min), ControlColor::None, numberId); addControl(Control::Type::Min, label, String(min), Control::Color::None, numberId);
addControl(ControlType::Max, label, String(max), ControlColor::None, numberId); addControl(Control::Type::Max, label, String(max), Control::Color::None, numberId);
return numberId; return numberId;
} }
uint16_t ESPUIClass::gauge(const char* label, ControlColor color, int number, int min, int max) uint16_t ESPUIClass::gauge(const char* label, Control::Color color, int number, int min, int max)
{ {
uint16_t numberId = addControl(ControlType::Gauge, label, String(number), color, Control::noParent); uint16_t numberId = addControl(Control::Type::Gauge, label, String(number), color, Control::noParent);
addControl(ControlType::Min, label, String(min), ControlColor::None, numberId); addControl(Control::Type::Min, label, String(min), Control::Color::None, numberId);
addControl(ControlType::Max, label, String(max), ControlColor::None, numberId); addControl(Control::Type::Max, label, String(max), Control::Color::None, numberId);
return numberId; return numberId;
} }
uint16_t ESPUIClass::separator(const char* label) uint16_t ESPUIClass::separator(const char* label)
{ {
return addControl(ControlType::Separator, label, "", ControlColor::Alizarin, Control::noParent, nullptr); return addControl(Control::Type::Separator, label, "", Control::Color::Alizarin, Control::noParent, nullptr);
} }
uint16_t ESPUIClass::fileDisplay(const char* label, ControlColor color, String filename) uint16_t ESPUIClass::fileDisplay(const char* label, Control::Color color, String filename)
{ {
return addControl(ControlType::FileDisplay, label, filename, color, Control::noParent); return addControl(Control::Type::FileDisplay, label, filename, color, Control::noParent);
} }
uint16_t ESPUIClass::accelerometer(const char* label, std::function<void(Control*, int)> callback, ControlColor color) uint16_t ESPUIClass::accelerometer(const char* label, std::function<void(Control*, int)> callback, Control::Color color)
{ {
return addControl(ControlType::Accel, label, "", color, Control::noParent, callback); return addControl(Control::Type::Accel, label, "", color, Control::noParent, callback);
} }
uint16_t ESPUIClass::text(const char* label, std::function<void(Control*, int)> callback, ControlColor color, const String& value) uint16_t ESPUIClass::text(const char* label, std::function<void(Control*, int)> callback, Control::Color color, const String& value)
{ {
return addControl(ControlType::Text, label, value, color, Control::noParent, callback); return addControl(Control::Type::Text, label, value, color, Control::noParent, callback);
} }
Control* ESPUIClass::getControl(uint16_t id) Control* ESPUIClass::getControl(uint16_t id)
@ -935,7 +933,7 @@ void ESPUIClass::clearGraph(uint16_t id, int clientId)
AllocateJsonDocument(document, jsonUpdateDocumentSize); AllocateJsonDocument(document, jsonUpdateDocumentSize);
JsonObject root = document.to<JsonObject>(); JsonObject root = document.to<JsonObject>();
root[F("type")] = (int)ControlType::Graph + UpdateOffset; root[F("type")] = (int)Control::Type::Graph + Control::Type::UpdateOffset;
root[F("value")] = 0; root[F("value")] = 0;
root[F("id")] = control->id; root[F("id")] = control->id;
@ -957,7 +955,7 @@ void ESPUIClass::addGraphPoint(uint16_t id, int nValue, int clientId)
AllocateJsonDocument(document, jsonUpdateDocumentSize); AllocateJsonDocument(document, jsonUpdateDocumentSize);
JsonObject root = document.to<JsonObject>(); JsonObject root = document.to<JsonObject>();
root[F("type")] = (int)ControlType::GraphPoint; root[F("type")] = (int)Control::Type::GraphPoint;
root[F("value")] = nValue; root[F("value")] = nValue;
root[F("id")] = control->id; root[F("id")] = control->id;

54
src/ESPUI.h
View File

@ -132,35 +132,35 @@ public:
void list(); // Lists LITTLEFS directory void list(); // Lists LITTLEFS directory
void writeFile(const char* path, const char* data); void writeFile(const char* path, const char* data);
uint16_t addControl(ControlType type, const char* label); uint16_t addControl(Control::Type type, const char* label);
uint16_t addControl(ControlType type, const char* label, const String& value); uint16_t addControl(Control::Type type, const char* label, const String& value);
uint16_t addControl(ControlType type, const char* label, const String& value, ControlColor color); uint16_t addControl(Control::Type type, const char* label, const String& value, Control::Color color);
uint16_t addControl(ControlType type, const char* label, const String& value, ControlColor color, uint16_t parentControl); uint16_t addControl(Control::Type type, const char* label, const String& value, Control::Color color, uint16_t parentControl);
uint16_t addControl(ControlType type, const char* label, const String& value, ControlColor color, uint16_t parentControl, std::function<void(Control*, int)> callback); uint16_t addControl(Control::Type type, const char* label, const String& value, Control::Color color, uint16_t parentControl, std::function<void(Control*, int)> callback);
bool removeControl(uint16_t id, bool force_rebuild_ui = false); bool removeControl(uint16_t id, bool force_rebuild_ui = false);
// create Elements // create Elements
// Create Event Button // Create Event Button
uint16_t button(const char* label, std::function<void(Control*, int)> callback, ControlColor color, const String& value = ""); uint16_t button(const char* label, std::function<void(Control*, int)> callback, Control::Color color, const String& value = "");
uint16_t switcher(const char* label, std::function<void(Control*, int)> callback, ControlColor color, bool startState = false); // Create Toggle Button uint16_t switcher(const char* label, std::function<void(Control*, int)> callback, Control::Color color, bool startState = false); // Create Toggle Button
uint16_t pad(const char* label, std::function<void(Control*, int)> callback, ControlColor color); // Create Pad Control uint16_t pad(const char* label, std::function<void(Control*, int)> callback, Control::Color color); // Create Pad Control
uint16_t padWithCenter(const char* label, std::function<void(Control*, int)> callback, ControlColor color); // Create Pad Control with Centerbutton uint16_t padWithCenter(const char* label, std::function<void(Control*, int)> callback, Control::Color color); // Create Pad Control with Centerbutton
uint16_t slider(const char* label, std::function<void(Control*, int)> callback, ControlColor color, int value, int min = 0, int max = 100); // Create Slider Control uint16_t slider(const char* label, std::function<void(Control*, int)> callback, Control::Color color, int value, int min = 0, int max = 100); // Create Slider Control
uint16_t number(const char* label, std::function<void(Control*, int)> callback, ControlColor color, int value, int min = 0, int max = 100); // Create a Number Input Control uint16_t number(const char* label, std::function<void(Control*, int)> callback, Control::Color color, int value, int min = 0, int max = 100); // Create a Number Input Control
uint16_t text(const char* label, std::function<void(Control*, int)> callback, ControlColor color, const String& value = ""); // Create a Text Input Control uint16_t text(const char* label, std::function<void(Control*, int)> callback, Control::Color color, const String& value = ""); // Create a Text Input Control
// Output only // Output only
uint16_t label(const char* label, ControlColor color, uint16_t label(const char* label, Control::Color color,
const String& value = ""); // Create Label const String& value = ""); // Create Label
uint16_t graph(const char* label, ControlColor color); // Create Graph display uint16_t graph(const char* label, Control::Color color); // Create Graph display
uint16_t gauge(const char* label, ControlColor color, int value, int min = 0, uint16_t gauge(const char* label, Control::Color color, int value, int min = 0,
int max = 100); // Create Gauge display int max = 100); // Create Gauge display
uint16_t separator(const char* label); //Create separator uint16_t separator(const char* label); //Create separator
uint16_t fileDisplay(const char* label, ControlColor color, String filename); uint16_t fileDisplay(const char* label, Control::Color color, String filename);
// Input only // Input only
uint16_t accelerometer(const char* label, std::function<void(Control*, int)> callback, ControlColor color); uint16_t accelerometer(const char* label, std::function<void(Control*, int)> callback, Control::Color color);
// Update Elements // Update Elements
@ -210,39 +210,39 @@ public:
Verbosity verbosity = Verbosity::Quiet; Verbosity verbosity = Verbosity::Quiet;
uint32_t GetNextControlChangeId(); uint32_t GetNextControlChangeId();
// emulate former extended callback API by using an intermediate lambda (no deprecation) // emulate former extended callback API by using an intermediate lambda (no deprecation)
uint16_t addControl(ControlType type, const char* label, const String& value, ControlColor color, uint16_t parentControl, std::function<void(Control*, int, void*)> callback, void* userData) uint16_t addControl(Control::Type type, const char* label, const String& value, Control::Color color, uint16_t parentControl, std::function<void(Control*, int, void*)> callback, void* userData)
{ {
return addControl(type, label, value, color, parentControl, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }); return addControl(type, label, value, color, parentControl, [callback, userData](Control* sender, int type){ callback(sender, type, userData); });
} }
uint16_t button(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, const String& value, void* userData) uint16_t button(const char* label, std::function<void(Control*, int, void*)> callback, Control::Color color, const String& value, void* userData)
{ {
return button(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color, value); return button(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color, value);
} }
uint16_t switcher(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, bool startState, void* userData) uint16_t switcher(const char* label, std::function<void(Control*, int, void*)> callback, Control::Color color, bool startState, void* userData)
{ {
return switcher(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color, startState); return switcher(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color, startState);
} }
uint16_t pad(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, void* userData) uint16_t pad(const char* label, std::function<void(Control*, int, void*)> callback, Control::Color color, void* userData)
{ {
return pad(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color); return pad(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color);
} }
uint16_t padWithCenter(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, void* userData) uint16_t padWithCenter(const char* label, std::function<void(Control*, int, void*)> callback, Control::Color color, void* userData)
{ {
return padWithCenter(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color); return padWithCenter(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color);
} }
uint16_t slider(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, int value, int min, int max, void* userData) uint16_t slider(const char* label, std::function<void(Control*, int, void*)> callback, Control::Color color, int value, int min, int max, void* userData)
{ {
return slider(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color, value, min, max); return slider(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color, value, min, max);
} }
uint16_t number(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, int value, int min, int max, void* userData) uint16_t number(const char* label, std::function<void(Control*, int, void*)> callback, Control::Color color, int value, int min, int max, void* userData)
{ {
return number(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color, value, min, max); return number(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color, value, min, max);
} }
uint16_t text(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, const String& value, void* userData) uint16_t text(const char* label, std::function<void(Control*, int, void*)> callback, Control::Color color, const String& value, void* userData)
{ {
return text(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); } , color, value); return text(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); } , color, value);
} }
uint16_t accelerometer(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, void* userData) uint16_t accelerometer(const char* label, std::function<void(Control*, int, void*)> callback, Control::Color color, void* userData)
{ {
return accelerometer(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color); return accelerometer(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color);
} }
@ -278,7 +278,7 @@ protected:
bool basicAuth = true; bool basicAuth = true;
uint16_t controlCount = 0; uint16_t controlCount = 0;
uint16_t addControl(ControlType type, const char* label, const String& value, ControlColor color, uint16_t parentControl, Control* control); uint16_t addControl(Control::Type type, const char* label, const String& value, Control::Color color, uint16_t parentControl, Control* control);
#define ClientUpdateType_t ESPUIclient::ClientUpdateType_t #define ClientUpdateType_t ESPUIclient::ClientUpdateType_t
void NotifyClients(ClientUpdateType_t newState); void NotifyClients(ClientUpdateType_t newState);

18
src/ESPUIcontrol.cpp
View File

@ -3,8 +3,8 @@
static uint16_t idCounter = 0; static uint16_t idCounter = 0;
static const String ControlError = "*** ESPUI ERROR: Could not transfer control ***"; static const String ControlError = "*** ESPUI ERROR: Could not transfer control ***";
Control::Control(ControlType type, const char* label, std::function<void(Control*, int)> callback, Control::Control(Control::Type type, const char* label, std::function<void(Control*, int)> callback,
const String& value, ControlColor color, bool visible, uint16_t parentControl) const String& value, Control::Color color, bool visible, uint16_t parentControl)
: type(type), : type(type),
label(label), label(label),
callback(callback), callback(callback),
@ -125,7 +125,7 @@ bool Control::MarshalControl(JsonObject & _item,
ControlIsFragmented = true; ControlIsFragmented = true;
// fill in the fragment header // fill in the fragment header
_item[F("type")] = uint32_t(ControlType::Fragment); _item[F("type")] = uint32_t(Control::Type::Fragment);
_item[F("id")] = id; _item[F("id")] = id;
// Serial.println(String("MarshalControl:Final length: ") + String(length)); // Serial.println(String("MarshalControl:Final length: ") + String(length));
@ -137,10 +137,10 @@ bool Control::MarshalControl(JsonObject & _item,
} }
item[F("id")] = id; item[F("id")] = id;
ControlType TempType = (ControlType::Password == type) ? ControlType::Text : type; Control::Type TempType = (Control::Type::Password == type) ? Control::Type::Text : type;
if(refresh) if(refresh)
{ {
item[F("type")] = uint32_t(TempType) + uint32_t(ControlType::UpdateOffset); item[F("type")] = uint32_t(TempType) + uint32_t(Control::Type::UpdateOffset);
} }
else else
{ {
@ -148,7 +148,7 @@ bool Control::MarshalControl(JsonObject & _item,
} }
item[F("label")] = label; item[F("label")] = label;
item[F ("value")] = (ControlType::Password == type) ? F ("--------") : value.substring(StartingOffset, StartingOffset + ValueLenToSend); item[F ("value")] = (Control::Type::Password == type) ? F ("--------") : value.substring(StartingOffset, StartingOffset + ValueLenToSend);
item[F("visible")] = visible; item[F("visible")] = visible;
item[F("color")] = (int)color; item[F("color")] = (int)color;
item[F("enabled")] = enabled; item[F("enabled")] = enabled;
@ -165,7 +165,7 @@ bool Control::MarshalControl(JsonObject & _item,
// special case for selects: to preselect an option, you have to add // special case for selects: to preselect an option, you have to add
// "selected" to <option> // "selected" to <option>
if (ControlType::Option == type) if (Control::Type::Option == type)
{ {
Control* ParentControl = ESPUI.getControlNoLock(parentControl); Control* ParentControl = ESPUI.getControlNoLock(parentControl);
if (nullptr == ParentControl) if (nullptr == ParentControl)
@ -189,11 +189,11 @@ bool Control::MarshalControl(JsonObject & _item,
void Control::MarshalErrorMessage(JsonObject & item) void Control::MarshalErrorMessage(JsonObject & item)
{ {
item[F("id")] = id; item[F("id")] = id;
item[F("type")] = uint32_t(ControlType::Label); item[F("type")] = uint32_t(Control::Type::Label);
item[F("label")] = ControlError.c_str(); item[F("label")] = ControlError.c_str();
item[F("value")] = ControlError; item[F("value")] = ControlError;
item[F("visible")] = true; item[F("visible")] = true;
item[F("color")] = (int)ControlColor::Carrot; item[F("color")] = (int)Control::Color::Carrot;
item[F("enabled")] = true; item[F("enabled")] = true;
if (parentControl != Control::noParent) if (parentControl != Control::noParent)

78
src/ESPUIcontrol.h
View File

@ -4,7 +4,10 @@
#include <ArduinoJson.h> #include <ArduinoJson.h>
#include <functional> #include <functional>
enum ControlType : uint8_t class Control
{
public:
enum Type : uint8_t
{ {
// fixed Controls // fixed Controls
Title = 0, Title = 0,
@ -37,7 +40,7 @@ enum ControlType : uint8_t
UpdateOffset = 100, UpdateOffset = 100,
}; };
enum ControlColor : uint8_t enum Color : uint8_t
{ {
Turquoise, Turquoise,
Emerald, Emerald,
@ -50,15 +53,12 @@ enum ControlColor : uint8_t
None = 0xFF None = 0xFF
}; };
class Control Type type;
{
public:
ControlType type;
uint16_t id; // just mirroring the id here for practical reasons uint16_t id; // just mirroring the id here for practical reasons
const char* label; const char* label;
std::function<void(Control*, int)> callback; std::function<void(Control*, int)> callback;
String value; String value;
ControlColor color; Color color;
bool visible; bool visible;
bool wide; bool wide;
bool vertical; bool vertical;
@ -71,11 +71,11 @@ public:
static constexpr uint16_t noParent = 0xffff; static constexpr uint16_t noParent = 0xffff;
Control(ControlType type, Control(Type type,
const char* label, const char* label,
std::function<void(Control*, int)> callback, std::function<void(Control*, int)> callback,
const String& value, const String& value,
ControlColor color, Color color,
bool visible, bool visible,
uint16_t parentControl); uint16_t parentControl);
@ -91,6 +91,37 @@ public:
inline bool NeedsSync(uint32_t lastControlChangeID) {return (false == _ToBeDeleted) && (lastControlChangeID < ControlChangeID);} inline bool NeedsSync(uint32_t lastControlChangeID) {return (false == _ToBeDeleted) && (lastControlChangeID < ControlChangeID);}
void SetControlChangedId(uint32_t value) {ControlChangeID = value;} void SetControlChangedId(uint32_t value) {ControlChangeID = value;}
#define UI_TITLE Control::Type::Title
#define UI_LABEL Control::Type::Label
#define UI_BUTTON Control::Type::Button
#define UI_SWITCHER Control::Type::Switcher
#define UI_PAD Control::Type::Pad
#define UI_CPAD Control::Type::Cpad
#define UI_SLIDER Control::Type::Slider
#define UI_NUMBER Control::Type::Number
#define UI_TEXT_INPUT Control::Type::Text
#define UI_GRAPH Control::Type::Graph
#define UI_ADD_GRAPH_POINT Control::Type::GraphPoint
#define UPDATE_LABEL Control::Type::UpdateLabel
#define UPDATE_SWITCHER Control::Type::UpdateSwitcher
#define UPDATE_SLIDER Control::Type::UpdateSlider
#define UPDATE_NUMBER Control::Type::UpdateNumber
#define UPDATE_TEXT_INPUT Control::Type::UpdateText
#define CLEAR_GRAPH Control::Type::ClearGraph
// Colors
#define COLOR_TURQUOISE Control::Color::Turquoise
#define COLOR_EMERALD Control::Color::Emerald
#define COLOR_PETERRIVER Control::Color::Peterriver
#define COLOR_WETASPHALT Control::Color::Wetasphalt
#define COLOR_SUNFLOWER Control::Color::Sunflower
#define COLOR_CARROT Control::Color::Carrot
#define COLOR_ALIZARIN Control::Color::Alizarin
#define COLOR_DARK Control::Color::Dark
#define COLOR_NONE Control::Color::None
private: private:
bool _ToBeDeleted = false; bool _ToBeDeleted = false;
uint32_t ControlChangeID = 0; uint32_t ControlChangeID = 0;
@ -102,32 +133,3 @@ private:
#define JsonMarshaledOverhead 64 #define JsonMarshaledOverhead 64
}; };
#define UI_TITLE ControlType::Title
#define UI_LABEL ControlType::Label
#define UI_BUTTON ControlType::Button
#define UI_SWITCHER ControlType::Switcher
#define UI_PAD ControlType::Pad
#define UI_CPAD ControlType::Cpad
#define UI_SLIDER ControlType::Slider
#define UI_NUMBER ControlType::Number
#define UI_TEXT_INPUT ControlType::Text
#define UI_GRAPH ControlType::Graph
#define UI_ADD_GRAPH_POINT ControlType::GraphPoint
#define UPDATE_LABEL ControlType::UpdateLabel
#define UPDATE_SWITCHER ControlType::UpdateSwitcher
#define UPDATE_SLIDER ControlType::UpdateSlider
#define UPDATE_NUMBER ControlType::UpdateNumber
#define UPDATE_TEXT_INPUT ControlType::UpdateText
#define CLEAR_GRAPH ControlType::ClearGraph
// Colors
#define COLOR_TURQUOISE ControlColor::Turquoise
#define COLOR_EMERALD ControlColor::Emerald
#define COLOR_PETERRIVER ControlColor::Peterriver
#define COLOR_WETASPHALT ControlColor::Wetasphalt
#define COLOR_SUNFLOWER ControlColor::Sunflower
#define COLOR_CARROT ControlColor::Carrot
#define COLOR_ALIZARIN ControlColor::Alizarin
#define COLOR_DARK ControlColor::Dark
#define COLOR_NONE ControlColor::None