diff --git a/README.md b/README.md index 56a7349..2cb239b 100644 --- a/README.md +++ b/README.md @@ -100,6 +100,7 @@ Full documentation is available on https://Hieromon.github.io/AutoConnect, some - Supports ESP8266 Arduino core 2.5.2. - Menu text/background color can be statically customized. refer to the [Custom colorized](https://hieromon.github.io/AutoConnect/colorized.html) for the detailed specification for the menu colorizing. - Added ID attribute to HTML tag generated from AutoConnectText. +- Added the enable attribute to the AutoConnectElements. - Fixed the input box layout collapsed. - Fixed that the decoration of AutoConnectButton was disabled. - Fixed that the value remains even after clearing the option with AutoConnectSelect. diff --git a/mkdocs/achandling.md b/mkdocs/achandling.md index ea0f04c..07021ea 100644 --- a/mkdocs/achandling.md +++ b/mkdocs/achandling.md @@ -126,7 +126,7 @@ AutoConnectText& text2 = aux["caption"].as(); ``` !!! note "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](apielements.md#ast62) 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](apielements.md#ast62) function. ```cpp AutoConnectButton& AutoConnectElement::as() AutoConnectCheckbox& AutoConnectElement::as() @@ -145,6 +145,64 @@ To get all the AutoConnectElements in an AutoConnectAux object use the [**getEle 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: + +```cpp hl_lines="30 31 32 33" +#include +#include +#include + +static const char AUX[] PROGMEM = R(" +{ + "name" : "aux", + "uri" : "/aux", + "menu" : true, + "element" : [ + { + "name": "input", + "type": "ACInput", + "label": "Input" + }, + { + "name": "send", + "type": "ACSubmit", + "uri": "/send" + } + ] +} +"); + +AutoConnect portal; +AutoConnectAux page; + +String onPage(AutoConectAux& aux, PageArgument& args) { + AutoConnectSubmit& send = aux["send"].as(); + 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(); +} +``` + +!!! hint "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](apiaux.md#on) 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](acjson.md). However, it can not save all AutoConnectElements contained in the page as a custom Web page. (ie. AutoConnectAux) diff --git a/mkdocs/apielements.md b/mkdocs/apielements.md index c80abcd..f85f473 100644 --- a/mkdocs/apielements.md +++ b/mkdocs/apielements.md @@ -14,31 +14,39 @@ AutoConnectButton(const char* name = "", const char* value = "", const String& a ### Public member variables -#### name +#### action -The element name. +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 +[^1]:JavaScript can be inserted into a custom Web page using AutoConnectElement. -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**
-
String
+
boolean
-#### action +#### name -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] +The element name.
**Type**
String
-[^1]:JavaScript can be inserted into a custom Web page using AutoConnectElement. +#### value + +Value of the element. +
+
**Type**
+
String
+
### Public member functions @@ -70,20 +78,20 @@ Returns type of AutoConnectElement. ### Public member variables -#### name +#### checked -The element name. +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 +#### enable -Value of the element. It becomes a value attribute of an HTML `#!html ` tag. +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 @@ -94,12 +102,20 @@ A label is an optional string. A label is always arranged on the right side of t
String
-#### checked +#### name -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. +The element name.
**Type**
-
Boolean
+
String
+
+ +#### value + +Value of the element. It becomes a value attribute of an HTML `#!html ` tag. +
+
**Type**
+
String
### Public member functions @@ -130,6 +146,14 @@ AutoConnectElement(const char* name = "", const char* value = "") ### 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. @@ -190,30 +214,46 @@ AutoConnectFile(const char* name = "", const char* value = "", const char* label ### Public member variables -#### name +#### enable -The element name. +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 `#!html