wirtz
/
AutoConnect
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Typo fixes

Browse Source
pull/205/head
Hieromon Ikasamo 5 years ago
parent 3f1c695e4e
commit 246b607d8e
19 changed files with 91 additions and 91 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 14
      mkdocs/acelements.md
  2. 20
      mkdocs/achandling.md
  3. 10
      mkdocs/acintro.md
  4. 12
      mkdocs/acjson.md
  5. 12
      mkdocs/acupload.md
  6. 2
      mkdocs/api.md
  7. 4
      mkdocs/apiaux.md
  8. 2
      mkdocs/apiextra.md
  9. 22
      mkdocs/basicusage.md
  10. 2
      mkdocs/colorized.md
  11. 16
      mkdocs/faq.md
  12. 4
      mkdocs/gettingstarted.md
  13. 12
      mkdocs/howtoembed.md
  14. 20
      mkdocs/index.md
  15. 10
      mkdocs/menu.md
  16. 6
      mkdocs/menuize.md
  17. 6
      mkdocs/otabrowser.md
  18. 2
      mkdocs/otaserver.md
  19. 6
      mkdocs/wojson.md

14
mkdocs/acelements.md
Unescape View File

@ -24,7 +24,7 @@ The [AutoConnectStyle](#autoconnectstyle) will insert the raw CSS code into the
## Form and AutoConnectElements ## Form and AutoConnectElements
All AutoConnectElements placed on custom web pages will be contained into one form. Its form is fixed and created by AutoConnect. The form value (usually the text or checkbox you entered) is sent by [AutoConnectSubmit](#autoconnectsubmit) using the **POST** method with HTTP. The post method sends the actual form data which is a query string whose contents are the **name** and **value** of AutoConnectElements. You can retrieve the value for the parameter with the sketch from the query string with [ESP8266WebServer::arg](https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#getting-information-about-request-arguments) function or [PageArgument](https://github.com/Hieromon/PageBuilder#arguments-of-invoked-user-function) class of the [AutoConnect::on](api.md#on) handler when the form is submitted. All AutoConnectElements placed on custom web pages will be contained into one form. Its form is fixed and created by AutoConnect. The form value (usually the text or checkbox you entered) is sent by [AutoConnectSubmit](#autoconnectsubmit) using the **POST** method with HTTP. The post method sends the actual form data which is a query string whose contents are the **name** and **value** of AutoConnectElements. You can retrieve the value for the parameter with the Sketch from the query string with [ESP8266WebServer::arg](https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#getting-information-about-request-arguments) function or [PageArgument](https://github.com/Hieromon/PageBuilder#arguments-of-invoked-user-function) class of the [AutoConnect::on](api.md#on) handler when the form is submitted.
## AutoConnectElement - <small>A basic class of elements</small> ## AutoConnectElement - <small>A basic class of elements</small>
@ -74,7 +74,7 @@ AutoConnectText | AC_Tag_None
### <i class="fa fa-caret-right"></i> type ### <i class="fa fa-caret-right"></i> type
The **type** indicates the type of the element and represented as the *ACElement_t* enumeration type in the sketch. Since AutoConnectElement also acts as a variant of other elements, it can be applied to handle elements collectively. At that time, the type can be referred to by the [**typeOf()**](apielements.md#typeof) function. The following example changes the font color of all [AutoConnectText](#autoconnecttext) elements of a custom Web page to gray. The **type** indicates the type of the element and represented as the *ACElement_t* enumeration type in the Sketch. Since AutoConnectElement also acts as a variant of other elements, it can be applied to handle elements collectively. At that time, the type can be referred to by the [**typeOf()**](apielements.md#typeof) function. The following example changes the font color of all [AutoConnectText](#autoconnecttext) elements of a custom Web page to gray.
```cpp hl_lines="5" ```cpp hl_lines="5"
AutoConnectAux customPage; AutoConnectAux customPage;
@ -102,7 +102,7 @@ The enumerators for *ACElement_t* are as follows:
- AutoConnectText: **AC_Text** - AutoConnectText: **AC_Text**
- Uninitialized element: **AC_Unknown** - Uninitialized element: **AC_Unknown**
Furthermore, to convert an entity that is not an AutoConnectElement to its native type, you must [re-interpret](https://en.cppreference.com/w/cpp/language/reinterpret_cast) that type with c++. Or, you can be coding the sketch more easily with using the [**as<T\>**](apielements.md#ast62) function. Furthermore, to convert an entity that is not an AutoConnectElement to its native type, you must [re-interpret](https://en.cppreference.com/w/cpp/language/reinterpret_cast) that type with c++. Or, you can be coding the Sketch more easily with using the [**as<T\>**](apielements.md#ast62) function.
```cpp hl_lines="6" ```cpp hl_lines="6"
AutoConnectAux customPage; AutoConnectAux customPage;
@ -241,7 +241,7 @@ Specifies the destination to save the uploaded file. The destination can be spec
- **`AC_File_FS`** : Save as the SPIFFS file in flash of ESP8266/ESP32 module. - **`AC_File_FS`** : Save as the SPIFFS file in flash of ESP8266/ESP32 module.
- **`AC_File_SD`** : Save to an external SD device connected to ESP8266/ESP32 module. - **`AC_File_SD`** : Save to an external SD device connected to ESP8266/ESP32 module.
- **`AC_File_Extern`** : Pass the content of the uploaded file to the uploader which is declared by the sketch individually. Its uploader must inherit [**AutoConnectUploadHandler**](acupload.md#to-upload-to-a-device-other-than-flash-or-sd) class and implements *_open*, *_write* and *_close* function. - **`AC_File_Extern`** : Pass the content of the uploaded file to the uploader which is declared by the Sketch individually. Its uploader must inherit [**AutoConnectUploadHandler**](acupload.md#to-upload-to-a-device-other-than-flash-or-sd) class and implements *_open*, *_write* and *_close* function.
!!! note "Built-in uploader is ready." !!! note "Built-in uploader is ready."
AutoConnect already equips the built-in uploader for saving to the SPIFFS as AC_File_FS and the external SD as AC_File_SD. It is already implemented inside AutoConnect and will store uploaded file automatically. AutoConnect already equips the built-in uploader for saving to the SPIFFS as AC_File_FS and the external SD as AC_File_SD. It is already implemented inside AutoConnect and will store uploaded file automatically.
@ -252,7 +252,7 @@ Specifies a tag to add behind the HTML code generated from the element. The defa
## AutoConnectInput ## AutoConnectInput
AutoConnectInput generates an HTML `#!html <input type="text">` tag and a `#!html <label>` tag. It can also have a placeholder. The value of the input box is passed to the destination in the query string and can be retrieved programmatically. You can also update from the sketches. AutoConnectInput generates an HTML `#!html <input type="text">` tag and a `#!html <label>` tag. It can also have a placeholder. The value of the input box is passed to the destination in the query string and can be retrieved programmatically. You can also update from the Sketches.
<i class="fa fa-eye"></i> **Sample**<br> <i class="fa fa-eye"></i> **Sample**<br>
<small>**`AutoConnectInput input("input", "", "Server", "MQTT broker server");`**</small> <small>**`AutoConnectInput input("input", "", "Server", "MQTT broker server");`**</small>
@ -360,7 +360,7 @@ AutoConnectStyle(const char* name, const char* value)
### <i class="fa fa-caret-right"></i> name ### <i class="fa fa-caret-right"></i> name
It is the `name` of the AutoConnectStyle element and is useful only to access this element from the sketch. It does not affect the generated HTML code. It is the `name` of the AutoConnectStyle element and is useful only to access this element from the Sketch. It does not affect the generated HTML code.
### <i class="fa fa-caret-right"></i> value ### <i class="fa fa-caret-right"></i> value
@ -453,7 +453,7 @@ AutoConnectText(const char* name, const char* value, const char* style, const ch
### <i class="fa fa-caret-right"></i> name ### <i class="fa fa-caret-right"></i> name
A `name` does not exist in the generated HTML. It provides only a means of accessing elements with the sketches. A `name` does not exist in the generated HTML. It provides only a means of accessing elements with the Sketches.
### <i class="fa fa-caret-right"></i> value ### <i class="fa fa-caret-right"></i> value

20
mkdocs/achandling.md
Unescape View File

@ -4,7 +4,7 @@ AutoConnectAux is the container for a custom Web page, AutoConnectElement is the
AutoConnectElements declared in sketch must be programmed to add to AutoConnectAux one after another. Elements are automatically included in AutoConnectAux by AutoConnect if you load it from the JSON document. In either method, it is common to use the function of AutoConnectAux to access an element with a sketch. AutoConnectElements declared in sketch must be programmed to add to AutoConnectAux one after another. Elements are automatically included in AutoConnectAux by AutoConnect if you load it from the JSON document. In either method, it is common to use the function of AutoConnectAux to access an element with a sketch.
## Handing AutoConnectElements with the sketches ## Handing AutoConnectElements with the Sketches
The AutoConnectAux class has several functions to manipulate AutoConnectElements. The functions can add, delete, retrieve elements, and get and set values. The AutoConnectAux class has several functions to manipulate AutoConnectElements. The functions can add, delete, retrieve elements, and get and set values.
@ -19,7 +19,7 @@ void AutoConnectAux::add(AutoConnectElement& addon)
void AutoConnectAux::add(AutoConnectElementVT addons) void AutoConnectAux::add(AutoConnectElementVT addons)
``` ```
The add function adds the specified AutoConnectElement to AutoConnectAux. The AutoConnectElementVT type is the [*std::vector*](https://en.cppreference.com/w/cpp/container/vector) of the [*reference wrapper*](https://en.cppreference.com/w/cpp/utility/functional/reference_wrapper) to AutoConnectElements, and you can add these elements in bulk by using the [*list initialization*](https://en.cppreference.com/w/cpp/language/list_initialization) with the sketch. The add function adds the specified AutoConnectElement to AutoConnectAux. The AutoConnectElementVT type is the [*std::vector*](https://en.cppreference.com/w/cpp/container/vector) of the [*reference wrapper*](https://en.cppreference.com/w/cpp/utility/functional/reference_wrapper) to AutoConnectElements, and you can add these elements in bulk by using the [*list initialization*](https://en.cppreference.com/w/cpp/language/list_initialization) with the Sketch.
```cpp ```cpp
typedef std::vector<std::reference_wrapper<AutoConnectElement>> AutoConnectElementVT; typedef std::vector<std::reference_wrapper<AutoConnectElement>> AutoConnectElementVT;
@ -63,7 +63,7 @@ Similarly this, the uniqueness of the name is also necessary within the JSON doc
### <i class="fa fa-edit"></i> Get AutoConnectElement from the AutoConnectAux ### <i class="fa fa-edit"></i> Get AutoConnectElement from the AutoConnectAux
To retrieve an element from AutoConnectAux, use the getElement or getElements function. Normally, the getElement is needed when accessing the value of AutoConnectElement in the sketch. To retrieve an element from AutoConnectAux, use the getElement or getElements function. Normally, the getElement is needed when accessing the value of AutoConnectElement in the Sketch.
```cpp ```cpp
AutoConnectElement* AutoConnectAux::getElement(const String& name) AutoConnectElement* AutoConnectAux::getElement(const String& name)
@ -104,7 +104,7 @@ AutoConnectText* text = reinterpret_cast<AutoConnectText*>(aux.getElement("TEXT_
AutoConnectText& text = aux.getElement<AutoConnectText>("TEXT_ELEMENT_NAME"); AutoConnectText& text = aux.getElement<AutoConnectText>("TEXT_ELEMENT_NAME");
``` ```
The AutoConnectElement type behaves as a variant of other element types. Therefore use cast or template to convert to actual type as above. In the sketch, you access the real type of AutoConnectElement after casting it and storing into the variable. The AutoConnectElement type behaves as a variant of other element types. Therefore use cast or template to convert to actual type as above. In the Sketch, you access the real type of AutoConnectElement after casting it and storing into the variable.
```cpp ```cpp
const String auxJson = String("{\"title\":\"Page 1 title\",\"uri\":\"/page1\",\"menu\":true,\"element\":[{\"name\":\"caption\",\"type\":\"ACText\",\"value\":\"hello, world\"}]}"); const String auxJson = String("{\"title\":\"Page 1 title\",\"uri\":\"/page1\",\"menu\":true,\"element\":[{\"name\":\"caption\",\"type\":\"ACText\",\"value\":\"hello, world\"}]}");
@ -115,7 +115,7 @@ AutoConnectText& text = aux->getElement<AutoConnectText>("caption"); // Cast to
Serial.println(text.value); Serial.println(text.value);
``` ```
You can also use the [operator **`[]`** of AutoConnectAux](apiaux.md#operator) as another way to get the desired element. An operator **`[]`** is a shortcut for [getElement](apiaux.md#getelement) function with the reference casting and makes simplify the sketch code and treats like an array with the elements placed on a custom Web page. Its argument is the name of the element to be acquired similarly to getElement function. In the sketch, by combining the [**AutoConnectElement::as<T\>**](apielements.md#ast62) function with the operator `[]`, you can access the AutoConnectElements reference according to its actual type. For example, the following sketch code returns the same as a reference of AutoConnectText element as the `caption`. You can also use the [operator **`[]`** of AutoConnectAux](apiaux.md#operator) as another way to get the desired element. An operator **`[]`** is a shortcut for [getElement](apiaux.md#getelement) function with the reference casting and makes simplify the Sketch code and treats like an array with the elements placed on a custom Web page. Its argument is the name of the element to be acquired similarly to getElement function. In the Sketch, by combining the [**AutoConnectElement::as<T\>**](apielements.md#ast62) function with the operator `[]`, you can access the AutoConnectElements reference according to its actual type. For example, the following sketch code returns the same as a reference of AutoConnectText element as the `caption`.
```cpp hl_lines="4 5" ```cpp hl_lines="4 5"
AutoConnect portal; AutoConnect portal;
@ -145,7 +145,7 @@ To get all the AutoConnectElements in an AutoConnectAux object use the [**getEle
AutoConnectElementVT& AutoConnectAux::getElements(void) AutoConnectElementVT& AutoConnectAux::getElements(void)
``` ```
### <i class="fa fa-edit"></i> Enable AutoConnectElements during the sketch execution ### <i class="fa fa-edit"></i> Enable AutoConnectElements during the Sketch execution
AutoConnectElemets have an enable attribute to activate its own HTML generation. Sketches can change the HTMLization of their elements dynamically by setting or resetting the enable value. An element whose the enable attribute is true will generate itself HTML and place on the custom Web page. And conversely, it will not generate the HTML when the value is false. AutoConnectElemets have an enable attribute to activate its own HTML generation. Sketches can change the HTMLization of their elements dynamically by setting or resetting the enable value. An element whose the enable attribute is true will generate itself HTML and place on the custom Web page. And conversely, it will not generate the HTML when the value is false.
@ -201,7 +201,7 @@ void loop() {
``` ```
!!! hint "Desirable to set or reset the enable attribute in the page handler" !!! hint "Desirable to set or reset the enable attribute in the page handler"
The enable attribute can be set at any time during the sketch execution. The page handler with the [AC_EXIT_AHEAD](apiaux.md#on) option is sure to handle it. The enable attribute can be set at any time during the Sketch execution. The page handler with the [AC_EXIT_AHEAD](apiaux.md#on) option is sure to handle it.
## Loading &amp; saving AutoConnectElements with JSON ## Loading &amp; saving AutoConnectElements with JSON
@ -666,7 +666,7 @@ void loop() {
ESP8266WebServer class and the WebServer class assume that the implementation of the ReqestHandler class contained in the WebServer library will handle the URL requests. Usually, it is sketch code registered by ESP8266WebServer::on function. ESP8266WebServer class and the WebServer class assume that the implementation of the ReqestHandler class contained in the WebServer library will handle the URL requests. Usually, it is sketch code registered by ESP8266WebServer::on function.
When a page transition from a custom Web page created by AutoConnectAux to a handler registered with ESP2866WebServer::on function, a little trick is needed to retrieve the values of AutoConnectElements. (i.e. the URI of the ESP8266WebServer::on handler is specified in the [uri](acelements.md#uri) attribute of [AutoConnectSubmit](acelements.md#autoconnectsubmit)) AutoConnect cannot intervene in the procedure in which the ESP8266WebServer class calls the on-page handler coded with the sketch. Therefore, it is necessary to retrieve preliminary the values of AutoConnectElements using the [AutoConnectAux::fetchElement](apiaux.md#fetchelement) function for value processing with the on-page handler. When a page transition from a custom Web page created by AutoConnectAux to a handler registered with ESP2866WebServer::on function, a little trick is needed to retrieve the values of AutoConnectElements. (i.e. the URI of the ESP8266WebServer::on handler is specified in the [uri](acelements.md#uri) attribute of [AutoConnectSubmit](acelements.md#autoconnectsubmit)) AutoConnect cannot intervene in the procedure in which the ESP8266WebServer class calls the on-page handler coded with the Sketch. Therefore, it is necessary to retrieve preliminary the values of AutoConnectElements using the [AutoConnectAux::fetchElement](apiaux.md#fetchelement) function for value processing with the on-page handler.
The following sketch is an example of extracting values inputted on a custom web page with an on-page handler and then processing it. The following sketch is an example of extracting values inputted on a custom web page with an on-page handler and then processing it.
@ -723,7 +723,7 @@ Sketches can update the attributes of AutoConnectElements with two approaches. A
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. 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 Caption (ie. "Hello, world") as AutoConnectText value. For example, the combination of the Sketch and JSON document as follows updates only the style while keeping Caption (ie. "Hello, world") as AutoConnectText value.
<i class="fab fa-js-square"></i> External JSON document for the below sketch to modify the text style. <i class="fab fa-js-square"></i> External JSON document for the below sketch to modify the text style.
```json hl_lines="4" ```json hl_lines="4"
@ -735,7 +735,7 @@ For example, the combination of the sketch and JSON document as follows updates
``` ```
<i class="fa fa-arrow-down"></i><br> <i class="fa fa-arrow-down"></i><br>
<i class="fa fa-code"></i> The sketch (a part of code), load above JSON. <i class="fa fa-code"></i> the Sketch (a part of code), load above JSON.
```cpp hl_lines="1" ```cpp hl_lines="1"
ACText(Caption, "Hello, world"); ACText(Caption, "Hello, world");
AutoConnectAux helloPage("/hello", "Hello", true, { Caption }); AutoConnectAux helloPage("/hello", "Hello", true, { Caption });

10
mkdocs/acintro.md
Unescape View File

@ -15,7 +15,7 @@ AutoConnectAux is a container for AutoConnectElements. To make a custom Web page
<img src="images/ac_declaration.svg"> <img src="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. The further explanation is available in section [AutoConnectElements](acelements.md) also. 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. The further explanation is available in section [AutoConnectElements](acelements.md) also.
## Custom Web pages in AutoConnect menu ## Custom Web pages in AutoConnect menu
@ -33,11 +33,11 @@ You can create multiple custom Web pages and specify pages that can be called fr
<img align="center" width="520px" src="images/ac_auxjoin_multi.svg"> <img align="center" width="520px" src="images/ac_auxjoin_multi.svg">
<ul class="horizontal-list"> <ul class="horizontal-list">
<li><p style="margin:0 20px 0 -20px"><span style="margin-left:20px;float:right;width:280px;height:497px;border:1px solid lightgrey;"><img data-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 <a href="acelements.html#autoconnectsubmit"><b>AutoConnectSubmit</b></a> element owned by <i>aux1</i>.<sup id="fnref:2"><a class="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><p style="margin:0 20px 0 -20px"><span style="margin-left:20px;float:right;width:280px;height:497px;border:1px solid lightgrey;"><img data-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 <a href="acelements.html#autoconnectsubmit"><b>AutoConnectSubmit</b></a> element owned by <i>aux1</i>.<sup id="fnref:2"><a class="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> </ul>
[^2]: [^2]:
The sketch is actually this: the Sketch is actually this:
```cpp ```cpp
#include <ESP8266WiFi.h> #include <ESP8266WiFi.h>
#include <ESP8266WebServer.h> #include <ESP8266WebServer.h>
@ -82,7 +82,7 @@ So, the basic procedure for handling of the custom Web pages is as follows:
## Write the custom Web page with JSON ## 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 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. 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. 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** **custom_page.json**
```json ```json
@ -137,7 +137,7 @@ The following JSON code and sketch will execute the custom Web page as an exampl
] ]
``` ```
**The sketch** **the Sketch**
```cpp hl_lines="11 12" ```cpp hl_lines="11 12"
#include <ESP8266WiFi.h> #include <ESP8266WiFi.h>
#include <ESP8266WebServer.h> #include <ESP8266WebServer.h>

12
mkdocs/acjson.md
Unescape View File

@ -1,6 +1,6 @@
You can embed custom Web pages written in [**JSON**](https://www.json.org/index.html) into AutoConnect without AutoConnectAux &amp; AutoConnectElements declaration. Custom Web page declaration by JSON can embed in the sketch as a fixed string or can store in the external file such as SPIFFS for stream loading. Also, 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 AutoConnectAux &amp; AutoConnectElements declaration. Custom Web page declaration by JSON can embed in the Sketch as a fixed string or can store in the external file such as SPIFFS for stream loading. Also, you can also load and save AutoConnectElements objects individually.[^1]
[^1]:Loading and saving AutoConnect parameters adopt this method. [^1]:Loading and saving AutoConnect parameters adopt this method.
@ -9,7 +9,7 @@ By providing the following JSON document to AutoConnect, you can include the cus
<div style="float:left;width:50%;height:470px;overflow:auto"><img src="images/ac_json.png"></div> <div style="float:left;width:50%;height:470px;overflow:auto"><img src="images/ac_json.png"></div>
<img style="margin-left:30px;width:40%;height:470px;" src="images/ac_mqtt_setting.png"> <img style="margin-left:30px;width:40%;height:470px;" src="images/ac_mqtt_setting.png">
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. 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.
!!! caution "Adopt ArduinoJson v5 or v6" !!! caution "Adopt ArduinoJson v5 or v6"
To handle AutoConnectAux and AutoConnectElements written in JSON, you need to install the ArduinoJson library. You can adopt either [version 5](https://arduinojson.org/v5/doc/installation/) or [version 6](https://arduinojson.org/v6/doc/installation/) for the ArduinoJson. AutoConnect supports both versions. To handle AutoConnectAux and AutoConnectElements written in JSON, you need to install the ArduinoJson library. You can adopt either [version 5](https://arduinojson.org/v5/doc/installation/) or [version 6](https://arduinojson.org/v6/doc/installation/) for the ArduinoJson. AutoConnect supports both versions.
@ -152,7 +152,7 @@ This is different for each AutoConnectElements, and the key that can be specifie
: - **store** : Specifies the destination to save the uploaded file. Its value accepts one of the following:<p> : - **store** : Specifies the destination to save the uploaded file. Its value accepts one of the following:<p>
<b>fs</b>&nbsp;: Save as the SPIFFS file in flash of ESP8266/ESP32 module.<br> <b>fs</b>&nbsp;: Save as the SPIFFS file in flash of ESP8266/ESP32 module.<br>
<b>sd</b>&nbsp;: Save to an external SD device connected to ESP8266/ESP32 module.<br> <b>sd</b>&nbsp;: Save to an external SD device connected to ESP8266/ESP32 module.<br>
<b>extern</b>&nbsp;: Pass the content of the uploaded file to the uploader which is declared by the sketch individually. Its uploader must inherit [**AutoConnectUploadHandler**](acupload.md#to-upload-to-a-device-other-than-flash-or-sd) class and implements *_open*, *_write* and *_close* function.</p> <b>extern</b>&nbsp;: Pass the content of the uploaded file to the uploader which is declared by the Sketch individually. Its uploader must inherit [**AutoConnectUploadHandler**](acupload.md#to-upload-to-a-device-other-than-flash-or-sd) class and implements *_open*, *_write* and *_close* function.</p>
#### <i class="fa fa-caret-right"></i> ACInput #### <i class="fa fa-caret-right"></i> ACInput
: - **value** : Specifies the initial text string of the input box. If this value is omitted, placeholder is displayed as the initial string. : - **value** : Specifies the initial text string of the input box. If this value is omitted, placeholder is displayed as the initial string.
@ -197,7 +197,7 @@ There are two main ways to load the custom Web pages into AutoConnect.
This way does not require an explicit declaration of AutoConnectAux objects with sketches and is also useful when importing the custom Web pages JSON document from an external file such as SPIFFS because the page definition and sketch coding structure can be separated. This way does not require an explicit declaration of AutoConnectAux objects with sketches and is also useful when importing the custom Web pages JSON document from an external file such as SPIFFS because the page definition and sketch coding structure can be separated.
Using the [AutoCoonnect::load](api.md#load) function, AutoConnect dynamically generates the necessary AutoConnectAux objects internally based on the custom Web page definition of the imported JSON document content. In the sketch, the generated AutoConnectAux object can be referenced using the [AutoConnect::aux](api.md#aux) function. You can reach the AutoConnectElements you desired using the [AutoConnectAux::getElement](apiaux.md#getelement) function of its AutoConnectAux. Using the [AutoCoonnect::load](api.md#load) function, AutoConnect dynamically generates the necessary AutoConnectAux objects internally based on the custom Web page definition of the imported JSON document content. In the Sketch, the generated AutoConnectAux object can be referenced using the [AutoConnect::aux](api.md#aux) function. You can reach the AutoConnectElements you desired using the [AutoConnectAux::getElement](apiaux.md#getelement) function of its AutoConnectAux.
In the following example, it loads in a batch a JSON document of custom Web pages stored in SPIFFS and accesses to the AutoConnectInput element. In the following example, it loads in a batch a JSON document of custom Web pages stored in SPIFFS and accesses to the AutoConnectInput element.
@ -239,7 +239,7 @@ There are two main ways to load the custom Web pages into AutoConnect.
2. Load to AutoConnectAux and join to AutoConnect 2. Load to AutoConnectAux and join to AutoConnect
This way declares AutoConnectAux in the sketch and loads the custom Web pages JSON document there. It has an advantage for if you want to define each page of a custom Web page individually or allocate AutoConnectAux objects dynamically on the sketch side. This way declares AutoConnectAux in the Sketch and loads the custom Web pages JSON document there. It has an advantage for if you want to define each page of a custom Web page individually or allocate AutoConnectAux objects dynamically on the Sketch side.
After loading a JSON document using the [AutoConnectAux::load](apiaux.md#load) function by each, integrate those into AutoConnect using the [AutoConnect::join](api.md#join) function. After loading a JSON document using the [AutoConnectAux::load](apiaux.md#load) function by each, integrate those into AutoConnect using the [AutoConnect::join](api.md#join) function.
@ -363,4 +363,4 @@ For ESP32 module equips with PSRAM, you can allocate the JSON document buffer to
## Saving JSON document ## Saving JSON document
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). 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).

12
mkdocs/acupload.md
Unescape View File

@ -1,15 +1,15 @@
## Uploading file from Web Browser ## Uploading file from Web Browser
If you have to write some data individually to the ESP8266/ESP32 module for the sketch behavior, the [AutoConnectFile](acelements.md#autoconnectfile) element will assist with your wants implementation. The AutoConnectFile element produces an HTML `<input type="file">` tag and can save uploaded file to the flash or external SD of the ESP8266/ESP32 module. The handler for saving is built into AutoConnect. You can use it to inject any sketch data such as the initial values for the custom Web page into the ESP module via OTA without using the sketch data upload tool of Arduino-IDE. If you have to write some data individually to the ESP8266/ESP32 module for the Sketch behavior, the [AutoConnectFile](acelements.md#autoconnectfile) element will assist with your wants implementation. The AutoConnectFile element produces an HTML `<input type="file">` tag and can save uploaded file to the flash or external SD of the ESP8266/ESP32 module. The handler for saving is built into AutoConnect. You can use it to inject any sketch data such as the initial values for the custom Web page into the ESP module via OTA without using the Sketch data upload tool of Arduino-IDE.
<p style="display:block;margin-left:auto;margin-right:auto;width:603px;height:368px;border:1px solid lightgray;"><img data-gifffer="images/upload.gif" data-gifffer-width="601" data-gifffer-height="366""/></p> <p style="display:block;margin-left:auto;margin-right:auto;width:603px;height:368px;border:1px solid lightgray;"><img data-gifffer="images/upload.gif" data-gifffer-width="601" data-gifffer-height="366""/></p>
## Basic steps of the file upload sketch ## Basic steps of the file upload sketch
Here is the basic procedure of the sketch which can upload files from the client browser using AutoConnectFile:[^1] Here is the basic procedure of the Sketch which can upload files from the client browser using AutoConnectFile:[^1]
[^1]:The AutoConnectFile element can be used with other AutoConnectElements on the same page. [^1]:The AutoConnectFile element can be used with other AutoConnectElements on the same page.
1. Place AutoConnectFile on a custom Web page by writing JSON or constructor code directly with the sketch. 1. Place AutoConnectFile on a custom Web page by writing JSON or constructor code directly with the Sketch.
2. Place other AutoConnectElements as needed. 2. Place other AutoConnectElements as needed.
3. Place AutoConnectSubmit on the same custom Web page. 3. Place AutoConnectSubmit on the same custom Web page.
4. Perform the following process in the on-handler of submitting destination: 4. Perform the following process in the on-handler of submitting destination:
@ -145,7 +145,7 @@ Also, the substance of AC_File_SD (sd) is a FAT file of Arduino SD library porte
`AUTOCONNECT_SD_SPEED` defines SPI clock speed depending on the connected device. `AUTOCONNECT_SD_SPEED` defines SPI clock speed depending on the connected device.
!!! info "Involves both the begin() and the end()" !!! info "Involves both the begin() and the end()"
The built-in uploader executes the begin and end functions regardless of the sketch whence the file system of the device will terminate with the uploader termination. Therefore, to use the device in the sketch after uploading, you need to **restart it with the begin** function. The built-in uploader executes the begin and end functions regardless of the Sketch whence the file system of the device will terminate with the uploader termination. Therefore, to use the device in the Sketch after uploading, you need to **restart it with the begin** function.
## When it will be uploaded ## When it will be uploaded
@ -166,7 +166,7 @@ AutoConnetFile saves the uploaded file with the file name you selected by `<inpu
You can output the file to any device using a custom uploader by specifying [**extern**](acjson.md#acfile) with the [**store**](acjson.md#acfile) attribute of [AutoConnectFile](acjson.md#acfile) (or specifying [**AC_File_Extern**](acelements.md#store) for the [**store**](apielements.md#store) member variable) and can customize the uploader according to the need to upload files to other than Flash or SD. Implements your own uploader with inheriting the [**AutoConnectUploadHandler**](#upload-handler-base-class) class which is the base class of the upload handler. You can output the file to any device using a custom uploader by specifying [**extern**](acjson.md#acfile) with the [**store**](acjson.md#acfile) attribute of [AutoConnectFile](acjson.md#acfile) (or specifying [**AC_File_Extern**](acelements.md#store) for the [**store**](apielements.md#store) member variable) and can customize the uploader according to the need to upload files to other than Flash or SD. Implements your own uploader with inheriting the [**AutoConnectUploadHandler**](#upload-handler-base-class) class which is the base class of the upload handler.
!!! note "It's not so difficult" !!! note "It's not so difficult"
Implementing the custom uploader requires a little knowledge of the c++ language. If you are less attuned to programming c++, you may find it difficult. But don't worry. You can make it in various situations by just modifying the sketch skeleton that appears at the end of this page. Implementing the custom uploader requires a little knowledge of the c++ language. If you are less attuned to programming c++, you may find it difficult. But don't worry. You can make it in various situations by just modifying the Sketch skeleton that appears at the end of this page.
### <i class="fa fa-code"></i> Upload handler base class ### <i class="fa fa-code"></i> Upload handler base class
@ -298,7 +298,7 @@ void AutoConnectAux::onUpload<T>(T& uploadClass)
<dd><span class="apidef">uploadClass</span><span class="apidesc">Specifies the custom upload class instance.</span></dd> <dd><span class="apidef">uploadClass</span><span class="apidesc">Specifies the custom upload class instance.</span></dd>
</dl> </dl>
The rough structure of the sketches that completed these implementations will be as follows: The rough structure of the Sketches that completed these implementations will be as follows:
```cpp ```cpp
#include <ESP8266WiFi.h> #include <ESP8266WiFi.h>

2
mkdocs/api.md
Unescape View File

@ -60,7 +60,7 @@ AutoConnect(WebServer& webServer)
Run the AutoConnect site using the externally ensured ESP8266WebServer for ESP8266 or WebServer for ESP32. Run the AutoConnect site using the externally ensured ESP8266WebServer for ESP8266 or WebServer for ESP32.
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.
<dl class="apidl"> <dl class="apidl">
<dt>**Parameter**</dt> <dt>**Parameter**</dt>
<dd><span class="apidef">webServer</span><span class="apidesc">A reference of ESP8266WebServer or WebServer instance.</span></dd> <dd><span class="apidef">webServer</span><span class="apidesc">A reference of ESP8266WebServer or WebServer instance.</span></dd>

4
mkdocs/apiaux.md
Unescape View File

@ -267,7 +267,7 @@ typedef struct {
```cpp ```cpp
bool release(const String& name) bool release(const String& name)
``` ```
Release a specified AutoConnectElement from AutoConnectAux. 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. Release a specified AutoConnectElement from AutoConnectAux. 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.
<dl class="apidl"> <dl class="apidl">
<dt>**Parameter**</dt> <dt>**Parameter**</dt>
<dd><span class="apidef">name</span><span class="apidesc">Specifies the name of AutoConnectElements to be released.</span></dd> <dd><span class="apidef">name</span><span class="apidesc">Specifies the name of AutoConnectElements to be released.</span></dd>
@ -316,7 +316,7 @@ Sets the value of the specified AutoConnectElement. If values ​​is specified
</dl> </dl>
!!! hint "You can directly access the value member variable." !!! 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. 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 ```cpp
AutoConnectAux aux; AutoConnectAux aux;
// ... Griping the AutoConnectText here. // ... Griping the AutoConnectText here.

2
mkdocs/apiextra.md
Unescape View File

@ -5,7 +5,7 @@ The library presents two PNG icons which can be used to embed a hyperlink to the
- Bar type <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAApklEQVRYR2NkGGDAOMD2M4w6YDQEkEMgEJggZwCxGI0T5mug+alAvBFkD7IDXtLBcpjfXgEZ4ugOeAETpHEIgIwHeVYC3QH+0CgAS9AQgCwHRcFmdAfQ0E7cRo9mw0EVAqPlAKhwEKVTVsBZDsyiQ2k4Wg6gxPKgyoZ0Sn+o1iCHQBBQaiYQi9DYJTjbAyAJWluOtz0wWg7QOOqxGz+aDUdDYMBDAACA0x4hs/MPrwAAAABJRU5ErkJggg==" title="AutoConnect menu" alt="AutoConnect menu" /> - Bar type <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAApklEQVRYR2NkGGDAOMD2M4w6YDQEkEMgEJggZwCxGI0T5mug+alAvBFkD7IDXtLBcpjfXgEZ4ugOeAETpHEIgIwHeVYC3QH+0CgAS9AQgCwHRcFmdAfQ0E7cRo9mw0EVAqPlAKhwEKVTVsBZDsyiQ2k4Wg6gxPKgyoZ0Sn+o1iCHQBBQaiYQi9DYJTjbAyAJWluOtz0wWg7QOOqxGz+aDUdDYMBDAACA0x4hs/MPrwAAAABJRU5ErkJggg==" title="AutoConnect menu" alt="AutoConnect menu" />
- Cog type <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC2klEQVRIS61VvWsUQRSfmU2pon9BUIkQUaKFaCBKgooSb2d3NSSFKbQR/KrEIiIKBiGF2CgRxEpjQNHs7mwOUcghwUQ7g58IsbGxEBWsb2f8zR177s3t3S2cA8ftzPu993vzvoaSnMu2vRKlaqgKp74Q/tE8qjQPyHGcrUrRjwlWShmDbFMURd/a6TcQwNiYUmpFCPElUebcuQ2vz6aNATMVReHEPwzfSSntDcNwNo2rI+DcvQzhpAbA40VKyV0p1Q9snzBG1qYVcYufXV1sREraDcxpyHdXgkfpRBj6Uwm2RsC5dxxmZ9pdOY9cKTISRcHTCmGiUCh4fYyplTwG2mAUbtMTBMHXOgK9QfyXEZr+TkgQ1oUwDA40hEgfIAfj+HuQRaBzAs9eKyUZ5Htx+T3ZODKG8DzOJMANhmGomJVMXPll+hx9UUAlzZrJJ4QNCDG3VEfguu7mcpmcB/gkBOtShhQhchAlu5jlLUgc9ENgyP5gf9+y6LTv+58p5zySkgwzLNOIGc8sEoT1Lc53NMlbCQQuvMxeCME1NNPVVkmH/i3IzzXDtCSA0qQQwZWOCJDY50jsQRjJmkslEOxvTcDRO6zPxOh5xZglKkYLhWM9jMVnkIsTyMT6NBj7IbOCEjm6HxNVVTo2WXqEWJZ1T8rytB6GxizyDkPhWVpBqfiXUtbo/HywYJSpA9kMamNNPZ71R9Hcm+TMHHZNGw3EuraXEUldbfvw25UdOjqOt+JhMwJd7+jSTpZaEiIcaCDwPK83jtWnTkwnunFMtxeL/ge9r4XItt1RNNaj/0GAcV2bR3U5sG3nEh6M61US+Qrfd9Bs31GGulI2GOS/8dgcQZV1w+ApjIxB7TDwF9GcNzJzoA+rD0/8HvPnXQJCt2qFCwbBTfRI7UyXumWVt+HJ9NO4XI++bdsb0YyrqXmlh+AWOLHaLqS5CLQR5EggR3YlcVS9gKeH2hnX8r8Kmi1CAsl36QAAAABJRU5ErkJggg==" title="AutoConnect menu" alt="AutoConnect menu" /> - Cog type <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC2klEQVRIS61VvWsUQRSfmU2pon9BUIkQUaKFaCBKgooSb2d3NSSFKbQR/KrEIiIKBiGF2CgRxEpjQNHs7mwOUcghwUQ7g58IsbGxEBWsb2f8zR177s3t3S2cA8ftzPu993vzvoaSnMu2vRKlaqgKp74Q/tE8qjQPyHGcrUrRjwlWShmDbFMURd/a6TcQwNiYUmpFCPElUebcuQ2vz6aNATMVReHEPwzfSSntDcNwNo2rI+DcvQzhpAbA40VKyV0p1Q9snzBG1qYVcYufXV1sREraDcxpyHdXgkfpRBj6Uwm2RsC5dxxmZ9pdOY9cKTISRcHTCmGiUCh4fYyplTwG2mAUbtMTBMHXOgK9QfyXEZr+TkgQ1oUwDA40hEgfIAfj+HuQRaBzAs9eKyUZ5Htx+T3ZODKG8DzOJMANhmGomJVMXPll+hx9UUAlzZrJJ4QNCDG3VEfguu7mcpmcB/gkBOtShhQhchAlu5jlLUgc9ENgyP5gf9+y6LTv+58p5zySkgwzLNOIGc8sEoT1Lc53NMlbCQQuvMxeCME1NNPVVkmH/i3IzzXDtCSA0qQQwZWOCJDY50jsQRjJmkslEOxvTcDRO6zPxOh5xZglKkYLhWM9jMVnkIsTyMT6NBj7IbOCEjm6HxNVVTo2WXqEWJZ1T8rytB6GxizyDkPhWVpBqfiXUtbo/HywYJSpA9kMamNNPZ71R9Hcm+TMHHZNGw3EuraXEUldbfvw25UdOjqOt+JhMwJd7+jSTpZaEiIcaCDwPK83jtWnTkwnunFMtxeL/ge9r4XItt1RNNaj/0GAcV2bR3U5sG3nEh6M61US+Qrfd9Bs31GGulI2GOS/8dgcQZV1w+ApjIxB7TDwF9GcNzJzoA+rD0/8HvPnXQJCt2qFCwbBTfRI7UyXumWVt+HJ9NO4XI++bdsb0YyrqXmlh+AWOLHaLqS5CLQR5EggR3YlcVS9gKeH2hnX8r8Kmi1CAsl36QAAAABJRU5ErkJggg==" title="AutoConnect menu" alt="AutoConnect menu" />
To reference the icon, use the **AUTOCONNECT_LINK** macro in the sketch. It expands into the string literal as an HTML ```<a></a>``` tag with PNG embedded of the AutoConnect menu hyperlinks. Icon type is specified by the parameter of the macro. To reference the icon, use the **AUTOCONNECT_LINK** macro in the Sketch. It expands into the string literal as an HTML ```<a></a>``` tag with PNG embedded of the AutoConnect menu hyperlinks. Icon type is specified by the parameter of the macro.
<dl class="apidl"> <dl class="apidl">
<dd><span class="apidef">BAR_24</span>Bars icon, 24x24.</dd> <dd><span class="apidef">BAR_24</span>Bars icon, 24x24.</dd>

22
mkdocs/basicusage.md
Unescape View File

@ -1,8 +1,8 @@
## Simple usage ## Simple usage
### <i class="fa fa-edit"></i> Embed to the sketches ### <i class="fa fa-edit"></i> Embed to the Sketches
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. 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.
<img src="images/BeforeAfter.svg" /> <img src="images/BeforeAfter.svg" />
@ -16,7 +16,7 @@ How embed the AutoConnect to the sketches you have. Most simple approach to appl
</ul> </ul>
[^1]: [^1]:
Each *VARIABLE* conforms to the actual declaration in the sketches. Each *VARIABLE* conforms to the actual declaration in the Sketches.
[^2]: [^2]:
WiFi SSID and Password can be specified AutoConnect::begin() too. WiFi SSID and Password can be specified AutoConnect::begin() too.
@ -26,7 +26,7 @@ Replacement the **handleClient** method is not indispensable. AutoConnect can st
## Basic usage ## Basic usage
### <i class="fa fa-caret-right"></i> Basic logic sequence for the user sketches ### <i class="fa fa-caret-right"></i> Basic logic sequence for the user Sketches
#### 1. A typical logic sequence #### 1. A typical logic sequence
@ -40,7 +40,7 @@ Replacement the **handleClient** method is not indispensable. AutoConnect can st
5.2 <strong>Starts </strong>`AutoConnect::begin()`<strong>.</strong> 5.2 <strong>Starts </strong>`AutoConnect::begin()`<strong>.</strong>
5.3 <strong>Check WiFi connection status.</strong> 5.3 <strong>Check WiFi connection status.</strong>
6. <strong>loop()</strong> 6. <strong>loop()</strong>
6.1 <strong>Do the process for actual sketch.</strong> 6.1 <strong>Do the process for actual Sketch.</strong>
6.2 <strong>Invokes </strong>`AutoConnect::handleClient()`<strong>, or invokes </strong>`ESP8266WebServer::handleClient()`<strong>/</strong>`WebServer::handleClient`<strong> then </strong>`AutoConnect::handleRequest()`<strong>.</strong> 6.2 <strong>Invokes </strong>`AutoConnect::handleClient()`<strong>, or invokes </strong>`ESP8266WebServer::handleClient()`<strong>/</strong>`WebServer::handleClient`<strong> then </strong>`AutoConnect::handleRequest()`<strong>.</strong>
#### 2. Declare AutoConnect object #### 2. Declare AutoConnect object
@ -59,15 +59,15 @@ AutoConnect VARIABLE;
- **The parameter with an ESP8266WebServer/WebServer variable:** An ESP8266WebServer/WebServer object variable must be declared. AutoConnect uses its variable to handles the [AutoConnect menu](menu.md). - **The parameter with an ESP8266WebServer/WebServer variable:** An ESP8266WebServer/WebServer object variable must be declared. AutoConnect uses its variable to handles the [AutoConnect menu](menu.md).
- **With no parameter:** The sketch does not declare ESP8266WebServer/WebServer object. In this case, AutoConnect allocates an instance of the ESP8266WebServer/WebServer internally. The logic sequence of the sketch is somewhat different as the above. To register a URL handler function by *ESP8266WebServer::on* or *WebServer::on* should be performed after [*AutoConnect::begin*](api.md#begin). - **With no parameter:** the Sketch does not declare ESP8266WebServer/WebServer object. In this case, AutoConnect allocates an instance of the ESP8266WebServer/WebServer internally. The logic sequence of the Sketch is somewhat different as the above. To register a URL handler function by *ESP8266WebServer::on* or *WebServer::on* should be performed after [*AutoConnect::begin*](api.md#begin).
#### 3. No need WiFI.begin(...) #### 3. No need WiFI.begin(...)
AutoConnect internally performs *WiFi.begin* to establish a WiFi connection. There is no need for a general process to establish a connection using *WiFi.begin* with a sketch code. AutoConnect internally performs *WiFi.begin* to establish a WiFi connection. There is no need for a general process to establish a connection using *WiFi.begin* with a Sketch code.
#### 4. Alternate ESP8266WebServer::begin() and WebServer::begin() #### 4. Alternate ESP8266WebServer::begin() and WebServer::begin()
[*AutoConnect::begin*](api.md#begin) executes *ESP8266WebServer::begin*/*WebServer::begin* internally too and it starts the DNS server to behave as a Captive portal. So it is not needed to call *ESP8266WebServer::begin*/*WebServer::begin* in the sketch. [*AutoConnect::begin*](api.md#begin) executes *ESP8266WebServer::begin*/*WebServer::begin* internally too and it starts the DNS server to behave as a Captive portal. So it is not needed to call *ESP8266WebServer::begin*/*WebServer::begin* in the Sketch.
!!! info "Why DNS Server starts" !!! info "Why DNS Server starts"
AutoConnect traps the detection of the captive portal and achieves a connection with the WLAN interactively by the AutoConnect menu. It responds SoftAP address to all DNS queries temporarily to trap. Once a WiFi connection establishes, the DNS server contributed by AutoConnect stops. AutoConnect traps the detection of the captive portal and achieves a connection with the WLAN interactively by the AutoConnect menu. It responds SoftAP address to all DNS queries temporarily to trap. Once a WiFi connection establishes, the DNS server contributed by AutoConnect stops.
@ -78,7 +78,7 @@ SSID and Password can also specify by [*AutoConnect::begin*](api.md#begin). ESP8
#### 6. Use ESP8266WebServer::on and WebServer::on to handle URL #### 6. Use ESP8266WebServer::on and WebServer::on to handle URL
AutoConnect is designed to coexist with the process for handling the web pages by user sketches. The page processing function which will send an HTML to the client invoked by the "*on::ESP8266WebServer*" or the "*on::WebServer*" function is the same as when using ESP8266WebServer/WebServer natively. AutoConnect is designed to coexist with the process for handling the web pages by user Sketches. The page processing function which will send an HTML to the client invoked by the "*on::ESP8266WebServer*" or the "*on::WebServer*" function is the same as when using ESP8266WebServer/WebServer natively.
#### 7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient() #### 7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient()
@ -93,9 +93,9 @@ Declaration parameter for the constructor | Use ESP8266WebServer::handleClient o
[None](api.md#constructors) | AutoConnect menu not available.<br>To use AutoConnect menu, need [AutoConnect::handleRequest()](api.md#handlerequest).<br>also to use ESP8266WebServer/WebServer natively, need [AutoConnect::host()](api.md#host). | AutoConnect menu available.<br>To use ESP8266WebServer/WebServer natively, need [AutoConnect::host()](api.md#host). [None](api.md#constructors) | AutoConnect menu not available.<br>To use AutoConnect menu, need [AutoConnect::handleRequest()](api.md#handlerequest).<br>also to use ESP8266WebServer/WebServer natively, need [AutoConnect::host()](api.md#host). | AutoConnect menu available.<br>To use ESP8266WebServer/WebServer natively, need [AutoConnect::host()](api.md#host).
[Reference to ESP8266WebServer/WebServer](api.md#withparameter) | AutoConnect menu not available.<br>To use AutoConnect menu, need [AutoConnect::handleRequest()](api.md#handlerequest). | AutoConnect menu available. [Reference to ESP8266WebServer/WebServer](api.md#withparameter) | AutoConnect menu not available.<br>To use AutoConnect menu, need [AutoConnect::handleRequest()](api.md#handlerequest). | AutoConnect menu available.
- **By declaration for the AutoConnect variable with no parameter**: The ESP8266WebServer/WebServer instance is hosted by AutoConnect automatically then the sketches use [*AutoConnect::host*](api.md#host) as API to get it after [*AutoConnect::begin*](api.md#begin) performed. - **By declaration for the AutoConnect variable with no parameter**: The ESP8266WebServer/WebServer instance is hosted by AutoConnect automatically then the Sketches use [*AutoConnect::host*](api.md#host) as API to get it after [*AutoConnect::begin*](api.md#begin) performed.
- **By declaration for the AutoConnect variable with the reference of ESP8266WebServer/WebServer**: AutoConnect will use it. The sketch can use it is too. - **By declaration for the AutoConnect variable with the reference of ESP8266WebServer/WebServer**: AutoConnect will use it. the Sketch can use it is too.
- **In use ESP8266WebServer::handleClient()/WebServer::handleClient()**: AutoConnect menu can be dispatched but not works normally. It is necessary to call [*AutoConnect::handleRequest*](api.md#void-handlerequest) after *ESP8255WebServer::handleClient*/*WebServer::handleClient* invoking. - **In use ESP8266WebServer::handleClient()/WebServer::handleClient()**: AutoConnect menu can be dispatched but not works normally. It is necessary to call [*AutoConnect::handleRequest*](api.md#void-handlerequest) after *ESP8255WebServer::handleClient*/*WebServer::handleClient* invoking.

2
mkdocs/colorized.md
Unescape View File

@ -1,6 +1,6 @@
## AutoConnect menu colorizing ## ## AutoConnect menu colorizing ##
You can easily change the color of the AutoConnect menu. Menu colors can be changed statically by the AutoConnect menu color definition determined at compile time. You cannot change the color while the sketch is running. You can easily change the color of the AutoConnect menu. Menu colors can be changed statically by the AutoConnect menu color definition determined at compile time. You cannot change the color while the Sketch is running.
The menu color scheme has been separated to `AutoConnectLabels.h` placed the AutoConnect library folder.[^1] You can change the color scheme of the menu with the following three color codes. The color code also accepts CSS standard color names.[^2] The menu color scheme has been separated to `AutoConnectLabels.h` placed the AutoConnect library folder.[^1] You can change the color scheme of the menu with the following three color codes. The color code also accepts CSS standard color names.[^2]

16
mkdocs/faq.md
Unescape View File

@ -1,6 +1,6 @@
## <i class="fa fa-question-circle"></i> After connected, AutoConnect menu performs but no happens. ## <i class="fa fa-question-circle"></i> After connected, AutoConnect menu performs but no happens.
If you can access the **AutoConnect root path** as http://ESP8266IPADDRESS/_ac from browser, probably the sketch uses *ESP8266WebServer::handleClient()* without [*AutoConnect::handleRequest()*](api.md#handlerequest). If you can access the **AutoConnect root path** as http://ESP8266IPADDRESS/_ac from browser, probably the Sketch uses *ESP8266WebServer::handleClient()* without [*AutoConnect::handleRequest()*](api.md#handlerequest).
For AutoConnect menus to work properly, call [*AutoConnect::handleRequest()*](api.md#handlerequest) after *ESP8266WebServer::handleClient()* invoked, or use [*AutoConnect::handleClient()*](api.md#handleclient). [*AutoConnect::handleClient()*](api.md#handleclient) is equivalent *ESP8266WebServer::handleClient* combined [*AutoConnect::handleRequest()*](api.md#handlerequest). For AutoConnect menus to work properly, call [*AutoConnect::handleRequest()*](api.md#handlerequest) after *ESP8266WebServer::handleClient()* invoked, or use [*AutoConnect::handleClient()*](api.md#handleclient). [*AutoConnect::handleClient()*](api.md#handleclient) is equivalent *ESP8266WebServer::handleClient* combined [*AutoConnect::handleRequest()*](api.md#handlerequest).
See also the explanation [here](basicusage.md#esp8266webserver-hosted-or-parasitic). See also the explanation [here](basicusage.md#esp8266webserver-hosted-or-parasitic).
@ -39,7 +39,7 @@ You can avoid a compile error in one of two ways:
2. Change the order of `#include` directives. 2. Change the order of `#include` directives.
With the sketch, `#include <ESP8266httpUpdate.h>` before `#include <AutoConnect.h>`. With the Sketch, `#include <ESP8266httpUpdate.h>` before `#include <AutoConnect.h>`.
## <i class="fa fa-question-circle"></i> Connection lost immediately after establishment with AP ## <i class="fa fa-question-circle"></i> Connection lost immediately after establishment with AP
@ -109,7 +109,7 @@ Probably **WiFi.begin** failed with the specified SSID. Activating the [debug pr
## <i class="fa fa-question-circle"></i> Hang up after Reset? ## <i class="fa fa-question-circle"></i> Hang up after Reset?
If ESP8266 hang up after reset by AutoConnect menu, perhaps manual reset is not yet. Especially if it is not manual reset yet after uploading the sketch, the boot mode will stay 'Uart Download'. There is some discussion about this on the Github's ESP8266 core: https://github.com/esp8266/Arduino/issues/1017 [^1] If ESP8266 hang up after reset by AutoConnect menu, perhaps manual reset is not yet. Especially if it is not manual reset yet after uploading the Sketch, the boot mode will stay 'Uart Download'. There is some discussion about this on the Github's ESP8266 core: https://github.com/esp8266/Arduino/issues/1017 [^1]
[^1]: This issue has been resolved in ESP8266 core 2.5.0 and later. [^1]: This issue has been resolved in ESP8266 core 2.5.0 and later.
@ -121,7 +121,7 @@ ets Jan 8 2013,rst cause:4, boot mode:(1,6) or (1,7)
wdt reset wdt reset
``` ```
The correct boot mode for starting the sketch is **(3, x)**. The correct boot mode for starting the Sketch is **(3, x)**.
!!! info "ESP8266 Boot Messages" !!! info "ESP8266 Boot Messages"
It is described by [ESP8266 Non-OS SDK API Reference](https://www.espressif.com/en/products/hardware/esp8266ex/resources), section A.5. It is described by [ESP8266 Non-OS SDK API Reference](https://www.espressif.com/en/products/hardware/esp8266ex/resources), section A.5.
@ -166,7 +166,7 @@ build-flags = -DAUTOCONNECT_NOUSE_JSON
## <i class="fa fa-question-circle"></i> How erase the credentials saved in EEPROM? ## <i class="fa fa-question-circle"></i> How erase the credentials saved in EEPROM?
Make some sketches for erasing the EEPROM area, or some erasing utility is needed. You can prepare the sketch to erase the saved credential with *AutoConnectCredential*. The *AutoConnectCrendential* class provides the access method to the saved credential in EEPROM and library source file is including it. Refer to '[Saved credential access](credit.md#saved-credential-in-eeprom)' on section [Appendix](credit.md) for details. Make some sketches for erasing the EEPROM area, or some erasing utility is needed. You can prepare the Sketch to erase the saved credential with *AutoConnectCredential*. The *AutoConnectCrendential* class provides the access method to the saved credential in EEPROM and library source file is including it. Refer to '[Saved credential access](credit.md#saved-credential-in-eeprom)' on section [Appendix](credit.md) for details.
!!! hint !!! hint
With the [**ESPShaker**](https://github.com/Hieromon/ESPShaker), you can access EEPROM interactively from the serial monitor, and of course you can erase saved credentials. With the [**ESPShaker**](https://github.com/Hieromon/ESPShaker), you can access EEPROM interactively from the serial monitor, and of course you can erase saved credentials.
@ -195,7 +195,7 @@ Because AutoConnect does not send a login success response to the captive portal
## <i class="fa fa-question-circle"></i> I cannot see the custom Web page. ## <i class="fa fa-question-circle"></i> I cannot see the custom Web page.
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. 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.
## <i class="fa fa-question-circle"></i> Saved credentials are wrong or lost. ## <i class="fa fa-question-circle"></i> Saved credentials are wrong or lost.
@ -212,7 +212,7 @@ It may be two possibilities as follows:
2. Heap is insufficient memory. AutoConnect entrusts HTML generation to PageBuilder that makes heavy use the String::concatenate function and causes memory fragmentation. This is a structural problem with PageBuilder, but it is difficult to solve immediately. 2. Heap is insufficient memory. AutoConnect entrusts HTML generation to PageBuilder that makes heavy use the String::concatenate function and causes memory fragmentation. This is a structural problem with PageBuilder, but it is difficult to solve immediately.
If this issue produces with your sketch, Reloading the page may recover. If this issue produces with your sketch, Reloading the page may recover.
Also, you can check the memory running out status by rebuilding the sketch with [PageBuilder's debug log option](faq.md#fn:2) turned on. Also, you can check the memory running out status by rebuilding the Sketch with [PageBuilder's debug log option](faq.md#fn:2) turned on.
If the heap memory is insufficient, the following message is displayed on the serial console. If the heap memory is insufficient, the following message is displayed on the serial console.
@ -288,7 +288,7 @@ If you can not solve AutoConnect problems please report to [Issues](https://gith
* [ ] lwIP variant * [ ] lwIP variant
* [ ] Problem description * [ ] Problem description
* [ ] If you have a STACK DUMP decoded result with formatted by the code block tag * [ ] 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 (Reduce to the reproducible minimum code for the problem) * [ ] the Sketch code with formatted by the code block tag (Reduce to the reproducible minimum code for the problem)
* [ ] Debug messages output (Including arduino core) * [ ] Debug messages output (Including arduino core)
I will make efforts to solve as quickly as possible. But I would like you to know that it is not always possible. I will make efforts to solve as quickly as possible. But I would like you to know that it is not always possible.

4
mkdocs/gettingstarted.md
Unescape View File

@ -57,14 +57,14 @@ Here, tap *"Configure new AP"* to connect the new access point then the SSID con
After connection established, the current status screen will appear. It is already connected to WLAN with WiFi mode as WIFI\_AP\_STA and the IP connection status is displayed there including the SSID. Then at this screen, you have two options for the next step. After connection established, the current status screen will appear. It is already connected to WLAN with WiFi mode as WIFI\_AP\_STA and the IP connection status is displayed there including the SSID. Then at this screen, you have two options for the next step.
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. 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. Or, "**RESET**" can be selected. The ESP8266 resets and reboots. After that, immediately before the connection will be restored automatically with WIFI\_STA mode.
<img src="images/established.png" style="border:1px solid lightgrey;width:280px;" /><img src="images/arrow_right.svg" style="vertical-align:top;padding-top:120px;width:48px;margin-left:30px;margin-right:30px;" /><img src="images/reset.png" style="border:1px solid lightgrey;width:280px;" /> <img src="images/established.png" style="border:1px solid lightgrey;width:280px;" /><img src="images/arrow_right.svg" style="vertical-align:top;padding-top:120px;width:48px;margin-left:30px;margin-right:30px;" /><img src="images/reset.png" style="border:1px solid lightgrey;width:280px;" />
### <i class="fa fa-play-circle"></i> Run for usually ### <i class="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*. 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*.
<img src="images/serial.png" style="vertical-align:top;" /><img src="images/arrow_right.svg" style="vertical-align:top;padding-top:60px;width:48px;margin-left:45px;margin-right:30px;" /><img src="images/hello_world.png" style="border:1px solid lightgrey;width:280px;" /> <img src="images/serial.png" style="vertical-align:top;" /><img src="images/arrow_right.svg" style="vertical-align:top;padding-top:60px;width:48px;margin-left:45px;margin-right:30px;" /><img src="images/hello_world.png" style="border:1px solid lightgrey;width:280px;" />

12
mkdocs/howtoembed.md
Unescape View File

@ -1,6 +1,6 @@
## Embed the AutoConnect to the sketch ## Embed the AutoConnect to the Sketch
Here hold two case examples. Both examples perform the same function. Only how to incorporate the **AutoConnect** into the sketch differs. Also included in the sample folder, HandlePortal.ino also shows how to use the [PageBuilder](https://github.com/Hieromon/PageBuilder) library for HTML assemblies. Here hold two case examples. Both examples perform the same function. Only how to incorporate the **AutoConnect** into the Sketch differs. Also included in the sample folder, HandlePortal.ino also shows how to use the [PageBuilder](https://github.com/Hieromon/PageBuilder) library for HTML assemblies.
## What does this example do? ## What does this example do?
@ -31,7 +31,7 @@ Declare only AutoConnect, performs handleClient.
## Used with MQTT as a client application ## Used with MQTT as a client application
The effect of AutoConnect is not only for ESP8266/ESP32 as the web server. It has advantages for something WiFi client as well. For example, AutoConnect is also convenient for publishing MQTT messages from various measurement points. Even if the SSID is different for each measurement point, it is not necessary to modify the sketch. The effect of AutoConnect is not only for ESP8266/ESP32 as the web server. It has advantages for something WiFi client as well. For example, AutoConnect is also convenient for publishing MQTT messages from various measurement points. Even if the SSID is different for each measurement point, it is not necessary to modify the Sketch.
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. 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.
@ -41,7 +41,7 @@ This example tries to publish the WiFi signal strength of ESP8266 with MQTT. It
- Arduino Client for MQTT - It's the [PubSubClient](https://github.com/knolleary/pubsubclient), install it to Arduino IDE. If you have the latest version already, this step does not need. - Arduino Client for MQTT - It's the [PubSubClient](https://github.com/knolleary/pubsubclient), install it to Arduino IDE. If you have the latest version already, this step does not need.
- Create a channel on ThingSpeak. - Create a channel on ThingSpeak.
- Get the Channel API Keys from ThingSpeak, put its keys to the sketch. - Get the Channel API Keys from ThingSpeak, put its keys to the Sketch.
The ThingSpeak is the open IoT platform. It is capable of sending data privately to the cloud and analyzing, visualizing its data. If you do not have an account of ThingSpeak, you need that account to proceed further. ThingSpeak has the free plan for the account which uses within the scope of this example.[^1] You can sign up with the [ThingSpeak sign-up page](https://thingspeak.com/users/sign_up). The ThingSpeak is the open IoT platform. It is capable of sending data privately to the cloud and analyzing, visualizing its data. If you do not have an account of ThingSpeak, you need that account to proceed further. ThingSpeak has the free plan for the account which uses within the scope of this example.[^1] You can sign up with the [ThingSpeak sign-up page](https://thingspeak.com/users/sign_up).
@ -78,9 +78,9 @@ The last key you need is the **User API Key** and can be confirmed it in the use
<img src="images/USERKey.png" width="70%"/> <img src="images/USERKey.png" width="70%"/>
### The sketch, Publishes messages ### the Sketch, Publishes messages
The complete code of the sketch is [mqttRSSI.ino](https://github.com/Hieromon/AutoConnect/blob/master/examples/mqttRSSI/mqttRSSI.ino) in the [AutoConnect repository](https://github.com/Hieromon/AutoConnect). Replace the following #define in a sketch with **User API Key**, **Write API Key** and **Channel ID**. After Keys updated, compile the sketch and upload it. The complete code of the Sketch is [mqttRSSI.ino](https://github.com/Hieromon/AutoConnect/blob/master/examples/mqttRSSI/mqttRSSI.ino) in the [AutoConnect repository](https://github.com/Hieromon/AutoConnect). Replace the following #define in a sketch with **User API Key**, **Write API Key** and **Channel ID**. After Keys updated, compile the Sketch and upload it.
```cpp ```cpp
#define MQTT_USER_KEY "****************" // Replace to User API Key. #define MQTT_USER_KEY "****************" // Replace to User API Key.

20
mkdocs/index.md
Unescape View File

@ -5,13 +5,13 @@ An Arduino library for ESP8266/ESP32 WLAN configuration at run time with web int
## Overview ## Overview
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. 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. 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.
<img style="display:inline-block;width:460px;margin-right:30px;" src="images/ov.png" /><span style="display:inline-block;width:182px;height:322px;border:solid 1px lightgrey;"><img data-gifffer="images/ov.gif" data-gifffer-width="180" style="width:180px;" /></span> <img style="display:inline-block;width:460px;margin-right:30px;" src="images/ov.png" /><span style="display:inline-block;width:182px;height:322px;border:solid 1px lightgrey;"><img data-gifffer="images/ov.gif" data-gifffer-width="180" style="width:180px;" /></span>
### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> No need pre-coded SSID &amp; password ### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> No need pre-coded SSID &amp; password
<span class="lead">It is no needed hard-coding in advance the SSID and Password into the sketch to connect between ESP8266/ESP32 and WLAN. You can input SSID &amp; Password from a smartphone via the web interface at runtime.</span> <span class="lead">It is no needed hard-coding in advance the SSID and Password into the Sketch to connect between ESP8266/ESP32 and WLAN. You can input SSID &amp; Password from a smartphone via the web interface at runtime.</span>
### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Simple usage ### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Simple usage
@ -23,11 +23,11 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi
### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Easy to embed in ### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Easy to embed in
<span class="lead">AutoConnect can be placed easily in your sketch. It's "**begin**" and "**handleClient**" only.</span> <span class="lead">AutoConnect can be placed easily in your Sketch. It's "**begin**" and "**handleClient**" only.</span>
### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Lives with your sketches ### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Lives with your Sketches
<span class="lead">The sketches which provide the web page using ESP8266WebServer there is, AutoConnect will not disturb it. AutoConnect can use an already instantiated ESP8266WebServer object, or itself can assign it. This effect also applies to ESP32. The corresponding class for ESP32 will be the WebServer.</span> <span class="lead">The Sketches which provide the web page using ESP8266WebServer there is, AutoConnect will not disturb it. AutoConnect can use an already instantiated ESP8266WebServer object, or itself can assign it. This effect also applies to ESP32. The corresponding class for ESP32 will be the WebServer.</span>
### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Easy to add the [custom Web pages](acintro.md) <sup><sub>ENHANCED w/v0.9.7</sub></sup> ### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Easy to add the [custom Web pages](acintro.md) <sup><sub>ENHANCED w/v0.9.7</sub></sup>
@ -41,7 +41,7 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi
### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Quick and easy to equip the [OTA update feature](otaupdate.md) <sup><sub>UPDATED w/v1.1.5</sub></sup> ### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Quick and easy to equip the [OTA update feature](otaupdate.md) <sup><sub>UPDATED w/v1.1.5</sub></sup>
<span class="lead">You can quickly and easily equip the OTA update feature to your sketch and also you can operate the firmware update process via OTA from AutoConnect menu.</span> <span class="lead">You can quickly and easily equip the OTA update feature to your Sketch and also you can operate the firmware update process via OTA from AutoConnect menu.</span>
<span style="display:block;margin-left:auto;margin-right:auto;width:294px;height:482px;border:1px solid lightgrey;"><img data-gifffer="images/webupdate.gif" data-gifffer-height="480" data-gifffer-width="292" /></span> <span style="display:block;margin-left:auto;margin-right:auto;width:294px;height:482px;border:1px solid lightgrey;"><img data-gifffer="images/webupdate.gif" data-gifffer-height="480" data-gifffer-width="292" /></span>
@ -68,7 +68,7 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi
* [X] And other ESP8266/ESP32 modules supported by the Additional Board Manager URLs of the Arduino-IDE. * [X] And other ESP8266/ESP32 modules supported by the Additional Board Manager URLs of the Arduino-IDE.
!!! info "About flash size on the module" !!! info "About flash size on the module"
The AutoConnect sketch size is relatively large. Large flash capacity is necessary. 512Kbyte (4Mbits) flash inclusion module such as ESP-01 is not recommended. The AutoConnect Sketch size is relatively large. Large flash capacity is necessary. 512Kbyte (4Mbits) flash inclusion module such as ESP-01 is not recommended.
#### Required libraries #### Required libraries
@ -80,7 +80,7 @@ The current upstream at the 1.8 level or later is needed. Please install from th
<i class="fa fa-download"></i> <strong>ESP8266 Arduino core</strong> <i class="fa fa-download"></i> <strong>ESP8266 Arduino core</strong>
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. 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 Install third-party platform using the *Boards Manager* of Arduino IDE. Package URL is http://arduino.esp8266.com/stable/package_esp8266com_index.json
<i class="fa fa-download"></i> <strong>ESP32 Arduino core</strong> <i class="fa fa-download"></i> <strong>ESP32 Arduino core</strong>
@ -101,8 +101,8 @@ To install the PageBuilder library into your Arduino IDE, you can use the *Libra
<i class="fa fa-download"></i> <strong>Additional library (Optional)</strong> <i class="fa fa-download"></i> <strong>Additional library (Optional)</strong>
By adding the [ArduinoJson](https://github.com/bblanchon/ArduinoJson) library, AutoConnect will be able to handle the [**custom Web pages**](acintro.md) described with JSON. Since AutoConnect v0.9.7 you can insert user-owned web pages that can consist of representative HTML elements as styled TEXT, INPUT, BUTTON, CHECKBOX, SELECT, SUBMIT and invoke them from the AutoConnect menu. These HTML elements can be added by sketches using the AutoConnect API. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD. [ArduinoJson](https://arduinojson.org/) is required to use this feature.[^2] AutoConnect can work with ArduinoJson both [version 5](https://arduinojson.org/v5/doc/) and [version 6](https://arduinojson.org/v6/doc/). By adding the [ArduinoJson](https://github.com/bblanchon/ArduinoJson) library, AutoConnect will be able to handle the [**custom Web pages**](acintro.md) described with JSON. Since AutoConnect v0.9.7 you can insert user-owned web pages that can consist of representative HTML elements as styled TEXT, INPUT, BUTTON, CHECKBOX, SELECT, SUBMIT and invoke them from the AutoConnect menu. These HTML elements can be added by Sketches using the AutoConnect API. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD. [ArduinoJson](https://arduinojson.org/) is required to use this feature.[^2] AutoConnect can work with ArduinoJson both [version 5](https://arduinojson.org/v5/doc/) and [version 6](https://arduinojson.org/v6/doc/).
[^2]:Using the AutoConnect API natively allows you to sketch custom Web pages without JSON. [^2]:Using the AutoConnect API natively allows you to Sketch custom Web pages without JSON.
### Install the AutoConnect ### Install the AutoConnect

10
mkdocs/menu.md
Unescape View File

@ -8,7 +8,7 @@ The following screen will appear as the AutoConnect menu when you access to **Au
<img src="images/ac.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" /> <img src="images/ac.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" />
!!! note "AutoConnect root URL" !!! note "AutoConnect root URL"
It is assigned "**/_ac**" located on the *local IP address* of ESP8266/ESP32 module by default and can be changed with the sketch. A local IP means Local IP at connection established or SoftAP's IP. It is assigned "**/_ac**" located on the *local IP address* of ESP8266/ESP32 module by default and can be changed with the Sketch. A local IP means Local IP at connection established or SoftAP's IP.
## <i class="fa fa-bars"></i> Right on top ## <i class="fa fa-bars"></i> Right on top
@ -43,14 +43,14 @@ After WiFi connected, AutoConnect will automatically save the established SSID a
<img src="images/open.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" /> <img src="images/open.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" />
!!! note "Saved credentials data structure has changed" !!! note "Saved credentials data structure has changed"
A structure of AutoConnect saved credentials has changed in v1.1.0 and was lost backward compatibility. Credentials saved by AutoConnect v1.0.3 (or earlier) will not display properly with AutoConnect v1.1.0. You need to erase the flash of the ESP module using the esptool before the sketch uploading. A structure of AutoConnect saved credentials has changed in v1.1.0 and was lost backward compatibility. Credentials saved by AutoConnect v1.0.3 (or earlier) will not display properly with AutoConnect v1.1.0. You need to erase the flash of the ESP module using the esptool before the Sketch uploading.
```powershell ```powershell
esptool -c esp8266 (or esp32) -p [COM_PORT] erase_flash esptool -c esp8266 (or esp32) -p [COM_PORT] erase_flash
``` ```
## <i class="fa fa-bars"></i> Disconnect ## <i class="fa fa-bars"></i> Disconnect
It disconnects ESP8266/ESP32 from the current connection. Also, ESP8266/ESP32 can be automatically reset after WiFi cutting by instructing with the sketch using the [AutoConnect API](api.md#autoreset). It disconnects ESP8266/ESP32 from the current connection. Also, ESP8266/ESP32 can be automatically reset after WiFi cutting by instructing with the Sketch using the [AutoConnect API](api.md#autoreset).
After tapping the **Disconnect**, you will not be able to reach the AutoConnect menu. Once disconnected, you will need to set the SSID again for connecting to the WLAN. After tapping the **Disconnect**, you will not be able to reach the AutoConnect menu. Once disconnected, you will need to set the SSID again for connecting to the WLAN.
@ -61,11 +61,11 @@ Resetting the ESP8266/ESP32 module will initiate a reboot. When the module resta
<img src="images/resetting.png" style="width:280px;" /> <img src="images/resetting.png" style="width:280px;" />
!!! warning "Not every ESP8266 module will be rebooted normally" !!! 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). 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).
## <i class="fa fa-bars"></i> Custom menu items ## <i class="fa fa-bars"></i> Custom menu items
If the sketch has custom Web pages, the AutoConnect menu lines them up with the AutoConnect's items. Details for [Custom Web pages in AutoConnect menu](acintro.md#custom-web-pages-in-autoconnectmenu). If the Sketch has custom Web pages, the AutoConnect menu lines them up with the AutoConnect's items. Details for [Custom Web pages in AutoConnect menu](acintro.md#custom-web-pages-in-autoconnectmenu).
## <i class="fa fa-bars"></i> Update ## <i class="fa fa-bars"></i> Update

6
mkdocs/menuize.md
Unescape View File

@ -1,16 +1,16 @@
## What menus can be made using AutoConnect ## What menus can be made using AutoConnect
AutoConnect generates a menu dynamically depending on the instantiated [AutoConnectAux](acintro.md#how-it-works) at the sketch executing time. Usually, it is a collection of [AutoConnectElement](acelements.md). In addition to this, you can generate a menu from only AutoConnectAux, without AutoConnectElements.<br>In other words, you can easily create a built-in menu featuring the WiFi connection facility embedding the legacy web pages. AutoConnect generates a menu dynamically depending on the instantiated [AutoConnectAux](acintro.md#how-it-works) at the Sketch executing time. Usually, it is a collection of [AutoConnectElement](acelements.md). In addition to this, you can generate a menu from only AutoConnectAux, without AutoConnectElements.<br>In other words, you can easily create a built-in menu featuring the WiFi connection facility embedding the legacy web pages.
## Basic mechanism of menu generation ## Basic mechanism of menu generation
The sketch can display the [AutoConnect menu](menu.md) by following three patterns depending on AutoConnect-API usage. the Sketch can display the [AutoConnect menu](menu.md) by following three patterns depending on AutoConnect-API usage.
<i class="fa fa-desktop"></i>&ensp;**Basic menu** <i class="fa fa-desktop"></i>&ensp;**Basic menu**
: It is the most basic menu for only connecting WiFi. Sketch can automatically display this menu with the basic call sequence of the AutoConnect API which invokes [AutoConnect::begin](api.md#begin) and [AutoConnect::handleClient](api.md#handleclient). : It is the most basic menu for only connecting WiFi. Sketch can automatically display this menu with the basic call sequence of the AutoConnect API which invokes [AutoConnect::begin](api.md#begin) and [AutoConnect::handleClient](api.md#handleclient).
<i class="fa fa-desktop"></i>&ensp;**Extra menu with custom Web pages which is consisted by [AutoConnectElements](acelements.md)** <i class="fa fa-desktop"></i>&ensp;**Extra menu with custom Web pages which is consisted by [AutoConnectElements](acelements.md)**
: It is an extended menu that appears when the sketch consists of the custom Web pages with [AutoConnectAux](acintro.md#how-it-works) and AutoConnectElements. Refer to section [*Custom Web pages section*](acintro.md#custom-web-pages-in-autoconnect-menu). : It is an extended menu that appears when the Sketch consists of the custom Web pages with [AutoConnectAux](acintro.md#how-it-works) and AutoConnectElements. Refer to section [*Custom Web pages section*](acintro.md#custom-web-pages-in-autoconnect-menu).
<i class="fa fa-desktop"></i>&ensp;**Extra menu which contains legacy pages** <i class="fa fa-desktop"></i>&ensp;**Extra menu which contains legacy pages**
: It is for the legacy sketches using the **on** handler of ESP8266WebServer/WebServer(for ESP32) class natively and looks the same as the extra menu as above. : It is for the legacy sketches using the **on** handler of ESP8266WebServer/WebServer(for ESP32) class natively and looks the same as the extra menu as above.

6
mkdocs/otabrowser.md
Unescape View File

@ -42,7 +42,7 @@ AutoConnectAux hello; // Step #5
static const char HELLO_PAGE[] PROGMEM = R"( static const char HELLO_PAGE[] PROGMEM = R"(
{ "title": "Hello world", "uri": "/", "menu": true, "element": [ { "title": "Hello world", "uri": "/", "menu": true, "element": [
{ "name": "caption", "type": "ACText", "value": "<h2>Hello, world</h2>", "style": "text-align:center;color:#2f4f4f;padding:10px;" }, { "name": "caption", "type": "ACText", "value": "<h2>Hello, world</h2>", "style": "text-align:center;color:#2f4f4f;padding:10px;" },
{ "name": "content", "type": "ACText", "value": "In this page, place the custom web page handled by the sketch application." } ] { "name": "content", "type": "ACText", "value": "In this page, place the custom web page handled by the Sketch application." } ]
} }
)"; // Step #5 )"; // Step #5
@ -128,7 +128,7 @@ Binary sketch files for updating can be retrieved using the Arduino IDE. Open th
<img src="images/export_binary.png" width="450" /> <img src="images/export_binary.png" width="450" />
When the compilation is complete, a binary sketch will save with the extension `.bin` in the same folder as the sketch. When the compilation is complete, a binary sketch will save with the extension `.bin` in the same folder as the Sketch.
### <i class="fa fa-edit"></i> OTA updates w/browser without using AutoConnectOTA ### <i class="fa fa-edit"></i> OTA updates w/browser without using AutoConnectOTA
@ -160,7 +160,7 @@ To embed the ESP8266HTTPUpdateServer class with AutoConnect into your sketch, ba
static const char HELLO_PAGE[] PROGMEM = R"( static const char HELLO_PAGE[] PROGMEM = R"(
{ "title": "Hello world", "uri": "/", "menu": true, "element": [ { "title": "Hello world", "uri": "/", "menu": true, "element": [
{ "name": "caption", "type": "ACText", "value": "<h2>Hello, world</h2>", "style": "text-align:center;color:#2f4f4f;padding:10px;" }, { "name": "caption", "type": "ACText", "value": "<h2>Hello, world</h2>", "style": "text-align:center;color:#2f4f4f;padding:10px;" },
{ "name": "content", "type": "ACText", "value": "In this page, place the custom web page handled by the sketch application." } ] { "name": "content", "type": "ACText", "value": "In this page, place the custom web page handled by the Sketch application." } ]
} }
)"; )";

2
mkdocs/otaserver.md
Unescape View File

@ -1,6 +1,6 @@
## Updates with the update server ## Updates with the update server
Since the v1.0.0 release, AutoConnect provides new feature for updating sketch firmware of ESP8266 or ESP32 modules via OTA using the [AutoConnectUpdate](apiupdate.md#autoconnectupdate) class that is an implementation of the sketch binary update by the HTTP server mentioned in the [OTA update](https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#http-server) of the ESP8266 Arduino Core documentation, which inherits from the ESP8266HTTPUpdate class (as HTTPUpdate class in the case of ESP32). It acts as a client agent for a series of update operations. Since the v1.0.0 release, AutoConnect provides new feature for updating sketch firmware of ESP8266 or ESP32 modules via OTA using the [AutoConnectUpdate](apiupdate.md#autoconnectupdate) class that is an implementation of the Sketch binary update by the HTTP server mentioned in the [OTA update](https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#http-server) of the ESP8266 Arduino Core documentation, which inherits from the ESP8266HTTPUpdate class (as HTTPUpdate class in the case of ESP32). It acts as a client agent for a series of update operations.
This method allows you to remotely update the ESP module's firmware beyond the network segments from the update server, as long as you can ensure proper routing and forwarding. This method allows you to remotely update the ESP module's firmware beyond the network segments from the update server, as long as you can ensure proper routing and forwarding.

6
mkdocs/wojson.md
Unescape View File

@ -2,7 +2,7 @@
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. 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. 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 ## Writing the custom Web pages without JSON
@ -18,7 +18,7 @@ To handle the custom Web pages without using JSON, follow the steps below.
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] 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. [^1]:Detaching the ArduinoJson library reduces the Sketch size by approximately 10K bytes.
```cpp ```cpp
// Comment out the AUTOCONNECT_USE_JSON macro to detach the ArduinoJson. // Comment out the AUTOCONNECT_USE_JSON macro to detach the ArduinoJson.
@ -26,7 +26,7 @@ In addition to the above procedure, to completely cut off for binding with the A
``` ```
!!! caution "JSON processing will be disabled" !!! 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. 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.
!!! hint "Exclude the ArduinoJson by each compile-time" !!! hint "Exclude the ArduinoJson by each compile-time"
If you want to exclude ArduinoJson without changing the library code, specify the **AUTOCONNECT_NOUSE_JSON** directive as a compiler option according to the method described in the [FAQ](faq.md#how-do-i-detach-the-ardunojson). If you want to exclude ArduinoJson without changing the library code, specify the **AUTOCONNECT_NOUSE_JSON** directive as a compiler option according to the method described in the [FAQ](faq.md#how-do-i-detach-the-ardunojson).

Write Preview
Loading…
Cancel
Save