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

Revised the description

Browse Source
pull/41/head
Hieromon Ikasamo 6 years ago
parent 096bfe92ed
commit 1a83a47297
5 changed files with 29 additions and 30 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. 19
      mkdocs/acintro.md
  2. 32
      mkdocs/faq.md
  3. 4
      mkdocs/index.md
  4. 2
      mkdocs/wojson.md

19
mkdocs/acintro.md
Unescape View File

@ -1,6 +1,6 @@
## What it is ## What it is
<span style="margin-left:20px;margin-bottom:10px;float:right;width:280px;height:497px;"><img data-gifffer="./images/aux_ov.gif" data-gifffer-width="280" data-gifffer-height="497" /></span> <span style="margin-left:20px;margin-bottom:10px;float:right;width:280px;height:497px;border:1px solid lightgray;"><img data-gifffer="./images/aux_ov.gif" data-gifffer-width="278" data-gifffer-height="495" /></span>
AutoConnect can handle custom Web pages prepared by user sketches individually. Custom Web pages are displayed in the [AutoConnect menu](menu.md) and can be used from there. It can also have input-output parameters and handle it with sketches. For example, you can program some sketches that publish messages by entering the URI or unique ID of the MQTT broker on a custom page. You do not need to code the processing to handle the web page, it retrieves the input parameters and passes to the MQTT broker connection API is only. AutoConnect can handle custom Web pages prepared by user sketches individually. Custom Web pages are displayed in the [AutoConnect menu](menu.md) and can be used from there. It can also have input-output parameters and handle it with sketches. For example, you can program some sketches that publish messages by entering the URI or unique ID of the MQTT broker on a custom page. You do not need to code the processing to handle the web page, it retrieves the input parameters and passes to the MQTT broker connection API is only.
## How it works ## How it works
@ -11,26 +11,25 @@ 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 &#39;*header*&#39;and &#39;*caption*&#39;, adds them to the AutoConnectAux object &#39;*aux*&#39;, binds to an AutoConnect object named &#39;*portal*&#39;. It's the basic procedure for configuring the custom Web page. Also, further explanation of AutoConnectElements is the [documentation](acelements.md). The above figure shows a code sequence that declares AutoConnectElements and put in the AutoConnectAux container and integrates those into AutoConnect. It declares two text elements named *header* and *caption*, adds them to the AutoConnectAux object as *aux*, binds to an AutoConnect object named *portal*. This sequence is the basic procedure for creating custom Web pages with the sketch. Also, further explanation of AutoConnectElements is the [documentation](acelements.md).
## Custom Web pages in AutoConnect menu ## Custom Web pages in AutoConnect menu
<ul class="horizontal-list"> <ul class="horizontal-list">
<li><img style="margin:0 20px 0 -20px;float:left;width:300px;height:343px;" src="./images/ac_auxmenu.png"> <li><img style="margin:0 20px 0 -20px;float:left;width:300px;" src="./images/ac_auxmenu.png">
Custom Web pages as AutoConnectAux are integrated into the <a href="menu.html">AutoConnect menu</a>. AutoConnectAux object contains member variables which are URI and the title. It also has an indicator to show on the AutoConnect menu. You give the title and URI of the custom web page to the AutoConnectAux object with Sketch. Then the title of the custom Web page would be displayed at the bottom of the AutoConnect menu as the left figure.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup> It is a hyperlink as URI you given to the custom Web page and taps it will display a page composed of AutoConnectElements. Also, a title will display in the upper left corner of the page, which includes a hyperlink to the AutoConnect statistics screen.</li> AutoConnect integrates custom Web page objects into menus as AutoConnectAux. The AutoConnectAux object contains URI and title as member variables and has an indicator to display in the AutoConnect menu.<br>You give the title and URI of the custom Web page to the AutoConnectAux object with Sketch. Then the title of the custom Web page would be displayed in the AutoConnect menu as the left figure.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup> It is a hyperlink to a custom Web page which will be displayed tapped it.</li>
</ul> </ul>
[^1]:There is no overlay in the actual menu. [^1]:There is no overlay in the actual menu.
## Multiple custom Web pages ## Multiple custom Web pages
You can create multiple custom Web pages and specify which pages you can invoke from the menu.<br> You can create multiple custom Web pages and specify pages that can be called from the menu. The following sketch shows a code sequence for integrating three custom Web pages into one and embedding them in a menu.
In the sketch below, it shows the sequence of codes to integrate three custom Web pages into one and embed them into the menu.
<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;"><img data-gifffer="./images/aux_menu.gif" data-gifffer-width="280" data-gifffer-height="497" /></span>In the above code, the third parameter of &#39;<i>aux2</i>&#39; is <b>false</b>. The third parameter of the AutoConnectAux constructor is an indicator of whether it's shown to the AutoConnect menu. Right animation is the execution result of the above code. You will see that the custom Web page&#39;s menu is displayed only in the last two lines. The sketch of this animation is written to transition to &#39;<i>aux2</i>&#39; by the utility of the <a href="acelements.html#autoconnectsubmit"><b>AutoConnectSubmit</b></a> element owned by &#39;<i>aux1</i>&#39;.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup><br>An &#39;<i>aux2</i>&#39; page transitions only from the &#39;<i>aux1</i>&#39;. It is a page that saves the parameters you entered on the previous page as shown in mqttRSSI in the library example. It is to want to hide &#39;<i>aux2</i>&#39; from AutoConnect menu lines. 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]:
@ -77,8 +76,8 @@ So, the basic procedure for handling of the custom Web pages is as follows:
## Write the custom Web page with JSON ## Write the custom Web page with JSON
You can write the custom Web page in JSON without using sketch codes.[^3] It is possible to describe the entire page in JSON and can be described for each element also. The JSON description can be saved in SPIFFS or SD and read using AutoConnect's [**load**](api.md#load) function. If you take this approach, you can further reduce the steps of the above but this way consumes a lot of memory. 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 the 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
@ -163,7 +162,7 @@ void loop() {
## Passing parameters with sketches and custom Web pages ## Passing parameters with sketches and custom Web pages
A sketch can access variables of [AutoConnectElements](acelements.md) in the custom Web page. The value entered into the AutoConnectElements on the page is stored to the [member variables](acelements.md#form-and-autoconnectelements) of the element by AutoConnect whenever GET / POST transmission occurs. Your sketches can get these values with the GET / POST request handler. If you assign a value to an element before a request to the page occurs, its value will appear as the initial value when the page is displayed. Details are explained in the [Parameter handling](achandling.md#parameter-handling). A sketch can access variables of [AutoConnectElements](acelements.md) on the custom Web page. The value entered into the AutoConnectElements is stored to the [member variables](acelements.md#form-and-autoconnectelements) of the element by AutoConnect whenever GET / POST transmission occurs. Your sketches can get these values with the request handler which will be registered by [AutoConnect::on](api.md#on) function. And if you assign a value to an element before a request to the page occurs, its value will appear as the initial value when the page is displayed. The details are explained in the [Custom field data handling](achandling.md#custom-field-data-handling) section.
<script> <script>
window.onload = function() { window.onload = function() {

32
mkdocs/faq.md
Unescape View File

@ -86,13 +86,13 @@ Make some sketches for erasing the EEPROM area, or some erasing utility is neede
A class description of AutoConnectCredential is follows. A class description of AutoConnectCredential is follows.
### Include header ### <i class="fa fa-code"></i> Include header
```cpp ```cpp
#include <AutoConnectCredential.h> #include <AutoConnectCredential.h>
``` ```
### Constructor ### <i class="fa fa-code"></i> Constructor
```cpp ```cpp
AutoConnectCredential(); AutoConnectCredential();
@ -106,7 +106,7 @@ AutoConnectCredential(uint16_t offset);
Specify offset from the top of the EEPROM for the credential storage area together. The offset value is from 0 to the flash sector size. Specify offset from the top of the EEPROM for the credential storage area together. The offset value is from 0 to the flash sector size.
### Public member functions ### <i class="fa fa-code"></i> Public member functions
- uint8_t **entries()** - uint8_t **entries()**
Returns number of entries as contained credentials. Returns number of entries as contained credentials.
@ -123,7 +123,7 @@ Specify offset from the top of the EEPROM for the credential storage area togeth
- bool **del(const char\* _ssid_)** - bool **del(const char\* _ssid_)**
Delete a credential entry specified *ssid*. Returns the true as successfully deleted. Delete a credential entry specified *ssid*. Returns the true as successfully deleted.
### Data structures ### <i class="fa fa-code"></i> Data structures
- station_config - station_config
A structure is included in the ESP8266 SDK. You can use it in the sketch like as follows. A structure is included in the ESP8266 SDK. You can use it in the sketch like as follows.
@ -195,7 +195,7 @@ If AutoConnect behavior is not stable with your sketch, you can try the followin
### 1. Change WiFi channel ### 1. Change WiFi channel
Both ESP8266 and ESP32 can only work on one channel at any given moment, this will cause loss of connection on the channel where your station operates the captive portal. If the channel of the AP which you want to connect is different from the SoftAP channel, the operation of the captive portal will not respond with the screen of the AutoConnect connection attempt remains displayed. In such a case please try the [AutoConnectConfig](apiconfig.md#autoconnectconfig) to match the [channel](apiconfig.md#channel) to the access point. Both ESP8266 and ESP32 can only work on one channel at any given moment. This will cause your station to lose connectivity on the channel hosting the captive portal. If the channel of the AP which you want to connect is different from the SoftAP channel, the operation of the captive portal will not respond with the screen of the AutoConnect connection attempt remains displayed. In such a case, please try the [AutoConnectConfig](apiconfig.md#autoconnectconfig) to match the [channel](apiconfig.md#channel) to the access point.
### 2. Change arduino core version ### 2. Change arduino core version
@ -215,13 +215,13 @@ The [arduino-esp32](https://github.com/espressif/arduino-esp32) is still under d
To fully enable for the AutoConnect debug logging options, change the following two files. To fully enable for the AutoConnect debug logging options, change the following two files.
- AutoConnectDefs.h <i class="fas fa-angle-right"></i> AutoConnectDefs.h
```cpp ```cpp
#define AC_DEBUG #define AC_DEBUG
``` ```
- PageBuilder.h [^2] <i class="fas fa-angle-right"></i> PageBuilder.h [^2]
```cpp ```cpp
#define PB_DEBUG #define PB_DEBUG
@ -231,13 +231,13 @@ To fully enable for the AutoConnect debug logging options, change the following
### 4. Reports the issue to AutoConnect repository on Github ### 4. Reports the issue to AutoConnect repository on Github
If you can not solve AutoConnect problems please report to [Issues](https://github.com/Hieromon/AutoConnect/issues). And please make your question comprehensively, not a statement. Include all relevant information as follows. If you can not solve AutoConnect problems please report to [Issues](https://github.com/Hieromon/AutoConnect/issues). And please make your question comprehensively, not a statement. Include all relevant information to start the problem diagnostics as follows:
- Hardware module * [x] Hardware module
- Arduino core Version (including the upstream tag ID.) * [x] Arduino core version (Including the upstream tag ID.)
- Operating System which you use * [x] Operating System which you use
- lwIP variant * [x] lwIP variant
- Problem description * [x] Problem description
- If you have a STACK DUMP decoded result with formatted by the code block tag * [x] 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 * [x] The sketch code with formatted by the code block tag (Reduce to the reproducible minimum code for the problem)
- Debug messages output * [x] Debug messages output

4
mkdocs/index.md
Unescape View File

@ -74,12 +74,12 @@ 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). 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>
Also, to apply AutoConnect to ESP32, the [arduino-esp32 core](https://github.com/espressif/arduino-esp32) provided by Espressif is needed. The [latest release](https://github.com/espressif/arduino-esp32/releases/latest) is recommended. Also, to apply AutoConnect to ESP32, the [arduino-esp32 core](https://github.com/espressif/arduino-esp32) provided by Espressif is needed. Stable 1.0.1 or required and the [latest release](https://github.com/espressif/arduino-esp32/releases/latest) is recommended.
Install third-party platform using the *Boards Manager* of Arduino IDE. You can add multiple URLs into *Additional Board Manager URLs* field, separating them with commas. Package URL is https://dl.espressif.com/dl/package_esp32_index.json for ESP32. Install third-party platform using the *Boards Manager* of Arduino IDE. You can add multiple URLs into *Additional Board Manager URLs* field, separating them with commas. Package URL is https://dl.espressif.com/dl/package_esp32_index.json for ESP32.
<i class="fa fa-download"></i> <strong>Additional library (Required)</strong> <i class="fa fa-download"></i> <strong>Additional library (Required)</strong>

2
mkdocs/wojson.md
Unescape View File

@ -6,7 +6,7 @@ AutoConnect can handle custom Web pages without using JSON. In that case, since
## Writing the custom Web pages without JSON ## Writing the custom Web pages without JSON
To handle a custom Web page without using JSON, follow the steps below. To handle the custom Web pages without using JSON, follow the steps below.
1. Create or define [AutoConnectAux](apiaux.md) for each page. 1. Create or define [AutoConnectAux](apiaux.md) for each page.
2. Create or define [AutoConnectElement(s)](acelements.md). 2. Create or define [AutoConnectElement(s)](acelements.md).

Write Preview
Loading…
Cancel
Save