diff --git a/docs/404.html b/docs/404.html index 09b81d4..4193f39 100644 --- a/docs/404.html +++ b/docs/404.html @@ -644,8 +644,8 @@
  • - - Saved credentail access + + Saved credentails access
    • diff --git a/docs/acelements.html b/docs/acelements.html index 9e234e7..5cccba1 100644 --- a/docs/acelements.html +++ b/docs/acelements.html @@ -1263,8 +1263,8 @@
  • - - Saved credentail access + + Saved credentails access
    • diff --git a/docs/achandling.html b/docs/achandling.html index b384def..27f66bb 100644 --- a/docs/achandling.html +++ b/docs/achandling.html @@ -493,6 +493,13 @@ How you can reach the values + + +
  • + + Transfer of input values ​​across pages + +
  • @@ -517,8 +524,8 @@
  • - - Validate input data + + Input data validation
    • @@ -850,8 +857,8 @@
  • - - Saved credentail access + + Saved credentails access
    • @@ -1034,6 +1041,13 @@ How you can reach the values + + +
  • + + Transfer of input values ​​across pages + +
  • @@ -1058,8 +1072,8 @@
  • - - Validate input data + + Input data validation
    • @@ -1515,12 +1529,12 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b // Get the AutoConnectInput named "feels". // The where() function returns an uri string of the AutoConnectAux that triggered this handler. - AutoConnectAux* hello = portal.aux(portal.where()); - AutoConnectInput& feels = hello->getElement<AutoConnectInput>("feels"); - - // Get the AutoConnectText named "echo". - AutoConnectText& echo = aux.getElement<AutoConnectText>("echo"); - + AutoConnectAux* hello = portal.aux(portal.where()); + AutoConnectInput& feels = hello->getElement<AutoConnectInput>("feels"); + + // Get the AutoConnectText named "echo". + AutoConnectText& echo = aux.getElement<AutoConnectText>("echo"); + // Echo back from input-box to /feels page. echo.value = feels.value + String(" and a bold world!"); return String(""); @@ -1660,9 +1674,72 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh portal.begin(); +

    Transfer of input values ​​across pages

    +

    Since v1.0.0, AutoConnect supports a new attribute with each element that allows automatic transfer of input values across pages without sketching. AutoConnect will copy the input value of the elements declared as global to the same-named global elements on a different custom Web pages at the page transition timing.

    +

    +

    The global attribute will be useful for echoing input values back to another custom Web pages. This copy operation can be performed between different types. (eg., copy value from AutoConnectInput to AutoConnectText) The following example reflects the input value of PAGE1 to the AutoConnectText field of PAGE2 without sketch code.

    +
    static const char PAGE1[] PROGMEM = R"(
+{
+  "title": "PAGE1",
+  "uri": "/page1",
+  "menu": true,
+  "element": [
+    {
+      "name": "input1",
+      "type": "ACInput",
+      "global": true
+    },
+    {
+      "name": "send",
+      "type": "ACSubmit",
+      "value": "OK",
+      "uri": "/page2"
+    }
+  ]
+}
+)";
+static const char PAGE2[] PROGMEM = R"(
+{
+  "title": "PAGE2",
+  "uri": "/page2",
+  "menu": false,
+  "element": [
+    {
+      "name": "input1",
+      "type": "ACText",
+      "global": true
+    }
+  ]
+}
+)";
+
+AutoConnect portal;
+AutoConnectAux page1;
+AutoConnectAux page2;
+
+void setup() {
+  page1.load(PAGE1);
+  page2.load(PAGE2);
+  portal.join( { page1, page2 });
+  portal.begin();
+}
+
+void loop() {
+  portal.handleClient();
+}
+
    + +


    The value entered in input1 declared in PAGE1 is reflected in input1 of PAGE2 as an AutoConnectText value even if there is no sketch code to transfer it to PAGE2. It's shown as like:
    + + +

    +
    +

    Copy only for same-named and the global

    +

    The input value will be copied only if the global attribute of the destination element is true. If an element with the same name is declared non-global, the value is not copied.

    +

    Retrieve the values with WebServer::on handler

    ESP8266WebServer class and the WebServer class assume that the implementation of the ReqestHandler class contained in the WebServer library will handle the URL requests. Usually, it is sketch code registered by ESP8266WebServer::on function.

    -

    When the page transitions from the custom Web page created by AutoConnectAux to the handler registered by ESP2866WebServer::on function, a little trick is needed to retrieve the values of AutoConnectElements. (i.e. the URI of the ESP8266WebServer::on handler is specified in the uri attribute of AutoConnectSubmit) AutoConnect cannot intervene in the procedure in which the ESP8266WebServer class calls the on-page handler by the sketch. Therefore, it is necessary to retrieve preliminary the values of AutoConnectElements using the AutoConnectAux::fetchElement function for value processing with the on-page handler.

    +

    When a page transition from a custom Web page created by AutoConnectAux to a handler registered with ESP2866WebServer::on function, a little trick is needed to retrieve the values of AutoConnectElements. (i.e. the URI of the ESP8266WebServer::on handler is specified in the uri attribute of AutoConnectSubmit) AutoConnect cannot intervene in the procedure in which the ESP8266WebServer class calls the on-page handler coded with the sketch. Therefore, it is necessary to retrieve preliminary the values of AutoConnectElements using the AutoConnectAux::fetchElement function for value processing with the on-page handler.

    The following sketch is an example of extracting values inputted on a custom web page with an on-page handler and then processing it.

    ESP8266WebServer server;
 AutoConnect portal(server);
