[PR #1775] WiFiManagerParameter Checkboxes and Radios #1831

New issue

Open

opened 2026-02-28 02:13:08 +03:00 by kerem · 0 comments

kerem commented

2026-02-28 02:13:08 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/tzapu/WiFiManager/pull/1775
Author: @dmadison
Created: 10/31/2024
Status: 🔄 Open

Base: master ← Head: params-classes

📝 Commits (10+)

0df7c77 Refactor parameter 'length' as 'maxLength'
f75dd98 Change param value length function name
dd38239 Change param getID to getName
b002b03 Add setValueReceived function to params
c781390 Remove parameter friendship with WiFiManager
2703370 Add negative check to param max length
246d521 Make param destructor virtual
944589c Move param HTML generation to class
c4665fc Remove param token "I" processing
5d7848f Add checkbox parameter class

📊 Changes

9 files changed (+525 additions, -90 deletions)

View changed files

📝 WiFiManager.cpp (+434 -75)
📝 WiFiManager.h (+83 -12)
📝 examples/NonBlocking/AutoConnectNonBlockingwParams/AutoConnectNonBlockingwParams.ino (+1 -1)
📝 keywords.txt (+2 -2)
📝 wm_consts_en.h (+1 -0)
📝 wm_consts_fr.h (+1 -0)
📝 wm_strings_en.h (+1 -0)
📝 wm_strings_es.h (+1 -0)
📝 wm_strings_fr.h (+1 -0)

📄 Description

This PR adds checkbox and radio input classes derived from WiFiManagerParameter, allowing users to easily add those inputs to their config pages.

Checkboxes

Checkboxes are implemented with the WiFiManagerParameterCheckbox class. Checkboxes are declared similarly to regular parameters, but with a boolean checked value in place of maxLength:

WiFiManagerParameterCheckbox(
    const char* name,
    const char* label,
    const char* value,
    bool        checked = false,
    const char* custom = "",
    int         labelPlacement = WFM_LABEL_AFTER);

Because the library uses the parameter's 'value' to mean both 'default value' and 'current value', checkboxes implement their own value storage to indicate whether the checkbox is "checked" or not. This lets the value (string) and 'checked' state persist between server updates while requiring minimal additional storage:

bool getChecked() const;
void setChecked(bool checked);

Demo

Webpage

User Code

WiFiManagerParameterCheckbox checkboxes[] = {
	WiFiManagerParameterCheckbox("checkbox1", "Checkbox 1", "chk1", true),
	WiFiManagerParameterCheckbox("checkbox2", "Checkbox 2", "chk2", false),
	WiFiManagerParameterCheckbox("checkbox3", "Checkbox 3", "chk3", false),
};

for (auto& checkbox : checkboxes) {
	wm.addParameter(&checkbox);
}

HTML

<input type="checkbox" name="checkbox1" id="checkbox1" value="chk1" checked>
<label for="checkbox1">Checkbox 1</label>
<br>
<input type="checkbox" name="checkbox2" id="checkbox2" value="chk2">
<label for="checkbox2">Checkbox 2</label>
<br>
<input type="checkbox" name="checkbox3" id="checkbox3" value="chk3">
<label for="checkbox3">Checkbox 3</label>
<br>

Serial Debug

*wm:[3] checkbox1: chk1
*wm:[3] checkbox2: 
*wm:[3] checkbox3:

Radios

Radios are implemented with the WiFiManagerParameterRadio class. Radios are different to regular parameters, because each radio object contains a number of individual inputs that are all collected under one parameter. Because of this radio objects are only declared with a name, custom html, and labelPlacement:

WiFiManagerParameterRadio(
    const char* name,
    const char* custom = "",
    int         labelPlacement = WFM_LABEL_AFTER);

Individual options are created as WiFiManagerParameterRadioOption classes. These reference the radio object and add themselves to a vector in the radio class on construction:

WiFiManagerParameterRadioOption(
    WiFiManagerParameterRadio& radio,
    const char* id,
    const char* label,
    const char* value,
    bool        checked = false);

When the params page is submitted, the string is validated against the stored options and then stored in the class as the value. This simplifies the user-side parameter saving code, because the relevant value is provided as part of a single parameter regardless of how many options there are.

Demo

Webpage

User Code

WiFiManagerParameterRadio radio("radio");

WiFiManagerParameterRadioOption radioOptions[] = {
	WiFiManagerParameterRadioOption(radio, "radio1", "Radio 1", "rd1", true),
	WiFiManagerParameterRadioOption(radio, "radio2", "Radio 2", "rd2", false),
	WiFiManagerParameterRadioOption(radio, "radio3", "Radio 3", "rd3", false),
};

wm.addParameter(&radio);

HTML

<input type="radio" name="radio" id="radio1" value="rd1" checked>
<label for="radio1">Radio 1</label>
<br>
<input type="radio" name="radio" id="radio2" value="rd2">
<label for="radio2">Radio 2</label>
<br>
<input type="radio" name="radio" id="radio3" value="rd3">
<label for="radio3">Radio 3</label>
<br>

Serial Debug

*wm:[3] radio: rd1

Incidental Changes

Added a {T} token for type attribute to wm_consts_en.h and wm_consts_fr.h
Added a HTTP_FORM_PARAM_CHECK string, which compared to HTTP_FORM_PARAM:
- Removes line break
- Adds type attribute and token
- Removes maxlength attribute

This PR contains no breaking changes.

Please note that this PR incorporates the necessary API changes #1773 and the HTML generation changes from #1774.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/tzapu/WiFiManager/pull/1775 **Author:** [@dmadison](https://github.com/dmadison) **Created:** 10/31/2024 **Status:** 🔄 Open **Base:** `master` ← **Head:** `params-classes` --- ### 📝 Commits (10+) - [`0df7c77`](https://github.com/tzapu/WiFiManager/commit/0df7c77b9d813329101b449ff7a8dfbab6ec2e17) Refactor parameter 'length' as 'maxLength' - [`f75dd98`](https://github.com/tzapu/WiFiManager/commit/f75dd98f61032deb17378dc78a9465d7fbf8349e) Change param value length function name - [`dd38239`](https://github.com/tzapu/WiFiManager/commit/dd38239d91a9b9ad895479ea20f6115d523daedb) Change param getID to getName - [`b002b03`](https://github.com/tzapu/WiFiManager/commit/b002b03ea3013a1c2e73e798b217e56dc11a49e9) Add setValueReceived function to params - [`c781390`](https://github.com/tzapu/WiFiManager/commit/c78139047cc866d3e08543b21d701d419cdfc6c4) Remove parameter friendship with WiFiManager - [`2703370`](https://github.com/tzapu/WiFiManager/commit/2703370f4792171aef98c13f91fe868eaeffbb38) Add negative check to param max length - [`246d521`](https://github.com/tzapu/WiFiManager/commit/246d5216a79c1c4b5fa387c91a85ca62f3bb6c1c) Make param destructor virtual - [`944589c`](https://github.com/tzapu/WiFiManager/commit/944589cf29b4f56c1eb39d515193e1b9f06cb539) Move param HTML generation to class - [`c4665fc`](https://github.com/tzapu/WiFiManager/commit/c4665fc6cca7344795e0a88fc9ca4eccaa84085e) Remove param token "I" processing - [`5d7848f`](https://github.com/tzapu/WiFiManager/commit/5d7848f6686e0bb4b18d43de6d4d32d549cc6b00) Add checkbox parameter class ### 📊 Changes **9 files changed** (+525 additions, -90 deletions) <details> <summary>View changed files</summary> 📝 `WiFiManager.cpp` (+434 -75) 📝 `WiFiManager.h` (+83 -12) 📝 `examples/NonBlocking/AutoConnectNonBlockingwParams/AutoConnectNonBlockingwParams.ino` (+1 -1) 📝 `keywords.txt` (+2 -2) 📝 `wm_consts_en.h` (+1 -0) 📝 `wm_consts_fr.h` (+1 -0) 📝 `wm_strings_en.h` (+1 -0) 📝 `wm_strings_es.h` (+1 -0) 📝 `wm_strings_fr.h` (+1 -0) </details> ### 📄 Description This PR adds checkbox and radio input classes derived from `WiFiManagerParameter`, allowing users to easily add those inputs to their config pages. # Checkboxes Checkboxes are implemented with the `WiFiManagerParameterCheckbox` class. Checkboxes are declared similarly to regular parameters, but with a boolean `checked` value in place of `maxLength`: ```cpp WiFiManagerParameterCheckbox( const char* name, const char* label, const char* value, bool checked = false, const char* custom = "", int labelPlacement = WFM_LABEL_AFTER); ``` Because the library uses the parameter's 'value' to mean both 'default value' and 'current value', checkboxes implement their own value storage to indicate whether the checkbox is "checked" or not. This lets the value (string) and 'checked' state persist between server updates while requiring minimal additional storage: ```cpp bool getChecked() const; void setChecked(bool checked); ``` ## Demo ### Webpage ![checkboxes](https://github.com/user-attachments/assets/bc92db26-316e-4ddf-9981-db8f949ee9f3) ### User Code ```cpp WiFiManagerParameterCheckbox checkboxes[] = { WiFiManagerParameterCheckbox("checkbox1", "Checkbox 1", "chk1", true), WiFiManagerParameterCheckbox("checkbox2", "Checkbox 2", "chk2", false), WiFiManagerParameterCheckbox("checkbox3", "Checkbox 3", "chk3", false), }; for (auto& checkbox : checkboxes) { wm.addParameter(&checkbox); } ``` ### HTML ```html <input type="checkbox" name="checkbox1" id="checkbox1" value="chk1" checked> <label for="checkbox1">Checkbox 1</label> <br> <input type="checkbox" name="checkbox2" id="checkbox2" value="chk2"> <label for="checkbox2">Checkbox 2</label> <br> <input type="checkbox" name="checkbox3" id="checkbox3" value="chk3"> <label for="checkbox3">Checkbox 3</label> <br> ``` ### Serial Debug ``` *wm:[3] checkbox1: chk1 *wm:[3] checkbox2: *wm:[3] checkbox3: ``` # Radios Radios are implemented with the `WiFiManagerParameterRadio` class. Radios are different to regular parameters, because each radio object contains a number of individual inputs that are all collected under one parameter. Because of this radio objects are only declared with a `name`, `custom` html, and `labelPlacement`: ```cpp WiFiManagerParameterRadio( const char* name, const char* custom = "", int labelPlacement = WFM_LABEL_AFTER); ``` Individual options are created as `WiFiManagerParameterRadioOption` classes. These reference the radio object and add themselves to a vector in the radio class on construction: ```cpp WiFiManagerParameterRadioOption( WiFiManagerParameterRadio& radio, const char* id, const char* label, const char* value, bool checked = false); ``` When the params page is submitted, the string is validated against the stored options and then stored in the class as the value. This simplifies the user-side parameter saving code, because the relevant value is provided as part of a single parameter regardless of how many options there are. ## Demo ### Webpage ![radios](https://github.com/user-attachments/assets/86000c81-64d2-4934-8adc-f6f60090e2a1) ### User Code ```cpp WiFiManagerParameterRadio radio("radio"); WiFiManagerParameterRadioOption radioOptions[] = { WiFiManagerParameterRadioOption(radio, "radio1", "Radio 1", "rd1", true), WiFiManagerParameterRadioOption(radio, "radio2", "Radio 2", "rd2", false), WiFiManagerParameterRadioOption(radio, "radio3", "Radio 3", "rd3", false), }; wm.addParameter(&radio); ``` ### HTML ```html <input type="radio" name="radio" id="radio1" value="rd1" checked> <label for="radio1">Radio 1</label> <br> <input type="radio" name="radio" id="radio2" value="rd2"> <label for="radio2">Radio 2</label> <br> <input type="radio" name="radio" id="radio3" value="rd3"> <label for="radio3">Radio 3</label> <br> ``` ### Serial Debug ``` *wm:[3] radio: rd1 ``` --- #### Incidental Changes * Added a `{T}` token for `type` attribute to `wm_consts_en.h` and `wm_consts_fr.h` * Added a `HTTP_FORM_PARAM_CHECK` string, which compared to `HTTP_FORM_PARAM`: * Removes line break * Adds `type` attribute and token * Removes `maxlength` attribute This PR contains **no** breaking changes. --- Please note that this PR incorporates the necessary API changes #1773 and the HTML generation changes from #1774. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>