From e1815b82b6c3885b926ceb3370be797349ff6ca3 Mon Sep 17 00:00:00 2001 From: Hieromon Ikasamo Date: Wed, 9 Jan 2019 18:29:00 +0900 Subject: [PATCH] Under the work of v0.9.7 documentation --- README.md | 9 ++--- mkdocs/acelements.md | 76 +++++++++++++++++++++++++++++++---- mkdocs/images/accheckbox.png | Bin 0 -> 1221 bytes mkdocs/images/acelement.png | Bin 0 -> 238 bytes mkdocs/images/acinput.png | Bin 0 -> 2148 bytes mkdocs/images/acradio.png | Bin 0 -> 3007 bytes mkdocs/index.md | 1 + 7 files changed, 72 insertions(+), 14 deletions(-) create mode 100644 mkdocs/images/accheckbox.png create mode 100644 mkdocs/images/acelement.png create mode 100644 mkdocs/images/acinput.png create mode 100644 mkdocs/images/acradio.png diff --git a/README.md b/README.md index 445c7b8..8f8187d 100644 --- a/README.md +++ b/README.md @@ -40,12 +40,9 @@ You can easily add your own web screen that can consist of representative HTML e These HTML elements that make up the user-owned screen can be easily loaded from the JSON description stored in PROGMEM, SPIFFS or SD. -

-       - -                 - -

