WiFiManagerParameter Checkboxes and Radios

[dmadison]

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.