Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add multiple OptionBox #18

Closed
Blueforcer opened this issue Feb 19, 2023 · 7 comments
Closed

add multiple OptionBox #18

Blueforcer opened this issue Feb 19, 2023 · 7 comments

Comments

@Blueforcer
Copy link

Hello,

i created a with addOptionBox like in the optionsExample.
is it possible to add multiple option sites with different settings?

@cotestatnt
Copy link
Owner

Hi @Blueforcer
I'm not sure if I understand your question.
Perhaps you intend to change the CSS styling of each section, or is it something else? Could you possibly give an example?

With the new features you can add as many "option boxes" as you want.
In the latest release I also added the possibility of injecting custom CSS, which allows you to define the style of both the new elements added, but also to override the style of what is already used by default.

Check the updated example customHTML.ino for more details.

image

In any case, if you want to radically change the look of the page, the advice is to directly modify the HTML/CSS/Js sources that you find in this folder and then overwrite the setup_htm.h file with the one obtained by following the instructions in the readme. inside the build folder.

@Blueforcer
Copy link
Author

Blueforcer commented Feb 20, 2023

i will try to explane:
i made this option page

image

only with this few lines of code

mws.addOptionBox("MQTT");
mws.addOption("Broker", mqtthost);
mws.addOption("Port", mqttport);
mws.addOption("Username", mqttuser);
mws.addOption("Password", mqttpass);
mws.addOption("Prefix", mqttprefix);
mws.addOption("raw-html-button", save_btn_htm);
mws.addJavascript(button_script);

so my question is, if it is possible to create a second optionpage in the same way (via code) or do i need to create custom html pages?

@cotestatnt
Copy link
Owner

cotestatnt commented Feb 20, 2023

No, it's really simple indeed.
Every time you call the method addOptionBox("label"), the c++/ JavaScript "under the cover" create a new box and every option you add after will be showed in that new option box.

Keep the addJavascrit() or addCSS() at the end just for a clearer config.json file.

@Blueforcer
Copy link
Author

nice, i will try. thank you very much for your help and of course for your good work.
Im pretty sure you will see me again:)
Do you have a discord server or something like this? Or should i open a issue again for next questions?

@cotestatnt cotestatnt pinned this issue Feb 20, 2023
@Blueforcer
Copy link
Author

Just a small hint:
if your add or rearange your options afterwards again the pages are completely messed up, you need to delete the config.json and reboot to have a correct config.json.
A function would be nice, wich rearange the config.json at boot to fit the addOptions sequence

@cotestatnt
Copy link
Owner

Thanks for your hint, I will take in account for the next developments.

@arimukhlas
Copy link

hi @cotestatnt thanks for making this library, its great!!

i have question,

  1. How to show value of variable in custom HTML??
  2. How do i clear the input, and go back to default
  3. It will be better if you add label on Wifisetup page to give information about esp is connected or not, and when its connected, label also show local IP address.
    Thanks, youre great man!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants