From 50351d240acd2c64bcfd08f64513dc7d30279102 Mon Sep 17 00:00:00 2001 From: Hieromon Ikasamo Date: Wed, 29 May 2019 22:21:06 +0900 Subject: [PATCH] Deployment for v0.9.9 --- docs/achandling.html | 60 ++++++++- docs/apielements.html | 224 +++++++++++++++++++++------------- docs/changelog.html | 5 +- docs/colorized.html | 9 +- docs/search/search_index.json | 2 +- docs/sitemap.xml | 50 ++++---- docs/sitemap.xml.gz | Bin 384 -> 384 bytes 7 files changed, 231 insertions(+), 119 deletions(-) diff --git a/docs/achandling.html b/docs/achandling.html index c5fc4d3..74abeb5 100644 --- a/docs/achandling.html +++ b/docs/achandling.html @@ -17,7 +17,7 @@ } }) } - }) Skip to content

Handling the custom Web pages

Page, Container, Component

+ }) Skip to content

Handling the custom Web pages

Page, Container, Component

AutoConnectAux is the container for a custom Web page, AutoConnectElement is the component of a page. AutoConnectElements must be contained in AutoConnectAux object. (ie. they are the elements displayed on the custom Web page.) Then AutoConnect makes an AutoConnectAux to a page.

AutoConnectElements declared in sketch must be programmed to add to AutoConnectAux one after another. Elements are automatically included in AutoConnectAux by AutoConnect if you load it from the JSON document. In either method, it is common to use the function of AutoConnectAux to access an element with a sketch.

Handing AutoConnectElements with the sketches

@@ -116,7 +116,7 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b

Need cast to convert to the actual type

-

An operator [] returns a referene of an AutoConnectElement. It is necessary to convert the type according to the actual element type with AutoConnectElement::as<T> functon. +

An operator [] returns a reference of an AutoConnectElement. It is necessary to convert the type according to the actual element type with AutoConnectElement::as<T> function. 

AutoConnectButton& AutoConnectElement::as<AutoConnectButton>()
 AutoConnectCheckbox& AutoConnectElement::as<AutoConnectCheckbox>()
 AutoConnectElement& AutoConnectElement::as<AutoConnectElement>()
@@ -132,6 +132,62 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
 
AutoConnectElementVT& AutoConnectAux::getElements(void)
 

 
+
 Enable AutoConnectElements during the sketch execution

+
AutoConnectElemets have an enable attribute to activate its own HTML generation. Sketches can change the HTMLization of their elements dynamically by setting or resetting the enable value. An element whose the enable attribute is true will generate itself HTML and place on the custom Web page.  And conversely, it will not generate the HTML when the value is false.

+
For example, to enable the submit button only when the ESP module is connected to the access point in STA mode, you can sketch the following:

+
#include <ESP8266WiFi.h>
+#include <ESP8266WebServer.h>
+#include <AutoConnect.h>
+
+static const char AUX[] PROGMEM = R"(
+{
+  "uri" : "/aux",
+  "title" : "Aux.",
+  "menu" : true,
+  "element" : [
+    {
+      "name": "input",
+      "type": "ACInput",
+      "label": "Input"
+    },
+    {
+      "name": "send",
+      "type": "ACSubmit",
+      "value": "SEND",
+      "uri": "/send"
+    }
+  ]
+}
+)";
+
+AutoConnect    portal;
+AutoConnectAux page;
+
+String onPage(AutoConnectAux& aux, PageArgument& args) {
+  AutoConnectSubmit& send = aux["send"].as<AutoConnectSubmit>();
+  if (WiFi.isConnected())
+    send.enable = (WiFi.getMode() == WIFI_STA);
+  else
+    send.enable = false;
+  return String();
+}
+
+void setup() {
+  page.load(AUX);
+  page.on(onPage);
+  portal.join(page);
+  portal.begin();
+}
+
+void loop() {
+  portal.handleClient();
+}
+

+
+

+
Desirable to set or reset the enable attribute in the page handler

+
The enable attribute can be set at any time during the sketch execution. The page handler with the AC_EXIT_AHEAD option is sure to handle it.

