Order of addOptions on the setup subpages

[spaethdiy]

Hi,
first of all, praise for the magnificent library.
I've been experimenting with it and noticed that the order of the addOptions in the source code isn't the same as it appears on the setup page. For example, boolean options are always placed at the top of the page, while customHTML is always at the bottom.
My idea was to use the customHTML as information/comments for the different options. For this to work, it would need to be placed directly before or after the respective option, not at the bottom of the page. Or is there another way to do this?
The same applies to the boolean options. It would be great if they could be placed among the other options, so related groups would be grouped together on the setup page. Is this possible?

Thank you for your help.

Sincerely,
Thomas

P.S.: I'm using version 3.0.0

[cotestatnt]

Hi Thomas,

Thank you for the praise! I’m glad you’re enjoying the library.

I completely agree with you: the type-based sorting in version 3.0.0 is too restrictive for complex setups where which needs to act as a separator or description for specific fields.

I have recently updated the core logic (bringing over some improvements from the parent project FSWebServer) and completely revisited the JSON file schema. Although it's slightly more verbose now, it offers greater flexibility and customization.

This means the /setup page now can (optional) respect the exact order in which you call addOptions also for bool values without grouping at the top of page.

The upgrade to v2 of config.json is designed to be transparent, but I recommend backing up your existing values as a precaution if needed. Since these changes are committed but not yet part of an official "Release" you have two options:

1. Manual Update: You can download the latest source files directly from the repository and replace the ones in your project. This will enable the sequential ordering immediately.

2. Wait for Release: I plan to tag a new official release soon. If your project isn't urgent, you can wait for the update notification.

How to get this feature now:

Boolean options can be grouped or left inline by passing grouped as the fourth argument (hidden is the third, preserving old sketches):

  // grouped = true  (default) → all switches collected in a row
  // grouped = false            → option appears exactly where added
  // server.addOption(BOOL_LABEL, boolVar);               // grouped
  // server.addOption(BOOL_LABEL, boolVar, false);        // hidden=false, grouped=true
  server.addOption(BOOL_LABEL, boolVar, false, false);    // not grouped

I am also considering the possibility of introducing ad-hoc CSS customizations for each added option.
I was thinking of something like this:

// The first parameter act as unique id for HTML element
server.setElementStyle(BOOL_LABEL, "background-color: #ff0000; border-radius: 5px;");

[spaethdiy]

Hello,

Thank you for the quick reply.

I'm happy to hear about this improvement. My current project is still in its early stages, and if the update is compatible with the current state, meaning I can simply replace the library with the new version later, I'd like to continue as is for now and update after the release.

Regarding the customHTML option, it might also be helpful to have something like an addComment function that would simply be saved as plain text in the config.json file without the link and the creation of an .html file. For simple comments consisting of only a few words and without HTML formatting, this could potentially save memory and reduce complexity somewhat. But that's just a thought.

Did I understand correctly that the group function of the boolean options determines whether they are grouped at the beginning of the page or in the same order as in the source code? That would be great.

What I meant by grouping was something else: If, for example, I have several sensors that I want to activate with a boolean option, and each sensor also has additional long/float/string parameters, then it should be possible to display these together (in one group) on the respective setup page. As I understand it, this will work via the order in the source code with the new release. I'm really looking forward to that.

I'm also experiencing display problems with the boolean option at the top of the subpage when I have four of them. The four boolean options are too wide for the window when placed side by side and collide with the border/frame.

Does the setElementStyle option allow you to customize the appearance of each parameter separately on the setup page? That's a great feature, as it would allow you to display related parameters in the same color, for example.

Thanks again for the great support.

Sincerely,
Thomas

[cotestatnt]

Hello Thomas,
I’m not entirely sure I’ve fully grasped what you’re aiming for, but keep in mind that the library is designed to be "general purpose," so compromises are often necessary.

If you need such a high level of customization, the best approach would likely be to directly modify the source code of the /setup page. Alternatively, you could create an "HTML" option that replaces the entire options block, allowing you to implement your preferred mechanisms yourself.

However, if you want to keep the built-in /setup page, you can use a simple JavaScript trick. In the latest versions, I’ve ensured that the HTML element ID is determined based on the label text which allows you to control its behavior directly with a bit of JavaScript.

