A sketch can access variables of AutoConnectElements in the custom Web page. The value entered into the AutoConnectElements on the page is stored in the member variable of the element by AutoConnect whenever GET/POST transmission occurs.
@ -5,13 +5,13 @@ AutoConnect can handle custom Web pages prepared by user sketches individually.
## How it works
## How it works
Custom Web pages are dynamically created by AutoConnect. The Classes and APIs necessary for dynamic creation are provided. **AutoConnectAux** is an object dependent on AutoConnect, which provides an easy way to incorporate custom Web pages like the one on the right figure into AutoConnect. The elements that make up a custom web page are provided as an [**AutoConnectElement**](acelements.md) class. Furthermore, an input box, a check box, a submit button, etc. are implemented by classes derived from AutoConnectElement.
Custom Web pages are dynamically created by AutoConnect. The Classes and APIs necessary for dynamic creation are provided. [**AutoConnectAux**](apiaux.md#autoconnectaux) is an object dependent on AutoConnect, which provides an easy way to incorporate custom Web pages like the one on the right figure into AutoConnect. The elements that make up a custom web page are provided as an [**AutoConnectElement**](acelements.md) class. Furthermore, an input box, a check box, a submit button, etc. are implemented by classes derived from AutoConnectElement.
AutoConnectAux is a container for AutoConnectElements. To make a custom Web page, create elements that make up the page and put it in the AutoConnectAux object. Joining that AutoConnectAux object to AutoConnect will integrate the custom Web page into the AutoConnect menu.
AutoConnectAux is a container for AutoConnectElements. To make a custom Web page, create elements that make up the page and put it in the AutoConnectAux object. Joining its AutoConnectAux object to AutoConnect will integrate the custom Web page into the AutoConnect menu.
<imgsrc="../images/ac_declaration.svg">
<imgsrc="../images/ac_declaration.svg">
The above figure shows a code sequence that declares AutoConnectElements and put in the AutoConnectAux container and integrates those into AutoConnect. Declare two text elements named '*header*', '*caption*' and add those to the AutoConnectAux object *aux*. Bind it to an AutoConnect object called the'*portal*'. It's basic procedure for configuring the custom Web page. Also, further explanation of AutoConnectElements is the [documentation](acelements.md).
The above figure shows a code sequence that declares AutoConnectElements and put in the AutoConnectAux container and integrates those into AutoConnect. It declares two text elements named '*header*'and '*caption*', adds them to the AutoConnectAux object '*aux*', binds to an AutoConnect object named'*portal*'. It's the basic procedure for configuring the custom Web page. Also, further explanation of AutoConnectElements is the [documentation](acelements.md).
## Custom Web pages in AutoConnect menu
## Custom Web pages in AutoConnect menu
@ -63,16 +63,21 @@ In the sketch below, it shows the sequence of codes to integrate three custom We
}
}
```
```
## Passing parameters with sketches and custom Web pages
A sketch can access variables of [AutoConnectElements](acelements.md) in the custom Web page. The value entered into the AutoConnectElements on the page is stored to the [member variables](acelements.md#form-and-autoconnectelements) of the element by AutoConnect whenever GET / POST transmission occurs. Your sketches can get these values with the GET / POST request handler. If you assign a value to an element before a request to the page occurs, its value will appear as the initial value when the page is displayed.
## Basic steps to use custom Web pages
## Basic steps to use custom Web pages
So, the basic procedure is as follows.
So, the basic procedure for handling of the custom Web pages is as follows:
1. Create or define AutoConnectAux.
1. Create or define AutoConnectAux.
2. Create or define [AutoConnectElement(s)](acelements.md).
2. Create or define [AutoConnectElement(s)](acelements.md).
3. Add [AutoConnectElement(s)](acelements.md) to AutoConnectAux.
3. Add [AutoConnectElement(s)](acelements.md) to AutoConnectAux.
4. Create more AutoConnectAux containing [AutoConnectElement(s)](acelements.md), if necessary.
4. Create more AutoConnectAux containing [AutoConnectElement(s)](acelements.md), if necessary.
5. Join prepared AutoConnectAux(s) to [AutoConnect](api.md#join).
5. Register the request handlers for the custom Web pages
6. Invoke [AutoConnect::begin()](api.md#begin).
6. Join prepared AutoConnectAux(s) to [AutoConnect](api.md#join).
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.
The order in which AutoConnectElements are arranged on the custom Web page is the order described in JSON.
!!! 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.
## JSON objects & elements for the custom Web page
## JSON objects & elements for the custom Web page
### JSON document structure for AutoConnectAux
### <iclass="fa fa-caret-right"></i> JSON document structure for AutoConnectAux
An AutoConnectAux is described by a JSON object. The elements that make up an object are as follows:
<pre>
{
"title" : <i>title</i>,
"uri" : <i>uri</i>,
"menu" : <b>true</b> | <b>false</b>,
"element" : <i>element_array</i>
}
</pre>
#### <iclass="fa fa-key"></i> **title**
: A title of the custome Web page. This is string value. String specified *title* will be displayed in the AutoConnection menu.
#### <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 '**/**'.
#### <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.
#### <iclass="fa fa-key"></i> **element**
: Describe an array of JSON objects as *element_array*. It is a JSON object array of the AutoConnectElements that make up the 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.
### <iclass="fa fa-caret-right"></i> JSON object for AutoConnectElements
A JSON object of AutoConnectElements is described by the parameters of [each constructor](acelements.md#constructor).
!!! caution "AutoConnect's JSON parsing process is not perfect"
It is based on ArduinoJson, but the process is simplified to save memory. As a result, even if there is an unnecessary key, it will not be an error. It is ignored.
## Loading JSON document
AutoConnect supports loading of JSON document from the following instances.
- String
- PROGMEM
- Stream
## Saving JSON document
AutoConnect supports writing of JSON document to the stream.
@ -33,9 +33,9 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi
<spanclass="lead">You can easily add your own web screen that can consist of representative HTML elements as the styled TEXT, INPUT, BUTTON, CHECKBOX, RADIO, SELECT, SUBMIT into the menu. It can be invoked from the AutoConnect menu and parameters can be passed. Custom screens can be written easily with JSON and can be loaded from PROGMEM, SPIFFS or SD.</span>
<spanclass="lead">You can easily add your own web screen that can consist of representative HTML elements as the styled TEXT, INPUT, BUTTON, CHECKBOX, RADIO, SELECT, SUBMIT into the menu. It can be invoked from the AutoConnect menu and parameters can be passed. Custom screens can be written easily with JSON and can be loaded from PROGMEM, SPIFFS or SD.</span>
Hieromon Ikasamo
6 years ago