+

 
Loading & saving AutoConnectElements with JSON

 
AutoConnect supports reading the custom Web page definitions written in JSON and also supports loading and saving of AutoConnectAux or AutoConnectElements. In both cases, the target object is a JSON document for AutoConnect. However, it can not save all AutoConnectElements contained in the page as a custom Web page. (ie. AutoConnectAux)

 

diff --git a/docs/apielements.html b/docs/apielements.html
index 35bfbd7..8a40058 100644
--- a/docs/apielements.html
+++ b/docs/apielements.html
@@ -17,7 +17,7 @@
         }
       })
     }
-  })   Skip to content 
AutoConnectElements API
AutoConnectButton

+  })   Skip to content 
AutoConnectElements API
AutoConnectButton

 
 Constructor

 
AutoConnectButton(const char* name = "", const char* value = "", const String& action = String())
 

@@ -28,20 +28,26 @@
     
actionNative code of the action script executed when the button is clicked.

 

 
 Public member variables

-
 name

-
The element name.
+
 action

+
HTML native code of the action script to be executed when the button is clicked. It is mostly used with a JavaScript to activate a script.1
 

     
Type

     
String

 

-
 value

-
Value of the element.
+
 enable

+
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
+

+    
Type

+    
boolean

+

+
 name

+
The element name.
 

     
Type

     
String

 

-
 action

-
HTML native code of the action script to be executed when the button is clicked. It is mostly used with a JavaScript to activate a script.1
+
 value

+
Value of the element.
 

     
Type

     
String

@@ -67,17 +73,17 @@ Returns type of AutoConnectElement.
     
checkChecked state of the checkbox.

 

 
 Public member variables

-
 name

-
The element name. 
+
 checked

+
It indicates the checked status of the checkbox. The value of the checked checkbox element is packed in the query string and sent by submit.
 

     
Type

-    
String

+    
Boolean

 

-
 value

-
Value of the element. It becomes a value attribute of an HTML <input type="checkbox"> tag.
+
 enable

+
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
 

     
Type

-    
String

+    
boolean

 

 
 label

 
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 <label> tag with an id attribute. The checkbox and the label are connected by the id attribute.
@@ -85,11 +91,17 @@ Returns type of AutoConnectElement.
     
Type

     
String

 

-
 checked

-
It indicates the checked status of the checkbox. The value of the checked checkbox element is packed in the query string and sent by submit.
+
 name

+
The element name. 
 

     
Type

-    
Boolean

+    
String

+

+
 value

+
Value of the element. It becomes a value attribute of an HTML <input type="checkbox"> tag.
+

+    
Type

+    
String

 

 
 Public member functions

 
 typeOf

@@ -110,6 +122,12 @@ Returns type of AutoConnectElement.
     
valueValue of the element.

 

 
 Public member variables

+
 enable

+
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
+

+    
Type

+    
boolean

+

 
 name

 
The element name.
 

@@ -154,24 +172,36 @@ Casts the reference to the AutoConnectElement the specified type.
 

 
 
 Public member variables

-
 name

-
The element name.
+
 enable

+
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
+

+    
Type

+    
boolean

+

+
 label

+
A label is an optional string. A label is always arranged on the left side of the file input box. Specification of a label will generate an HTML <label> tag with an id attribute. The file input box and the label are connected by the id attribute.
 

     
Type

     
String

 

-
 value

-
File name to be upload. The value contains the value entered by the client browser to the <input type="file"> tag and is read-only.
+
 mimeType

+
The mime type of the upload file which included as Media type in the http post request. Set by the client (usually the browser) that requested the upload. It is determined by the file type as application/octet-stream, text etc. which is described in IANA Media Type.
 

     
Type

     
String

 

-
 label

-
A label is an optional string. A label is always arranged on the left side of the file input box. Specification of a label will generate an HTML <label> tag with an id attribute. The file input box and the label are connected by the id attribute.
+
 name

+
The element name.
 

     
Type

     
String

 

+
 size

+
Size of the uploading file.
+

+    
Type

