@ -92,7 +92,7 @@ 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 `<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.
@ -149,11 +149,11 @@ 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 tag.
It becomes a value of the `value` attribute of an HTML `<input type="checkbox">` tag.
### <iclass="fa fa-caret-right"></i> label
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 `label` tag with an `id` attribute. The checkbox and the label are connected by the id attribute.
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 `<label>` tag with an `id` attribute. The checkbox and the label are connected by the id attribute.
Only <iclass="far fa-square"></i> will be displayed if a label is not specified.
### <iclass="fa fa-caret-right"></i> checked
@ -162,7 +162,7 @@ A checked is a Boolean value and indicates the checked status of the checkbox. T
## AutoConnectInput
AutoConnectInput genarates 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 `<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.
@ -181,19 +181,19 @@ 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 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 `<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 right 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 right 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.
### <iclass="fa fa-caret-right"></i> placeholdr
### <iclass="fa fa-caret-right"></i> placeholder
A placeholder is an option string. Specification of a placeholder will generate a `placeholder` attribute for the input tag.
## AutoConnectRadio
AutoConnectRadio genarates 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 `<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.
@ -212,11 +212,11 @@ It is the `name` of the AutoConnectRadio element and matches the name attribute
### <iclass="fa fa-caret-right"></i> values
A `values` is an array of String type for the radio button options which as actually [std::vector](https://en.cppreference.com/w/cpp/container/vector). It is an initialization list can be used. The `input type="radio"` tags will be generated from each entry in the values, the amount of which is the same as the number of items in `values`.
A `values` is an array of String type for the radio button options which as actually [std::vector](https://en.cppreference.com/w/cpp/container/vector). It is an initialization list can be used. The input tags will be generated from each entry in the values, the amount of which is the same as the number of items in `values`.
### <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 `<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
@ -229,17 +229,89 @@ A label is placed in the left or the top according to `order`.
### <iclass="fa fa-caret-right"></i> checked
A `checked` specifies the index number (1-based) of `values` to be checked.
## AutoConnectSelect
AutoConnectSelect generates an HTML `<select>` tag and few `<option>` tags.
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.
It is the `name` of the AutoConnectSubmit element and matches the name attribute of the input tag.
### <iclass="fa fa-caret-right"></i> value
It becomes a string of the `value` attribute of an HTML `<input type="button">` tag. The `value` is displayed as a label of the button.
### <iclass="fa fa-caret-right"></i> uri
A `uri` specifes the URI to send form data when the button declared by AutoConnectSubmit is clicked.
The query string of the form data sent with AutoConnectSubmit contains the URI of the page. Its parameter name is `_acuri`. In Sketch, you can know the called URI by referring to the `_acuri` parameter with the destination page handler. The actual query string is as follows:
\_acuri=**CALLER_URI**
## AutoConnectText
AutoConnectText generates an HTML `<div>` tag. A `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>On the page:</small><br><imgsrc="../images/actext.png">
A `name` does not exist in the generated HTML. It provides only a means of accessing elements with the sketches.
### <iclass="fa fa-caret-right"></i> value
It becomes content and also can contain the native HTML code, but remember that your written code is enclosed by the div tag.
### <iclass="fa fa-caret-right"></i> style
A `style` specifies the qualification style to give to the content and can use the style attribute format as it is.
## How to coding for the elements
### <iclass="fa fa-edit"></i> Define the elements in Sketches
### <iclass="fa fa-edit"></i> Declaration for the elements in Sketches
Each element can be defined by a macro. By using the macro, you can treat element names that are String types as variables in sketches.[^2]
Variables of each element can be declared with macros. By using the macros, you can treat element name that is String type as variable in sketches.[^2]
[^2]: The square brackets in the syntax are optional parameters, the stroke is a selection parameter, the bold fonts are literal.
@ -76,7 +76,7 @@ So, the basic procedure is as follows.
## Write the custom Web page with JSON
You can write the custom Web page in JSON without using sketch codes.[^3] It is possible to describe the entire page in JSON and can be described for each element also. The JSON description can be saved in SPIFFS or SD and read using AutoConnect's [**load**](api.md#load) function. If you take this approach, you can further reduce the above basic steps. However, this method consumes a lot of memory.
You can write the custom Web page in JSON without using sketch codes.[^3] It is possible to describe the entire page in JSON and can be described for each element also. The JSON description can be saved in SPIFFS or SD and read using AutoConnect's [**load**](api.md#load) function. If you take this approach, you can further reduce the steps of the above but this way consumes a lot of memory.
The following JSON code and sketch will execute the custom Web page as the example in the above figure. That is, the sketch of this code and footnote[^2] is equivalent.
Specify whether to continue the portal function even if the captive portal timed out. If the true, when a timeout occurs, the [**AutoConnect::begin**](api.md#begin) function is exited with returns false, but the portal facility remains alive. So SoftAP remains alive and you can invoke AutoConnect while continuing sketch execution. The default is false.
- Fixed crash in some environments. Thank you @ageurtse
- Supports AutoConnect menu extention by user sketch with **AutoConnectAux**.
- Supports AutoConnect menu extention by user sketch with [**AutoConnectAux**](acintro.md).
- Supports loading and saving of user-defined parameters with JSON format.
- Improved the WiFi connection sequence at the first WiFi.begin. Even if [**AutoConnectConfig::autoReconnect**](api.md#autoreconnect) is disabled when SSID and PSK are not specified, it will use the information of the last established access point. The autoReconnect option will achieve trying the connect after a previous connection failed.
- Supports the [**AutoConnectConfig::immediateStart**](api.md#immediatestart) option and immediately starts the portal without first trying WiFi.begin. You can start the captive portal at any time in combination with the [**AutoConnectConfig::autoRise**](api.md#autorise) option.
- Improved boot uri after reset. [**AutoConnectConfig::bootUri**](api.md#booturi) can be specified either /_ac or HOME path as the uri to be accessed after invoking Reset from AutoConnect menu.
- Improved the WiFi connection sequence at the first WiFi.begin. Even if [**AutoConnectConfig::autoReconnect**](apiconfig.md#autoreconnect) is disabled when SSID and PSK are not specified, it will use the information of the last established access point. The autoReconnect option will achieve trying the connect after a previous connection failed.
- Supports the [**AutoConnectConfig::immediateStart**](apiconfig.md#immediatestart) option and immediately starts the portal without first trying WiFi.begin. You can start the captive portal at any time in combination with the [**AutoConnectConfig::autoRise**](apiconfig.md#autorise) option.
- Improved boot uri after reset. [**AutoConnectConfig::bootUri**](apiconfig.md#booturi) can be specified either /_ac or HOME path as the uri to be accessed after invoking Reset from AutoConnect menu.
- Improved source code placement of predefined macros. Defined common macros have been moved to ```AutoConnectDefs.h```.
- Supports [**AutoConnectConfig::hostName**](api.md#hostname). It activates ```WiFi.hostname()```/```WiFi.setHostName()```.
- Supports [**AutoConnectConfig::hostName**](apiconfig.md#hostname). It activates ```WiFi.hostname()```/```WiFi.setHostName()```.
- Supports the captive portal time-out. It can be controlled by [**AutoConnectConfig::portalTimeout**](apiconfig.md#portaltimeout) and [**AutoConnectConfig::retainPortal**](apiconfig.md#retainportal).
#### [0.9.6] Sep.27, 2018.
- Improvement of RSSI detection for saved SSIDs.
- Fixed disconnection SoftAP completely at the first connection phase of the AutoConnect::begin.
- Fixed disconnection SoftAP completely at the first connection phase of the [**AutoConnect::begin**](api.md#begin).
#### [0.9.5] Aug.27, 2018.
@ -22,7 +23,7 @@
#### [0.9.4] May 5, 2018.
- Automatically focus passphrase after selecting SSID with Configure New AP.
- Supports AutoConnectConfig::autoReconnect option, it will scan the WLAN when it can not connect to the default SSID, apply the applicable credentials if it is saved, and try reconnecting.
- Supports [**AutoConnectConfig::autoReconnect**](apiconfig.md#autoreconnect) option, it will scan the WLAN when it can not connect to the default SSID, apply the applicable credentials if it is saved, and try reconnecting.
Hieromon Ikasamo
6 years ago
