From e909a8bab877010d24624ff8598c1446de967e1e Mon Sep 17 00:00:00 2001 From: Hieromon Ikasamo Date: Tue, 8 Jan 2019 18:02:22 +0900 Subject: [PATCH] Under the work of v0.9.7 documentation --- mkdocs/acelements.md | 42 +- mkdocs/acintro.md | 17 +- mkdocs/images/ac_declaration.svg | 817 ++++++++++--------------------- 3 files changed, 298 insertions(+), 578 deletions(-) diff --git a/mkdocs/acelements.md b/mkdocs/acelements.md index f457f4e..6e94cab 100644 --- a/mkdocs/acelements.md +++ b/mkdocs/acelements.md @@ -11,8 +11,6 @@ Representative HTML elements for making the custom Web page are provided as Auto - [AutoConnectSubmit](#autoconnectsubmit): Submit button - [AutoConnectText](#autoconnecttext): Style attributed text -Each element has a common attribute and its own attributes. - ## Layout on custom Web page You can specify the direction to arrange the radio buttons as [**AutoConnectRadio**](#autoconnectradio) vertically or horizontally. Other elements are arranged vertically in the order of addition to AutoConnectAux. This basic layout depends on the CSS of the AutoConnect menu so it can not be changed drastically. @@ -35,7 +33,7 @@ AutoConnectElement(const char* name, const char* value) ### name -Every element has a name. **Name** is the String data type. To access its element in the sketches you can identify by the name. Its method is useful for loading elements in JSON. In the load function of AutoConnectElement(s) described [**later**](acjson.md), these objects are not created in advance by sketches. Therefore, access to the attribute of that element by name as follows: +Each element has a name. **Name** is the String data type. To access its element in the sketches you can identify by the name. Its method is useful for loading elements in JSON. In the load function of AutoConnectElement(s) described [**later**](acjson.md), these objects are not created in advance by sketches. Therefore, access to the attribute of that element by the **name** as follows: ```cpp hl_lines="4 10" AutoConnectAux customPage("/custom_page", "Custom page"); @@ -149,11 +147,25 @@ A label is an optional string. If you specify a label, an `id` attribute is atta ### checked -A checked is a Boolean value and indicates the checked status of the checkbox. +A checked is a Boolean value and indicates the checked status of the checkbox. The value of the checkbox element checked is packed in the query string and sent. ## AutoConnectInput -AutoConnectInput genarates an HTML `input type="text"` tag and a `label` tag. It can also have a placeholder. +AutoConnectInput genarates an HTML `input type="text"` tag and a `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. + +### Constructor + +```cpp +AutoConnectInput(const char* name, const char* value, const char* label, const char* placeholder) +``` + +### name + +It is the name of the AutoConnectInput element and matches the name attribute of the input tag. It also becomes the parameter name of the query string when submitted. + +### value + + ## AutoConnectRadio @@ -167,23 +179,25 @@ AutoConnectInput genarates an HTML `input type="text"` tag and a `label` tag. It ### Definition in sketch -Each element can be defined by a macro. By using the macro, you can treat element names that are String types as variables in sketches. +Each element can be defined by a macro. By using the macro, you can treat element names that are String types as variables in sketches.[^2] -ACElement( *name* \[, *value* \] ) +[^2]: The square brackets in the syntax are optional parameters. The stroke is a selection parameter. -ACButton( *name* \[, *value* \] \[, *action* \] ) +ACElement ( *name* \[ , *value* \] ) -ACCheckbox( *name* \[, *value* \] \[, *label* \] \[, **true** | **false** \] ) +ACButton ( *name* \[ , *value* \] \[ , *action* \] ) + +ACCheckbox ( *name* \[ , *value* \] \[ , *label* \] \[ , **true** | **false** \] ) -ACInput( *name* \[, *value* \] \[, *placeholder* \] \[, *label* \] ) +ACInput ( *name* \[ , *value* \] \[ , *label* \] \[ , *placeholder* \] ) -ACRadio( *name* \[, *values* \] \[, *label* \] \[, **AC\_Horitontal** | **AC\_Vertical** \] \[, *checked* ] ) +ACRadio ( *name* \[ , *values* \] \[ , *label* \] \[ , **AC\_Horitontal** | **AC\_Vertical** \] \[ , *checked* \] ) -ACSelect( *name* \[, *options* \] \[, *label* \] ) +ACSelect ( *name* \[ , *options* \] \[ , *label* \] ) -ACSubmit( *name* \[, *value* \] \[, *uri* \] ) +ACSubmit ( *name* \[ , *value* \] \[ , *uri* \] ) -ACText( *name* \[, *value* \] \[, *style* \] ) +ACText ( *name* \[ , *value* \] \[ , *style* \] ) ### Variant for AutoConnectElements diff --git a/mkdocs/acintro.md b/mkdocs/acintro.md index 725ac79..a631da0 100644 --- a/mkdocs/acintro.md +++ b/mkdocs/acintro.md @@ -1,14 +1,12 @@ ## What it is - + 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 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. - - - +

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. @@ -18,20 +16,21 @@ The above figure shows a code sequence that declares AutoConnectElements and put ## Custom Web pages in AutoConnect menu [^1]:There is no overlay in the actual menu. ## Multiple custom Web pages -You can create multiple custom pages, integrate them into the AutoConnect menu, and specify pages to invokes from the menu. The following code combines three AutoConnectAuxs to a AutoConnect object as '*portal*'. +You can create multiple custom Web pages and specify which pages you can invoke from the 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. [^2]: @@ -77,7 +76,7 @@ So, the basic procedure is as follows. ## Write the custom Web page with JSON -You can also 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 above basic steps. However, this method 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 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 above basic steps. However, this method 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. **custom_page.json** diff --git a/mkdocs/images/ac_declaration.svg b/mkdocs/images/ac_declaration.svg index 2f458a0..1bf2f2e 100644 --- a/mkdocs/images/ac_declaration.svg +++ b/mkdocs/images/ac_declaration.svg @@ -10,12 +10,12 @@ xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="281.79446mm" - height="92.352806mm" - viewBox="0 0 281.79446 92.352807" + width="281.83228mm" + height="92.538231mm" + viewBox="0 0 281.83228 92.538231" version="1.1" id="svg8" - inkscape:version="0.92.1 r15371" + inkscape:version="0.92.2 (5c3e80d, 2017-08-06)" sodipodi:docname="ac_declaration.svg"> @@ -24,29 +24,75 @@ orient="auto" refY="0" refX="0" - id="TriangleOutM" + id="marker1034" style="overflow:visible" inkscape:isstock="true"> + transform="scale(0.4)" /> + + + + + + + + + + id="TriangleOutM-4-7" + refX="0" + refY="0" + orient="auto" + inkscape:stockid="TriangleOutM" + inkscape:collect="always"> @@ -69,14 +115,14 @@ orient="auto" refY="0" refX="0" - id="TriangleOutM-4-7" + id="marker1034-8-1" style="overflow:visible" inkscape:isstock="true"> @@ -87,23 +133,22 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="1" - inkscape:cx="317.82963" - inkscape:cy="21.781711" - inkscape:document-units="px" - inkscape:current-layer="layer3" + inkscape:zoom="1.3293607" + inkscape:cx="327.68411" + inkscape:cy="226.67409" + inkscape:document-units="mm" + inkscape:current-layer="layer1" showgrid="false" - inkscape:window-width="1421" - inkscape:window-height="866" - inkscape:window-x="2921" - inkscape:window-y="160" - inkscape:window-maximized="0" + inkscape:snap-global="false" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" - inkscape:snap-global="false" - showguides="false" /> + inkscape:window-width="1440" + inkscape:window-height="810" + inkscape:window-x="1424" + inkscape:window-y="144" + inkscape:window-maximized="0" /> @@ -117,561 +162,223 @@ - - - - - - + transform="translate(224.0709,-23.945169)"> + + + + sodipodi:nodetypes="cc" /> - - + sodipodi:nodetypes="cc" /> + + + + + + + AutoConnect portal;AutoConnect portal;AutoConnectAux aux("/mqtt_setting", "MQTT Setting");AutoConnectAux aux("/mqtt_setting", "MQTT Setting");ACText(header, "MQTT broker settings");ACText(header, "MQTT broker settings");ACText(caption, "Publishing the WiFi...");ACText(caption, "Publishing the WiFi...");void setup() {voidsetup() { aux.add({ header, caption }); aux.add({ header, caption }); portal.join(aux); portal.join(aux); portal.begin(); portal.begin();} + y="109.93736" + x="-218.43906" + sodipodi:role="line">} + width="21.702286" + id="rect6136" + style="opacity:0.34100001;fill:#000080;fill-opacity:1;stroke:none;stroke-width:0.5291667;stroke-miterlimit:4;stroke-dasharray:0.52916668, 0.52916668;stroke-dashoffset:0;stroke-opacity:1" + rx="4.1159506" /> - + rx="4.1159506" /> + width="21.702286" + id="rect6136-4" + style="display:inline;opacity:0.34100001;fill:#000080;fill-opacity:1;stroke:none;stroke-width:0.5291667;stroke-miterlimit:4;stroke-dasharray:0.52916668, 0.52916668;stroke-dashoffset:0;stroke-opacity:1" + rx="4.1159506" /> + width="21.702286" + id="rect6136-4-0" + style="display:inline;opacity:0.34100001;fill:#000080;fill-opacity:1;stroke:none;stroke-width:0.5291667;stroke-miterlimit:4;stroke-dasharray:0.52916668, 0.52916668;stroke-dashoffset:0;stroke-opacity:1" + rx="4.1159506" /> + + + + width="12.113993" + id="rect6136-4-0-2-1" + style="display:inline;opacity:0.34100001;fill:#800000;fill-opacity:1;stroke:none;stroke-width:0.52916676;stroke-miterlimit:4;stroke-dasharray:0.52916669, 0.52916669;stroke-dashoffset:0;stroke-opacity:1" />