AutoConnect can handle custom Web pages prepared by user sketches individually. Custom Web pages are displayed in the [AutoConnect menu](menu.md) and can be used from there. It can also have input-output parameters and handle it with sketches. For example, you can program some sketches that publish messages by entering the URI or unique ID of the MQTT broker on a custom page. You do not need to code the processing to handle the web page, it retrieves the input parameters and passes to the MQTT broker connection API is only.
## How it works
@ -11,26 +11,25 @@ AutoConnectAux is a container for AutoConnectElements. To make a custom Web page
<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. 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).
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 as *aux*, binds to an AutoConnect object named *portal*. This sequence is the basic procedure for creating custom Web pages with the sketch. Also, further explanation of AutoConnectElements is the [documentation](acelements.md).
## Custom Web pages in AutoConnect menu
<ulclass="horizontal-list">
<li><imgstyle="margin:0 20px 0 -20px;float:left;width:300px;height:343px;"src="./images/ac_auxmenu.png">
Custom Web pages as AutoConnectAux are integrated into the <ahref="menu.html">AutoConnect menu</a>. AutoConnectAux object contains member variables which are URI and the title. It also has an indicator to show on the AutoConnect menu. You give the title and URI of the custom web page to the AutoConnectAux object with Sketch. Then the title of the custom Web page would be displayed at the bottom of the AutoConnect menu as the left figure.<supid="fnref:1"><aclass="footnote-ref"href="#fn:1"rel="footnote">1</a></sup> It is a hyperlink as URI you given to the custom Web page and taps it will display a page composed of AutoConnectElements. Also, a title will display in the upper left corner of the page, which includes a hyperlink to the AutoConnect statistics screen.</li>
<li><imgstyle="margin:0 20px 0 -20px;float:left;width:300px;"src="./images/ac_auxmenu.png">
AutoConnect integrates custom Web page objects into menus as AutoConnectAux. The AutoConnectAux object contains URI and title as member variables and has an indicator to display in the AutoConnect menu.<br>You give the title and URI of the custom Web page to the AutoConnectAux object with Sketch. Then the title of the custom Web page would be displayed in the AutoConnect menu as the left figure.<supid="fnref:1"><aclass="footnote-ref"href="#fn:1"rel="footnote">1</a></sup> It is a hyperlink to a custom Web page which will be displayed tapped it.</li>
</ul>
[^1]:There is no overlay in the actual menu.
## Multiple custom Web pages
You can create multiple custom Web pages and specify which pages you can invoke from the menu.<br>
In the sketch below, it shows the sequence of codes to integrate three custom Web pages into one and embed them into the menu.
You can create multiple custom Web pages and specify pages that can be called from the menu. The following sketch shows a code sequence for integrating three custom Web pages into one and embedding them in a menu.
<li><pstyle="margin:0 20px 0 -20px"><spanstyle="margin-left:20px;float:right;width:280px;height:497px;"><imgdata-gifffer="./images/aux_menu.gif"data-gifffer-width="280"data-gifffer-height="497"/></span>In the above code, the third parameter of '<i>aux2</i>' is <b>false</b>. The third parameter of the AutoConnectAux constructor is an indicator of whether it's shown to the AutoConnect menu. Right animation is the execution result of the above code. You will see that the custom Web page's menu is displayed only in the last two lines. The sketch of this animation is written to transition to '<i>aux2</i>' by the utility of the <ahref="acelements.html#autoconnectsubmit"><b>AutoConnectSubmit</b></a> element owned by '<i>aux1</i>'.<supid="fnref:2"><aclass="footnote-ref"href="#fn:2"rel="footnote">2</a></sup><br>An '<i>aux2</i>' page transitions only from the '<i>aux1</i>'. It is a page that saves the parameters you entered on the previous page as shown in mqttRSSI in the library example. It is to want to hide '<i>aux2</i>' from AutoConnect menu lines. The utility of the third parameter of the AutoConnectAux constructor is that.</p></li>
<li><pstyle="margin:0 20px 0 -20px"><spanstyle="margin-left:20px;float:right;width:280px;height:497px;border:1px solid lightgrey;"><imgdata-gifffer="./images/aux_menu.gif"data-gifffer-width="278"data-gifffer-height="495"/></span>In the above code, the third parameter of <i>aux2</i> is <b>false</b>. The third parameter of the AutoConnectAux constructor is an indicator for whether it's shown to the AutoConnect menu. Right animation is an execution result of the above code. You will see that the menu applies only two items for three custom Web pages. The sketch of this animation is written to transition to <i>aux2</i> by the utility of the <ahref="acelements.html#autoconnectsubmit"><b>AutoConnectSubmit</b></a> element owned by <i>aux1</i>.<supid="fnref:2"><aclass="footnote-ref"href="#fn:2"rel="footnote">2</a></sup><br>The <i>aux2</i> page transitions only from the <i>aux1</i> page. As shown in mqttRSSI in the library example, its page replies the saving result for the parameters entered on the previous page. It can not be invoked directly from the menu and want to hide them with AutoConnect menu items. The utility of the third parameter of the AutoConnectAux constructor is that.</p></li>
</ul>
[^2]:
@ -77,8 +76,8 @@ So, the basic procedure for handling of the custom Web pages 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 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.
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 document can be saved in SPIFFS or SD and read using AutoConnect's [**load**](api.md#load) function. you can reduce the steps of the basic procedure with this approach, but this way consumes a lot of memory.
The following JSON code and sketch will execute the custom Web page as an example in the above figure. That is, the sketch of this code and footnote[^2] is equivalent.
**custom_page.json**
```json
@ -163,7 +162,7 @@ void loop() {
## 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. Details are explained in the [Parameter handling](achandling.md#parameter-handling).
A sketch can access variables of [AutoConnectElements](acelements.md) on the custom Web page. The value entered into the AutoConnectElements 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 request handler which will be registered by [AutoConnect::on](api.md#on) function. And 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. The details are explained in the [Custom field data handling](achandling.md#custom-field-data-handling) section.
Specify offset from the top of the EEPROM for the credential storage area together. The offset value is from 0 to the flash sector size.
### Public member functions
### <iclass="fa fa-code"></i>Public member functions
- uint8_t **entries()**
Returns number of entries as contained credentials.
@ -123,7 +123,7 @@ Specify offset from the top of the EEPROM for the credential storage area togeth
- bool **del(const char\* _ssid_)**
Delete a credential entry specified *ssid*. Returns the true as successfully deleted.
### Data structures
### <iclass="fa fa-code"></i>Data structures
- station_config
A structure is included in the ESP8266 SDK. You can use it in the sketch like as follows.
@ -195,7 +195,7 @@ If AutoConnect behavior is not stable with your sketch, you can try the followin
### 1. Change WiFi channel
Both ESP8266 and ESP32 can only work on one channel at any given moment, this will cause loss of connection on the channel where your station operates the captive portal. If the channel of the AP which you want to connect is different from the SoftAP channel, the operation of the captive portal will not respond with the screen of the AutoConnect connection attempt remains displayed. In such a case please try the [AutoConnectConfig](apiconfig.md#autoconnectconfig) to match the [channel](apiconfig.md#channel) to the access point.
Both ESP8266 and ESP32 can only work on one channel at any given moment. This will cause your station to lose connectivity on the channel hosting the captive portal. If the channel of the AP which you want to connect is different from the SoftAP channel, the operation of the captive portal will not respond with the screen of the AutoConnect connection attempt remains displayed. In such a case, please try the [AutoConnectConfig](apiconfig.md#autoconnectconfig) to match the [channel](apiconfig.md#channel) to the access point.
### 2. Change arduino core version
@ -215,13 +215,13 @@ The [arduino-esp32](https://github.com/espressif/arduino-esp32) is still under d
To fully enable for the AutoConnect debug logging options, change the following two files.
@ -231,13 +231,13 @@ To fully enable for the AutoConnect debug logging options, change the following
### 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 as follows.
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 to start the problem diagnostics 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
- Debug messages output
* [x] Hardware module
* [x] Arduino core version (Including the upstream tag ID.)
* [x] Operating System which you use
* [x] lwIP variant
* [x] Problem description
* [x] If you have a STACK DUMP decoded result with formatted by the code block tag
* [x] The sketch code with formatted by the code block tag (Reduce to the reproducible minimum code for the problem)
AutoConnect targets sketches made on the assumption of [ESP8266 Community's Arduino core](https://github.com/esp8266/Arduino). The [latest release](https://github.com/esp8266/Arduino/releases/latest) is recommended.
AutoConnect targets sketches made on the assumption of [ESP8266 Community's Arduino core](https://github.com/esp8266/Arduino). Stable 2.4.0 or higher required and the [latest release](https://github.com/esp8266/Arduino/releases/latest) is recommended.
Install third-party platform using the *Boards Manager* of Arduino IDE. Package URL is http://arduino.esp8266.com/stable/package_esp8266com_index.json
Also, to apply AutoConnect to ESP32, the [arduino-esp32 core](https://github.com/espressif/arduino-esp32) provided by Espressif is needed. The [latest release](https://github.com/espressif/arduino-esp32/releases/latest) is recommended.
Also, to apply AutoConnect to ESP32, the [arduino-esp32 core](https://github.com/espressif/arduino-esp32) provided by Espressif is needed. Stable 1.0.1 or required and the [latest release](https://github.com/espressif/arduino-esp32/releases/latest) is recommended.
Install third-party platform using the *Boards Manager* of Arduino IDE. You can add multiple URLs into *Additional Board Manager URLs* field, separating them with commas. Package URL is https://dl.espressif.com/dl/package_esp32_index.json for ESP32.
Hieromon Ikasamo
6 years ago