+    
size_t

+

 
 store

 
Specifies the save destination of the uploaded file. You can use the built-in uploader to save uploaded file to the flash of the ESP8266/ESP32 module or external SD media without writing a dedicated sketch code. It also supports saving to any destination using a custom uploader that inherits from the AutoConnectUploadHandler class.
 

@@ -184,18 +214,12 @@ Casts the reference to the AutoConnectElement the specified type.
     
 

 
-
 mimeType

-
The mime type of the upload file which included as Media type in the http post request. Set by the client (usually the browser) that requested the upload. It is determined by the file type as application/octet-stream, text etc. which is described in IANA Media Type.
+
 value

+
File name to be upload. The value contains the value entered by the client browser to the <input type="file"> tag and is read-only.
 

     
Type

     
String

 

-
 size

-
Size of the uploading file.
-

-    
Type

-    
size_t

-

 
 Public member functions

 
 typeOf

 
ACElement_t typeOf(void)
@@ -218,20 +242,26 @@ Returns type of AutoConnectFile.
     
placeholderA placeholder string.

 

 
 Public member variables

-
 name

-
The element name.
+
 enable

+
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
+

+    
Type

+    
boolean

+

+
 label

+
A label is an optional string. A label is always arranged on the left side of the input box. Specification of a label will generate an HTML <label> tag with an id attribute. The input box and the label are connected by the id attribute.
 

     
Type

     
String

 

-
 value

-
Value of the element. It becomes a value attribute of an HTML <input type="text"> tag. An entered text in the custom Web page will be sent with a query string of the form. The value set before accessing the page is displayed as the initial value.
+
 name

+
The element name.
 

     
Type

     
String

 

-
 label

-
A label is an optional string. A label is always arranged on the left side of the input box. Specification of a label will generate an HTML <label> tag with an id attribute. The input box and the label are connected by the id attribute.
+
 value

+
Value of the element. It becomes a value attribute of an HTML <input type="text"> tag. An entered text in the custom Web page will be sent with a query string of the form. The value set before accessing the page is displayed as the initial value.
 

     
Type

     
String

@@ -249,14 +279,6 @@ Returns type of AutoConnectFile.
     
String

 

 
 Public member functions

-
 typeOf

-
ACElement_t typeOf(void)
-

-Returns type of AutoConnectElement.
-

-    
Return value

-    
AC_Input

-

 
 isValid

 
bool isValid(void)
 

@@ -266,6 +288,14 @@ Evaluate the pattern as a regexp and return whether value matches. Always return
     
trueThe value matches a pattern.

     
falseThe value does not match a pattern.

 

+
 typeOf

+
ACElement_t typeOf(void)
+

+Returns type of AutoConnectElement.
+

+    
Return value

+    
AC_Input

+

 
AutoConnectRadio

 
 Constructor

 
AutoConnectRadio(const char* name = "", std::vector<String> const& values = {}, const char* label = "", const ACArrange_t order = AC_Vertical, const uint8_t checked = 0)
@@ -279,17 +309,17 @@ Evaluate the pattern as a regexp and return whether value matches. Always return
     
checkedAn index to be checked in the radio buttons.

 

 
 Public member variables

-
 name

-
The element name.
+
 checked

+
Specifies the index number (1-based) of the values to be checked. If this parameter is not specified neither item is checked.
 

     
Type

-    
String

+    
uint8_t

 

-
 values

-
An array of String type for the radio button options. It is an initialization list can be used. The <input type="radio"> tags will be generated from each entry in the values.
+
 enable

+
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
 

     
Type

-    
std::vector<String>

+    
boolean

 

 
 label

 
A label is an optional string. A label will be arranged in the left or top of the radio buttons according to the order.
@@ -297,6 +327,12 @@ Evaluate the pattern as a regexp and return whether value matches. Always return
     
Type

     
String

 

+
 name

+
The element name.
+

+    
Type

+    
String

+

 
 order

 
Specifies the direction to arrange the radio buttons. A label will place in the left or the top according to the order. It is a value of ACArrange_t type and accepts one of the following:
 

