diff --git a/docs/acelements.html b/docs/acelements.html index 7fb6aae..7bc6d03 100644 --- a/docs/acelements.html +++ b/docs/acelements.html @@ -1554,10 +1554,9 @@
  • AutoConnectText: Style attributed text

    • Layout on a custom Web page

    -

    You can specify the direction to arrange the radio buttons as 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.

    +

    The elements of the page created by AutoConnectElements are aligned vertically exclude the AutoConnectRadio. You can specify the direction to arrange the radio buttons as AutoConnectRadio vertically or horizontally. This basic layout depends on the CSS of the AutoConnect menu so you can not change drastically.

    Form and AutoConnectElements

    -

    All AutoConnectElements placed on a custom Web page are included in one form. Its form is fixed and created by AutoConnect. The form's value (usually the text or checkbox you entered) is sent by AutoConnectSubmit using the POST method.

    -

    name and value of each AutoConnectElement which own form-data are reflected in the query string when the custom Web page was sent. You can retrieve the value in the sketch as the parameter's value of the query string with ESP8266WebServer::arg function or PageArgument class of AutoConnect::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 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 function or PageArgument class of the AutoConnect::on handler when the form is submitted.

    AutoConnectElement - A basic class of elements

    AutoConnectElement is a base class for other element classes and has common attributes for all elements. It can also be used as a variant of each element. The following items are attributes that AutoConnectElement has and are common to other elements.

    Sample
    @@ -1598,7 +1597,7 @@

    Furthermore, to convert an entity that is not an AutoConnectElement to its native type, you must re-interpret that type with c++.

    AutoConnectButton

    -

    AutoConnectButton generates an HTML <button type="button"> tag and locates a clickable button to a custom Web page. Currently AutoConnectButton corresponds only to name, value, an onclick attribute of HTML button tag. An onclick attribute is generated from an action member variable of the AutoConnectButton, which is mostly used with a JavaScript to activate a script.

    +

    AutoConnectButton generates an HTML <button type="button"> tag and locates a clickable button to a custom Web page. Currently AutoConnectButton corresponds only to name, value, an onclick attribute of HTML button tag. An onclick attribute is generated from an action member variable of the AutoConnectButton, which is mostly used with a JavaScript to activate a script.

    Sample
    AutoConnectButton button("button", "OK", "myFunction()");

    On the page:

    @@ -1611,7 +1610,7 @@

    value

    It becomes a value of the value attribute of an HTML button tag.

    action

    -

    action is String data type and is an onclick attribute fire on a mouse click on the element. It is mostly used with a JavaScript to activate a script.1 For example, the following code defines a custom Web page that copies a content of Text1 to Text2 by clicking Button.

    +

    action is String data type and is an onclick attribute fire on a mouse click on the element. It is mostly used with a JavaScript to activate a script.1 For example, the following code defines a custom Web page that copies a content of Text1 to Text2 by clicking Button.

    const char* scCopyText = R"(
 <script>
 function CopyText() {
@@ -1669,7 +1668,7 @@ Only  will be displayed if a label is not specified
 
    IP address:
    (([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])
    
 
 
  • 
-
    Host name of the internet:
    (([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])
    
+
    Host name of Internet:
    (([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])
    
 
    • 
 
  • 
 
    Date (MM/DD/YYYY) as range 1900-2099:
    (0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d
    
diff --git a/docs/achandling.html b/docs/achandling.html
index a81cd4b..4a99b3f 100644
--- a/docs/achandling.html
+++ b/docs/achandling.html
@@ -1088,7 +1088,7 @@
 
    
 
     Loading AutoConnectAux & AutoConnectElements with JSON
    
 
    To load a JSON document as AutoConnectAux use the AutoConnect::load function and load the JSON document of each AutoConnectElement using the AutoConnectAux::loadElement function. Although the functions of both are similar, the structure of the target JSON document is different.
    
-
    The AutoConnect::load function loads the entire AutoConnectAux and creates both the AutoConnectAux instance and each AutoConnectElement instance. A single JSON document can contain multiple custom Web pages. If you write JSON of AutoConnectAux as an array, the load function generates all the pages contained in that array. 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.
    
+
    The AutoConnect::load function loads the entire AutoConnectAux and creates both the AutoConnectAux instance and each AutoConnectElement instance. A single JSON document can contain multiple custom Web pages. If you write JSON of AutoConnectAux as an array, the load function generates all the pages contained in that array. Therefore, it is necessary to supply the JSON document of AutoConnectAux as an input of the load function and must contain the elements described section JSON document structure for AutoConnectAux.
    
 
    The AutoConnectAux::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, but you can specify an array.
    
 
    // AutoConnectAux as a custom Web page.
 const char page[] PROGMEM = R"raw(
@@ -1418,17 +1418,17 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
 
    
 
 
    Also, you can choose another way to access arguments without going through the ESP8266WebServer class. The PageArgument object of the custom Web page handler argument is a copy of the arg object of the ESP8266WebServer class. Either of these methods is a simple and easy way to access parameters in custom Web page handlers. However, if you need to access from outside of the handler to the value of AutoConnectElements, you need to accomplish it using with the AutoConnectAux::getElement function. The following sketch code replaces the above example with JSON and PageArgument, and its behaves is equivalent basically to the above sketch.
    
-
    const static char auxPage[] PROGMEM = R"raw (
-[
-  { "title":"Hello", "uri":"/hello", "menu":true, "element":[
-    { "name":"input1", "type": "ACInput", "label": "INPUT" },
-    { "name":"send", "type":"ACSubmit", "value":"HELLO", "uri":"/echo" }]
-  },
-  { "title":"Echo", "uri":"/echo", "menu":false, "element":[
-    { "name":"echo", "type":"ACText" }]
-  }
-]
-)raw";
+
    const static char auxPage[] PROGMEM = R"raw(
+[
+  { "title":"Hello", "uri":"/hello", "menu":true, "element":[
+    { "name":"input1", "type": "ACInput", "label": "INPUT" },
+    { "name":"send", "type":"ACSubmit", "value":"HELLO", "uri":"/echo" }]
+  },
+  { "title":"Echo", "uri":"/echo", "menu":false, "element":[
+    { "name":"echo", "type":"ACText" }]
+  }
+]
+)raw";
 
 AutoConnect portal;
 
@@ -1445,10 +1445,18 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
 
     Overwrite the AutoConnectElements
    
 
    Sketches can update the attributes of AutoConnectElements with two approaches. A one is to assign directly to the attributes of a member variable of its element. The other is to overwrite them with loading the element by AutoConnectAux::loadElement. 
    
 
    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 function.
    
-
    For example, the combination of the sketch and JSON document as follows updates only the style while keeping Captiopn (ie. "Hello, world") as AutoConnectText value.
    
-
     The sketch (part of code)
    
-
    ACText(Caption, "Hello, world");
-AutoConnectAux helloPage("/hello", "Hello", true, { Caption });
+
    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.
    
+
     External JSON document for the below sketch to modify the text style.
+
    {
+  "name" : "Caption",
+  "type" : "ACText",
+  "style": "text-align:center;font-family:'Avenir','Helvetica Neue','Helvetica';font-size:24px;color:tomato;"
+}
+
    
+

    
+ The sketch (part of code), load above JSON.
+
    ACText(Caption, "Hello, world");
+AutoConnectAux helloPage("/hello", "Hello", true, { Caption });
 AutoConnect portal;
 
 String onHello(AutoConnectAux& aux, PageArgument& args) {
@@ -1466,14 +1474,8 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
   portal.handleClient();
 }
 
    
-
-
     External JSON document for the above sketch to modify the text style
-
    {
-  "name" : "Caption",
-  "type" : "ACText",
-  "style": "text-align:center;font-family:'Avenir','Corbel','Osaka';color:Green;"
-}
-
    
+
    
+ It's shown as like:
    
 
     Check data against on submission
    
 
    By giving a pattern to AutoConnectInput, you can find errors in data styles while typing in custom Web pages. The pattern is specified by regular expression.2 If the value during input of AutoConnectInput does not match the regular expression specified in the pattern, its background color changes to pink. The following example shows the behavior when checking the IP address in the AutoConnectInput field.
    
 
    {
@@ -1497,9 +1499,10 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
 
    
 
 
     Convert data to actually type
    
+
    The values in the AutoConnectElements field of the custom Web page are all typed as String. A sketch needs to be converted to an actual data type if the data type required for sketch processing is not a String type. For the typical data type conversion method, refer to section Tips for data conversion.
    
 
    Transitions of the custom Web pages
    
 
    Scope & Lifetime of AutoConnectAux
    
-
    The lifetime of AutoConnectAux and AutoConnectElements must remain in the period when the custom Web page can be manipulated. The implementation of the custom Web page inherits from requestHandler driven from ESP8266WebServer (WebServer for ESP32), so the instance of AutoConnectAux and AutoConnectElements must exist for the duration of effect of handleClient. The following example is incorrect for manipulating custom Web pages. Its AutoConnectAux instance will be destructed at the exit of the setup().
    
+
    AutoConnectAux and AutoConnectElements must live while the custom Web pages are available. The implementation of the custom Web page inherits from requestHandler driven from ESP8266WebServer (WebServer for ESP32), so the instance of AutoConnectAux and AutoConnectElements must exist for the duration of effect of handleClient. The following example is incorrect for manipulating custom Web pages. Its AutoConnectAux instance will be destructed at the exit of the setup().
    
 
    #include <ESP8266WiFi.h>
 #include <ESP8266WebServer.h>
 #include <AutoConnect.h>
diff --git a/docs/acintro.html b/docs/acintro.html
index d310e19..dd65358 100644
--- a/docs/acintro.html
+++ b/docs/acintro.html
@@ -819,9 +819,11 @@
                 
                 
    What it is
    
 
    
-AutoConnect can handle custom Web pages prepared by user sketches individually. Custom Web pages are displayed in the AutoConnect menu 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 can be integrated into the AutoConnect menu and executed as menu items and can have input-output parameters and handle them.
    
+
    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 class. Furthermore, an input box, a check box, a submit button, etc. are implemented by classes derived from AutoConnectElement.
+
    AutoConnect creates the custom Web pages dynamically at runtime. Sketch describes the custom Web pages using classes and APIs necessary for dynamic creation which are AutoConnectAux and the variant of AutoConnectElements. AutoConnectAux is an object dependent on AutoConnect, which provides an easy way to incorporate custom Web pages into AutoConnect like the one on the right figure. The elements make up a custom Web page are provided as an AutoConnectElement 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 its AutoConnectAux object to AutoConnect will integrate the custom Web page into the AutoConnect menu.
    
 
    
@@ -842,13 +844,14 @@ AutoConnectAux is a container for AutoConnectElements. To make a custom Web page
 
    Basic steps to use custom Web pages
    
 
    So, the basic procedure for handling of the custom Web pages is as follows:
    
 
      
-
    1. Create or define AutoConnectAux.
      2. 
+
    2. Create or define AutoConnectAux.
      3. 
 
    3. Create or define AutoConnectElement(s).
      4. 
 
    4. Add AutoConnectElement(s) to AutoConnectAux.
      5. 
 
    5. Create more AutoConnectAux containing AutoConnectElement(s), if necessary.
      6. 
-
    6. Register the request handlers for the custom Web pages.
      7. 
+
    7. Register the request handlers for the custom Web pages.
      8. 
 
    8. Join prepared AutoConnectAux(s) to AutoConnect.
      9. 
 
    9. Invoke AutoConnect::begin().
      10. 
+
    10. Perform AutoConnect::handleClient().
      11. 
 
    
 
    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 function. you can reduce the steps of the basic procedure with this approach, but this way consumes a lot of memory. 
@@ -929,7 +932,7 @@ The following JSON code and sketch will execute the custom Web page as an exampl
 }
 
    
 
    Passing parameters with sketches and custom Web pages
    
-
    A sketch can access variables of AutoConnectElements on the custom Web page. The value entered into the AutoConnectElements is stored to the member variables 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 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 section.
    
+
    A sketch can access variables of AutoConnectElements on the custom Web page. The value entered into the AutoConnectElements is stored to the member variables 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 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 section Custom field data handling.
    
  )\" ; ACInput(Text1, \"Text1\" ); ACInput(Text2, \"Text2\" ); ACButton(Button, \"COPY\" , \"CopyText()\" ); ACElement(TextCopy, scCopyText); AutoConnectCheckbox \u00b6 AutoConnectCheckbox generates an HTML < input type = \"checkbox\" > tag and a < label > tag. It places horizontally on a custom Web page by default. Sample AutoConnectCheckbox checkbox(\"checkbox\", \"uniqueapid\", \"Use APID unique\", false); On the page: Constructor \u00b6 AutoConnectCheckbox( const char * name, const char * value, const char * label, const bool checked) name \u00b6 It is the name of the AutoConnectCheckbox element and matches the name attribute of the input tag. It also becomes the parameter name of the query string when submitted. value \u00b6 It becomes a value of the value attribute of an HTML < input type = \"checkbox\" > tag. label \u00b6 A label is an optional string. A label is always arranged on the right side of the checkbox. Specification of a label will generate an HTML