For example, assuming you have somthing like this in your sketch:

  // Configure /setup page and start Web Server
  server.addOptionBox("My Options");
  server.addHTML(reload_btn_htm, "buttons", /*overwrite*/ false);
  // Boolean options are grouped in a single section by default, but you can override this behavior.
  server.addOption(BOOL_LABEL, boolVar, false, false);
  server.addOption(LED_LABEL, ledPin, "This is the LED pin number");
  server.addOption(LONG_LABEL, longVar, "This is a long integer value");
  server.addOption(FLOAT_LABEL, floatVar, 1.0, 100.0, 0.01);
  server.addOption(STRING_LABEL, stringVar);
  
  server.addOptionBox("My Options 2");
  // Boolean option with a custom label is not grouped with other boolean options in any case.
  server.addOption(BOOL_LABEL2, boolVar2, "Enable this options");
  server.addDropdownList(dayOfWeek);
  server.addSlider(brightness);  
  server.addJavascript(custom_javascript, "js", /*overwrite*/ false);

anc the conten of custom_javascript is

// Select the primary toggle checkbox using its unique ID
const mainCheckbox = document.getElementById('a-second-bool-variable');

/**
 * Event listener to toggle the 'disabled' state of sibling elements
 * within the same parent container based on the checkbox status.
 */
mainCheckbox.addEventListener('change', function() {
    // Traverse up the DOM to find the nearest ancestor with the class '.ctn' (the wrapper)
    const container = this.closest('.ctn');
    
    // Select all interactive form elements within this specific container
    // This includes inputs, dropdowns, text areas, and buttons
    const interactives = container.querySelectorAll('input, select, textarea, button');
    
    interactives.forEach(el => {
        /**
         * Update the 'disabled' property for all elements EXCEPT the controller itself.
         * If the checkbox is checked, 'disabled' becomes false (enabling the elements).
         * If the checkbox is unchecked, 'disabled' becomes true.
         */
        if (el !== this) {
            el.disabled = !this.checked;
        }
    });
});

The result will be this where all the elements are enabled/disabled according to "a-second-bool-variable" state

[spaethdiy]

Hello,

I would like to apologize for the confusion and thank you for your support. I am very happy with the functionality of this library.

My only question was whether there's a way to get the order of the different options (bool, customHTML etc.) from the source code directly onto the /setup page. I think this is not a high level customization.

For example:

server.addOptionBox("LEDs");

server.addOption("LED1 enable", boolLED1ENABLE);
server.addOption("LED1 PIN", byteLED1PIN);

server.addOption("LED2 enable", boolLED2ENABLE);
server.addOption("LED2 PIN", byteLED2PIN);

server.addOption("LED3 enable", boolLED3ENABLE);
server.addOption("LED3 PIN", byteLED3PIN);

server.addOption("LED4 enable", boolLED4ENABLE);
server.addOption("LED4 PIN", byteLED4PIN);

Results in the following /setup page:

It would be great if it is possible to display it as the following (edited with graphic tool):

This isn't the case with the current release, but I understand it will be possible with the next one!? Or did I missunderstood something?

Thanks a lot.

Sincerely,
Thomas

[cotestatnt]

This isn't the case with the current release, but I understand it will be possible with the next one!? Or did I missunderstood something?

Yes, this is exactly how it should look. Additionally, there’s the option to add a comment at the bottom of the input box (whereas for the switch, the comment is placed inline to the right by default).
I don't have a board available to test it directly right now, but I'll run some real tests this afternoon and send you a screenshot.

[cotestatnt]

This is the aspect with the last committed sources (not yet released).
I've added also a small comment on each bool switch.

server.addOptionBox("LEDs");
server.addOption("LED1 enable", boolLED1ENABLE, "Enable LED1");
server.addOption("LED1 PIN", byteLED1PIN);
server.addOption("LED2 enable", boolLED2ENABLE , "Enable LED2");
server.addOption("LED2 PIN", byteLED2PIN);
server.addOption("LED3 enable", boolLED3ENABLE, "Enable LED3");
server.addOption("LED3 PIN", byteLED3PIN);
server.addOption("LED4 enable", boolLED4ENABLE, "Enable LED4");
server.addOption("LED4 PIN", byteLED4PIN);

[spaethdiy]

Great work! This is extremely helpful. Thank you so much.

Sincerely,
Thomas