Under the work of v0.9.7 documentation

pull/41/head
Hieromon Ikasamo 6 years ago
parent a05c0b7fe9
commit 5f6693b83e
  1. 1
      mkdocs.yml
  2. 2
      mkdocs/acelements.md
  3. 8
      mkdocs/achandling.md
  4. 17
      mkdocs/acintro.md
  5. 109
      mkdocs/acjson.md
  6. 6
      mkdocs/index.md

@ -74,6 +74,7 @@ google_analytics:
markdown_extensions:
- admonition
- attr_list
- def_list
- codehilite:
guess_lang: false
linenums: none

@ -234,7 +234,7 @@ A label is placed in the left or the top according to `order`.
### <i class="fa fa-caret-right"></i> checked
A `checked` specifies the index number (1-based) of `values` to be checked.
A `checked` specifies the index number (1-based) of `values` to be checked. If this parameter is not specified neither item is checked.
## AutoConnectSelect

@ -1,10 +1,14 @@
## Handing AutoConnectElements in the sketches
## loading and saving AutoConnectElements
## Loading AutoConnectElements
## Saving AutoConnectElements
## Page transition
## Parameter handling
WebServer.args, PageArgument
Handling in 'on' handler
Handling in 'on' handler
A sketch can access variables of AutoConnectElements in the custom Web page. The value entered into the AutoConnectElements on the page is stored in the member variable of the element by AutoConnect whenever GET/POST transmission occurs.

