Supports a selected attribute with the AutoConnectSelect

pull/69/head
Hieromon Ikasamo 5 years ago
parent 4c7a079a70
commit c4426a041e
  1. 18
      docs/acelements.html
  2. 84
      docs/apielements.html
  3. 3
      examples/Simple/Simple.ino
  4. 6
      mkdocs/acelements.md
  5. 38
      mkdocs/apielements.md

@ -732,6 +732,13 @@
label
</a>
</li>
<li class="md-nav__item">
<a href="#selected" title=" selected" class="md-nav__link">
selected
</a>
</li>
</ul>
@ -1508,6 +1515,13 @@
label
</a>
</li>
<li class="md-nav__item">
<a href="#selected" title=" selected" class="md-nav__link">
selected
</a>
</li>
</ul>
@ -1859,7 +1873,7 @@ Only <i class="far fa-square"></i> will be displayed if a label is not specified
<small><strong><code>AutoConnectSelect select("select", { String("Europe/London"), String("Europe/Berlin"), String("Europe/Helsinki"), String("Europe/Moscow"), String("Asia/Dubai") }, "Select TZ name");</code></strong></small></p>
<p><small>On the page:</small><br><img src="images/acselect.png"></p>
<h3 id="constructor_6"><i class="fa fa-edit"></i> Constructor<a class="headerlink" href="#constructor_6" title="Permanent link">&para;</a></h3>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectSelect(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">name,</span> <span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">vector</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">String</span><span style="color: #f92672">&gt;</span> <span style="color: #66d9ef">const</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">options,</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">label)</span>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectSelect(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">name,</span> <span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">vector</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">String</span><span style="color: #f92672">&gt;</span> <span style="color: #66d9ef">const</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">options,</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">label,</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">uint8_t</span> <span style="color: #f8f8f2">selected)</span>
</pre></div>
<h3 id="name_6"><i class="fa fa-caret-right"></i> name<a class="headerlink" href="#name_6" title="Permanent link">&para;</a></h3>
@ -1868,6 +1882,8 @@ Only <i class="far fa-square"></i> will be displayed if a label is not specified
<p>An <code>options</code> is an array of String type for the options which as actually <a href="https://en.cppreference.com/w/cpp/container/vector">std::vector</a> for an HTML <code class="codehilite"><span style="color: #f8f8f2">&lt;</span><span style="color: #f92672">option</span><span style="color: #f8f8f2">&gt;</span></code> tag. It is an initialization list can be used. The option tags will be generated from each entry in the options, the amount of which is the same as the number of items in an <code>options</code>.</p>
<h3 id="label_4"><i class="fa fa-caret-right"></i> label<a class="headerlink" href="#label_4" title="Permanent link">&para;</a></h3>
<p>A <code>label</code> is an optional string. A label is always arranged on the left side of the drop-down list. Specification of a label will generate an HTML <code class="codehilite"><span style="color: #f8f8f2">&lt;</span><span style="color: #f92672">label</span><span style="color: #f8f8f2">&gt;</span></code> tag with an id attribute. The select tag and the label are connected by the id attribute.</p>
<h3 id="selected"><i class="fa fa-caret-right"></i> selected<a class="headerlink" href="#selected" title="Permanent link">&para;</a></h3>
<p>A <code>selected</code> is an optional value. Specifies that an option should be pre-selected when the page loads.</p>
<h2 id="autoconnectsubmit">AutoConnectSubmit<a class="headerlink" href="#autoconnectsubmit" title="Permanent link">&para;</a></h2>
<p>AutoConnectSubmit generates an HTML <code class="codehilite"><span style="color: #f8f8f2">&lt;</span><span style="color: #f92672">input</span> <span style="color: #a6e22e">type</span><span style="color: #f92672">=</span><span style="color: #e6db74">&quot;button&quot;</span><span style="color: #f8f8f2">&gt;</span></code> tag attached <code class="codehilite">onclick</code> attribute. The native code of the <code class="codehilite">onclick</code> attribute is the submission of the form with the <strong>POST</strong> method.</p>
<p><i class="fa fa-eye"></i> <strong>Sample</strong><br>

@ -1076,6 +1076,13 @@
label
</a>
</li>
<li class="md-nav__item">
<a href="#selected" title=" selected" class="md-nav__link">
selected
</a>
</li>
</ul>
@ -1117,6 +1124,13 @@
operator &#91;&nbsp;&#93;
</a>
</li>
<li class="md-nav__item">
<a href="#select" title=" select" class="md-nav__link">
select
</a>
</li>
<li class="md-nav__item">
@ -1124,6 +1138,13 @@
size
</a>
</li>
<li class="md-nav__item">
<a href="#value_6" title=" value" class="md-nav__link">
value
</a>
</li>
</ul>
@ -1167,7 +1188,7 @@
</li>
<li class="md-nav__item">
<a href="#value_6" title=" value" class="md-nav__link">
<a href="#value_7" title=" value" class="md-nav__link">
value
</a>
@ -1241,7 +1262,7 @@
</li>
<li class="md-nav__item">
<a href="#value_7" title=" value" class="md-nav__link">
<a href="#value_8" title=" value" class="md-nav__link">
value
</a>
@ -2096,6 +2117,13 @@
label
</a>
</li>
<li class="md-nav__item">
<a href="#selected" title=" selected" class="md-nav__link">
selected
</a>
</li>
</ul>
@ -2137,6 +2165,13 @@
operator &#91;&nbsp;&#93;
</a>
</li>
<li class="md-nav__item">
<a href="#select" title=" select" class="md-nav__link">
select
</a>
</li>
<li class="md-nav__item">
@ -2144,6 +2179,13 @@
size
</a>
</li>
<li class="md-nav__item">
<a href="#value_6" title=" value" class="md-nav__link">
value
</a>
</li>
</ul>
@ -2187,7 +2229,7 @@
</li>
<li class="md-nav__item">
<a href="#value_6" title=" value" class="md-nav__link">
<a href="#value_7" title=" value" class="md-nav__link">
value
</a>
@ -2261,7 +2303,7 @@
</li>
<li class="md-nav__item">
<a href="#value_7" title=" value" class="md-nav__link">
<a href="#value_8" title=" value" class="md-nav__link">
value
</a>
@ -2586,7 +2628,7 @@ Evaluate the pattern as a regexp and return whether value matches. Always return
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">name</span><span class="apidesc">The element name.</span></dd>
<dd><span class="apidef">values</span><span class="apidesc">An array of values of the radio buttons. Specifies an <a href="https://en.cppreference.com/w/cpp/container/vector">std::vector</a> object.</span></dd>
<dd><span class="apidef">values</span><span class="apidesc">An array of values of the radio buttons. Specifies a <a href="https://en.cppreference.com/w/cpp/container/vector">std::vector</a> object.</span></dd>
<dd><span class="apidef">label</span><span class="apidesc">Label string.</span></dd>
<dd><span class="apidef">order</span><span class="apidesc">The direction to arrange the radio buttons.</span></dd>
<dd><span class="apidef">checked</span><span class="apidesc">An index to be checked in the radio buttons.</span></dd>
@ -2688,13 +2730,14 @@ Returns current checked option of the radio buttons.
</dl></p>
<h2 id="autoconnectselect">AutoConnectSelect<a class="headerlink" href="#autoconnectselect" title="Permanent link">&para;</a></h2>
<h3 id="constructor_6"><i class="fa fa-code"></i> Constructor<a class="headerlink" href="#constructor_6" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectSelect(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">name</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">vector</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">String</span><span style="color: #f92672">&gt;</span> <span style="color: #66d9ef">const</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">options</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">{},</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">label</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">)</span>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectSelect(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">name</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">vector</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">String</span><span style="color: #f92672">&gt;</span> <span style="color: #66d9ef">const</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">options</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">{},</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">label</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">uint8_t</span> <span style="color: #f8f8f2">selected</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">0</span><span style="color: #f8f8f2">)</span>
</pre></div>
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">name</span><span class="apidesc">The element name.</span></dd>
<dd><span class="apidef">options</span><span class="apidesc">An array of options of the select element. Specifies an <a href="https://en.cppreference.com/w/cpp/container/vector">std::vector</a> object.</span></dd>
<dd><span class="apidef">options</span><span class="apidesc">An array of options of the select element. Specifies a <a href="https://en.cppreference.com/w/cpp/container/vector">std::vector</a> object.</span></dd>
<dd><span class="apidef">label</span><span class="apidesc">Label string.</span></dd>
<dd><span class="apidef">selected</span><span class="apidesc">An option should be pre-selected when the page loads.</span></dd>
</dl></p>
<h3 id="public-member-variables_6"><i class="fa fa-code"></i> Public member variables<a class="headerlink" href="#public-member-variables_6" title="Permanent link">&para;</a></h3>
<h4 id="name_6"><i class="fa fa-caret-right"></i> name<a class="headerlink" href="#name_6" title="Permanent link">&para;</a></h4>
@ -2715,6 +2758,12 @@ Returns current checked option of the radio buttons.
<dt><strong>Type</strong></dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="selected"><i class="fa fa-caret-right"></i> selected<a class="headerlink" href="#selected" title="Permanent link">&para;</a></h4>
<p>A <code>selected</code> is an optional value. Specifies 1-based index value of an options array that an option should be pre-selected when the page loads.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">uint8_t</span><span class="apidesc"></span></dd>
</dl></p>
<h3 id="public-member-functions_6"><i class="fa fa-code"></i> Public member functions<a class="headerlink" href="#public-member-functions_6" title="Permanent link">&para;</a></h3>
<h4 id="typeof_6"><i class="fa fa-caret-right"></i> typeOf<a class="headerlink" href="#typeof_6" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">ACElement_t</span> <span style="color: #f8f8f2">typeOf(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
@ -2749,7 +2798,14 @@ Returns an option string of the index specified by <strong><em>n</em></strong>.
<dd><span class="apidef">n</span><span class="apidesc">Index of options array to return. Its base number is 0.</span></dd>
<dt><strong>Return value</strong></dt>
<dd>A reference of a option string indexed by the specified the <strong>n</strong>.</dd>
<dd>
</dl></p>
<h4 id="select"><i class="fa fa-caret-right"></i> select<a class="headerlink" href="#select" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #a6e22e">select</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">value);</span>
</pre></div>
Selects an option with the value.
<dl class="apidl">
<dt><strong>Parameter</strong></dt>
<dd><span class="apidef">value</span><span class="apidesc">String value that option should be selected in an option array.</span></dd>
</dl></p>
<h4 id="size_2"><i class="fa fa-caret-right"></i> size<a class="headerlink" href="#size_2" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">size(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
@ -2759,6 +2815,14 @@ Returns number of options which contained.
<dt><strong>Return value</strong></dt>
<dd>Number of options which contained.</dd>
</dl></p>
<h4 id="value_6"><i class="fa fa-caret-right"></i> value<a class="headerlink" href="#value_6" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">value(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span> <span style="color: #66d9ef">const</span><span style="color: #f8f8f2">;</span>
</pre></div>
Returns current selected option of the select list.
<dl class="apidl">
<dt><strong>Return value</strong></dt>
<dd>A String of an option current selected. If there is no select option, a null string returned.</dd>
</dl></p>
<h2 id="autoconnectsubmit">AutoConnectSubmit<a class="headerlink" href="#autoconnectsubmit" title="Permanent link">&para;</a></h2>
<h3 id="constructor_7"><i class="fa fa-code"></i> Constructor<a class="headerlink" href="#constructor_7" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectSubmit(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">name</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">value</span> <span style="color: #f92672">=</span><span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">uri</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">)</span>
@ -2776,7 +2840,7 @@ Returns number of options which contained.
<dt><strong>Type</strong></dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="value_6"><i class="fa fa-caret-right"></i> value<a class="headerlink" href="#value_6" title="Permanent link">&para;</a></h4>
<h4 id="value_7"><i class="fa fa-caret-right"></i> value<a class="headerlink" href="#value_7" title="Permanent link">&para;</a></h4>
<p>The name of the submit button. It will also be the label of the button.
<dl class="apidl">
<dt><strong>Type</strong></dt>
@ -2815,7 +2879,7 @@ Returns type of AutoConnectElement.
<dt><strong>Type</strong></dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="value_7"><i class="fa fa-caret-right"></i> value<a class="headerlink" href="#value_7" title="Permanent link">&para;</a></h4>
<h4 id="value_8"><i class="fa fa-caret-right"></i> value<a class="headerlink" href="#value_8" title="Permanent link">&para;</a></h4>
<p>A content string of the text element.
<dl class="apidl">
<dt><strong>Type</strong></dt>

@ -33,7 +33,8 @@ static const char AUX_TIMEZONE[] PROGMEM = R"(
"name": "timezone",
"type": "ACSelect",
"label": "Select TZ name",
"option": []
"option": [],
"selected": 10
},
{
"name": "newline",

@ -299,7 +299,7 @@ AutoConnectSelect generates an HTML `#!html <select>` tag (drop-down list) and f
### <i class="fa fa-edit"></i> Constructor
```cpp
AutoConnectSelect(const char* name, std::vector<String> const& options, const char* label)
AutoConnectSelect(const char* name, std::vector<String> const& options, const char* label, const uint8_t selected)
```
### <i class="fa fa-caret-right"></i> name
@ -314,6 +314,10 @@ An `options` is an array of String type for the options which as actually [std::
A `label` is an optional string. A label is always arranged on the left side of the drop-down list. Specification of a label will generate an HTML `#!html <label>` tag with an id attribute. The select tag and the label are connected by the id attribute.
### <i class="fa fa-caret-right"></i> selected
A `selected` is an optional value. Specifies that an option should be pre-selected when the page loads.
## AutoConnectSubmit
AutoConnectSubmit generates an HTML `#!html <input type="button">` tag attached `#!html onclick` attribute. The native code of the `#!html onclick` attribute is the submission of the form with the **POST** method.

@ -349,7 +349,7 @@ AutoConnectRadio(const char* name = "", std::vector<String> const& values = {},
<dl class="apidl">
<dt>**Parameters**</dt>
<dd><span class="apidef">name</span><span class="apidesc">The element name.</span></dd>
<dd><span class="apidef">values</span><span class="apidesc">An array of values of the radio buttons. Specifies an [std::vector](https://en.cppreference.com/w/cpp/container/vector) object.</span></dd>
<dd><span class="apidef">values</span><span class="apidesc">An array of values of the radio buttons. Specifies a [std::vector](https://en.cppreference.com/w/cpp/container/vector) object.</span></dd>
<dd><span class="apidef">label</span><span class="apidesc">Label string.</span></dd>
<dd><span class="apidef">order</span><span class="apidesc">The direction to arrange the radio buttons.</span></dd>
<dd><span class="apidef">checked</span><span class="apidesc">An index to be checked in the radio buttons.</span></dd>
@ -487,13 +487,14 @@ Returns current checked option of the radio buttons.
### <i class="fa fa-code"></i> Constructor
```cpp
AutoConnectSelect(const char* name = "", std::vector<String> const& options = {}, const char* label = "")
AutoConnectSelect(const char* name = "", std::vector<String> const& options = {}, const char* label = "", const uint8_t selected = 0)
```
<dl class="apidl">
<dt>**Parameters**</dt>
<dd><span class="apidef">name</span><span class="apidesc">The element name.</span></dd>
<dd><span class="apidef">options</span><span class="apidesc">An array of options of the select element. Specifies an [std::vector](https://en.cppreference.com/w/cpp/container/vector) object.</span></dd>
<dd><span class="apidef">options</span><span class="apidesc">An array of options of the select element. Specifies a [std::vector](https://en.cppreference.com/w/cpp/container/vector) object.</span></dd>
<dd><span class="apidef">label</span><span class="apidesc">Label string.</span></dd>
<dd><span class="apidef">selected</span><span class="apidesc">An option should be pre-selected when the page loads.</span></dd>
</dl>
### <i class="fa fa-code"></i> Public member variables
@ -522,6 +523,14 @@ A label is an optional string. A label will be arranged in the top of the select
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> 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.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">uint8_t</span><span class="apidesc"></span></dd>
</dl>
### <i class="fa fa-code"></i> Public member functions
#### <i class="fa fa-caret-right"></i> typeOf
@ -568,7 +577,17 @@ Returns an option string of the index specified by **_n_**.
<dd><span class="apidef">n</span><span class="apidesc">Index of options array to return. Its base number is 0.</span></dd>
<dt>**Return value**</dt>
<dd>A reference of a option string indexed by the specified the **n**.</dd>
<dd>
</dl>
#### <i class="fa fa-caret-right"></i> select
```cpp
void select(const String& value);
```
Selects an option with the value.
<dl class="apidl">
<dt>**Parameter**</dt>
<dd><span class="apidef">value</span><span class="apidesc">String value that option should be selected in an option array.</span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> size
@ -582,6 +601,17 @@ Returns number of options which contained.
<dd>Number of options which contained.</dd>
</dl>
#### <i class="fa fa-caret-right"></i> value
```cpp
const String& value(void) const;
```
Returns current selected option of the select list.
<dl class="apidl">
<dt>**Return value**</dt>
<dd>A String of an option current selected. If there is no select option, a null string returned.</dd>
</dl>
## AutoConnectSubmit
### <i class="fa fa-code"></i> Constructor

Loading…
Cancel
Save