@@ -308,21 +344,13 @@ Evaluate the pattern as a regexp and return whether value matches. Always return
     
 

 
-
 checked

-
Specifies the index number (1-based) of the values to be checked. If this parameter is not specified neither item is checked.
+
 values

+
An array of String type for the radio button options. It is an initialization list can be used. The <input type="radio"> tags will be generated from each entry in the values.
 

     
Type

-    
uint8_t

+    
std::vector<String>

 

 
 Public member functions

-
 typeOf

-
ACElement_t typeOf(void)
-

-Returns type of AutoConnectElement.
-

-    
Return value

-    
AC_Radio

-

 
 add

 
void add(const String& value)
 

@@ -366,6 +394,14 @@ Returns number of options which contained.
     
Return value

     
Number of options which contained.

 

+
 typeOf

+
ACElement_t typeOf(void)
+

+Returns type of AutoConnectElement.
+

+    
Return value

+    
AC_Radio

+

 
 value

 
  const String& value(void) const
 

@@ -386,17 +422,17 @@ Returns current checked option of the radio buttons.
     
selectedAn option should be pre-selected when the page loads.

 

 
 Public member variables

-
 name

-
The element name.
+
 enable

+
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
 

     
Type

-    
String

+    
boolean

 

-
 options

-
An array of String type for the selection options. It is an initialization list can be used. The <option value> tags will be generated from each entry in the options.
+
 name

+
The element name.
 

     
Type

-    
std::vector<String>

+    
String

 

 
 label

 
A label is an optional string. A label will be arranged in the top of the selection list.
@@ -404,6 +440,12 @@ Returns current checked option of the radio buttons.
     
Type

     
String

 

+
 options

+
An array of String type for the selection options. It is an initialization list can be used. The <option value> tags will be generated from each entry in the options.
+

+    
Type

+    
std::vector<String>

+

 
 selected

 
A selected is an optional value. Specifies 1-based index value of an options array that an option should be pre-selected when the page loads.
 

@@ -411,14 +453,6 @@ Returns current checked option of the radio buttons.
     
uint8_t

 

 
 Public member functions

-
 typeOf

-
ACElement_t typeOf(void)
-

-Returns type of AutoConnectElement.
-

-    
Return value

-    
AC_Select

-

 
 add

 
void add(const String& option)
 

@@ -462,6 +496,14 @@ Returns number of options which contained.
     
Return value

     
Number of options which contained.

 

+
 typeOf

+
ACElement_t typeOf(void)
+

+Returns type of AutoConnectElement.
+

+    
Return value

+    
AC_Select

+

 
 value

 
const String& value(void) const;
 

@@ -481,20 +523,26 @@ Returns current selected option of the select list.
     
uriDestination URI.

 

 
 Public member variables

+
 enable

+
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
+

+    
Type

+    
boolean

+

 
 name

 
The element name.
 

     
Type

     
String

 

-
 value

-
The name of the submit button. It will also be the label of the button.
+
 uri

+
Destination URI.
 

     
Type

     
String

 

-
 uri

-
Destination URI.
+
 value

+
The name of the submit button. It will also be the label of the button.
 

     
Type

     
String

@@ -520,14 +568,20 @@ Returns type of AutoConnectElement.
     
formatA pointer to a null-terminated multibyte string specifying how to interpret the value. It specifies the conversion format when outputting values. The format string conforms to C-style printf library functions

 

 
 Public member variables

-
 name

-
The element name.
+
 enable

+
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
+

+    
Type

+    
boolean

+

+
 format

+
The conversion format when outputting values. The format string conforms to C-style printf library functions.
 

     
Type

     
String

 

-
 value

-
A content string of the text element.
+
 name

+
The element name.
 

     
Type

     
String

@@ -538,8 +592,8 @@ Returns type of AutoConnectElement.
     
Type

     
String

 

-
 format

-
The conversion format when outputting values. The format string conforms to C-style printf library functions.
+
 value

+
A content string of the text element.
 

     
Type

     
String

