The above example handles in the handler for the values of a custom web page. An [AutoConnect::on](api.md#on) function registers a handler for the AutoConnectAux page of the specified uri. The argument of the custom Web page handler is an AutoConnectAux of the page itself and the [PageArgument](https://github.com/Hieromon/PageBuilder#arguments-of-invoked-user-function) object.
The above example handles in the handler for the values of a custom Web page. An [AutoConnect::on](api.md#on) function registers a handler for the AutoConnectAux page of the specified uri. The argument of the custom Web page handler is an AutoConnectAux of the page itself and the [PageArgument](https://github.com/Hieromon/PageBuilder#arguments-of-invoked-user-function) object.
To retrieve the values entered in a custom Web page you need to access the AutoConnectElement of the page that caused the request to this page and to do this, you use the [AutoConnect::where](api.md#where) function. The `AutoConnect::where` function returns a pointer to the AutoConnectAux object of the custom Web page that caused the HTTP request.
To retrieve the values entered in a custom Web page you need to access the AutoConnectElement of the page that caused the request to this page and to do this, you use the [AutoConnect::where](api.md#where) function. The `AutoConnect::where` function returns a pointer to the AutoConnectAux object of the custom Web page that caused the HTTP request.
### <iclass="fa fa-wpforms"></i> Over typing with LoadElement function
### <iclass="fa fa-wpforms"></i> Overwrite the AutoConnectElements
The [AutoConnectAux::loadElement](apiaux.md#loadelement) function overwrites its value when loading an AutoConnectElement. If the loadElement function wields an element with an input value, the previous value will be lost by the loaded value. If you need to preserve input values even during page transition operations, we recommend that you load parameters only once at an early stage in the `setup()` of sketches.
Sketches can update the attributes of AutoConnectElements with two approaches. A one is to assign directly to the attributes of a member variable of its element. The other is to overwrite them with loading the element by [AutoConnectAux::loadElement](apiaux.md#loadelement).
### <iclass="fa fa-check-square"></i> Check data against on submission
The elements for attributes described in the JSON document for AutoConnectElements overwrites the member variables of the target AutoConnectElements. However, AutoConnectAux::loadElement keeps the member variables unchanged if there is no element in the JSON document. This overwriting behavior is the same for the [AutoConnect::load](api.md#load) function.
For example, the combination of the sketch and JSON document as follows updates only the style while keeping Captiopn (ie. "Hello, world") as AutoConnectText value.
<iclass="fa fa-code"></i> The sketch (part of code)
### <iclass="far fa-check-square"></i> Check data against on submission
By giving a [pattern](apielements.md#pattern) to [AutoConnectInput](apielements.md#autoconenctinput), you can find errors in data styles while typing in custom Web pages. The pattern is specified by [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions).[^2] If the value during input of AutoConnectInput does not match the regular expression specified in the pattern, its background color changes to pink. The following example shows the behavior when checking the IP address in the AutoConnectInput field.
By giving a [pattern](apielements.md#pattern) to [AutoConnectInput](apielements.md#autoconenctinput), you can find errors in data styles while typing in custom Web pages. The pattern is specified by [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions).[^2] If the value during input of AutoConnectInput does not match the regular expression specified in the pattern, its background color changes to pink. The following example shows the behavior when checking the IP address in the AutoConnectInput field.
[^2]: The pattern of AutoConnectInput conforms to javascript specification.
[^2]: The pattern of AutoConnectInput conforms to javascript specification.
You can embed custom Web pages written in [**JSON**](https://www.json.org/index.html) into AutoConnect without declaring AutoConnectAux & AutoConnectElements in sketches. Custom Web page declaration in JSON can be included in the sketch in advance as the fixed string, or it can be stored in the external file such as SPIFFS for stream loading. You can also load and save AutoConnectElements objects individually.[^1]
You can embed custom Web pages written in [**JSON**](https://www.json.org/index.html) into AutoConnect without declaring AutoConnectAux & AutoConnectElements in sketches. Custom Web page declaration in JSON can be included in the sketch in advance as the fixed string, or it can be stored in the external file such as SPIFFS for stream loading. You can also load and save AutoConnectElements objects individually.[^1]
@ -9,7 +9,7 @@ By providing the following JSON document to AutoConnect, you can include the cus
A JSON document for AutoConnect can also contain declarations of multiple custom web pages. If you fit those multiple pages in one JSON document, sketch processing for loading AutoConnectAux will degenerate further.
A JSON document for AutoConnect can also contain declarations of multiple custom Web pages. If you fit those multiple pages in one JSON document, sketch processing for loading AutoConnectAux will degenerate further.
!!! caution "Need ArduinoJson v5"
!!! caution "Need ArduinoJson v5"
To process the AutoConnectAux & AutoConnectElements written in the JSON is you need to install the [ArduinoJson version 5](https://arduinojson.org/v5/doc/installation/) library.
To process the AutoConnectAux & AutoConnectElements written in the JSON is you need to install the [ArduinoJson version 5](https://arduinojson.org/v5/doc/installation/) library.
@ -33,16 +33,16 @@ An AutoConnectAux is described by a JSON object. The elements that make up an ob
: A title of the custom Web page. This is string value. String specified *title* will be displayed in the AutoConnection menu.
: A title of the custom Web page. This is string value. String specified *title* will be displayed in the AutoConnection menu.
#### <iclass="fa fa-key"></i> **uri**
#### <iclass="fa fa-key"></i> **uri**
: String of URI path that specifies where to place the custom web page. It needs to be a location from the root path including '**/**'.
: String of URI path that specifies where to place the custom Web page. It needs to be a location from the root path including '**/**'.
#### <iclass="fa fa-key"></i> **menu**
#### <iclass="fa fa-key"></i> **menu**
: This is a Boolean value indicating whether to include the custom web page in the AutoConnect menu. If the page only responds to another page and you want to prevent the direct use from the menu, you can exclude from the AutoConnect menu. If this key is false, it will not appear in the menu.
: This is a Boolean value indicating whether to include the custom Web page in the AutoConnect menu. If the page only responds to another page and you want to prevent the direct use from the menu, you can exclude from the AutoConnect menu. If this key is false, it will not appear in the menu.
#### <iclass="fa fa-key"></i> **element**
#### <iclass="fa fa-key"></i> **element**
: Describe an array of JSON objects as *element_array*. It is a JSON object array of the [AutoConnectElements](#json-object-for-autoconnectelements) that make up the custom Web page.
: Describe an array of JSON objects as *element_array*. It is a JSON object array of the [AutoConnectElements](#json-object-for-autoconnectelements) that make up the custom Web page.
!!! note "Order of elements on a custom Web page"
!!! note "Order of elements on a custom Web page"
The order in which AutoConnectElements are placed on a custom web page is the order in the JSON document.
The order in which AutoConnectElements are placed on a custom Web page is the order in the JSON document.
### <iclass="fa fa-copy"></i> Multiple custom Web pages declaration in JSON document
### <iclass="fa fa-copy"></i> Multiple custom Web pages declaration in JSON document
@ -104,16 +104,12 @@ You can put declarations of multiple custom Web pages in one JSON document. In t
AutoConnectElements in JSON description are described as an array in the `element` with arguments of each [constructor](acelements.md#constructor).
AutoConnectElements in JSON description are described as an array in the `element` with arguments of each [constructor](acelements.md#constructor).
@ -229,4 +225,4 @@ AutoConnect passes the given JSON document directly to the [**parseObject()**](h
## Saving JSON document
## Saving JSON document
However, AutoConnect does not support saving AutoConnectAux as a whole custom Web page. If you want to persist an AutoConnectElements object, you need to save it as an AutoConenctElement object unit. AutoConnectAux has a [function](achandling.md#saving-autoconnectelements) to write multiple elements to the stream in a batch.
The sketch can persist AutoConnectElements as a JSON document and also uses [this function](achandling.md#saving-autoconnectelements-with-json) to save the values entered on the custom Web page. And you can reload the saved JSON document into AutoConnectElements as the field in a custom Web page using the [load function](achandling.md#loading-autoconnectaux-autoconnectelements-with-json).
@ -58,7 +58,7 @@ Run the AutoConnect site using the externally ensured ESP8266WebServer for ESP82
The [**handleClient**](api.md#handleclient) function of AutoConnect can include the response of the URI handler added by the user using the "*on*" function of ESP8266WebServer/WebServer. If ESP8266WebServer/WebServer is assigned internally by AutoConnect, the sketch can obtain that reference with the [**host**](api.md#host) function.
The [**handleClient**](api.md#handleclient) function of AutoConnect can include the response of the URI handler added by the user using the "*on*" function of ESP8266WebServer/WebServer. If ESP8266WebServer/WebServer is assigned internally by AutoConnect, the sketch can obtain that reference with the [**host**](api.md#host) function.
<dlclass="apidl">
<dlclass="apidl">
<dt>**Parameters**</dt>
<dt>**Parameters**</dt>
<dd><spanclass="apidef">webServer</span>A reference of ESP8266WebServer or WebServer instance.</dd>
<dd><spanclass="apidef">webServer</span><spanclass="apidesc">A reference of ESP8266WebServer or WebServer instance.</span></dd>
</dl>
</dl>
## <iclass="fa fa-code"></i> Public member functions
## <iclass="fa fa-code"></i> Public member functions
Returns a pointer to AutoConnectAux with the URI specified by *uri*. If AutoConnectAux with that URI is not bound, it returns **nullptr**.
Returns a pointer to AutoConnectAux with the URI specified by *uri*. If AutoConnectAux with that URI is not bound, it returns **nullptr**.
<dlclass="apidl">
<dlclass="apidl">
<dt>**Parameters**</dt>
<dt>**Parameters**</dt>
<dd><spanclass="apidef">uri</span>A string of the URI.</dd>
<dd><spanclass="apidef">uri</span><spanclass="apidesc">A string of the URI.</span></dd>
<dt>**Return value**</dt>
<dt>**Return value**</dt>
<dd>A Pointer of the AutoConnectAux instance.</dd>
<dd>A Pointer of the AutoConnectAux instance.</dd>
</dl>
</dl>
@ -93,12 +93,12 @@ AutoConnect first invokes *WiFi.begin*. If the *ssid* and the *passphrase* are m
The captive portal will not be started if the connection has been established with first *WiFi.begin*. If the connection cannot establish, switch to WIFI_AP_STA mode and activate SoftAP. Then DNS server starts.
The captive portal will not be started if the connection has been established with first *WiFi.begin*. If the connection cannot establish, switch to WIFI_AP_STA mode and activate SoftAP. Then DNS server starts.
<dlclass="apidl">
<dlclass="apidl">
<dt>**Parameters**</dt>
<dt>**Parameters**</dt>
<dd><spanclass="apidef">ssid</span>SSID to be connected.</dd>
<dd><spanclass="apidef">ssid</span><spanclass="apidesc">SSID to be connected.</span></dd>
<dd><spanclass="apidef">passphrase</span>Password for connection.</dd>
<dd><spanclass="apidef">passphrase</span><spanclass="apidesc">Password for connection.</span></dd>
<dd><spanclass="apidef">timeout</span>A time out value in milliseconds for waiting connection.</dd>
<dd><spanclass="apidef">timeout</span><spanclass="apidesc">A time out value in milliseconds for waiting connection.</span></dd>
<dt>**Return value**</dt>
<dt>**Return value**</dt>
<dd><spanclass="apidef">true</span>Connection established, AutoConnect service started with WIFI_STA mode.</dd>
<dd><spanclass="apidef">true</span><spanclass="apidesc">Connection established, AutoConnect service started with WIFI_STA mode.</span></dd>
<dd><spanclass="apidef">false</span>Could not connected, Captive portal started with WIFI_AP_STA mode.</dd>
<dd><spanclass="apidef">false</span><spanclass="apidesc">Could not connected, Captive portal started with WIFI_AP_STA mode.</span></dd>
Set SoftAP's WiFi configuration and static IP configuration.
Set SoftAP's WiFi configuration and static IP configuration.
<dlclass="apidl">
<dlclass="apidl">
<dt>**Parameters**</dt>
<dt>**Parameters**</dt>
<dd><spanclass="apidef">config</span>Reference to [**AutoConnectConfig**](apiconfig.md) containing SoftAP's parameters and static IP parameters.</dd>
<dd><spanclass="apidef">config</span><spanclass="apidesc">Reference to [**AutoConnectConfig**](apiconfig.md) containing SoftAP's parameters and static IP parameters.</span></dd>
<dd><spanclass="apidef">ap</span>SSID for SoftAP. The default value is **esp8266ap** for ESP8266, **esp32ap** for ESP32.</dd>
<dd><spanclass="apidef">ap</span><spanclass="apidesc">SSID for SoftAP. The default value is **esp8266ap** for ESP8266, **esp32ap** for ESP32.</span></dd>
<dd><spanclass="apidef">password</span>Password for SodtAP. The default value is **12345678**.</dd>
<dd><spanclass="apidef">password</span><spanclass="apidesc">Password for SodtAP. The default value is **12345678**.</span></dd>
Join the AutoConnectAux object to AutoConnect. AutoConnectAux objects can be joined one by one, or joined altogether. The AutoConnectAux object joined by the join function can be handled from the AutoConnect menu.
Join the AutoConnectAux object to AutoConnect. AutoConnectAux objects can be joined one by one, or joined altogether. The AutoConnectAux object joined by the join function can be handled from the AutoConnect menu.
<dlclass="apidl">
<dlclass="apidl">
<dt>**Parameters**</dt>
<dt>**Parameters**</dt>
<dd><spanclass="apidef">aux</span>Reference to AutoConnectAux. It can be std::vector of std::reference_wrapper of AutoConnectAux with [list initialization](https://en.cppreference.com/w/cpp/language/list_initialization).</dd>
<dd><spanclass="apidef">aux</span><spanclass="apidesc">Reference to AutoConnectAux. It can be std::vector of std::reference_wrapper of AutoConnectAux with [list initialization](https://en.cppreference.com/w/cpp/language/list_initialization).</span></dd>
</dl>
</dl>
### <iclass="fa fa-caret-right"></i> load
### <iclass="fa fa-caret-right"></i> load
@ -222,10 +222,10 @@ bool load(Stream& aux)
Load JSON document of AutoConnectAux which contains AutoConnectElements. If there is a syntax error in the JSON document, false is returned.
Load JSON document of AutoConnectAux which contains AutoConnectElements. If there is a syntax error in the JSON document, false is returned.
<dlclass="apidl">
<dlclass="apidl">
<dt>**Parameters**</dt>
<dt>**Parameters**</dt>
<dd><spanclass="apidef">aux</span>The input string to be loaded.</dd>
<dd><spanclass="apidef">aux</span><spanclass="apidesc">The input string to be loaded.</span></dd>
<dt>**Return value**</dt>
<dt>**Return value**</dt>
<dd><spanclass="apidef">true</span>The JSON document as AutoConnectAux successfully loaded.</dd>
<dd><spanclass="apidef">true</span><spanclass="apidesc">The JSON document as AutoConnectAux successfully loaded.</span></dd>
<dd><spanclass="apidef">false</span>Loading JSON document unsuccessful, probably syntax errors have occurred or insufficient memory. You can diagnose the cause of loading failure using the [ArduinoJson Assistant](https://arduinojson.org/v5/assistant/).</dd>
<dd><spanclass="apidef">false</span><spanclass="apidesc">Loading JSON document unsuccessful, probably syntax errors have occurred or insufficient memory. You can diagnose the cause of loading failure using the [ArduinoJson Assistant](https://arduinojson.org/v5/assistant/).</span></dd>
Register the handler function of the AutoConnectAux.
Register the handler function of the AutoConnectAux.
<dlclass="apidl">
<dlclass="apidl">
<dt>**Parameters**</dt>
<dt>**Parameters**</dt>
<dd><spanclass="apidef">uri</span>A string of the URI assigned to the AutoConnectAux page.</dd>
<dd><spanclass="apidef">uri</span><spanclass="apidesc">A string of the URI assigned to the AutoConnectAux page.</span></dd>
<dd><spanclass="apidef">handler</span>A function that behaves when a request to the AutoConnectAux page occurs. AuxHandlerFunctionT type is defined by the following declaration.</dd>
<dd><spanclass="apidef">handler</span><spanclass="apidesc">A function that behaves when a request to the AutoConnectAux page occurs. AuxHandlerFunctionT type is defined by the following declaration.<pclass=""apidesc">`String handler(AutoConnectAux&, PageArgument&)`</p></span></dd>
<dd><spanclass="apidef">order</span><spanclass="apidesc">Specifies when the handler is called with the following enumeration value.</span></dd>
<dd><spanclass="apidef">order</span>Specifies when the handler is called with the following enumeration value.</dd>
: - **AC_EXIT_AHEAD** :
: - **AC_EXIT_AHEAD** :
Called before AutoConnect generates the HTML of the page. You set the value of AutoConnectElements in the handler then its value will be displayed on the page.
Called before AutoConnect generates the HTML of the page. You set the value of AutoConnectElements in the handler then its value will be displayed on the page.
Register the handler function for undefined URL request detected.
Register the handler function for undefined URL request detected.
<dlclass="apidl">
<dlclass="apidl">
<dt>**Parameters**</dt>
<dt>**Parameters**</dt>
<dd><spanclass="apidef">fn</span>A function of the "not found" handler.</dd>
<dd><spanclass="apidef">fn</span><spanclass="apidesc">A function of the "not found" handler.</span></dd>
</dl>
</dl>
### <iclass="fa fa-caret-right"></i> where
### <iclass="fa fa-caret-right"></i> where
```cpp
```cpp
AutoConenctAux* where(void)
AutoConenctAux* where(void)
```
```
Returns a pointer to the AutoConnectAux object of the custom web page that caused the request to that page. This function is available only for the AutoConnectAux object. It is invalid for HTTP requests from individual pages registered with the **on** handler of ESP8266WebServer/ESP32. In other words, this function only returns the last AutoConnecAux page called.
Returns a pointer to the AutoConnectAux object of the custom Web page that caused the request to that page. This function is available only for the AutoConnectAux object. It is invalid for HTTP requests from individual pages registered with the **on** handler of ESP8266WebServer/ESP32. In other words, this function only returns the last AutoConnecAux page called.
<dlclass="apidl">
<dlclass="apidl">
<dt>**Retuen value**</dt>
<dt>**Retuen value**</dt>
<dd>A pointer to the AutoConnectAux that caused the request the page.</dd>
<dd>A pointer to the AutoConnectAux that caused the request the page.</dd>
@ -7,9 +7,10 @@ AutoConnectAux(const String& uri = String(""), const String& title = String(""),
```
```
<dlclass="apidl">
<dlclass="apidl">
<dt>**Parameters**</dt>
<dt>**Parameters**</dt>
<dd><spanclass="apidef">uri</span>URI of this custom Web Page.</dd>
<dd><spanclass="apidef">uri</span><spanclass="apidesc">URI of this custom Web Page.</span></dd>
<dd><spanclass="apidef">title</span>Page title of this custom web page. It will appear on the auto connection menu and at the top of that page.</dd>
<dd><spanclass="apidef">title</span><spanclass="apidesc">Page title of this custom Web page. It will appear on the auto connection menu and at the top of that page.</span></dd>
<dd><spanclass="apidef">addons</span>Reference to AutoConnectElement collection.</dt>
<dd><spanclass="apidef">menu</span><spanclass="apidesc">Specifies whether to display this page on menu.</span></dd>
<dd><spanclass="apidef">addons</span><spanclass="apidesc">Reference to AutoConnectElement collection.</span></dt>
</dl>
</dl>
## <iclass="fa fa-code"></i> Public member functions
## <iclass="fa fa-code"></i> Public member functions
Add an element to the AutoConnectAux. An added element is displayed on the custom Web page invoked from the AutoConnect menu.
Add an element to the AutoConnectAux. An added element is displayed on the custom Web page invoked from the AutoConnect menu.
<dlclass="apidl">
<dt>**Parameters**</dt>
<dd><spanclass="apidef">addon</span><spanclass="apidesc">Reference of AutoConnectElements. Specifies one of the AutoConnectElements classes.</span></dd>
<dd><spanclass="apidef">addons</span><spanclass="apidesc">An array list of reference of AutoConnectElements. An [list initialization](https://en.cppreference.com/w/cpp/language/list_initialization) of the [std::vector](https://en.cppreference.com/w/cpp/container/vector) can be used for the addons parameter cause the actual definition of type **AutoConnectElementVT** is `std::vector<std::reference_wrapper<AutoConnectElement>>`.</span></dd>
Get a registered AutoConnectElement as specified name. If **T** is specified as an actual type of AutoConnectElements, it returns a reference to that instance.
Get registered AutoConnectElement as specified name.
<dlclass="apidl">
<dt>**Parameters**</dt>
<dd><spanclass="apidef">T</span><spanclass="apidesc">Actual type name of AutoConnectElements as [AutoConnectButton](apielements.md#autoconnectbutton), [AutoConnectCheckbox](apielements.md#autoconnectcheckbox), [AutoConnectElement](apielements.md#autoconnectelement), [AutoConnectInput](apielements.md#autoconnectinput), [AutoConnectRadio](apielements.md#autoconnectradio), [AutoConnectSelect](apielements.md#autoconnectselect), [AutoConnectSubmit](apielements.md#autoconnectsubmit), [AutoConnectText](apielements.md#autoconnecttext).</span></dd>
<dd><spanclass="apidef">name</span><spanclass="apidesc">Name of the AutoConnectElements to be retrieved.</span></dd>
<dt>**Return value**</dt><dd>A reference of the AutoConnectElements. If a type is not specified returns a pointer.</dd>
</dl>
### <iclass="fa fa-caret-right"></i> getElements
### <iclass="fa fa-caret-right"></i> getElements
@ -41,6 +52,22 @@ Get registered AutoConnectElement as specified name.
AutoConnectElementVT& getElements(void)
AutoConnectElementVT& getElements(void)
```
```
Get vector of reference of all elements.
Get vector of reference of all elements.
<dlclass="apidl">
<dt>**Return value**</dt>
<dd>A reference to std::vector of reference to AutoConnecctElements.</dd>
</dl>
The getElements returns a reference to std::vector of reference to AutoConnecctElements. This function is provided to handle AutoConnectElemets owned by AutoConnectAux in bulk, and you can use each method of std::vector for a return value.
```cpp
// An example of getting type and name of all AutoConnectElements registered in AutoConnectAux.
AutoConnectAux aux;
// some code here...
AutoConnectElementVt& elements = aux.getElements();
for (AutoConnectElement& elm : elements) {
Serial.printf("name<%s> as type %d\n", elm.name.c_str(), (int)elm.typeOf());
Load all AutoConnectElements elements from JSON document into AutoConnectAux as custom Web pages. The JSON document specified by the load function must be the [document structure](acjson.md#json-objects-elements-for-the-custom-web-page) of AutoConnectAux. Its JSON document can describe multiple pages as an array.
<dlclass="apidl">
<dt>**Parameters**</dt>
<dd><spanclass="apidef">in</span><spanclass="apidesc">Specifies the JSON document to be load. The load function can input the following objects.
- String : Read-only String
- PROGMEM : Character array contained in the flash
- Stream : An entity that inherits stream class, generally SPIFFS or SD.
</span></dd>
<dt>**Return value**</dt>
<dd><spanclass="apidef">true</span><spanclass="apidesc">JSON document as the custom Web pages successfully loaded.</span></dd>
!!! hint "Load multiple custom Web pages separately"
Multiple custom Web pages can be loaded at once with JSON as an array. But it will consume a lot of memory. By loading a JSON document by page as much as possible, you can reduce memory consumption.
### <iclass="fa fa-caret-right"></i> loadElement
### <iclass="fa fa-caret-right"></i> loadElement
@ -66,14 +108,49 @@ bool loadElement(const __FlashStringHelper* in, const String& name = String(""))
```cpp
```cpp
bool loadElement(Stream& in, const String& name = String(""))
bool loadElement(Stream& in, const String& name = String(""))
```
```
Load specified element.
Load specified element from JSON document into AutoConnectAux. The JSON document specified by the loadElement function must be the [AutoConnectElement document structure](acjson.md#json-object-for-autoconnectelements). When loading from a JSON document that describes multiple elements, its description must be an array syntax.
<dlclass="apidl">
<dt>**Parameters**</dt>
<dd><spanclass="apidef">in</span><spanclass="apidesc">Specifies the JSON document to be load. The load function can input the following objects.
- String : Read-only String
- PROGMEM : Character array contained in the flash
- Stream : An entity that inherits stream class, generally SPIFFS or SD.
</span></dd>
<dd><spanclass="apidef">name</span><spanclass="apidesc">Specifies the name to be load. If the name is not specified, the loadElement function will load all elements contained in the JSON document.</span></dd>
Please note that the JSON document that is the input for loadElement is an array syntax of AutoConnectElements when there are multiple elements. For example, the following JSON document has a syntax error:
```json
{
"name": "Caption",
"type": "ACText",
"value": "Hello, world"
},
{
"name": "Server",
"type": "ACInput",
"label": "Server address"
}
```
The outermost `[`, `]` is missing.
### <iclass="fa fa-caret-right"></i> menu
### <iclass="fa fa-caret-right"></i> menu
```cpp
```cpp
void menu(const bool post)
void menu(const bool post)
```
```
Set or reset the display as menu item for this AutoConnectAux.
Set or reset the display as menu item for this AutoConnectAux. This function programmatically manipulates the menu parameter of the [AutoConenctAux constructor](apiaux.md#autoconnectaux).
<dlclass="apidl">
<dt>**Parameters**</dt>
<dd><spanclass="apidef">true</span><spanclass="apidesc">Show on the menu.</span></dd>
<dd><spanclass="apidef">false</span><spanclass="apidesc">Hidden on the menu.</span></dd>
Register the handler function of the AutoConnectAux.
Register the handler function of the AutoConnectAux.
<dlclass="apidl">
<dlclass="apidl">
<dt>**Parameters**</dt>
<dt>**Parameters**</dt>
<dd><spanclass="apidef">handler</span>A function that behaves when a request to the AutoConnectAux page occurs. AuxHandlerFunctionT type is defined by the following declaration.</dd>
<dd><spanclass="apidef">handler</span><spanclass="apidesc">A function that behaves when a request to the AutoConnectAux page occurs. AuxHandlerFunctionT type is defined by the following declaration.<pclass="apidesc">`String handler(AutoConnectAux&, PageArgument&)`</p></span></dd>
<dd><spanclass="apidef">order</span><spanclass="apidesc">Specifies when the handler is called with the following enumeration value.</span>
<dd><spanclass="apidef">order</span>Specifies when the handler is called with the following enumeration value.</dd>
: - **AC_EXIT_AHEAD** :
: - **AC_EXIT_AHEAD** :
Called before AutoConnect generates the HTML of the page. You set the value of AutoConnectElements in the handler then its value will be displayed on the page.
Called before AutoConnect generates the HTML of the page. You set the value of AutoConnectElements in the handler then its value will be displayed on the page.
: - **AC_EXIT_LATER** :
: - **AC_EXIT_LATER** :
Called after AutoConnect generates the HTML of the page. You can append to HTML generated by AutoConnect.
Called after AutoConnect generates the HTML of the page. You can append to HTML generated by AutoConnect.
: - **AC_EXIT_BOTH** :
: - **AC_EXIT_BOTH** :
Called even before generating HTML and after generated.
Called even before generating HTML and after generated.</dd>
</dl>
</dl>
### <iclass="fa fa-caret-right"></i> release
### <iclass="fa fa-caret-right"></i> release
@ -99,14 +175,31 @@ Register the handler function of the AutoConnectAux.
```cpp
```cpp
bool release(const String& name)
bool release(const String& name)
```
```
Release a specified AutoConnectElement.
Release a specified AutoConnectElement from AutoConenctAux. The release function is provided to dynamically change the structure of the custom Web pages with the sketch. By combining the release function and the [add](apiaux.md#add) function or the [loadElement](apiaux.md#loadelement) function, the sketch can change the style of the custom Web page according to its behavior.
<dlclass="apidl">
<dt>**Parameters**</dt>
<dd><spanclass="apidef">name</span><spanclass="apidesc">Specifies the name of AutoConnectElements to be released.</span></dd>
Write elements of AutoConnectAux to the stream. The saveElement function outputs the specified AutoConenctElements as a JSON document using the [prettyPrintTo](https://arduinojson.org/v5/api/jsonobject/prettyprintto/) function of the [ArduinoJson](https://arduinojson.org/) library.
<dlclass="apidl">
<dt>**Parameters**</dt>
<dd><spanclass="apidef">out</span><spanclass="apidesc">Output stream to be output. SPIFFS, SD also Serial can be specified generally.</span></dd>
<dd><spanclass="apidef">names</span><spanclass="apidesc">The array of the name of AutoConnectElements to be output. If the names parameter is not specified, all AutoConnectElements registered in AutoConnectAux are output.</span></dd>
<dt>**Return value**</dt>
<dd>The number of bytes written.</dd>
</dl>
!!! note "The output format is pretty"
The saveElement function outputs a prettified JSON document.
Sets the value of the specified AutoConnectElement. If values is specified as a *std::vector* of String, the element that can set the values is the [AutoConnectRadio](apielements.md#autoconnectradio) or the [AutoConnectSelect](apielements.md#autoconnectselect).
<dlclass="apidl">
<dt>**Parameters**</dt>
<dd><spanclass="apidef">name</span><spanclass="apidesc">Specifies the name of the AutoConnectElements that you want to set the value.</span></dd>
<dd><spanclass="apidef">value</span><spanclass="apidesc">Specifies the value to be set.</span></dd>
<dd><spanclass="apidef">values</span><spanclass="apidesc">Specifies a reference of a *std::vector* of String. It contains the values of the AutoConnectRadio or the AutoConnectSelect.</span></dd>
<dt>**Return value**</dt>
<dd><spanclass="apidef">true</span><spanclass="apidesc">The value has been set.</span></dd>
<dd><spanclass="apidef">false</span><spanclass="apidesc">AutoConnectElements with the specified name are not registered. Or the type of the value is not consistent with the specified AutoConnectElements.</span></dd>
</dl>
!!! hint "You can directly access the value member variable."
If you are gripping with the sketch to the AutoConnectElements of the target that sets the value, you can access the value member variable directly. The following sketch code has the same effect.
```cpp
AutoConnectAux aux;
// ... Griping the AutoConnectText here.
aux.setElementValue("TEXT_FIELD", "New value");
```
```cpp
AutoConnectAux aux;
// ... Griping the AutoConnectText here.
AutoConnectText& text = aux.getElement<AutoConnectText>("TEXT_FIELD");
text.value = "New value";
```
The difference between the setElementValue and the value access with the [getElement](apiaux.md#getelement) is the certainty of the registration state for the element. The [getElement](apiaux.md#getelement) returns an empty object if the element is not registered then a sketch assigns the value to it. May occur unexpected results and crashes. You should use the setElementValue if its registration is unsettled.
### <iclass="fa fa-caret-right"></i> setTitle
### <iclass="fa fa-caret-right"></i> setTitle
```cpp
```cpp
void setTitle(const String& title)
void setTitle(const String& title)
```
```
Set the title string of the AutoConnectAux page.
Set the title string of the custom Web page. This title will be displayed as the menu title of the custom Web page.
<dlclass="apidl">
<dt>**Parameter**</dt>
<dd><spanclass="apidef">title</span><spanclass="apidesc">Title string to be display.</span></dd>
</dl>
!!! caution "Not the menu title"
The setTitle function is not set for the AutoConnect menu title. The effect of this function is that custom Web page only. To change the AutoConnect menu title use [AutoConnectConfig::title](apiconfig.md#title).
@ -16,10 +16,10 @@ AutoConnectConfig(const char* ap, const char* password, const unsigned long time
```
```
<dlclass="apidl">
<dlclass="apidl">
<dt>**Parameters**</dt>
<dt>**Parameters**</dt>
<dd><spanclass="apidef">ap</span>SSID for SoftAP. The length should be up to 31. The default value is **esp8266ap** for ESP8266, **esp32ap** for ESP32.</dd>
<dd><spanclass="apidef">ap</span><spanclass="apidesc">SSID for SoftAP. The length should be up to 31. The default value is **esp8266ap** for ESP8266, **esp32ap** for ESP32.</span></dd>
<dd><spanclass="apidef">password</span>Password for SodtAP. The length should be from 8 to up to 63. The default value is **12345678**.</dd>
<dd><spanclass="apidef">password</span><spanclass="apidesc">Password for SodtAP. The length should be from 8 to up to 63. The default value is **12345678**.</span></dd>
<dd><spanclass="apidef">timeout</span>The timeout value of the captive portal in [ms] units. The default value is 0.</dd>
<dd><spanclass="apidef">timeout</span><spanclass="apidesc">The timeout value of the captive portal in [ms] units. The default value is 0.</span></dd>
<dd><spanclass="apidef">channel</span>The channel number of WIFi when SoftAP starts. The default values is 1.</dd>
<dd><spanclass="apidef">channel</span><spanclass="apidesc">The channel number of WIFi when SoftAP starts. The default values is 1.</span></dd>
</dl>
</dl>
## <iclass="fa fa-code"></i> Public member variables
## <iclass="fa fa-code"></i> Public member variables
@ -37,7 +37,7 @@ SoftAP's SSID.
Sets IP address for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this.
Sets IP address for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this.
<dlclass="apidl">
<dlclass="apidl">
<dt>**Type**</dt>
<dt>**Type**</dt>
<dd><spanclass="apidef"style="width:230px;">IPAddress</span>The default value is **192.168.244.1**</dd>
<dd><spanclass="apidef">IPAddress</span><spanclass="apidesc">The default value is **192.168.244.1**</span></dd>
<dd><spanclass="apidef"style="width:230px;">false</span>Starts Captive Portal in SoftAP + STA mode without trying to reconnect. This is the default.</dd>
<dd><spanclass="apidef">false</span><spanclass="apidesc">Starts Captive Portal in SoftAP + STA mode without trying to reconnect. This is the default.</span></dd>
</dl>
</dl>
When the autoReconnect option is enabled, an automatic connection will behave if the following conditions are satisfied.
When the autoReconnect option is enabled, an automatic connection will behave if the following conditions are satisfied.
@ -75,8 +75,8 @@ Captive portal activation switch. False for disabling the captive portal. It pre
<dt>**Type**</dt>
<dt>**Type**</dt>
<dd>bool</dd>
<dd>bool</dd>
<dt>**Value**</dt>
<dt>**Value**</dt>
<dd><spanclass="apidef"style="width:230px;">true</span>Enable the captive portal. This is the default.</dd>
<dd><spanclass="apidef">true</span><spanclass="apidesc">Enable the captive portal. This is the default.</span></dd>
<dd><spanclass="apidef"style="width:230px;">false</span>Disable the captive portal.</dd>
<dd><spanclass="apidef">false</span><spanclass="apidesc">Disable the captive portal.</span></dd>
</dl>
</dl>
### <iclass="fa fa-caret-right"></i> autoSave
### <iclass="fa fa-caret-right"></i> autoSave
@ -86,8 +86,8 @@ The credential saved automatically at the connection establishment.
<dt>**Type**</dt>
<dt>**Type**</dt>
<dd>AC_SAVECREDENTIAL_t</dd>
<dd>AC_SAVECREDENTIAL_t</dd>
<dt>**Value**</dt>
<dt>**Value**</dt>
<dd><spanclass="apidef"style="width:230px;">AC_SAVECREDENTIAL_AUTO</span>The credential saved automatically. This is the default.</dd>
<dd><spanclass="apidef">AC_SAVECREDENTIAL_AUTO</span><spanclass="apidesc"></span><spanclass="apidef"> </span><spanclass="apidesc">The credential saved automatically. This is the default.</span></dd>
<dd><spanclass="apidef"style="width:230px;">AC_SAVECREDENTIAL_NEVER</span>The credential no saved.</dd>
<dd><spanclass="apidef">AC_SAVECREDENTIAL_NEVER</span><spanclass="apidesc"></span><spanclass="apidef"> </span><spanclass="apidesc">The credential no saved.</span></dd>
</dl>
</dl>
### <iclass="fa fa-caret-right"></i> bootUri
### <iclass="fa fa-caret-right"></i> bootUri
@ -97,8 +97,8 @@ Specify the location to be redirected after module reset in the AutoConnect menu
<dt>**Type**</dt>
<dt>**Type**</dt>
<dd>AC_ONBOOTURI_t</dd>
<dd>AC_ONBOOTURI_t</dd>
<dt>**Value**</dt>
<dt>**Value**</dt>
<dd><spanclass="apidef"style="width:230px;">AC_ONBOOTURI_ROOT</span>Resetting the module redirects it to the AutoConnect root path. The root path is assumed to be AUTOCONNECT_URI defined in AutoConnectDefs.h.</dd>
<dd><spanclass="apidef">AC_ONBOOTURI_ROOT</span><spanclass="apidesc"></span><spanclass="apidef"> </span><spanclass="apidesc">Resetting the module redirects it to the AutoConnect root path. The root path is assumed to be AUTOCONNECT_URI defined in AutoConnectDefs.h.</span></dd>
<dd><spanclass="apidef"style="width:230px;">AC_ONBOOTURI_HOME</span>It is redirected to the uri specified by [**AutoConnectConfig::homeUri**](apiconfig.md#homeuri).</dd>
<dd><spanclass="apidef">AC_ONBOOTURI_HOME</span><spanclass="apidesc"></span><spanclass="apidef"> </span><spanclass="apidesc">It is redirected to the uri specified by [**AutoConnectConfig::homeUri**](apiconfig.md#homeuri).</span></dd>
@ -147,7 +147,7 @@ Set secondary DNS server address when using static IP address.
Sets gateway address for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this.
Sets gateway address for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this.
<dlclass="apidl">
<dlclass="apidl">
<dt>**Type**</dt>
<dt>**Type**</dt>
<dd><spanclass="apidef"style="width:230px;">IPAddress</span>The default value is **192.168.244.1**</dd>
<dd><spanclass="apidef">IPAddress</span><spanclass="apidesc">The default value is **192.168.244.1**</span></dd>
</dl>
</dl>
### <iclass="fa fa-caret-right"></i> hidden
### <iclass="fa fa-caret-right"></i> hidden
@ -157,8 +157,8 @@ Sets SoftAP to hidden SSID.
<dt>**Type**</dt>
<dt>**Type**</dt>
<dd>uint8_t</dd>
<dd>uint8_t</dd>
<dt>**Value**</dt>
<dt>**Value**</dt>
<dd><spanclass="apidef"style="width:230px;">0</span>SSID will be appeared. This is the default.</dd>
<dd><spanclass="apidef">0</span><spanclass="aidesc">SSID will be appeared. This is the default.</span></dd>
<dd><spanclass="apidef"style="width:230px;">1</span>SSID will be hidden.</dd>
<dd><spanclass="apidef">1</span><spanclass="apidesc">SSID will be hidden.</span></dd>
</dl>
</dl>
### <iclass="fa fa-caret-right"></i> homeUri
### <iclass="fa fa-caret-right"></i> homeUri
@ -184,8 +184,8 @@ Disable the first WiFi.begin() and start the captive portal. If this option is e
<dt>**Type**</dt>
<dt>**Type**</dt>
<dd>bool</dd>
<dd>bool</dd>
<dt>**Value**</dt>
<dt>**Value**</dt>
<dd><spanclass="apidef"style="width:230px;">true</span>Start the captive portal with [**AutoConnect::begin**](api.md#begin).</dd>
<dd><spanclass="apidef">true</span><spanclass="apidesc">Start the captive portal with [**AutoConnect::begin**](api.md#begin).</span></dd>
<dd><spanclass="apidef"style="width:230px;">false</span>Enable the first WiFi.begin() and it will start captive portal when connection failed. This is default.</dd>
<dd><spanclass="apidef">false</span><spanclass="apidesc">Enable the first WiFi.begin() and it will start captive portal when connection failed. This is default.</span></dd>
</dl>
</dl>
### <iclass="fa fa-caret-right"></i> netmask
### <iclass="fa fa-caret-right"></i> netmask
@ -193,7 +193,7 @@ Disable the first WiFi.begin() and start the captive portal. If this option is e
Sets subnet mask for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this.
Sets subnet mask for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this.
<dlclass="apidl">
<dlclass="apidl">
<dt>**Type**</dt>
<dt>**Type**</dt>
<dd><spanclass="apidef"style="width:230px;">IPAddress</span>The default value is **255.255.255.0**</dd>
<dd><spanclass="apidef">IPAddress</span><spanclass="apidesc">The default value is **255.255.255.0**</span></dd>
@ -201,7 +201,7 @@ Sets subnet mask for Soft AP in captive portal. When AutoConnect fails the initi
Specify the timeout value of the captive portal in [ms] units. It is valid when the station is not connected and does not time out if the station is connected to the ESP module in SoftAP mode (ie Attempting WiFi connection with the portal function). If 0, the captive portal will not be timed-out.
Specify the timeout value of the captive portal in [ms] units. It is valid when the station is not connected and does not time out if the station is connected to the ESP module in SoftAP mode (ie Attempting WiFi connection with the portal function). If 0, the captive portal will not be timed-out.
<dlclass="apidl">
<dlclass="apidl">
<dt>**Type**</dt>
<dt>**Type**</dt>
<dd><spanclass="apidef"style="width:230px;">unsigned long</span>Captive portal timeout value. The default value is 0.</dd>
<dd><spanclass="apidef">unsigned long</span><spanclass="apidesc">Captive portal timeout value. The default value is 0.</span></dd>
</dl>
</dl>
### <iclass="fa fa-caret-right"></i> psk
### <iclass="fa fa-caret-right"></i> psk
@ -219,8 +219,8 @@ Specify whether to continue the portal function even if the captive portal timed
<dt>**Type**</dt>
<dt>**Type**</dt>
<dd>bool</dd>
<dd>bool</dd>
<dt>**Value**</dt>
<dt>**Value**</dt>
<dd><spanclass="apidef"style="width:230px;">true</span>Continue the portal function even if the captive portal times out. The STA + SoftAP mode of the ESP module continues and accepts the connection request to the AP.</dd>
<dd><spanclass="apidef">true</span><spanclass="apidesc">Continue the portal function even if the captive portal times out. The STA + SoftAP mode of the ESP module continues and accepts the connection request to the AP.</span></dd>
<dd><spanclass="apidef"style="width:230px;">false</span>When the captive portal times out, STA + SoftAP mode of the ESP module is stopped. This is default.</dd>
<dd><spanclass="apidef">false</span><spanclass="apidesc">When the captive portal times out, STA + SoftAP mode of the ESP module is stopped. This is default.</span></dd>
@ -91,7 +91,7 @@ Value of the element. It becomes a value attribute of an HTML `#!html <input typ
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.
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.
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.
@ -198,7 +198,7 @@ Value of the element. It becomes a value attribute of an HTML `#!html <input typ
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.
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">name</span><spanclass="apidesc">The element name.</span></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>
<dd><spanclass="apidef">values</span><spanclass="apidesc">An array of values of the radio buttons. Specifies an [std::vector](https://en.cppreference.com/w/cpp/container/vector) object.</span></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.
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:
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:
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.
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">
<dlclass="apidl">
<dt>**Parameters**</dt>
<dt>**Parameters**</dt>
<dd><spanclass="apidef">value</span>An option string to be checked.</dd>
<dd><spanclass="apidef">value</span><spanclass="apidesc">An option string to be checked.</span></dd>
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.
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">
<dlclass="apidl">
<dt>**Parameters**</dt>
<dt>**Parameters**</dt>
<dd><spanclass="apidef">reserve</span>Reserved size of a container for option strings.</dd>
<dd><spanclass="apidef">reserve</span><spanclass="apidesc">Reserved size of a container for option strings.</span></dd>
<dd><spanclass="apidef">name</span><spanclass="apidesc">The element name.</span></dd>
<dd><spanclass="apidef">options</span><spanclass="apidesc">An array of options of the select element. Specifies an [std::vector](https://en.cppreference.com/w/cpp/container/vector) object.</span></dd>
An array of String type for the selection options. It is an initialization list can be used. The `#!html <option value>` tags will be generated from each entry in the options.
@ -185,9 +185,9 @@ It consumes about 2K bytes in the static and about 12K bytes are consumed at the
Because AutoConnect does not send a login success response to the captive portal requests from the smartphone. The login success response varies iOS, Android and Windows. By analyzing the request URL of different login success inquiries for each OS, the correct behavior can be implemented, but not yet. Please resets ESP8266 from the AutoConnect menu.
Because AutoConnect does not send a login success response to the captive portal requests from the smartphone. The login success response varies iOS, Android and Windows. By analyzing the request URL of different login success inquiries for each OS, the correct behavior can be implemented, but not yet. Please resets ESP8266 from the AutoConnect menu.
## <iclass="fa fa-question-circle"></i> I can not see the custom web page.
## <iclass="fa fa-question-circle"></i> I cannot see the custom Web page.
JSON parse error
If the sketch is correct, a JSON syntax error may have occurred. In this case, activate the [AC_DEBUG](faq.md#3-turn-on-the-debug-log-options) and rerun. If you take the message of JSON syntax error, the [Json Assistant](https://arduinojson.org/v5/assistant/) helps syntax checking. This online tool is provided by the author of ArduinoJson and is most consistent for the AutoConnect.
## <iclass="fa fa-question-circle"></i> AutoConnect behaves not stable with my sketch yet.
## <iclass="fa fa-question-circle"></i> AutoConnect behaves not stable with my sketch yet.
@ -231,4 +231,13 @@ To fully enable for the AutoConnect debug logging options, change the following
### 4. Reports the issue to AutoConnect repository on Github
### 4. Reports the issue to AutoConnect repository on Github
If you can not solve AutoConnect problems please report to [Issues](https://github.com/Hieromon/AutoConnect/issues). And please make your question comprehensively, not a statement. Include all relevant information.
If you can not solve AutoConnect problems please report to [Issues](https://github.com/Hieromon/AutoConnect/issues). And please make your question comprehensively, not a statement. Include all relevant information as follows.
- Hardware module
- Arduino core Version (including the upstream tag ID.)
- Operating System which you use
- lwIP variant
- Problem description
- If you have a STACK DUMP decoded result with formatted by the code block tag
- The sketch code with formatted by the code block tag
Custom Web page processing consumes a lot of memory. AutoConnect will take a whole string of the JSON document for the custom Web pages into memory. The required buffer size for the JSON document of example sketch *mqttRSSI* reaches approximately 3000 bytes. And actually, it needs twice the heap area. Especially this constraint will be a problem with the ESP8266 which has a heap size poor.
AutoConnect can handle custom Web pages without using JSON. In that case, since the ArduinoJson library will not be bound, the sketch size will also be reduced.
## Writing the custom Web pages without JSON
To handle a custom Web page without using JSON, follow the steps below.
1. Create or define [AutoConnectAux](apiaux.md) for each page.
2. Create or define [AutoConnectElement(s)](acelements.md).
3. Add [AutoConnectElement(s)](acelements.md) to AutoConnectAux.
4. Create more AutoConnectAux containing [AutoConnectElement(s)](acelements.md), if necessary.
5. Register the request handlers for the custom Web pages.
6. [Join](api.md#join) prepared AutoConnectAux(s) to AutoConnect.
7. Invoke [AutoConnect::begin()](api.md#begin).
In addition to the above procedure, to completely cut off for binding with the ArduinoJson library, turn off the ArduinoJson use indicator which is declared by the [AutoConnect definitions](api.md#defined-macros). Its declaration is in **AutoConnectDefs.h** file.[^1]
[^1]:Detaching the ArduinoJson library reduces the sketch size by approximately 10K bytes.
```cpp
// Comment out the AUTOCONNECT_USE_JSON macro to detach the ArduinoJson.
#define AUTOCONNECT_USE_JSON
```
!!! caution "JSON processing will be disabled"
Commenting out the **AUTOCONNECT_USE_JSON** macro invalidates all functions related to JSON processing. If the sketch is using the JSON function, it will result in a compile error.
## Implementation example without ArduinoJson
The code excluding JSON processing from the mqttRSSI sketch attached to the library is as follows. <small>(It is a part of code. Refer to mqttRSSI_NA.ino for the whole sketch.)</small>
<iclass="fa fa-code"></i> The JSON document for mqttRSSI
<spanstyle="margin-right:6px;margin-top:2px;"><imgalign="middle"width="32"height="32"src="./images/arrow_down.png"></span><iclass="fa fa-code"></i> Exclude the JSON and replace to the AutoConnectElements natively
```cpp
// In the declaration,
// Declare AutoConnectElements for the page asf /mqtt_setting
ACText(caption, "Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak", "font-family:serif;color:#4682b4;");
Hieromon Ikasamo
6 years ago
