diff --git a/mkdocs/achandling.md b/mkdocs/achandling.md
index d8033eb..ab3fb70 100644
--- a/mkdocs/achandling.md
+++ b/mkdocs/achandling.md
@@ -15,7 +15,7 @@ void AutoConnectAux::add(AutoConenctElement& addon)
void AutoConnectAux::add(AutoConenctElementVT addons)
```
-The add function adds specified AutoConnectElement to the AutoConnectAux. If speficied the collection of AutoConnectElements as a `std::vector` of the references to each element, these elements added in bulk.
+The add function adds specified AutoConnectElement to the AutoConnectAux. If specified the collection of AutoConnectElements as a `std::vector` of the references to each element, these elements added in bulk.
The AutoConnectElements contained in the AutoConnectAux object are uniquely identified by the name. When adding an AutoConnectElement, if an element with the same name already exists in the AutoConnectAux, checking the type, and if it is the same, the value will be replaced. If another type of AutoConnectElement exists with the same name, that add operation will be invalid.[^1] In the following example, an AutoConnectButton as `button` addition is invalid.
@@ -102,15 +102,139 @@ AutoConnectElementVT& getElements(void)
*AutoConnectElementVT* is a predefined type for it and can use methods of [std::vector](https://en.cppreference.com/w/cpp/container/vector)<[std::reference_wrapper](https://en.cppreference.com/w/cpp/utility/functional/reference_wrapper)>.
-## Loading & saving AutoConnectElements
+## Loading & saving AutoConnectElements with JSON
-## Saving AutoConnectElements
+AutoConnect supports that loading the AutoConnectAux as a set of elements, and Loading and saving individual elements. It is not possible to save all AutoConnectElements at once as AutoConnectAux. In both cases the target object is a JSON document.
-## Page transition
+
+
+### Loading AutoConnectAux & AutoConnectElements with JSON
+
+To load a JSON document as AutoConnectAux use the [**AutoConnect::load**](api.md#load) function and load the JSON document of each AutoConnectElement using the [**AutoConnectAux::loadElement**](apiaux.md#loadelement) function. Although the functions of both are similar, the structure of the target JSON document is different.
+
+The [AutoConnect::load](apiaux.md#load) function loads the entire AutoConnectAux and creates both the AutoConnectAux instance and each AutoConnectElement instance. If the JSON document is described as an array of multiple custom Web pages, all pages contained in the array will be generated. Therefore, it is necessary to supply the JSON document of AutoConnectAux as an input of the load function and must contain the elements described [**here**](acjson.md#json-document-structure-for-autoconnectaux).
+
+The [AutoConnectAux::loadElement](apiaux.md#loadelement) function loads the elements individually into an AutoConnectAux object. The structure of its supplying JSON document is not AutoConnectAux. It must be a [JSON structure for AutoConnectElement](acjson.md#json-object-for-autoconnectelements), but you can specify an array.
+
+```cpp
+// AutoConnectAux as a custom Web page.
+const char page[] PROGMEM = R"raw(
+{
+ "title": "Settings",
+ "uri": "/settings",
+ "menu": true,
+ "element": [
+ {
+ "name": "server",
+ "type": "ACInput",
+ "label": "Server"
+ },
+ {
+ "name": "set",
+ "type": "ACSubmit",
+ "value": "SET",
+ "uri" : "/set"
+ }
+ ]
+}
+)raw";
+
+// Additional AutoConnectElements.
+const char addons[] PROGMEM = R"raw(
+[
+ {
+ "name": "notes",
+ "type": "ACText",
+ "value": "An update period as the below optionally."
+ },
+ {
+ "name": "period",
+ "type": "ACRadio",
+ "value": [
+ "30 sec.",
+ "60 sec.",
+ "180 sec."
+ ],
+ "arrange": "vertical",
+ "checked": 1
+ }
+]
+)raw";
+
+AutoConnect portal;
+AutoConnectAux* auxPage;
+
+// Load a custom Web page.
+portal.load(page);
+
+// Get a '/settings' page
+auxPage = portal.aux("/settings");
+
+// Also, load only AutoConnectRadio named the period.
+auxPage->loadElement(addons, "period");
+
+// Retrieve a server name from an AutoConnectText value.
+AutoConnectText& serverName = auxPage->getElement("server");
+Serial.println(serverName.value);
+```
+
+### Saving AutoConnectElements with JSON
+
+To save the AutoConnectElement as a JSON document, use the [AutoConnectAux::saveElement](apiaux.md#saveelement) function. It serializes the contents of the object based on the type of the AutoConnectElement. You can persist a serialized AutoConnectElements as a JSON document to a stream.
+
+```cpp
+// Open a parameter file on the SPIFFS.
+SPIFFS.begin();
+FILE param = SPIFFS.open("/param", "w");
+
+// Save elements as the parameters.
+auxPage->saveElement(param, { "server", "period" });
+
+// Close a parameter file.
+param.close();
+SPIFFS.end();
+```
+
+The example above saves `server` and `period` elements from the AutoConnectAux object as mentioned above to the `/param` file on SPIFFS. Its JSON document of AutoConnectElements saved by its code looks like this:
+
+```json
+[
+ {
+ "name": "server",
+ "type": "ACInput",
+ "value": "An inputted server name",
+ "label": "Server",
+ "placeholder": ""
+ },
+ {
+ "name": "period",
+ "type": "ACRadio",
+ "value": [
+ "30 sec.",
+ "60 sec.",
+ "180 sec."
+ ],
+ "arrange": "vertical",
+ "checked": 2
+ }
+]
+```
## Parameter handling
+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 each element by AutoConnect whenever GET/POST transmission occurs.
+
+The following diagram shows the flow of the input values of a custom Web page into a sketch and is the basis for actions to manipulate the values of custom Web pages using sketches.
+
+
+
+### When to pick up the values
+
+### When setting the initial values
+
+### How you can reach the valuess
+
WebServer.args, PageArgument
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.
\ No newline at end of file
+## Transitions of the custom Web pages
diff --git a/mkdocs/images/ac_load_save.svg b/mkdocs/images/ac_load_save.svg
index 3e855ee..c5ef733 100644
--- a/mkdocs/images/ac_load_save.svg
+++ b/mkdocs/images/ac_load_save.svg
@@ -9,9 +9,9 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- width="210mm"
- height="297mm"
- viewBox="0 0 210 297"
+ width="134.10013mm"
+ height="86.830833mm"
+ viewBox="0 0 134.10013 86.830834"
version="1.1"
id="svg8"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
@@ -25,18 +25,22 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
- inkscape:zoom="0.70710678"
- inkscape:cx="574.87586"
- inkscape:cy="733.88578"
+ inkscape:zoom="1.4142136"
+ inkscape:cx="216.27468"
+ inkscape:cy="174.19509"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:snap-global="false"
- inkscape:window-width="1920"
- inkscape:window-height="1029"
- inkscape:window-x="1272"
- inkscape:window-y="-8"
- inkscape:window-maximized="1" />
+ inkscape:window-width="1440"
+ inkscape:window-height="810"
+ inkscape:window-x="1362"
+ inkscape:window-y="70"
+ inkscape:window-maximized="0"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0" />
@@ -52,10 +56,11 @@
+ id="layer1"
+ transform="translate(-54.798811,-25.857826)">
+ id="g1508">
+ style="opacity:1;vector-effect:none;fill:#3366cc;fill-opacity:1;stroke:#3366cc;stroke-width:1.32291663;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+ style="opacity:1;vector-effect:none;fill:#3366cc;fill-opacity:1;stroke:#3366cc;stroke-width:1.32291663;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+ style="opacity:1;vector-effect:none;fill:#3366cc;fill-opacity:1;stroke:#3366cc;stroke-width:1.32291663;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
+ transform="matrix(0.06571814,0,0,0.052736,100.33233,54.752494)">
+ Hello,world
+
+ Input
+
+
+
+
+ OK
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ AutoConnect::load
+ AutoConnectAux::loadElement
+ AutoConnectAux::saveElement
diff --git a/mkdocs/images/ac_param_flow.svg b/mkdocs/images/ac_param_flow.svg
new file mode 100644
index 0000000..62490cf
--- /dev/null
+++ b/mkdocs/images/ac_param_flow.svg
@@ -0,0 +1,1752 @@
+
+
+
+
+
+### Loading AutoConnectAux & AutoConnectElements with JSON
+
+To load a JSON document as AutoConnectAux use the [**AutoConnect::load**](api.md#load) function and load the JSON document of each AutoConnectElement using the [**AutoConnectAux::loadElement**](apiaux.md#loadelement) function. Although the functions of both are similar, the structure of the target JSON document is different.
+
+The [AutoConnect::load](apiaux.md#load) function loads the entire AutoConnectAux and creates both the AutoConnectAux instance and each AutoConnectElement instance. If the JSON document is described as an array of multiple custom Web pages, all pages contained in the array will be generated. Therefore, it is necessary to supply the JSON document of AutoConnectAux as an input of the load function and must contain the elements described [**here**](acjson.md#json-document-structure-for-autoconnectaux).
+
+The [AutoConnectAux::loadElement](apiaux.md#loadelement) function loads the elements individually into an AutoConnectAux object. The structure of its supplying JSON document is not AutoConnectAux. It must be a [JSON structure for AutoConnectElement](acjson.md#json-object-for-autoconnectelements), but you can specify an array.
+
+```cpp
+// AutoConnectAux as a custom Web page.
+const char page[] PROGMEM = R"raw(
+{
+ "title": "Settings",
+ "uri": "/settings",
+ "menu": true,
+ "element": [
+ {
+ "name": "server",
+ "type": "ACInput",
+ "label": "Server"
+ },
+ {
+ "name": "set",
+ "type": "ACSubmit",
+ "value": "SET",
+ "uri" : "/set"
+ }
+ ]
+}
+)raw";
+
+// Additional AutoConnectElements.
+const char addons[] PROGMEM = R"raw(
+[
+ {
+ "name": "notes",
+ "type": "ACText",
+ "value": "An update period as the below optionally."
+ },
+ {
+ "name": "period",
+ "type": "ACRadio",
+ "value": [
+ "30 sec.",
+ "60 sec.",
+ "180 sec."
+ ],
+ "arrange": "vertical",
+ "checked": 1
+ }
+]
+)raw";
+
+AutoConnect portal;
+AutoConnectAux* auxPage;
+
+// Load a custom Web page.
+portal.load(page);
+
+// Get a '/settings' page
+auxPage = portal.aux("/settings");
+
+// Also, load only AutoConnectRadio named the period.
+auxPage->loadElement(addons, "period");
+
+// Retrieve a server name from an AutoConnectText value.
+AutoConnectText& serverName = auxPage->getElement
+
+### When to pick up the values
+
+### When setting the initial values
+
+### How you can reach the valuess
+
WebServer.args, PageArgument
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.
\ No newline at end of file
+## Transitions of the custom Web pages
diff --git a/mkdocs/images/ac_load_save.svg b/mkdocs/images/ac_load_save.svg
index 3e855ee..c5ef733 100644
--- a/mkdocs/images/ac_load_save.svg
+++ b/mkdocs/images/ac_load_save.svg
@@ -9,9 +9,9 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- width="210mm"
- height="297mm"
- viewBox="0 0 210 297"
+ width="134.10013mm"
+ height="86.830833mm"
+ viewBox="0 0 134.10013 86.830834"
version="1.1"
id="svg8"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
@@ -25,18 +25,22 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
- inkscape:zoom="0.70710678"
- inkscape:cx="574.87586"
- inkscape:cy="733.88578"
+ inkscape:zoom="1.4142136"
+ inkscape:cx="216.27468"
+ inkscape:cy="174.19509"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:snap-global="false"
- inkscape:window-width="1920"
- inkscape:window-height="1029"
- inkscape:window-x="1272"
- inkscape:window-y="-8"
- inkscape:window-maximized="1" />
+ inkscape:window-width="1440"
+ inkscape:window-height="810"
+ inkscape:window-x="1362"
+ inkscape:window-y="70"
+ inkscape:window-maximized="0"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0" />