@@ -1745,7 +1822,7 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
 
    
  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.
    
+
    By giving a pattern to AutoConnectInput, you can find errors in data styles while typing in custom Web pages. The pattern is specified with 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.
    
 
    {
   "title" : "Page-1",
   "uri" : "/page1",
@@ -1761,15 +1838,49 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
 }
 
    
 
-
    
-  
-  
-
    
-
-
    If you are not familiar with regular expressions, you may feel that description very strange. And matter of fact, it is a strange description for those unfamiliar with formal languages. If your regular expression can not interpret the intended syntax and semantics, you can use an online tester. The regex101 is an exceptional online site for testing and debugging regular expressions.
    
-
     Validate input data
    
+

     It's shown as like:
    
+
    
+
    If you are not familiar with regular expressions, you may feel that description very strange. Matter of fact, it's a strange description for those who are unfamiliar with the formal languages. If your regular expression can not interpret the intended syntax and semantics, you can use an online tester. The regex101 is an exceptional online tool for testing and debugging regular expressions.
    
+
     Input data validation
    
 
    The pattern attribute of AutoConnectInput only determines the data consistency on the web browser based on the given regular expression. In order to guarantee the validity of input data, it is necessary to verify it before actually using it.
    
-
    You can validate input data from AutoConnectInput using the isValid function before actually processing it.  The isValid function determines whether the value currently stored in AutoConnectInput matches the pattern. 
    
+
    You can validate input data from AutoConnectInput using the isValid function before actually processing it.  The isValid function determines whether the value currently stored in AutoConnectInput matches the pattern.
    
+
    You can also use the AutoConnectAux::isValid function to verify the data input to all AutoConnectInput elements on the custom Web page at once. The two sketches below show the difference between using AutoConnectInput::isValid and using AutoConnectAux::isValid. In both cases, it verifies the input data of the same AutoConnectInput, but in the case of using AutoConnectAux::isValid, the amount of sketch coding is small.
    
+
    A common declaration
    
+
    const char PAGE[] PROGMEM = R"(
+{
+  "title": "Custom page",
+  "uri": "/page",
+  "menu": true,
+  "element": [
+    {
+      "name": "input1",
+      "type": "ACInput",
+      "pattern": "^[0-9]{4}$"
+    },
+    {
+      "name": "input2",
+      "type": "ACInput",
+      "pattern": "^[a-zA-Z]{4}$"
+    }
+  ]
+}
+)";
+AutoConnectAux page;
+page.load(PAGE);
+
    
+
+
    Using AutoConnectInput::isValid
    
+
    AutoConnectInput& input1 = page["input1"].as<AutoConnectInput>();
+AutoConnectInput& input2 = page["input2"].as<AutoConnectInput>();
+if (!input1.isValid() || !input2.isValid())
+  Serial.println("Validation error");
+
    
+
+
    Using AutoConnectAux::isValid
    
+
    if (!page.isValid())
+  Serial.println("Validation error");
+
    
+
 
     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
    
