From fea9616f638c8303a93a1658d3d49127d6bab0e0 Mon Sep 17 00:00:00 2001 From: Hieromon Ikasamo Date: Sun, 24 Feb 2019 00:41:01 +0900 Subject: [PATCH] Fixed the folder path of images --- docs/acelements.html | 16 ++++++------- docs/achandling.html | 10 ++++---- docs/acintro.html | 12 +++++----- docs/acjson.html | 4 ++-- docs/advancedusage.html | 8 +++---- docs/basicusage.html | 2 +- docs/datatips.html | 33 ++++++++++++++------------ docs/faq.html | 2 +- docs/gettingstarted.html | 8 +++---- docs/howtoembed.html | 24 +++++++++---------- docs/index.html | 14 ++++++------ docs/menu.html | 14 ++++++------ docs/menuize.html | 4 ++-- docs/search/search_index.json | 2 +- docs/sitemap.xml | 42 +++++++++++++++++----------------- docs/sitemap.xml.gz | Bin 358 -> 358 bytes docs/wojson.html | 2 +- 17 files changed, 100 insertions(+), 97 deletions(-) diff --git a/docs/acelements.html b/docs/acelements.html index 7bc6d03..92638ad 100644 --- a/docs/acelements.html +++ b/docs/acelements.html @@ -1561,7 +1561,7 @@

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", "<hr>");

-

On the page:

+

On the page:

Constructor

AutoConnectElement(const char* name, const char* value)
@@ -1600,7 +1600,7 @@

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:

+

On the page:

Constructor

AutoConnectButton(const char* name, const char* value, const String& action)
@@ -1628,7 +1628,7 @@

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:

+

On the page:

Constructor

AutoConnectCheckbox(const char* name, const char* value, const char* label, const bool checked)
@@ -1646,7 +1646,7 @@ Only will be displayed if a label is not specified

AutoConnectInput generates an HTML <input type="text"> tag and a <label> tag. It can also have a placeholder. The value of the input box is passed to the destination in the query string and can be retrieved programmatically. You can also update from the sketches.

Sample
AutoConnectInput input("input", "", "Server", "MQTT broker server");

-

On the page:

+

On the page:

Constructor

AutoConnectInput(const char* name, const char* value, const char* label, const char* pattern, const char* placeholder)
@@ -1683,7 +1683,7 @@ Only will be displayed if a label is not specified

AutoConnectRadio generates few HTML <input type="radio"> tags as grouped and the same number of <label> tags. AutoConnectRadio can keep the value of a radio button as a collection. The grouped values will be placed in the custom Web page to select only one exclusively.

Sample
AutoConnectRadio radio("radio", { "30 sec.", "60 sec.", "180 sec." }, "Update period", AC_Vertical, 1);

-

On the page:

+

On the page:

Constructor

AutoConnectRadio(const char* name, std::vector<String> const& values, const char* label, const ACArrange_t order, const uint8_t checked)
@@ -1707,7 +1707,7 @@ Only will be displayed if a label is not specified

AutoConnectSelect generates an HTML <select> tag (drop-down list) and few <option> tags.

Sample
AutoConnectSelect select("select", { String("Europe/London"), String("Europe/Berlin"), String("Europe/Helsinki"), String("Europe/Moscow"), String("Asia/Dubai") }, "Select TZ name");

-

On the page:

+

On the page:

Constructor

AutoConnectSelect(const char* name, std::vector<String> const& options, const char* label)
@@ -1722,7 +1722,7 @@ Only will be displayed if a label is not specified

AutoConnectSubmit generates an HTML <input type="button"> tag attached onclick attribute. The native code of the onclick attribute is the submission of the form with the POST method.

Sample
AutoConnectSubmit submit("submit", "Save", "/mqtt_save");

-

On the page:

+

On the page:

Constructor

AutoConnectSubmit(const char* name, const char* value, const char* uri)
@@ -1739,7 +1739,7 @@ Only will be displayed if a label is not specified

AutoConnectText generates an HTML <div> tag. A style attribute will be attached if a style parameter is passed.

Sample
AutoConnectText text("text", "Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak", "font-family:serif;color:#4682b4;");

-

On the page:

+

On the page:

Constructor

AutoConnectText(const char* name, const char* value, const char* style)
diff --git a/docs/achandling.html b/docs/achandling.html index 4a99b3f..74f8649 100644 --- a/docs/achandling.html +++ b/docs/achandling.html @@ -1085,7 +1085,7 @@