@ -5,13 +5,13 @@ AutoConnect can handle custom Web pages prepared by user sketches individually.
## How it works
Custom Web pages are dynamically created by AutoConnect. The Classes and APIs necessary for dynamic creation are provided. **AutoConnectAux** is an object dependent on AutoConnect, which provides an easy way to incorporate custom Web pages like the one on the right figure into AutoConnect. The elements that make up a custom web page are provided as an [**AutoConnectElement**](acelements.md) class. Furthermore, an input box, a check box, a submit button, etc. are implemented by classes derived from AutoConnectElement.
Custom Web pages are dynamically created by AutoConnect. The Classes and APIs necessary for dynamic creation are provided. [**AutoConnectAux**](apiaux.md#autoconnectaux) is an object dependent on AutoConnect, which provides an easy way to incorporate custom Web pages like the one on the right figure into AutoConnect. The elements that make up a custom web page are provided as an [**AutoConnectElement**](acelements.md) class. Furthermore, an input box, a check box, a submit button, etc. are implemented by classes derived from AutoConnectElement.
<p align="center"><img align="center" width="560px" src="../images/ac_objects.svg"></p>
AutoConnectAux is a container for AutoConnectElements. To make a custom Web page, create elements that make up the page and put it in the AutoConnectAux object. Joining that AutoConnectAux object to AutoConnect will integrate the custom Web page into the AutoConnect menu.
AutoConnectAux is a container for AutoConnectElements. To make a custom Web page, create elements that make up the page and put it in the AutoConnectAux object. Joining its AutoConnectAux object to AutoConnect will integrate the custom Web page into the AutoConnect menu.
<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. Declare two text elements named &#39;*header*&#39;, &#39;*caption*&#39; and add those to the AutoConnectAux object *aux*. Bind it to an AutoConnect object called the &#39;*portal*&#39;. It's basic procedure for configuring the custom Web page. Also, further explanation of AutoConnectElements is the [documentation](acelements.md).
The above figure shows a code sequence that declares AutoConnectElements and put in the AutoConnectAux container and integrates those into AutoConnect. It declares two text elements named &#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).
## Custom Web pages in AutoConnect menu
@ -63,16 +63,21 @@ In the sketch below, it shows the sequence of codes to integrate three custom We
}
```
## Passing parameters with sketches and custom Web pages
A sketch can access variables of [AutoConnectElements](acelements.md) in the custom Web page. The value entered into the AutoConnectElements on the page is stored to the [member variables](acelements.md#form-and-autoconnectelements) of the element by AutoConnect whenever GET / POST transmission occurs. Your sketches can get these values with the GET / POST request handler. If you assign a value to an element before a request to the page occurs, its value will appear as the initial value when the page is displayed.
## Basic steps to use custom Web pages
So, the basic procedure is as follows.
So, the basic procedure for handling of the custom Web pages is as follows:
1. Create or define AutoConnectAux.
2. Create or define [AutoConnectElement(s)](acelements.md).
3. Add [AutoConnectElement(s)](acelements.md) to AutoConnectAux.
4. Create more AutoConnectAux containing [AutoConnectElement(s)](acelements.md), if necessary.
5. Join prepared AutoConnectAux(s) to [AutoConnect](api.md#join).
6. Invoke [AutoConnect::begin()](api.md#begin).
5. Register the request handlers for the custom Web pages
6. Join prepared AutoConnectAux(s) to [AutoConnect](api.md#join).
7. Invoke [AutoConnect::begin()](api.md#begin).
## Write the custom Web page with JSON

@ -9,14 +9,117 @@ 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>
<img style="margin-left:30px;width:40%;height:470px;" src="./images/ac_mqtt_setting.png">
!!! note "Order of elements on a custom Web page"
The order in which AutoConnectElements are arranged on the custom Web page is the order described in JSON.
A JSON document for AutoConnect can also contain declarations of multiple custom web pages. If you fit those multiple pages in one JSON document, sketch processing for loading AutoConnectAux will degenerate further.
!!! caution "Need ArduinoJson v5"
To process the AutoConnectAux &amp; AutoConnectElements written in the JSON is you need to install the [ArduinoJson version 5](https://arduinojson.org/v5/doc/installation/) library.
## JSON objects &amp; elements for the custom Web page
### JSON document structure for AutoConnectAux
### <i class="fa fa-caret-right"></i> JSON document structure for AutoConnectAux
An AutoConnectAux is described by a JSON object. The elements that make up an object are as follows:
<pre>
{
"title" : <i>title</i>,
"uri" : <i>uri</i>,
"menu" : <b>true</b> | <b>false</b>,
"element" : <i>element_array</i>
}
</pre>
#### <i class="fa fa-key"></i> **title**
: A title of the custome Web page. This is string value. String specified *title* will be displayed in the AutoConnection menu.
#### <i class="fa fa-key"></i> **uri**
: String of URI path that specifies where to place the custom web page. It needs to be a location from the root path including '**/**'.
#### <i class="fa fa-key"></i> **menu**
: This is a Boolean value indicating whether to include the custom web page in the AutoConnect menu. If the page only responds to another page and you want to prevent the direct use from the menu, you can exclude from the AutoConnect menu. If this key is false, it will not appear in the menu.
#### <i class="fa fa-key"></i> **element**
: Describe an array of JSON objects as *element_array*. It is a JSON object array of the AutoConnectElements that make up the custom Web page.
!!! note "Order of elements on a custom Web page"
The order in which AutoConnectElements are placed on a custom web page is the order in the JSON document.
### <i class="fa fa-caret-right"></i> JSON object for AutoConnectElements
A JSON object of AutoConnectElements is described by the parameters of [each constructor](acelements.md#constructor).
<pre>
{
"name" : <i>name</i>,
"type" : <i>type</i>,
<i>key_according_to_type</i> : <i>the_value</i> | <i>array_of_value</i>
}
</pre>
#### <i class="fa fa-key"></i> **name**
: A string of the name for the element.
#### <i class="fa fa-key"></i> **type**
: A string of the type for the element. For this type, specify the following string corresponding to each element.
: - AutoConnectButton: **ACButton**
: - AutoConnectCheckbox: **ACCheckbox**
: - AutoConnectElement: **ACElement**
: - AutoConnectInput: **ACInput**
: - AutoConnectRadio: **ACRadio**
: - AutoConnectSelect: **ACSelect**
: - AutoConnectSubmit: **ACSubmit**
: - AutoConnectText: **ACText**
#### <i class="fa fa-key"></i> **<i>key_according_to_type</i>**
This is different for each AutoConnectElements type, and the key that can be specified by the type is determined.
<i class="fa fa-caret-right"></i> AutoConnectButton
: - **value** :
: - **action** :
<i class="fa fa-caret-right"></i> AutoConnectCheckbox
: - **value** :
: - **label** :
: - **checked** :
<i class="fa fa-caret-right"></i> AutoConnectElement
: - **value** :
<i class="fa fa-caret-right"></i> AutoConnectInput
: - **value** :
: - **label** :
: - **placeholder** :
<i class="fa fa-caret-right"></i> AutoConnectRadio
: - **value** :
: - **label** :
: - **arrange** :
: - **checked** :
<i class="fa fa-caret-right"></i> AutoConnectSelect
: - **label** :
: - **option** :
<i class="fa fa-caret-right"></i> AutoConnectSubmit
: - **value** :
: - **uri** :
<i class="fa fa-caret-right"></i> AutoConnectText
: - **value** :
: - **style** :
!!! caution "AutoConnect's JSON parsing process is not perfect"
It is based on ArduinoJson, but the process is simplified to save memory. As a result, even if there is an unnecessary key, it will not be an error. It is ignored.
## Loading JSON document
AutoConnect supports loading of JSON document from the following instances.
- String
- PROGMEM
- Stream
## Saving JSON document
AutoConnect supports writing of JSON document to the stream.

@ -33,9 +33,9 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi
<span class="lead">You can easily add your own web screen that can consist of representative HTML elements as the styled TEXT, INPUT, BUTTON, CHECKBOX, RADIO, SELECT, SUBMIT into the menu. It can be invoked from the AutoConnect menu and parameters can be passed. Custom screens can be written easily with JSON and can be loaded from PROGMEM, SPIFFS or SD.</span>
<img style="float:center;margin:0 10px 0 10px;width:380px" src="./images/aux_json.png">
<img style="float:center;margin:0 5px 200px 5px;width:32px;" src="./images/arrow_right.png">
<img style="float:center;margin:0 10px 0 10px;width:240px" src="./images/AutoConnectAux.gif">
<img style="float:left;width:380px;" src="./images/aux_json.png">
<img style="float:left;margin-top:200px;margin-left:10px;margin-right:10px;width:32px;" src="./images/arrow_right.png">
<img style="float:left;width:240px" src="./images/AutoConnectAux.gif">
## Installation

Loading…
Cancel
Save