From 4d6451d771b65d77f76e09ff84cc8f9f4c8c0ad4 Mon Sep 17 00:00:00 2001
From: Hieromon Ikasamo <Hieromon@users.noreply.github.com>
Date: Fri, 3 May 2019 07:15:10 +0900
Subject: [PATCH] Added for multiple element loading

---
 examples/Elements/Elements.ino | 204 +++++++++++++++++++++++++++++++++
 1 file changed, 204 insertions(+)
 create mode 100644 examples/Elements/Elements.ino

diff --git a/examples/Elements/Elements.ino b/examples/Elements/Elements.ino
new file mode 100644
index 0000000..d0fd9cf
--- /dev/null
+++ b/examples/Elements/Elements.ino
@@ -0,0 +1,204 @@
+/*
+  Elements.ino, Example for the AutoConnect library.
+  Copyright (c) 2019, Hieromon Ikasamo
+  https://github.com/Hieromon/AutoConnect
+  This software is released under the MIT License.
+  https://opensource.org/licenses/MIT
+
+  This example demonstrates the typical behavior of AutoConnectElement.
+  It also represents a basic structural frame for saving and reusing
+  values ​​entered in a custom web page into flash.
+*/
+
+#if defined(ARDUINO_ARCH_ESP8266)
+#include <ESP8266WiFi.h>
+#include <ESP8266WebServer.h>
+using WebServerClass = ESP8266WebServer;
+#elif defined(ARDUINO_ARCH_ESP32)
+#include <WiFi.h>
+#include <WebServer.h>
+#include <SPIFFS.h>
+using WebServerClass = WebServer;
+#endif
+#include <FS.h>
+#include <AutoConnect.h>
+
+#define PARAM_FILE      "/elements.json"
+
+static const char PAGE_ELEMENTS[] PROGMEM = R"(
+{
+  "uri": "/elements",
+  "title": "Elements",
+  "menu": true,
+  "element": [
+    {
+      "name": "text",
+      "type": "ACText",
+      "value": "AutoConnect element behaviors collection",
+      "style": "font-family:Arial;font-size:18px;font-weight:400;color:#191970"
+    },
+    {
+      "name": "check",
+      "type": "ACCheckbox",
+      "value": "check",
+      "label": "Check",
+      "checked": true
+    },
+    {
+      "name": "input",
+      "type": "ACInput",
+      "placeholder": "This area accepts hostname patterns",
+      "pattern": "^(([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])$"
+    },
+    {
+      "name": "radio",
+      "type": "ACRadio",
+      "value": [
+        "Button-1",
+        "Button-2",
+        "Butotn-3"
+      ],
+      "label": "Radio buttons",
+      "arrange": "vertical",
+      "checked": 1
+    },
+    {
+      "name": "select",
+      "type": "ACSelect",
+      "option": [
+        "Option-1",
+        "Option-2",
+        "Option-3"
+      ],
+      "label": "Select",
+      "selected": 2
+    },
+    {
+      "name": "element",
+      "type": "ACElement",
+      "value": "<br>"
+    },
+    {
+      "name": "load",
+      "type": "ACSubmit",
+      "value": "Load",
+      "uri": "/elements"
+    },
+    {
+      "name": "save",
+      "type": "ACSubmit",
+      "value": "Save",
+      "uri": "/save"
+    }
+  ]
+}
+)";
+
+static const char PAGE_SAVE[] PROGMEM = R"(
+{
+  "uri": "/save",
+  "title": "Elements",
+  "menu": false,
+  "element": [
+    {
+      "name": "caption",
+      "type": "ACText",
+      "format": "Elements have been saved to %s",
+      "style": "font-family:Arial;font-size:18px;font-weight:400;color:#191970"
+    },
+    {
+      "name": "validated",
+      "type": "ACText",
+      "style": "color:red"
+    },
+    {
+      "name": "echo",
+      "type": "ACText",
+      "style": "font-family:monospace;font-size:small;white-space:pre;"
+    },
+    {
+      "name": "ok",
+      "type": "ACSubmit",
+      "value": "OK",
+      "uri": "/elements"
+    }
+  ]
+}
+)";
+
+WebServerClass  server;
+AutoConnect portal(server);
+AutoConnectAux  elementsAux;
+AutoConnectAux  saveAux;
+
+void setup() {
+  delay(1000);
+  Serial.begin(115200);
+  Serial.println();
+
+  // Responder of root page handled directly from WebServer class.
+  server.on("/", []() {
+    String content = "Place the root page with the sketch application.&ensp;";
+    content += AUTOCONNECT_LINK(COG_24);
+    server.send(200, "text/html", content);
+  });
+
+  // Load a custom web page described in JSON as PAGE_ELEMENT and
+  // register a handler. This handler will be invoked from
+  // AutoConnectSubmit named the Load defined on the same page.
+  elementsAux.load(FPSTR(PAGE_ELEMENTS));
+  elementsAux.on([] (AutoConnectAux& aux, PageArgument& arg) {
+    if (portal.where() == "/elements") {
+      // Use the AutoConnect::where function to identify the referer.
+      // Since this handler only supports AutoConnectSubmit called the
+      // Load, it uses the uri of the custom web page placed to
+      // determine whether the Load was called me or not.
+      SPIFFS.begin();
+      File param = SPIFFS.open(PARAM_FILE, "r");
+      if (param) {
+        aux.loadElement(param, { "text", "check", "input", "radio", "select" } );
+        param.close();
+      }
+      SPIFFS.end();
+    }
+    return String();
+  });
+
+  saveAux.load(FPSTR(PAGE_SAVE));
+  saveAux.on([] (AutoConnectAux& aux, PageArgument& arg) {
+    // You can validate input values ​​before saving with
+    // AutoConnectInput::isValid function.
+    // Verification is using performed regular expression set in the
+    // pattern attribute in advance.
+    AutoConnectInput& input = elementsAux["input"].as<AutoConnectInput>();
+    aux["validated"].value = input.isValid() ? String() : String("Input data pattern missmatched.");
+
+    // The following line sets only the value, but it is HTMLified as
+    // formatted text using the format attribute.
+    aux["caption"].value = PARAM_FILE;
+
+    SPIFFS.begin();
+    File param = SPIFFS.open(PARAM_FILE, "w");
+    if (param) {
+      // Save as a loadable set for parameters.
+      elementsAux.saveElement(param, { "text", "check", "input", "radio", "select" });
+      param.close();
+      // Read the saved elements again to display.
+      param = SPIFFS.open(PARAM_FILE, "r");
+      aux["echo"].value = param.readString();
+      param.close();
+    }
+    else {
+      aux["echo"].value = "<styleSPIFFS failed to open.";
+    }
+    SPIFFS.end();
+    return String();
+  });
+
+  portal.join({ elementsAux, saveAux });
+  portal.begin();
+}
+
+void loop() {
+  portal.handleClient();
+}