diff --git a/docs/changelog.html b/docs/changelog.html
index 39eed22..a5cca0d 100644
--- a/docs/changelog.html
+++ b/docs/changelog.html
@@ -17,10 +17,11 @@
         }
       })
     }
-  })   Skip to content 
Change log
[0.9.9] May 25, 2019

+  })   Skip to content 
Change log
[0.9.9] May 25, 2019

 
    
 
  • Supports ESP8266 Arduino core 2.5.2.
    • 
 
  • Menu text/background color can be statically customized.
    • 
+
  • Added the enable  attribute to the AutoConnectElements. This attribute gives dynamically change to the element activation during the sketch executing.
    • 
 
  • Added ID attribute to HTML tag generated from AutoConnectText.
    • 
 
  • Fixed the input box layout collapsed.
    • 
 
  • Fixed that the decoration of AutoConnectButton was disabled.
    • 
@@ -47,7 +48,7 @@
 
    [0.9.7] Jan. 25, 2019
    
 
+
    Typical color schemes
    
 
    Here are some color schemes picked up.
    
-
    Indigo
    
+
     Indigo
    
 
    #define AUTOCONNECT_MENUCOLOR_TEXT        "#ffa500"
 #define AUTOCONNECT_MENUCOLOR_BACKGROUND  "#1a237e"
 #define AUTOCONNECT_MENUCOLOR_ACTIVE      "#283593"
 
    
 
 
    
-
    Dim-gray
    
+
     Dim-gray
    
 
    #define AUTOCONNECT_MENUCOLOR_TEXT        "#fffacd"
 #define AUTOCONNECT_MENUCOLOR_BACKGROUND  "#696969"
 #define AUTOCONNECT_MENUCOLOR_ACTIVE      "#808080"
 
    
 
 
    
-
    Brown
    
+
     Brown
    
 
    #define AUTOCONNECT_MENUCOLOR_TEXT        "#e6e6fa"
 #define AUTOCONNECT_MENUCOLOR_BACKGROUND  "#3e2723"
 #define AUTOCONNECT_MENUCOLOR_ACTIVE      "#4e342e"