diff --git a/docs/acintro.html b/docs/acintro.html
index 0be77dc..a0fbeb8 100644
--- a/docs/acintro.html
+++ b/docs/acintro.html
@@ -728,8 +728,8 @@
 
 
   
  • 
-    
-      Saved credentail access
+    
+      Saved credentails access
     
   
    • 
 
diff --git a/docs/acjson.html b/docs/acjson.html
index 2bbebff..25b8a80 100644
--- a/docs/acjson.html
+++ b/docs/acjson.html
@@ -559,6 +559,13 @@
    +

    The above custom Web page definitions can be loaded in a batch using the AutoConnect::load function.

    JSON object for AutoConnectElements

    JSON description for AutoConnectElements describes as an array in the element with arguments of each constructor.

    {
@@ -1522,7 +1537,7 @@
 
    
 
    
 
      
-
    • value : Specifies the cuscom CSS code.
      • 
+
    • value : Specifies the custom CSS code.
      • 
 
    
 
    
 
    
@@ -1562,6 +1577,92 @@
 
    It is based on analysis by ArduinoJson, but the semantic analysis is simplified to save memory. Consequently, it is not an error that a custom Web page JSON document to have unnecessary keys. It will be ignored.

    Loading JSON document

    +

    Loading to AutoConnect

    +

    There are two main ways to load the custom Web pages into AutoConnect.

    +
      +
    1. +

      Load directly into AutoConnect

      +

      This way does not require an explicit declaration of AutoConnectAux objects with sketches and is also useful when importing the custom Web pages JSON document from an external file such as SPIFFS because the page definition and sketch coding structure can be separated.

      +

      Using the AutoCoonnect::load function, AutoConnect dynamically generates the necessary AutoConnectAux objects internally based on the custom Web page definition of the imported JSON document content. In the sketch, the generated AutoConnectAux object can be referenced using the AutoConnect::aux function. You can reach the AutoConnectElements you desired using the AutoConnectAux::getElement function of its AutoConnectAux.

      +

      In the following example, it loads in a batch a JSON document of custom Web pages stored in SPIFFS and accesses to the AutoConnectInput element.

      +
      [
+  {
+    "title": "page1",
+    "uri": "/page1",
+    "menu": true,
+    "element": [
+      {
+        "name": "input1",
+        "type": "ACInput"
+      }
+    ]
+  },
+  {
+    "title": "page2",
+    "uri": "/page2",
+    "menu": true,
+    "element": [
+      {
+        "name": "input2",
+        "type": "ACInput"
+      }
+    ]
+  }
+]
+
      + +
      AutoConnect portal;
+File page = SPIFFS.open("/custom_page.json", "r");
+portal.load(page);
+page.close();
+AutoConnectAux* aux = portal.aux("/page1");
+AutoConnectInput& input1 = aux->getElement<AutoConnectInput>("input1");
+
      + +
      2. +
    2. +

      Load to AutoConnectAux and join to AutoConnect

      +

      This way declares AutoConnectAux in the sketch and loads the custom Web pages JSON document there. It has an advantage for if you want to define each page of a custom Web page individually or allocate AutoConnectAux objects dynamically on the sketch side.

      +

      After loading a JSON document using the AutoConnectAux::load function by each, integrate those into AutoConnect using the AutoConnect::join function.

      +

      In the following example, you can see the difference between two sketches in a sketch modified using the AutoConnectAux::load.

      +

      {
+  "title": "page1",
+  "uri": "/page1",
+  "menu": true,
+  "element": [
+    {
+      "name": "input1",
+      "type": "ACInput"
+    }
+  ]
+}
+
      +
      {
+  "title": "page2",
+  "uri": "/page2",
+  "menu": true,
+  "element": [
+    {
+      "name": "input2",
+      "type": "ACInput"
+    }
+  ]
+}
+
      +
      AutoConnect portal;
+AutoConnectAux page1;
+AutoConnectAux page2;
+File page = SPIFFS.open("/custom_page1.json", "r");
+page1.load(page);
+page.close();
+page = SPIFFS.open("/custom_page2.json", "r");
+page2.load(page);
+page.close();
+portal.join( { page1, page2 } );
+AutoConnectInput& input1 = page1.getElement<AutoConnectInput>("input1");
+

      +
      3. +

    Loading from the streamed file

    AutoConnect supports loading of JSON document from the following instances: