How to save and load the state of a switch in the graphical interface?

[serlancelot]

Hello, it is the first time that I use an ESP and the library, It would probably be silly... but I don't know how to do it. I am modifying a program to add some additional functions, after playing with the code I have already made a modification that works correctly, the problem is that the graphic interface does not indicate the correct state... I explain:

I have a switch which activates a function, this works well, it activates and saves the variable in the eeprom, but when I restart the ESP in the graphical environment it appears as if it is deactivated but the function is actually activated. How can I update the graphic status of the switch?

auto panel1 = ESPUI.addControl(Switcher, "Configuracion", 1, ControlColor::Turquoise, Control::noParent, &controlbuzzer);

I know that the 1 and/or 0 turns the switch on or off in the graphical form, but how can I do this to match the actual state of the function?

Thank you very much to all! All the best.

[Ian Gray]

I'm not quite sure what you mean but ESPUI.updateSwitcher(switcherID, boolValue); will set a switch on or off programmatically if that is what you want.

[serlancelot]

Hi, thanks for your quick response! what I want to do is match the real state with the state of the switch in the graphical interface. If I activate the option and turn off the ESP, then when I access it again, the switch indicates that the function is activated (since I can only modify it with 1 and 0) I hope I explain myself well... there are times when the translators do not do as you want....

[Ian Gray]

This is less an issue of translation and one of precisely describing what you are trying to do. I think you're describing the following:

1. Boot ESP.
2. Connect web client to web interface.
3. Change switch value in web interface.
4. Reboot ESP but leave web interface running.
5. Newly rebooted ESP now might contain a different switch value to what is displayed in the web interface.

Is it that? If so you could just periodically send an update from the ESP to ensure that all web clients show the current state of the device.

Or are you trying to view the web interface as entirely separate, i.e. running when the ESP is turned off? That is not a supported interaction mode as the interface is served from the ESP.

[serlancelot]

That's exactly what happens. I use it with the ESP turned on (to make the configurations) and what you indicate in step 5 happens

[Ian Gray]

You're thinking about this wrong. The web interface is not designed to operate when the ESP is not turned on. It doesn't even make any sense because if your browser unloaded the site you wouldn't be able to view it at all.

What are you actually trying to do?

If you want changes to be persistent, you should save and load then in the ESP's EEPROM.

[serlancelot]

Hi, I've been out shopping and I couldn't answer....
I will show you the steps I do:
1 I turn on the ESP
2 I access the ip 192.168.x.x
3 In the switch that is grouped in a panel, activate the buzzer (internally the variable is saved in the EEPROM)
4 I start the timer and see the buzzer beeps at the end (when the time reaches 0sec)
5 I turn off the ESP, turn it on again and access 192.168.x.x again
6 I start the timer again and the buzzer keeps ringing when it reaches 0sec, but the switch on the panel does not indicate the actual status.

Logically I want to handle it while everything is on.

[Ian Gray]

Sorry you've not described this in terms of what you expect the UI to do, or not do. You say:

the switch on the panel does not indicate the actual status.

I assume this means:

I want to set the status of a switch to match a boolean variable stored in the ESP.

My first reply said that you can use ESPUI.updateSwitcher(switcherID, boolValue); to set a switch to a dynamic value. Why is this not sufficient?

If you have a persistent value stored in the EEPROM, load that value before you create the UI, create the switch to reflect the current value. If you want to update a UI without requiring that the web client refreshes the page then call updateSwitcher().

[serlancelot]

Hello, I saw what you indicated in the first message, but isn't that just for an individual switch? The one I try to change is in a panel. Regarding updateSwitcher() what parameters does the function need? thank you!

[Ian Gray]

auto panel1 = ESPUI.addControl(Switcher, "Configuracion", 1, ControlColor::Turquoise, Control::noParent, &controlbuzzer);
ESPUI.updateSwitcher(panel1, true);
ESPUI.updateSwitcher(panel1, false);

You called the variable panel1 but it is actually the ID of the Switcher control.

[serlancelot]

Hello! I haven't had time to look at it until a couple of days ago... This one already works for me!

`auto psetting = ESPUI.addControl(Switcher, "settings:", "", ControlColor::Turquoise, Control::noParent, &controlbuzzer);
ESPUI.updateSwitcher(psetting, EEPROM.read(2));
auto psetting2 = ESPUI.addControl(Switcher, "", "", ControlColor::None, psetting, false);
//ESPUI.updateSwitcher(psetting2, XXXXXXXX);
//auto psetting3 =ESPUI.addControl(Switcher, "", "", ControlColor::None, psetting, false);
//ESPUI.updateSwitcher(psetting3, XXXXXXXX);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "", None, psetting), clearLabelStyle);

String switcherLabelStyle = "width: 120px; margin-left: .3rem; margin-right: .3rem; background-color: unset;";

ESPUI.setElementStyle(ESPUI.addControl(Label, "", "1. Buzzer", None, psetting), switcherLabelStyle);
switcherLabelStyle = "width: 120px; margin-left: .3rem; margin-right: .3rem; background-color: unset;";
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "", None, psetting), clearLabelStyle);
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "2. Auto Direction Change", None, psetting), switcherLabelStyle);
switcherLabelStyle = "width: 500px; margin-left: .3rem; margin-right: .3rem; background-color: unset;";
ESPUI.setElementStyle(ESPUI.addControl(Label, "", "", None, psetting), clearLabelStyle);`

Now to adjust the texts and for the next modification....

Many thanks for everything!!!