<small>On the page:</small><br><imgsrc="./images/acsubmit.png">
<small>On the page:</small><br><imgsrc="images/acsubmit.png">
### <iclass="fa fa-edit"></i> Constructor
@ -298,7 +298,7 @@ AutoConnectText generates an HTML `#!html <div>` tag. A `#!html style` attribute
<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">
<small>On the page:</small><br><imgsrc="images/actext.png">
AutoConnect supports reading the custom Web page definitions written in JSON and also supports loading and saving of AutoConnectElements. In both cases, the target object is a [JSON document for AutoConnect](acjson.md). However, it can not save all AutoConnectElements contained in the page as a custom Web page. (ie. AutoConnectAux)
<imgsrc="./images/ac_load_save.svg">
<imgsrc="images/ac_load_save.svg">
### <iclass="fa fa-upload"></i> Loading AutoConnectAux & AutoConnectElements with JSON
@ -226,7 +226,7 @@ A sketch can access variables of AutoConnectElements in the custom Web page. The
The following diagram shows the flow of the input values of a custom Web page into a sketch and is the basis for actions to manipulate the values of custom Web pages using sketches.
<imgsrc="./images/ac_param_flow.svg">
<imgsrc="images/ac_param_flow.svg">
### <iclass="fa fa-desktop"></i> Where to pick up the values
@ -530,7 +530,7 @@ void loop() {
}
```
<iclass="fa fa-arrow-down"></i><br>
<iclass="fa fa-eye"></i> It's shown as like:<spanstyle="margin-left:14px;width:272px;height:118px;border:1px solid lightgray;"><imgalign="top"width="270"src="./images/acow.png"></span>
<iclass="fa fa-eye"></i> It's shown as like:<spanstyle="margin-left:14px;width:272px;height:118px;border:1px solid lightgray;"><imgalign="top"width="270"src="images/acow.png"></span>
### <iclass="far fa-check-square"></i> Check data against on submission
@ -555,8 +555,8 @@ By giving a [pattern](apielements.md#pattern) to [AutoConnectInput](apielements.
AutoConnect can handle custom Web pages prepared by user sketches individually. Custom Web pages can be integrated into the AutoConnect menu and executed as menu items and can have input-output parameters and handle them.
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.
@ -10,17 +10,17 @@ For example, you can program some sketches that publish messages by entering the
AutoConnect creates the custom Web pages dynamically at runtime. Sketch describes the custom Web pages using classes and APIs necessary for dynamic creation which are [**AutoConnectAux**](apiaux.md#autoconnectaux) and the variant of [**AutoConnectElements**](acelements.md). AutoConnectAux is an object dependent on AutoConnect, which provides an easy way to incorporate custom Web pages into AutoConnect like the one on the right figure. The elements make up a custom Web page are provided as an AutoConnectElement 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 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. 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;"src="./images/ac_auxmenu.png">
<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>
@ -30,10 +30,10 @@ The above figure shows a code sequence that declares AutoConnectElements and put
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;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>
<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>
A JSON document for AutoConnect can contain the custom Web page multiple. You can further reduce the sketch process by loading multiple pages of JSON document at once.
### <iclass="fa fa-caret-right"></i> Combination with mDNS
@ -368,7 +368,7 @@ In ordinary, the URL handler will respond the request by sending some HTML. [Pag
An example sketch used with the PageBuilder as follows and it explains how it aids for the HTML generating. Details for [Github repository](https://github.com/Hieromon/PageBuilder).
@ -403,7 +403,7 @@ AutoConnect will activate SoftAP at failed the first *WiFi.begin*. It SoftAP set
**HOME** for returning to the user's sketch homepage will display at the bottom of the AutoConnect menu. It could be set using the [*AutoConnect::home*](api.md#home) function.
<imgsrc="./images/menu_home.png"/>
<imgsrc="images/menu_home.png"/>
### <iclass="fa fa-caret-right"></i> Relocate the AutoConnect home path
How embed the AutoConnect to the sketches you have. Most simple approach to applying AutoConnect for the existing sketches, follow the below steps. The below sketch is for ESP8266. For ESP32, replace ```ESP8266WebServer``` with ```WebServer``` and ```ESP8266WiFi.h``` with ```WiFi.h``` respectively.
<imgsrc="./images/BeforeAfter.svg"/>
<imgsrc="images/BeforeAfter.svg"/>
<ulclass="ulsty-edit"style="list-style:none;">
<li>Insert <codeclass="codehilite"><spanclass="cp">#include</span><spanclass="cpf"><AutoConnect.h></span></code> to behind of <codeclass="codehilite"><spanclass="cp">#include</span><spanclass="cpf"><ESP8266WebServer.h></span></code>.</li>
@ -28,7 +28,7 @@ float value = input.value.toFloat();
The easiest way is to use the [Arduino Time Library](https://www.pjrc.com/teensy/td_libs_Time.html). Sketches must accommodate differences in date and time formats depending on the time zone. You can absorb the difference in DateTime format by using `sscanf` function.[^1]
[^1]:It can not be used with the old Arduino core.
[^1]:The ssanf library function cannot be used with the old Arduino core.
```cpp
#include<TimeLib.h>
@ -139,31 +139,31 @@ void loop() {
Here, represent examples the typical regular expression for the input validation.
### <imgsrc="./images/regexp.png"align="top"> URL
### <imgsrc="images/regexp.png"align="top"> URL
```
^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
```
### <imgsrc="./images/regexp.png"align="top"> DNS hostname
### <imgsrc="images/regexp.png"align="top"> DNS hostname
This is the AutoConnect statistics screen. This screen displays the current status of the established connection, WiFi mode, IP address, free memory size, and etc. Also, the **hamburger icon** is the control menu of AutoConnect seems at the upper right. By tap the hamburger icon, the control menu appears as the below.
@ -48,7 +48,7 @@ This is the AutoConnect statistics screen. This screen displays the current stat
Here, tap *"Configure new AP"* to connect the new access point then the SSID configuration screen would be shown. Enter the **SSID** and **Passphrase** and tap **apply** to start connecting the access point.
@ -57,13 +57,13 @@ After connection established, the current status screen will appear. It is alrea
For one, continues execution of the sketch while keeping this connection. You can access ESP8266 via browser through the established IP address after cancel to "**Log in**" by upper right on the screen.
Or, "**RESET**" can be selected. The ESP8266 resets and reboots. After that, immediately before the connection will be restored automatically with WIFI\_STA mode.
### <iclass="fa fa-play-circle"></i> Run for usually
The IP address of ESP8266 would be displayed on the serial monitor after connection restored. Please access its address from the browser. The "Hello, world" page will respond. It's the page that was handled by in the sketch with "**on**" function of *ESP8266WebServer*.
@ -8,7 +8,7 @@ Uses the web interface to light the LED connected to the **[NodeMCU](https://git
Access to the ESP8266 module connected WiFi from the browser then the page contains the current value of the D0 port would be displayed. The page has the buttons to switch the port value. The LED blinks according to the value of the button that was clicked. This example is a typical sketch of manipulating ESP8266's GPIO via WLAN.
<imgdata-gifffer="./images/ac2.gif"/>
<imgdata-gifffer="images/ac2.gif"/>
Embed AutoConnect library into this sketch. There are few places to be changed. And you can use AutoConnect's captive portal function to establish a connection freely to other WiFi spots.
@ -18,7 +18,7 @@ Embed AutoConnect library into this sketch. There are few places to be changed.
Bind to ESP8266WebServer, performs handleClient with handleRequest.
<imgsrc="./images/handleClient.svg"/>
<imgsrc="images/handleClient.svg"/>
!!! hint "In what situations should the handleRequest be used."
It is something needs to be done immediately after the handle client. It is better to call only AutoConnect::handleClient whenever possible.
@ -27,7 +27,7 @@ Bind to ESP8266WebServer, performs handleClient with handleRequest.
Declare only AutoConnect, performs handleClient.
<imgsrc="./images/handlePortal.svg"/>
<imgsrc="images/handlePortal.svg"/>
## Used with MQTT as a client application
@ -35,7 +35,7 @@ The effect of AutoConnect is not only for ESP8266/ESP32 as the web server. It ha
This example tries to publish the WiFi signal strength of ESP8266 with MQTT. It uses the [ThingSpeak](https://thingspeak.com/) for MQTT broker. ESP8266 publishes the RSSI value to the channel created on ThingSpeak as [MQTT client](https://github.com/knolleary/pubsubclient). This example is well suited to demonstrate the usefulness of AutoConnect, as RSSI values are measured at each access point usually. Just adding a few lines of code makes it unnecessary to upload sketches with the different SSIDs rewrite for each access point.
<imgsrc="./images/ChannelStatus.png"width="70%"/>
<imgsrc="images/ChannelStatus.png"width="70%"/>
### Advance procedures
@ -60,7 +60,7 @@ At the **New Channel** screen, enter each field as a below. And click **Save Cha
- Description: ```ESP8266 RSSI publish```
- Field1: ```RSSI```
<imgsrc="./images/CreateChannel.png"width="70%"/>
<imgsrc="images/CreateChannel.png"width="70%"/>
#### Get Channel ID and API Keys
@ -68,15 +68,15 @@ The channel successfully created, you can see the channel status screen as a bel
[^2]:'454951' in the example above, but your channel ID should be different.
<imgsrc="./images/ChannelID.png"width="70%"/>
<imgsrc="images/ChannelID.png"width="70%"/>
Here, switch the channel status tab to **API Keys**. The API key required to publish the message is the **Write API Key**.
<imgsrc="./images/APIKeys.png"width="70%"/>
<imgsrc="images/APIKeys.png"width="70%"/>
The last key you need is the **User API Key** and can be confirmed it in the user profile. Pull down **Account** from the top menu, select **My profile**. Then you can see the ThingSpeak settings and the **User API Key** is displayed middle of this screen.
<imgsrc="./images/USERKey.png"width="70%"/>
<imgsrc="images/USERKey.png"width="70%"/>
### The sketch, Publishes messages
@ -100,25 +100,25 @@ For the client sketches, the code required to connect to WiFi is the following f
Include ```AutoConnect.h``` header file behind the include of ```ESP8266WiFi.h```.
<imgsrc="./images/include.png"width="55%"/>
<imgsrc="images/include.png"width="55%"/>
2. Declare AutoConnect
The declaration of the [**AutoConnect variable**](api.md#autoconnect) is not accompanied by ESP8266WebServer.
<imgsrc="./images/declare.png"width="55%"/>
<imgsrc="images/declare.png"width="55%"/>
3. Invokes "begin()"
Call [**AutoConnect::begin**](api.md#begin). If you need to assign a static IP address, executes [**AutoConnectConfig**](api.md#autoconnectconfig-api) before that.
<imgsrc="./images/begin.png"width="55%"/>
<imgsrc="images/begin.png"width="55%"/>
4. Performs "handleClent()" in "loop()"
Invokes [**AutoConnect::handleClient()**](api.md#handleclient) at inside ```loop()``` to enable the AutoConnect menu.
<imgsrc="./images/handleClient.png"width="55%"/>
<imgsrc="images/handleClient.png"width="55%"/>
[^3]:```#include <ESP8266WebServer.h>``` does not necessary for uses only client.
@ -7,7 +7,7 @@ An Arduino library for ESP8266/ESP32 WLAN configuration at run time with web int
To the dynamic configuration for joining to WLAN with SSID and PSK accordingly. It an Arduino library united with *ESP8266WebServer* class for ESP8266 or *WebServer* class for ESP32.
Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi connection. With this library to make a sketch easily which connects from ESP8266/ESP32 to the access point at runtime by the web interface without hard-coded SSID and password.
### <iclass="fa fa-arrow-circle-right"aria-hidden="true"></i> No need pre-coded SSID & password
@ -34,9 +34,9 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi
<spanclass="lead">You can easily add your owned web screens that can consist of representative HTML elements and invoke them from the menu. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD.</span>
@ -88,7 +88,7 @@ The [PageBuilder](https://github.com/Hieromon/PageBuilder) library to build HTML
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.2 later.[^1]
[^1]:Since AutoConnect v0.9.7, PageBuilder v1.3.2 later is required.
@ -103,11 +103,11 @@ By adding the [ArduinoJson](https://github.com/bblanchon/ArduinoJson) library, A
Clone or download from the [AutoConnect GitHub repository](https://github.com/Hieromon/AutoConnect).
<imgsrc="./images/gitrepo.png"width="640"/>
<imgsrc="images/gitrepo.png"width="640"/>
When you select Download, you can import it to Arduino IDE immediately. After downloaded, the AutoConnect-master.zip file will be saved in your download folder. Then in the Arduino IDE, navigate to *"Sketch > Include Library"*. At the top of the drop down list, select the option to *"Add .ZIP Library..."*. Details for [Arduino official page](https://www.arduino.cc/en/Guide/Libraries#toc4).
<imgsrc="./images/ins_lib.png"/>
<imgsrc="images/ins_lib.png"/>
!!! info "Supported by Library manager."
AutoConnect was added to the Arduino IDE library manager. It can be used with the PlatformIO library also.
The AutoConnect menu appears when you access the **AutoConnect root path**. It is assigned "**/_ac**" located on the *local IP address* of ESP8266/ESP32 module by default. This location can be changed in the sketch. The following screen will appear at access to `http://{localIP}/_ac` as the root path. This is the statistics of the current WiFi connection. You can access the menu from the here, to invoke it tap <iclass="fa fa-bars"></i> at right on top. (e.g. `http://192.168.244.1/_ac` for SoftAP mode.)
A local IP means Local IP at connection established or SoftAP's IP.
@ -20,20 +20,20 @@ Currently, AutoConnect supports four menus. Undermost menu as "HOME" returns to
- **Reset...**: Rest the ESP8266/ESP32 module.
- **HOME**: Return to user home page.
<imgsrc="./images/menu.png"style="width:280px;"/>
<imgsrc="images/menu.png"style="width:280px;"/>
## <iclass="fa fa-bars"></i> Configure new AP
Scan all available access point in the vicinity and display it. Strength and security of the detected AP are marked. The <iclass="fa fa-lock"></i> is indicated for the SSID that needs a security key. "**Hidden:**" means the number of hidden SSIDs discovered.
Enter SSID and Passphrase and tap "**apply**" to starts WiFi connection.
Once it was established WiFi connection, its SSID and password will be saved in EEPROM of ESP8266/ESP32 automatically. The **Open SSIDs** menu reads the saved SSID credentials from the EEPROM. The stored credential data are listed by the SSID as shown below. Its label is a clickable button. Tap the SSID button, starts WiFi connection it.
@ -45,7 +45,7 @@ After tapping "Disconnect", you will not be able to reach the AutoConnect menu.
Reset the ESP8266/ESP32 module, it will start rebooting. After rebooting complete, the ESP8266/ESP32 module begins establishing the previous connection with WIFI_STA mode, and *esp8266ap* or *esp32ap* of an access point will disappear from WLAN.
!!! warning "Not every ESP8266 module will be rebooted normally"
The Reset menu is using the **ESP.reset()** function for ESP8266. This is an almost hardware reset. In order to resume the sketch normally, the [state of GPIO0](https://github.com/esp8266/esp8266-wiki/wiki/Boot-Process#esp-boot-modes) is important. Since this depends on the circuit implementation for each module, not every module will be rebooted normally. See also [FAQ](faq.md#hang-up-after-reset).
@ -68,7 +68,7 @@ You can change the HOME path using the AutoConnect API. The [**AutoConnect::home
The AutoConnect menu can contain HTML pages of your sketch as custom items. It works for HTML pages implemented by **ESP8266WebServer::on** handler or **WebServer::on** handler for ESP32. That is, you can make it as menu items to invoke the legacy web page. The below screenshot is the result of adding an example sketch for the ESP8266WebServer library known as [FSBrowser](https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer/examples/FSBrowser) to the AutoConnect menu item. It adds Edit and List items with little modification of the legacy sketch code.
You can extend the AutoConnect menu to improve the original sketches and according to the procedure described in section [Advanced Usage section](advancedusage.md#casts-the-html-pages-to-be-add-on-into-the-menu).
@ -23,7 +23,7 @@ To implement this with your sketch, use only the [AutoConnectAux](apiaux.md#auto
The AutoConnect library package contains an example sketch for ESP8266WebServer known as FSBrowser. Its example is a sample implementation that supports AutoConnect without changing the structure of the original FSBrowser and has the menu item for **Edit** and **List**.
@ -152,7 +152,7 @@ The code excluding JSON processing from the mqttRSSI sketch attached to the libr
}
]
```
<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
<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
Hieromon Ikasamo
5 years ago