AutoConnectElementVT is a predefined type for it and can use methods of std::vector<std::reference_wrapper>.

Loading & saving AutoConnectElements with JSON

AutoConnect supports reading the custom Web page definitions written in JSON and also supports loading and saving of 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)

-

+

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 section JSON document structure for AutoConnectAux.

@@ -1191,7 +1191,7 @@

Custom field data handling

A sketch can access variables of AutoConnectElements in the custom Web page. The value entered into the AutoConnectElements on the page is stored in the member variable of each element by AutoConnect whenever GET/POST transmission occurs.

The following diagram shows the flow of the input values of a custom Web page into a sketch and is the basis for actions to manipulate the values of custom Web pages using sketches.

-

+

Where to pick up the values

A sketch composed of handlers can receive the value of AutoConnectElements entered in a custom Web page after sending, but that handler is different from the page where the value was entered. It is necessary to be aware that can accept the entered values by the next page handler after the transition.

Usually, two ways to retrieve entered values we have. One is to use the ESP8266WebServer::arg (or WebServer::arg for ESP32) function in the on handler attached by ESP8266WebServer (WebServer w/ESP32 also).

@@ -1475,7 +1475,7 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh }
- It's shown as like:

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

{
@@ -1494,8 +1494,8 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
- - + +

Convert data to actually type

diff --git a/docs/acintro.html b/docs/acintro.html index dd65358..8af1d65 100644 --- a/docs/acintro.html +++ b/docs/acintro.html @@ -818,27 +818,27 @@

Custom Web pages with AutoConnect

What it is

-

+

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

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.

-

+

The above figure shows a code sequence that declares AutoConnectElements and put in the AutoConnectAux container and integrates those into AutoConnect. It declares two text elements named header and caption, adds them to the AutoConnectAux object as aux, binds to an AutoConnect object named portal. This sequence is the basic procedure for creating custom Web pages with the sketch. Also, further explanation of AutoConnectElements is the documentation.

Custom Web pages in AutoConnect menu

Multiple custom Web pages

You can create multiple custom Web pages and specify pages that can be called from the menu. The following sketch shows a code sequence for integrating three custom Web pages into one and embedding them in a menu.

-

+

Basic steps to use custom Web pages

diff --git a/docs/acjson.html b/docs/acjson.html index 7d67d93..7318bc6 100644 --- a/docs/acjson.html +++ b/docs/acjson.html @@ -1051,9 +1051,9 @@

You can embed custom Web pages written in JSON into AutoConnect without AutoConnectAux & AutoConnectElements declaration. Custom Web page declaration by JSON can embed in the sketch as a fixed string or can store in the external file such as SPIFFS for stream loading. Also, you can also load and save AutoConnectElements objects individually.1

By providing the following JSON document to AutoConnect, you can include the custom Web page like the below:

-
+
-

+

A JSON document for AutoConnect can contain the custom Web page multiple. You can further reduce the sketch process by loading multiple pages of JSON document at once.

Need ArduinoJson v5

diff --git a/docs/advancedusage.html b/docs/advancedusage.html index 2da30b0..f43fa4c 100644 --- a/docs/advancedusage.html +++ b/docs/advancedusage.html @@ -1222,9 +1222,9 @@ Also, if you want to stop AutoConnect completely when the captive portal is time

Executing the above sketch will rewrite the menu title for the FSBrowser as the below.

-
+
-

+

Combination with mDNS

With mDNS library, you can access to ESP8266 by name instead of IP address after connection. The sketch can start the MDNS responder after AutoConnect::begin.

#include <ESP8266WiFi.h>
@@ -1373,7 +1373,7 @@ The above example does not connect to WiFi until TRIGGER_PIN goes LOW. When TRIG
 
 Use with the PageBuilder library

 
In ordinary, the URL handler will respond the request by sending some HTML. PageBuilder library is HTML assembly aid. it can handle predefined HTML as like a template and simplify an HTML string assemble logic, and also the generated HTML send automatically.

 
An example sketch used with the PageBuilder as follows and it explains how it aids for the HTML generating. Details for Github repository.

-

+

 
Configuration functions

 
 Configuration for Soft AP and captive portal

 
AutoConnect will activate SoftAP at failed the first WiFi.begin. It SoftAP settings are stored in AutoConnectConfig as the following parameters. The sketch could be configured SoftAP using these parameters, refer the AutoConnectConfig API for details.

@@ -1404,7 +1404,7 @@ The above example does not connect to WiFi until TRIGGER_PIN goes LOW. When TRIG

Assign user sketch's home path

HOME for returning to the user's sketch homepage will display at the bottom of the AutoConnect menu. It could be set using the AutoConnect::home function.

-

+

Relocate the AutoConnect home path

A home path of AutoConnect is /_ac by default. You can access from the browser with http://IPADDRESS/_ac. You can change the home path by revising AUTOCONNECT_URI macro in the include header file as AutoConnect.h.

#define AUTOCONNECT_URI         "/_ac"
diff --git a/docs/basicusage.html b/docs/basicusage.html
index f386e03..d43baee 100644
--- a/docs/basicusage.html
+++ b/docs/basicusage.html
@@ -922,7 +922,7 @@
                 
Simple usage

 
 Embed to the sketches

 
How embed the AutoConnect to the sketches you have. Most simple approach to applying AutoConnect for the existing sketches, follow the below steps. The below sketch is for ESP8266. For ESP32, replace ESP8266WebServer with WebServer and ESP8266WiFi.h with WiFi.h respectively.

-

+

Here, represent examples the typical regular expression for the input validation.

-

URL

+

URL

^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
-

DNS hostname

+

DNS hostname

^(([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])$
-

email address 1

+

email address 2

^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$
-

IP Address

+

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])$
-