+ + + ## Supported hardware diff --git a/mkdocs/acelements.md b/mkdocs/acelements.md index 6e94cab..23db229 100644 --- a/mkdocs/acelements.md +++ b/mkdocs/acelements.md @@ -25,6 +25,11 @@ All AutoConnectElements placed on a custom Web page are included in one form. It AutoConnectElement is a base class for other element classes and has common attributes for all elements. It can also be used as a [variant](#variant-for-autoconnectelements) 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 ```cpp @@ -97,7 +102,7 @@ AutoConnectButton(const char* name, const char* value, const String& action) ### name -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. +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 @@ -127,6 +132,11 @@ ACElement(TextCopy, scCopyText); 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 ```cpp @@ -135,7 +145,7 @@ AutoConnectCheckbox(const char* name, const char* value, const char* label, cons ### name -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. +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 @@ -143,16 +153,22 @@ It becomes a value of the `value` attribute of an HTML input tag. ### label -A label is an optional string. If you specify a label, an `id` attribute is attached to the HTML `checkbox` tag and an HTML `label` tag is generated. Label tag and checkbox will combine by its id attribute. Labels are always placed on the right side of the checkbox. If you do not specify a label, only ☐ will be displayed. +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. +Only will be displayed if a label is not specified. ### checked -A checked is a Boolean value and indicates the checked status of the checkbox. The value of the checkbox element checked is packed in the query string and sent. +A checked is a Boolean value and indicates the checked status of the checkbox. The value of the checked checkbox element is packed in the query string and sent. ## AutoConnectInput AutoConnectInput genarates 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:
+ ### Constructor ```cpp @@ -161,14 +177,58 @@ AutoConnectInput(const char* name, const char* value, const char* label, const c ### name -It is the name of the AutoConnectInput element and matches the name attribute of the input tag. It also becomes the parameter name of the query string when submitted. +It is the `name` of the AutoConnectInput element and matches the name attribute of the input tag. It also becomes the parameter name of the query string when submitted. ### value +It becomes a string value of the `value` attribute of an HTML input tag. The text entered from the custom Web page will be grouped in the query string of the form submission and the string set before accessing the page will be displayed as the initial value. + +### label + +A `label` is an optional string. A label is always arranged on the right 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. + +### placeholdr +A placeholder is an option string. Specification of a placeholder will generate a `placeholder` attribute for the input tag. ## AutoConnectRadio +AutoConnectRadio genarates 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:
+ +### Constructor + +```cpp +AutoConnectRadio(const char* name, std::vector const& values, const char* label, const ACArrange_t order, const uint8_t checked) +``` + +### name + +It is the `name` of the AutoConnectRadio element and matches the name attribute of the input tags. It also becomes the parameter name of the query string when submitted. + +### values + +A `values` is an array of String type for the radio button options which as actually [std::vector](https://en.cppreference.com/w/cpp/container/vector). It is an initialization list can be used. The `input type="radio"` tags will be generated from each entry in the values, the amount of which is the same as the number of items in `values`. + +### 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`. Specification of a label will generate an HTML `label` tag with an `id` attribute. The radio buttons and the label are connected by the id attribute. + +### order + +A `order` specifies the orientation of the radio buttons. It is a value of type `ACArrange_t` and accepts one of the following: + +- **`AC_Horizontal`** : Horizontal arrangement. +- **`AC_Vertical`** : Vertical arrangement. + +A label is placed in the left or the top according to `order`. + +### checked + ## AutoConnectSelect ## AutoConnectSubmit @@ -177,11 +237,11 @@ It is the name of the AutoConnectInput element and matches the name attribute of ## How to coding for the elements -### Definition in sketch +### Define the elements in Sketches Each element can be defined by a macro. By using the macro, you can treat element names that are String types as variables in sketches.[^2] -[^2]: The square brackets in the syntax are optional parameters. The stroke is a selection parameter. +[^2]: The square brackets in the syntax are optional parameters, the stroke is a selection parameter, the bold fonts are literal. ACElement ( *name* \[ , *value* \] ) @@ -199,7 +259,7 @@ ACSubmit ( *name* \[ , *value* \] \[\[ , *value* \] \[ , *style* \] ) -### Variant for AutoConnectElements +### Variant for AutoConnectElements diff --git a/mkdocs/images/accheckbox.png b/mkdocs/images/accheckbox.png new file mode 100644 index 0000000000000000000000000000000000000000..10c410a086b5f11ab6836616cd4e5060ece2eae9 GIT binary patch literal 1221 zcmV;$1UmbPP)k9absf}a}|uUF)4JBNlDmf z(DbdmIQ}SoKYKr4zBzC=_qlWD-sc|9dG6>hS(ZPcLPZNSY6?`S#89CULxoBV6)G`Q z3>7hMZ*OsZeT|!&o3@t8WROfIQLELyoI?~v*zI&-0`&5{VF7V_6n^dwayvn)lOeC5?F+V~&oFNUYUzTJ291MVL$`lC$Qu z{8hzgxm?En{yqdjAW|I)g&;{1L{S9GvWl3`=j&(@0FX|n!7vQ8S}p8$J1UjRw@Pq& zdJ3b_i0SF+p4Y6?=}@Uu@b>oB_kJ%gFTrsfWLbvO=_Gq?#?HpRnnMiZ9*QV2HSglsjG)-a_iv`(iwqsJx&(Gm< zxc~rKtriT!v`PNL!h)ihEEbE{-QE3T-fpp2pw()L@^spVAP9MOI^3;>{M z8Xk`a>2!Lyh@sQzFgZE-Ek1vz;Cp&{!oU3_&dJQoOyAEK42GV@<@0$Q9v)(Re4OOK(#lK5zgE$RxTwGib`HM!Q#2Z_01+pw-ZEdY>&O{=CO5IgaaV{??o|Zd%PM+_u@LNP^wX*H)ZN%eoQunlCV`GEZqTB7p($Z4j?`+PQ#bSZU zWFoOf-O$L%i(P=vF< zBeIx*fm;}a85w5HkpK$zdAc};RNQ)dTT$qU0*}MR4Vz~j{3dtjeu1!x_<@7>7OZ_0 zwrBZbrF|!SE=6UtA2@6m#?Zm9V8`%?xr4vq2ar;*15zFQAEfTDZoF5$<(ks-oah59 zA6qQCR+ViQ`?svuFzKA+QjyuLesA~YZ&#|+Vf}aTEW3cbLk+_bAjR;J@d!JR{gF{X c{()^>Gn2Hm)hd(QK$kIiy85}Sb4q9e0B9psl>h($ literal 0 HcmV?d00001 diff --git a/mkdocs/images/acinput.png b/mkdocs/images/acinput.png new file mode 100644 index 0000000000000000000000000000000000000000..58eeeb7e5a06febddebf21f009535aa38acb42d1 GIT binary patch literal 2148 zcmZ`*c{tSD8~+*;V{L>?2}5IzLX)j2OJkWr>EecDt3*PC;f{5}m}D&;S!dj9Ea6_H z7&7*dt#O+|G{|I`tdo(Y`@PTe`{Vcgp6B_tDOc>RB}9*k0stU^ zv%y{k00FQGoPY^|Wp1FeI#>yLU$VvmKmSc7t+Z^gM1>|^X}b8{s7cG1As%#A!cx>2w)CJ{Z~g<5fq6K2bZt4vDsd( zmI-`I;|4cQ?ApwM_be7W*eIj#=E%gvBXCe$Tzof6tfW#45)Zh#xha#WUtBe0I@Z_q z$H&JR2x6HZLSFuYNudy++cPpXCFvkTSu!arE6cD!h5Rsz*)<}Q$t9KkLuYaay19aJ zHA^rd;_5cRc=qF9fdvJA)1^$FLh2A<>};)!e)s@O?iBc(el{~IDoPiPe(0!`SXWo) z5h8`~F_tW?)S`}R6xgfB?()}s8X6i(8XFB(LJJEE0lF#_cU%GB zb6>Xloxs5Pp_8~nWi;A0506P(V%7Ti`H27}8lpqRrs=k7#P)V`fU&o;HTvn3L=Qqp zSh%UAg|K~y9gGkZ6pZ~iG%_+$RCiP!!k}g@my7?gsfo6$PpzlZUFeO?m*&?A5n@5 z4ULW7US9DNZ|s#pGvSiS+kG2*I}u|n*2=iOa(PXSm44pb&|Ac;d{AhpbduNHCsH`Q z^|Sm~;LFY>9t0$i*}Z!@5l9dY^iPs@%s-o({rxy=c=%(hrb5neaVeFWaP|TEXkzay zdzKf~dc{e$xkeDEtgKv5vu1^9kUL7nU2?Wv&!Ex4%FmxapOXwoV-kM8jj^TNO#PB- z`dg7?GVxffX&IoFg<|uTSQtl->({X=nT)wPl$yG_&b{QMByG!6*`PHKJH39ts;RB5 z&EST2vV)h$?I{IAlO<#-C~w^D?(Uvk2oJot(Xjs#4i!k%LnL`gX)@#Ogm+fif*^;` zcEp+`%(*^$0bA=c;5GN-mLcx3} zkYTGPmENmNR`CcrJ*ZbvRYgSMz!ypk_SZou^65ni=%e`rTA-NyQyP`s*YZ8g{UzyLe?M83+Js+Ik+F=YYP1;qdAiMzyPNlQlgC?&Vk|Ff zpY(X0y12O5QjA`|G;?t|;_vT2!ekO1wYrN9 zFYhyHmrI+Pj-+4{IJ`VtAq5467RHnGdf#DhZ*PdIs_OM?`)P$1NZg^EoSgL-X8#|T za@2Q-f*fopVu}<+lo&YkUX-*nTzv_w$ z%F4nBOnH!H_KMAm&%Jt_rlKNOPxH!q;( zMk~3ZLUU?}v$3WX_5D@rjZ^dU^T+{xXJ=>phrl9+so0AH=5fQESxU1DH^QVaCT!TpVtxTeOB#W~BzV%^;p2=sur==+ynnicb+tj@)V7 z4huyArVQQGb2@PIgw#LFU F;U6D(_3{7! literal 0 HcmV?d00001 diff --git a/mkdocs/images/acradio.png b/mkdocs/images/acradio.png new file mode 100644 index 0000000000000000000000000000000000000000..ea8fb0a3149a4628584022f1b876746710a9a943 GIT binary patch literal 3007 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 XGIcDH_pEdR^*02IHrA`rag6*Q%Nn(F literal 0 HcmV?d00001 diff --git a/mkdocs/index.md b/mkdocs/index.md index 0120592..3452c43 100644 --- a/mkdocs/index.md +++ b/mkdocs/index.md @@ -34,6 +34,7 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi You can easily add your own web screen that can consist of representative HTML elements as the styled TEXT, INPUT, BUTTON, CHECKBOX, RADIO, SELECT, SUBMIT into the menu. It can be invoked from the AutoConnect menu and parameters can be passed. Custom screens can be written easily with JSON and can be loaded from PROGMEM, SPIFFS or SD. + ## Installation