@ -26,7 +26,7 @@ All AutoConnectElements placed on a custom Web page are included in one form. It
AutoConnectElement is a base class for other element classes and has common attributes for all elements. It can also be used as a [variant](#variant-for-autoconnectelements) of each element. The following items are attributes that AutoConnectElement has and are common to other elements.
<small>On the page:</small><br><imgsrc="../images/acelement.png">
@ -76,10 +76,10 @@ Furthermore, to convert an entity that is not an AutoConnectElement to its nativ
## AutoConnectButton
AutoConnectButton generates an HTML `<button type="button">` tag and locates a clickable button to a custom Web page. Currently AutoConnectButton corresponds only to name, value, an onclick attribute of HTML button tag. An onclick attribute is generated from an `action` member variable of the AutoConnectButton, which is mostly used with a JavaScript to activate a script.
AutoConnectButton generates an HTML `#!html <button type="button">` tag and locates a clickable button to a custom Web page. Currently AutoConnectButton corresponds only to name, value, an onclick attribute of HTML button tag. An onclick attribute is generated from an `action` member variable of the AutoConnectButton, which is mostly used with a JavaScript to activate a script.
AutoConnectCheckbox generates an HTML `<input type="checkbox">` tag and a `<label>` tag. It places horizontally on a custom Web page by default.
AutoConnectCheckbox generates an HTML `#!html <input type="checkbox">` tag and a `#!html <label>` tag. It places horizontally on a custom Web page by default.
<small>On the page:</small><br><imgsrc="../images/accheckbox.png">
@ -138,7 +138,7 @@ It is the `name` of the AutoConnectCheckbox element and matches the name attribu
### <iclass="fa fa-caret-right"></i> value
It becomes a value of the `value` attribute of an HTML `<input type="checkbox">` tag.
It becomes a value of the `value` attribute of an HTML `#!html <input type="checkbox">` tag.
### <iclass="fa fa-caret-right"></i> label
@ -151,10 +151,10 @@ A checked is a Boolean value and indicates the checked status of the checkbox. T
## AutoConnectInput
AutoConnectInput generates an HTML `<input type="text">` tag and a `<label>` tag. It can also have a placeholder. The value of the input box is passed to the destination in the query string and can be retrieved programmatically. You can also update from the sketches.
AutoConnectInput generates an HTML `#!html <input type="text">` tag and a `#!html <label>` tag. It can also have a placeholder. The value of the input box is passed to the destination in the query string and can be retrieved programmatically. You can also update from the sketches.
<small>On the page:</small><br><imgsrc="../images/acinput.png">
@ -170,11 +170,11 @@ It is the `name` of the AutoConnectInput element and matches the name attribute,
### <iclass="fa fa-caret-right"></i> value
It becomes a string value of the `value` attribute of an HTML `<input type="text">` tag. The text entered from the custom Web page will be grouped in the query string of the form submission and the string set before accessing the page will be displayed as the initial value.
It becomes a string value of the `value` attribute of an HTML `#!html <input type="text">` tag. The text entered from the custom Web page will be grouped in the query string of the form submission and the string set before accessing the page will be displayed as the initial value.
### <iclass="fa fa-caret-right"></i> label
A `label` is an optional string. A label is always arranged on the left side of the input box. Specification of a label will generate an HTML `<label>` tag with an id attribute. The input box and the label are connected by the id attribute.
A `label` is an optional string. A label is always arranged on the left side of the input box. Specification of a label will generate an HTML `#!html <label>` tag with an id attribute. The input box and the label are connected by the id attribute.
### <iclass="fa fa-caret-right"></i> placeholder
@ -182,10 +182,10 @@ A placeholder is an option string. Specification of a placeholder will generate
## AutoConnectRadio
AutoConnectRadio generates few HTML `<input type="radio">` tags as grouped and the same number of `<label>` tags. AutoConnectRadio can keep the value of a radio button as a collection. The grouped values will be placed in the custom Web page to select only one exclusively.
AutoConnectRadio generates few HTML `#!html <input type="radio">` tags as grouped and the same number of `#!html <label>` tags. AutoConnectRadio can keep the value of a radio button as a collection. The grouped values will be placed in the custom Web page to select only one exclusively.
<small>On the page:</small><br><imgsrc="../images/acradio.png">
@ -205,7 +205,7 @@ A `values` is an array of String type for the radio button options which as actu
### <iclass="fa fa-caret-right"></i> label
A label is an optional string. A label will be arranged in the left or top of the radio buttons according to the `order`. Specification of a label will generate an HTML `<label>` tag with an `id` attribute. The radio buttons and the label are connected by the id attribute.
A label is an optional string. A label will be arranged in the left or top of the radio buttons according to the **order**. Specification of a label will generate an HTML `#!html <label>` tag with an `id` attribute. The radio buttons and the label are connected by the id attribute.
### <iclass="fa fa-caret-right"></i> order
@ -214,18 +214,18 @@ A `order` specifies the direction to arrange the radio buttons. It is a value of
- **`AC_Horizontal`** : Horizontal arrangement.
- **`AC_Vertical`** : Vertical arrangement.
A label is placed in the left or the top according to `order`.
A label will place in the left or the top according to the **order**.
### <iclass="fa fa-caret-right"></i> checked
A `checked` specifies the index number (1-based) of `values` to be checked. If this parameter is not specified neither item is checked.
A `checked` specifies the index number (1-based) of the **values** to be checked. If this parameter is not specified neither item is checked.
## AutoConnectSelect
AutoConnectSelect generates an HTML `<select>` tag (drop-down list) and few `<option>` tags.
AutoConnectSelect generates an HTML `#!html <select>` tag (drop-down list) and few `#!html <option>` tags.
<small>On the page:</small><br><imgsrc="../images/acselect.png">
@ -241,18 +241,18 @@ It is the `name` of the AutoConnectSelect element and matches the name attribute
### <iclass="fa fa-caret-right"></i> options
An `options` is an array of String type for the options which as actually [std::vector](https://en.cppreference.com/w/cpp/container/vector) for an HTML `<option>` tag. It is an initialization list can be used. The option tags will be generated from each entry in the options, the amount of which is the same as the number of items in an `options`.
An `options` is an array of String type for the options which as actually [std::vector](https://en.cppreference.com/w/cpp/container/vector) for an HTML `#!html <option>` tag. It is an initialization list can be used. The option tags will be generated from each entry in the options, the amount of which is the same as the number of items in an `options`.
### <iclass="fa fa-caret-right"></i> label
A `label` is an optional string. A label is always arranged on the left side of the drop-down list. Specification of a label will generate an HTML `<label>` tag with an id attribute. The select tag and the label are connected by the id attribute.
A `label` is an optional string. A label is always arranged on the left side of the drop-down list. Specification of a label will generate an HTML `#!html <label>` tag with an id attribute. The select tag and the label are connected by the id attribute.
## AutoConnectSubmit
AutoConnectSubmit generates an HTML `<input type="button">` tag attached `onclick` attribute. The native code of the `onclick` attribute is the submission of the form with the **POST** method.
AutoConnectSubmit generates an HTML `#!html <input type="button">` tag attached `#!html onclick` attribute. The native code of the `#!html onclick` attribute is the submission of the form with the **POST** method.
<small>On the page:</small><br><imgsrc="../images/acsubmit.png">
@ -268,7 +268,7 @@ It is the `name` of the AutoConnectSubmit element and matches the name attribute
### <iclass="fa fa-caret-right"></i> value
It becomes a string of the `value` attribute of an HTML `<input type="button">` tag. The `value` will be displayed as a label of the button.
It becomes a string of the `value` attribute of an HTML `#!html <input type="button">` tag. The `value` will be displayed as a label of the button.
### <iclass="fa fa-caret-right"></i> uri
@ -280,10 +280,10 @@ The query string of the form data sent with AutoConnectSubmit contains the URI o
## AutoConnectText
AutoConnectText generates an HTML `<div>` tag. A `style` attribute will be attached if a [style](#style) parameter is passed.
AutoConnectText generates an HTML `#!html <div>` tag. A `#!html style` attribute will be attached if a [style](#style) parameter is passed.
<iclass="fa fa-eye"></i>**Sample**<br>
<small>`AutoConnectText text("text", "Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak", "font-family:serif;color:#4682b4;");`</small>
<small>**`AutoConnectText text("text", "Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak", "font-family:serif;color:#4682b4;");`**</small>
<small>On the page:</small><br><imgsrc="../images/actext.png">
An autoReconnect option is available to *AutoConnect::begin* without SSID and pass passphrase.
!!! caution "An autoReconnect will work if SSID detection succeeded"
An autoReconnect will not effect if the SSID which stored credential to be connected is a hidden access point.
### <iclass="fa fa-caret-right"></i> Auto save Credential
By default, AutoConnect saves the credentials of the established connection in EEPROM. You can disable it with the [**autoSave**](api.md#autosave) parameter specified by [**AutoConnectConfig**](api.md#autoconnectconfig).
Native code of the action script executed when the button is clicked.
A label is an optional string. A label is always arranged on the right side of the checkbox. Specification of a label will generate an HTML `#!html <label>` tag with an `id` attribute. The checkbox and the label are connected by the id attribute.
Value of the element. It becomes a value attribute of an HTML `#!html <input type="text">` tag. An entered text in the custom Web page will be sent with a query string of the form. The value set before accessing the page is displayed as the initial value.
A label is an optional string. A label is always arranged on the left side of the input box. Specification of a label will generate an HTML `#!html <label>` tag with an id attribute. The input box and the label are connected by the id attribute.
<dd><spanclass="apidef">name</span>The element name.</dd>
<dd><spanclass="apidef">values</span>An array of values of the radio buttons. Specifies an [std::vector](https://en.cppreference.com/w/cpp/container/vector) object.</dd>
An array of String type for the radio button options. It is an initialization list can be used. The `#!html <input type="radio">` tags will be generated from each entry in the values.
Specifies the direction to arrange the radio buttons. A label will place in the left or the top according to the **_order_**. It is a value of **ACArrange_t** type and accepts one of the following:
### <iclass="fa fa-code"></i> Public member functions
#### <iclass="fa fa-caret-right"></i> typeOf
```cpp
ACElement_t typeOf(void)
```
Returns type of AutoConnectElement.
<dlclass="apidl">
<dt>**Return value**</dt>
<dd>AC_Radio</dd>
</dl>
#### <iclass="fa fa-caret-right"></i> add
```cpp
void add(const String& value)
```
Adds an option for the radio button.
<dlclass="apidl">
<dt>**Parameters**</dt>
<dd><spanclass="apidef">value</span>An option string to add to the radio button.</dd>
</dl>
#### <iclass="fa fa-caret-right"></i> check
```cpp
void check(const String& value)
```
Indicates the check of the specified option for the radio buttons. You can use the **check** function for checking dynamically with arbitrary of the radio button.
<dlclass="apidl">
<dt>**Parameters**</dt>
<dd><spanclass="apidef">value</span>An option string to be checked.</dd>
</dl>
#### <iclass="fa fa-caret-right"></i> empty
```cpp
void empty(const size_t reserve = 0)
```
Clear the array of option strings that AutoConnectRadio has in values. When a **_reserve_** parameter is specified, a vector container of that size is reserved.
<dlclass="apidl">
<dt>**Parameters**</dt>
<dd><spanclass="apidef">reserve</span>Reserved size of a container for option strings.</dd>
The [PageBuilder](https://github.com/Hieromon/PageBuilder) library to build HTML for ESP8266WebServer is needed.
To install the PageBuilder library into your Arduino IDE, you can use the *Library Manager*. Select the board of ESP8266 series in the Arduino IDE, open the library manager and search keyword '**PageBuilder**' with the topic '**Communication**', then you can see the *PageBuilder*. The latest version is required 1.3.0 later.[^1]
To install the PageBuilder library into your Arduino IDE, you can use the *Library Manager*. Select the board of ESP8266 series in the Arduino IDE, open the library manager and search keyword '**PageBuilder**' with the topic '**Communication**', then you can see the *PageBuilder*. The latest version is required 1.3.1 later.[^1]
<imgsrc="./images/lm.png"width="640"/>
[^1]:Since AutoConnect v0.9.7, PageBuilder v1.3.0 later is required.
[^1]:Since AutoConnect v0.9.7, PageBuilder v1.3.1 later is required.
Hieromon Ikasamo
6 years ago