Date as MM/DD/YYYY 2

+

Date as MM/DD/YYYY 3

^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d$
@@ -1043,10 +1043,13 @@
  1. -

    This regular expression does not fully support the format of the e-mail address requested in RFC5322. ↩↩

    +

    The ssanf library function cannot be used with the old Arduino core. ↩

  2. -

    This regular expression does not consider semantic constraints. It is not possible to detect errors that do not exist as actual dates. ↩

    +

    This regular expression does not fully support the format of the e-mail address requested in RFC5322. ↩

    +
    3. +
  3. +

    This regular expression does not consider semantic constraints. It is not possible to detect errors that do not exist as actual dates. ↩

diff --git a/docs/faq.html b/docs/faq.html index 9985518..0912750 100644 --- a/docs/faq.html +++ b/docs/faq.html @@ -1144,7 +1144,7 @@ For AutoConnect menus to work properly, call
You can interactively check the WiFi state of ESP8266.

Please try ESPShaker. It is ESP8266 interactive serial command processor.

-

+

Does not response from /_ac.

Probably WiFi.begin failed with the specified SSID. Activating the debug printing will help you to track down the cause.

diff --git a/docs/gettingstarted.html b/docs/gettingstarted.html index 3f954d3..06d9059 100644 --- a/docs/gettingstarted.html +++ b/docs/gettingstarted.html @@ -832,19 +832,19 @@

Run at first

After about 30 seconds, if the ESP8266 cannot connect to nearby Wi-Fi spot, you pull out your smartphone and open Wi-Fi settings from the Settings Apps. You can see the esp8266ap 1 in the list of "CHOOSE A NETWORK...". Then tap the esp8266ap and enter password 12345678, a something screen pops up automatically as shown below.

-

+

This is the AutoConnect statistics screen. This screen displays the current status of the established connection, WiFi mode, IP address, free memory size, and etc. Also, the hamburger icon is the control menu of AutoConnect seems at the upper right. By tap the hamburger icon, the control menu appears as the below.

Join to the new access point

Here, tap "Configure new AP" to connect the new access point then the SSID configuration screen would be shown. Enter the SSID and Passphrase and tap apply to start connecting the access point.

-

+

Connection establishment

After connection established, the current status screen will appear. It is already connected to WLAN with WiFi mode as WIFI_AP_STA and the IP connection status is displayed there including the SSID. Then at this screen, you have two options for the next step.

For one, continues execution of the sketch while keeping this connection. You can access ESP8266 via browser through the established IP address after cancel to "Log in" by upper right on the screen.
Or, "RESET" can be selected. The ESP8266 resets and reboots. After that, immediately before the connection will be restored automatically with WIFI_STA mode.

-

+

Run for usually

The IP address of ESP8266 would be displayed on the serial monitor after connection restored. Please access its address from the browser. The "Hello, world" page will respond. It's the page that was handled by in the sketch with "on" function of ESP8266WebServer.

-

+

)\" ; 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