(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}Email address as characters@characters.domain:[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$
Email address as characters@characters.domain:[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}
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])
Host name of the internet
+Host name of the internet:(([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])
Date (MM-DD-YYYY)
+Date (MM/DD/YYYY) as range 1900-2099:(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d
Twitter account:^@?(\w){1,15}$
ACElement ( name [ , value ] )
ACButton ( name [ , value ] [ , action ] )
ACCheckbox ( name [ , value ] [ , label ] [ , true | false ] )
-ACInput ( name [ , value ] [ , label ] [ , placeholder ] )
+ACInput ( name [ , value ] [ , label ] [ , pattern ] [ , placeholder ] )
ACRadio ( name [ , values ] [ , label ] [ , AC_Horizontal | AC_Vertical ] [ , checked ] )
ACSelect ( name [ , options ] [ , label ] )
ACSubmit ( name [ , value ] [ , uri ] )
diff --git a/docs/acintro.html b/docs/acintro.html index c1e771e..d310e19 100644 --- a/docs/acintro.html +++ b/docs/acintro.html @@ -818,26 +818,25 @@Custom Web pages with AutoConnect
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.
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 'aux', binds to an AutoConnect object named 'portal'. It's the basic procedure for configuring the custom Web page. Also, further explanation of AutoConnectElements is the documentation.
+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¶
-
-
- Custom Web pages as AutoConnectAux are integrated into the AutoConnect menu. AutoConnectAux object contains member variables which are URI and the title. 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 would be displayed at the bottom of the AutoConnect menu as the left figure.1 It is a hyperlink as URI you given to the custom Web page and taps it will display a page composed of AutoConnectElements. Also, a title will display in the upper left corner of the page, which includes a hyperlink to the AutoConnect statistics screen.
+ -
+ AutoConnect integrates custom Web page objects into menus as AutoConnectAux. The AutoConnectAux object contains URI and title as member variables and has an indicator to display in 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 would be displayed in the AutoConnect menu as the left figure.1 It is a hyperlink to a custom Web page which will be displayed tapped it.
Multiple custom Web pages¶
-You can create multiple custom Web pages and specify which pages you can invoke from the menu.
-In the sketch below, it shows the sequence of codes to integrate three custom Web pages into one and embed them into the menu.
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.
-
-
In the above code, the third parameter of 'aux2' is false. 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. The sketch of this animation is written to transition to 'aux2' by the utility of the AutoConnectSubmit element owned by 'aux1'.2
An 'aux2' page transitions only from the '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 utility of the third parameter of the AutoConnectAux constructor is that.
+ In the above code, the third parameter of aux2 is false. The third parameter of the AutoConnectAux constructor is an indicator for whether it's shown to the AutoConnect menu. Right animation is an execution result of the above code. You will see that the menu applies only two items for three custom Web pages. The sketch of this animation is written to transition to aux2 by the utility of the AutoConnectSubmit element owned by aux1.2
The aux2 page transitions only from the aux1 page. As shown in mqttRSSI in the library example, its page replies the saving result for the parameters entered on the previous page. It can not be invoked directly from the menu and want to hide them with AutoConnect menu items. The utility of the third parameter of the AutoConnectAux constructor is that.
Basic steps to use custom Web pages¶
@@ -852,8 +851,8 @@ In the sketch below, it shows the sequence of codes to integrate three custom WeWrite the custom Web page with JSON¶
-You can write the custom Web page in JSON without using sketch codes.3 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 steps of the above but this way 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 footnote2 is equivalent.
+You can write the custom Web page in JSON without using sketch codes.3 It is possible to describe the entire page in JSON and can be described for each element also. The JSON document can be saved in SPIFFS or SD and read using AutoConnect's load function. you can reduce the steps of the basic procedure with this approach, but this way consumes a lot of memory. +The following JSON code and sketch will execute the custom Web page as an example in the above figure. That is, the sketch of this code and footnote2 is equivalent.
custom_page.json
[ { @@ -930,7 +929,7 @@ The following JSON code and sketch will execute the custom Web page as the examp }
Passing parameters with sketches and custom Web pages¶
-A sketch can access variables of AutoConnectElements in the custom Web page. The value entered into the AutoConnectElements on the page is stored to the member variables of the element by AutoConnect whenever GET / POST transmission occurs. Your sketches can get these values with the GET / POST request handler. If you assign a value to an element before a request to the page occurs, its value will appear as the initial value when the page is displayed. Details are explained in the Parameter handling.
+A sketch can access variables of AutoConnectElements on the custom Web page. The value entered into the AutoConnectElements is stored to the member variables of the element by AutoConnect whenever GET / POST transmission occurs. Your sketches can get these values with the request handler which will be registered by AutoConnect::on function. And if you assign a value to an element before a request to the page occurs, its value will appear as the initial value when the page is displayed. The details are explained in the Custom field data handling section.
)\" ; 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