AutoConnect/mkdocs/acintro.md

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.

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.

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.

The above figure shows a code sequence that declares AutoConnectElements and put in the AutoConnectAux container and integrates those into AutoConnect. Declare two text elements named 'header', 'caption' and add those to the AutoConnectAux object aux. Bind it to an AutoConnect object called the 'portal'. It's basic procedure for configuring the custom Web page. Also, further explanation of AutoConnectElements is the documentation.

Custom Web pages in AutoConnect menu

• Custom Web pages as AutoConnectAux are integrated into the AutoConnect menu. AutoConnectAux object owns title and URI as member variables. It also has an indicator to show on the AutoConnect menu. You give the title and URI of the custom web page to the AutoConnectAux object with Sketch. Then the title of the custom Web page is displayed at the bottom of the AutoConnect menu as the left figure.¹ It is a hyperlink as URI you given to the page and taps it will display the page composed of AutoConnectElements. The title is also shown to top left corner of the custom page, and a hyperlink to AutoConnect statistical screen is contained.

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'.

• False is specified as the third parameter of 'aux2' in the above code. The third parameter of the AutoConnectAux constructor is an indicator of whether it's shown to the AutoConnect menu. Right animation is the execution result of the above code. You will see that the custom web page's menu is displayed only in the last two lines. Because 'aux1' and 'aux2' in this example have a pair of page transitions. The sketch of this animation is written to transition to 'aux2' by the utility of the AutoConnectSubmit element owned by 'aux1'.²
  An 'aux2' page transitions only from the submit button of 'aux1'. It is a page that saves the parameters you entered on the previous page as shown in mqttRSSI in the library example. It is to want to hide 'aux2' from AutoConnect menu lines. The third parameter of the AutoConnectAux constructor is used for this purpose.

Basic steps to use custom Web pages

So, the basic procedure is as follows.

1. Create or define AutoConnectAux.
2. Create or define AutoConnectElement(s).
3. Add AutoConnectElement(s) to AutoConnectAux.
4. Create more AutoConnectAux containing AutoConnectElement(s), if necessary.
5. Join prepared AutoConnectAux(s) to AutoConnect.
6. Invoke AutoConnect::begin().

Write the custom Web page with JSON

You can also write the custom Web page in JSON without using sketch codes.¹ 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 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² is equivalent.

custom_page.json

[
  {
    "title": "MQTT Setting",
    "uri": "/mqtt_setting",
    "menu": true,
    "element": [
      {
        "name": "header",
        "type": "ACText",
        "value": "MQTT broker settings"
      },
      {
        "name": "caption1",
        "type": "ACText",
        "value": "Publishing the WiFi..."
      },
      {
        "name": "save",
        "type": "ACSubmit",
        "value": "SAVE",
        "uri": "/mqtt_save"
      }
    ]
  },
  {
    "title": "MQTT Setting",
    "uri": "/mqtt_save",
    "menu": false,
    "element": [
      {
        "name": "caption2",
        "type": "ACText",
        "value": "Save parameters"
      },
      {
        "name": "start",
        "type": "ACSubmit",
        "value": "START",
        "uri": "/mqtt_start"
      }
    ]
  },
  {
    "title": "MQTT Start",
    "uri": "/mqtt_start",
    "menu": true,
    "element": []
  }
]

The sketch

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h>
#include <AutoConnect.h>

AutoConnect  portal;

void setup() {
  SPIFFS.begin();

  File page = SPIFFS.open("/custom_page.json", "r");
  portal.load(page);

  page.close();
  SPIFFS.end();

  portal.begin();
}

void loop() {
  portal.handleClient();
}

---

1. Installation of the ArduinoJson v.5.13.4 library is required. ↩︎

2. The sketch is actually this:

   #include <ESP8266WiFi.h>
   #include <ESP8266WebServer.h>
   #include <AutoConnect.h>
       
   AutoConnect     portal;
       
   ACText(header, "MQTT broker settings");
   ACText(caption1, "Publishing the WiFi...");
   ACSubmit(save, "SAVE", "/mqtt_save");
   AutoConnectAux  aux1("/mqtt_setting", "MQTT Setting", { header, caption1, save });
       
   ACText(caption2, "Save parameters");
   ACSubmit(start, "START", "/mqtt_start"); 
   AutoConnectAux  aux2("/mqtt_save", "MQTT Setting", false, { caption2, start });
       
   AutoConnectAux  aux3("/mqtt_start", "MQTT Start");
       
   void setup() {
     portal.join({ aux1, aux2, aux3 });
     portal.begin();
   }
       
   void loop() {
     portal.handleClient();
   }
   

   ↩︎