diff --git a/docs/search/search_index.json b/docs/search/search_index.json
index 4583c63..4516b74 100644
--- a/docs/search/search_index.json
+++ b/docs/search/search_index.json
@@ -1 +1 @@
-{"config":{"lang":["en"],"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"index.html","text":"AutoConnect for ESP8266/ESP32 \u00b6 An Arduino library for ESP8266/ESP32 WLAN configuration at run time with web interface. Overview \u00b6 To the dynamic configuration for joining to WLAN with SSID and PSK accordingly. It an Arduino library united with ESP8266WebServer class for ESP8266 or WebServer class for ESP32. Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi connection. With this library to make a sketch easily which connects from ESP8266/ESP32 to the access point at runtime by the web interface without hard-coded SSID and password. No need pre-coded SSID & password \u00b6 It is no needed hard-coding in advance the SSID and Password into the sketch to connect between ESP8266/ESP32 and WLAN. You can input SSID & Password from a smartphone via the web interface at runtime. Simple usage \u00b6 AutoConnect control screen will be displayed automatically for establishing new connections. It aids by the captive portal when vested the connection cannot be detected. By using the AutoConnect menu , to manage the connections convenient. Store the established connection \u00b6 The connection authentication data as credentials are saved automatically in EEPROM of ESP8266/ESP32 and You can select the past SSID from the AutoConnect menu . Easy to embed in \u00b6 AutoConnect can be placed easily in your sketch. It's \" begin \" and \" handleClient \" only. Lives with your sketches \u00b6 The sketches which provide the web page using ESP8266WebServer there is, AutoConnect will not disturb it. AutoConnect can use an already instantiated ESP8266WebServer object, or itself can assign it. This effect also applies to ESP32. The corresponding class for ESP32 will be the WebServer. Easy to add the custom Web pages ENHANCED w/v0.9.7 \u00b6 You can easily add your owned web pages that can consist of representative HTML elements and invoke them from the menu. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD. Installation \u00b6 Requirements \u00b6 Supported hardware \u00b6 Generic ESP8266 modules (applying the ESP8266 Community's Arduino core) Adafruit HUZZAH ESP8266 (ESP-12) ESP-WROOM-02 Heltec WiFi Kit 8 NodeMCU 0.9 (ESP-12) / NodeMCU 1.0 (ESP-12E) Olimex MOD-WIFI-ESP8266 SparkFun Thing SweetPea ESP-210 ESP32Dev Board (applying the Espressif's arduino-esp32 core) SparkFun ESP32 Thing WEMOS LOLIN D32 Ai-Thinker NodeMCU-32S Heltec WiFi Kit 32 M5Stack And other ESP8266/ESP32 modules supported by the Additional Board Manager URLs of the Arduino-IDE. About flash size on the module The AutoConnect sketch size is relatively large. Large flash capacity is necessary. 512Kbyte (4Mbits) flash inclusion module such as ESP-01 is not recommended. Required libraries \u00b6 AutoConnect requires the following environment and libraries. Arduino IDE The current upstream at the 1.8 level or later is needed. Please install from the official Arduino IDE download page . This step is not required if you already have a modern version. ESP8266 Arduino core AutoConnect targets sketches made on the assumption of ESP8266 Community's Arduino core . Stable 2.4.0 or higher required and the latest release is recommended. Install third-party platform using the Boards Manager of Arduino IDE. Package URL is http://arduino.esp8266.com/stable/package_esp8266com_index.json ESP32 Arduino core Also, to apply AutoConnect to ESP32, the arduino-esp32 core provided by Espressif is needed. Stable 1.0.1 or required and the latest release is recommended. Install third-party platform using the Boards Manager of Arduino IDE. You can add multiple URLs into Additional Board Manager URLs field, separating them with commas. Package URL is https://dl.espressif.com/dl/package_esp32_index.json for ESP32. Additional library (Required) The PageBuilder library to build HTML for ESP8266WebServer is needed. To install the PageBuilder library into your Arduino IDE, you can use the Library Manager . Select the board of ESP8266 series in the Arduino IDE, open the library manager and search keyword ' PageBuilder ' with the topic ' Communication ', then you can see the PageBuilder . The latest version is required 1.3.3 later . 1 Additional library (Optional) By adding the ArduinoJson library, AutoConnect will be able to handle the custom Web pages described with JSON. Since AutoConnect v0.9.7 you can insert user-owned web pages that can consist of representative HTML elements as styled TEXT, INPUT, BUTTON, CHECKBOX, SELECT, SUBMIT and invoke them from the AutoConnect menu. These HTML elements can be added by sketches using the AutoConnect API. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD. ArduinoJson is required to use this feature. 2 AutoConnect can work with ArduinoJson both version 5 and version 6 . Install the AutoConnect \u00b6 Clone or download from the AutoConnect GitHub repository . When you select Download, you can import it to Arduino IDE immediately. After downloaded, the AutoConnect-master.zip file will be saved in your download folder. Then in the Arduino IDE, navigate to \"Sketch > Include Library\" . At the top of the drop down list, select the option to \"Add .ZIP Library...\" . Details for Arduino official page . Supported by Library manager. AutoConnect was added to the Arduino IDE library manager. It can be used with the PlatformIO library also. window.onload = function() { Gifffer(); }; Since AutoConnect v0.9.8, PageBuilder v1.3.3 later is required. \u21a9 Using the AutoConnect API natively allows you to sketch custom Web pages without JSON. \u21a9","title":"Overview"},{"location":"index.html#autoconnect-for-esp8266esp32","text":"An Arduino library for ESP8266/ESP32 WLAN configuration at run time with web interface.","title":"AutoConnect for ESP8266/ESP32"},{"location":"index.html#overview","text":"To the dynamic configuration for joining to WLAN with SSID and PSK accordingly. It an Arduino library united with ESP8266WebServer class for ESP8266 or WebServer class for ESP32. Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi connection. With this library to make a sketch easily which connects from ESP8266/ESP32 to the access point at runtime by the web interface without hard-coded SSID and password.","title":"Overview"},{"location":"index.html#no-need-pre-coded-ssid-password","text":"It is no needed hard-coding in advance the SSID and Password into the sketch to connect between ESP8266/ESP32 and WLAN. You can input SSID & Password from a smartphone via the web interface at runtime.","title":" No need pre-coded SSID & password"},{"location":"index.html#simple-usage","text":"AutoConnect control screen will be displayed automatically for establishing new connections. It aids by the captive portal when vested the connection cannot be detected. By using the AutoConnect menu , to manage the connections convenient.","title":" Simple usage"},{"location":"index.html#store-the-established-connection","text":"The connection authentication data as credentials are saved automatically in EEPROM of ESP8266/ESP32 and You can select the past SSID from the AutoConnect menu .","title":" Store the established connection"},{"location":"index.html#easy-to-embed-in","text":"AutoConnect can be placed easily in your sketch. It's \" begin \" and \" handleClient \" only.","title":" Easy to embed in"},{"location":"index.html#lives-with-your-sketches","text":"The sketches which provide the web page using ESP8266WebServer there is, AutoConnect will not disturb it. AutoConnect can use an already instantiated ESP8266WebServer object, or itself can assign it. This effect also applies to ESP32. The corresponding class for ESP32 will be the WebServer.","title":" Lives with your sketches"},{"location":"index.html#easy-to-add-the-custom-web-pages-enhanced-wv097","text":"You can easily add your owned web pages that can consist of representative HTML elements and invoke them from the menu. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD.","title":" Easy to add the custom Web pages ENHANCED w/v0.9.7"},{"location":"index.html#installation","text":"","title":"Installation"},{"location":"index.html#requirements","text":"","title":"Requirements"},{"location":"index.html#supported-hardware","text":"Generic ESP8266 modules (applying the ESP8266 Community's Arduino core) Adafruit HUZZAH ESP8266 (ESP-12) ESP-WROOM-02 Heltec WiFi Kit 8 NodeMCU 0.9 (ESP-12) / NodeMCU 1.0 (ESP-12E) Olimex MOD-WIFI-ESP8266 SparkFun Thing SweetPea ESP-210 ESP32Dev Board (applying the Espressif's arduino-esp32 core) SparkFun ESP32 Thing WEMOS LOLIN D32 Ai-Thinker NodeMCU-32S Heltec WiFi Kit 32 M5Stack And other ESP8266/ESP32 modules supported by the Additional Board Manager URLs of the Arduino-IDE. About flash size on the module The AutoConnect sketch size is relatively large. Large flash capacity is necessary. 512Kbyte (4Mbits) flash inclusion module such as ESP-01 is not recommended.","title":"Supported hardware"},{"location":"index.html#required-libraries","text":"AutoConnect requires the following environment and libraries. Arduino IDE The current upstream at the 1.8 level or later is needed. Please install from the official Arduino IDE download page . This step is not required if you already have a modern version. ESP8266 Arduino core AutoConnect targets sketches made on the assumption of ESP8266 Community's Arduino core . Stable 2.4.0 or higher required and the latest release is recommended. Install third-party platform using the Boards Manager of Arduino IDE. Package URL is http://arduino.esp8266.com/stable/package_esp8266com_index.json ESP32 Arduino core Also, to apply AutoConnect to ESP32, the arduino-esp32 core provided by Espressif is needed. Stable 1.0.1 or required and the latest release is recommended. Install third-party platform using the Boards Manager of Arduino IDE. You can add multiple URLs into Additional Board Manager URLs field, separating them with commas. Package URL is https://dl.espressif.com/dl/package_esp32_index.json for ESP32. Additional library (Required) The PageBuilder library to build HTML for ESP8266WebServer is needed. To install the PageBuilder library into your Arduino IDE, you can use the Library Manager . Select the board of ESP8266 series in the Arduino IDE, open the library manager and search keyword ' PageBuilder ' with the topic ' Communication ', then you can see the PageBuilder . The latest version is required 1.3.3 later . 1 Additional library (Optional) By adding the ArduinoJson library, AutoConnect will be able to handle the custom Web pages described with JSON. Since AutoConnect v0.9.7 you can insert user-owned web pages that can consist of representative HTML elements as styled TEXT, INPUT, BUTTON, CHECKBOX, SELECT, SUBMIT and invoke them from the AutoConnect menu. These HTML elements can be added by sketches using the AutoConnect API. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD. ArduinoJson is required to use this feature. 2 AutoConnect can work with ArduinoJson both version 5 and version 6 .","title":"Required libraries"},{"location":"index.html#install-the-autoconnect","text":"Clone or download from the AutoConnect GitHub repository . When you select Download, you can import it to Arduino IDE immediately. After downloaded, the AutoConnect-master.zip file will be saved in your download folder. Then in the Arduino IDE, navigate to \"Sketch > Include Library\" . At the top of the drop down list, select the option to \"Add .ZIP Library...\" . Details for Arduino official page . Supported by Library manager. AutoConnect was added to the Arduino IDE library manager. It can be used with the PlatformIO library also. window.onload = function() { Gifffer(); }; Since AutoConnect v0.9.8, PageBuilder v1.3.3 later is required. \u21a9 Using the AutoConnect API natively allows you to sketch custom Web pages without JSON. \u21a9","title":"Install the AutoConnect"},{"location":"acelements.html","text":"The elements for the custom Web pages \u00b6 Representative HTML elements for making the custom Web page are provided as AutoConnectElements. AutoConnectButton : Labeled action button AutoConnectCheckbox : Labeled checkbox AutoConnectElement : General tag AutoConnectFile : File uploader AutoConnectInput : Labeled text input box AutoConnectRadio : Labeled radio button AutoConnectSelect : Selection list AutoConnectSubmit : Submit button AutoConnectText : Style attributed text Layout on a custom Web page \u00b6 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 \u00b6 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 \u00b6 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 AutoConnectElement element(\"element\", \"
    \"); On the page: Constructor \u00b6 AutoConnectElement( const char * name, const char * value) name \u00b6 Each element has a name. The name is the String data type. You can identify each element by the name to access it with sketches. value \u00b6 The value is the string which is a source to generate an HTML code. Characteristics of Value vary depending on the element. The value of AutoConnectElement is native HTML code. A string of value is output as HTML as it is. type \u00b6 The type indicates the type of the element and represented as the ACElement_t enumeration type in the sketch. Since AutoConnectElement also acts as a variant of other elements, it can be applied to handle elements collectively. At that time, the type can be referred to by the typeOf() function. The following example changes the font color of all AutoConnectText elements of a custom Web page to gray. AutoConnectAux customPage; AutoConnectElementVT & elements = customPage.getElements(); for (AutoConnectElement & elm : elements) { if (elm.typeOf() == AC_Text) { AutoConnectText & text = reinterpret_cast < AutoConnectText &> (elm); text.style = \"color:gray;\" ; } } The enumerators for ACElement_t are as follows: AutoConnectButton: AC_Button AutoConnectCheckbox: AC_Checkbox AutoConnectElement: AC_Element AutoConnectFile: AC_File AutoConnectInput: AC_Input AutoConnectRadio: AC_Radio AutoConnectSelect: AC_Select AutoConnectSubmit: AC_Submit AutoConnectText: AC_Text Uninitialized element: AC_Unknown Furthermore, to convert an entity that is not an AutoConnectElement to its native type, you must re-interpret that type with c++. Or, you can be coding the sketch more easily with using the as function. AutoConnectAux customPage; AutoConnectElementVT & elements = customPage.getElements(); for (AutoConnectElement & elm : elements) { if (elm.type() == AC_Text) { AutoConnectText & text = customPage[elm.name].as < AutoConnectText > (); text.style = \"color:gray;\" ; // Or, it is also possible to write the code further reduced as follows. // customPage[elm.name].as().style = \"color:gray;\"; } } AutoConnectButton \u00b6 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: Constructor \u00b6 AutoConnectButton( const char * name, const char * value, const String & action) name \u00b6 It is the name of the AutoConnectButton element and matches the name attribute of the button 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 button tag. action \u00b6 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\"(  )\" ; 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