<ahref="#handing-autoconnectelements-with-the-sketches"title="Handing AutoConnectElements with the sketches"class="md-nav__link">
Handing AutoConnectElements with the sketches
@ -1005,8 +1019,10 @@
<h1>Handling the custom Web pages</h1>
<h2id="handing-autoconnectelements-with-the-sketches">Handing AutoConnectElements with the sketches<aclass="headerlink"href="#handing-autoconnectelements-with-the-sketches"title="Permanent link">¶</a></h2>
<p>AutoConnectElements (i.e. they are the elements displayed on the custom Web page) must be contained in AutoConnectAux object. AutoConnectElements declared in sketch must be programmed to add to AutoConnectAux one after another. Elements are automatically included in AutoConnectAux by AutoConnect if you load it from the JSON description. In either method, it is common to use the function of AutoConnectAux to access an element with a sketch.</p>
<p>AutoConnectAux is the container for a custom Web page, AutoConnectElement is the component of a page. AutoConnectElements must be contained in AutoConnectAux object. (ie. they are the elements displayed on the custom Web page.) Then AutoConnect makes an AutoConnectAux to a page.</p>
<p>AutoConnectElements declared in sketch must be programmed to add to AutoConnectAux one after another. Elements are automatically included in AutoConnectAux by AutoConnect if you load it from the JSON document. In either method, it is common to use the function of AutoConnectAux to access an element with a sketch.</p>
<h2id="handing-autoconnectelements-with-the-sketches">Handing AutoConnectElements with the sketches<aclass="headerlink"href="#handing-autoconnectelements-with-the-sketches"title="Permanent link">¶</a></h2>
<p>The AutoConnectAux class has several functions to manipulate AutoConnectElements. The functions can add, delete, retrieve elements, and get and set values.</p>
<h3id="add-autoconnectelements-to-the-autoconnectaux-object"><iclass="fa fa-edit"></i> Add AutoConnectElements to the AutoConnectAux object<aclass="headerlink"href="#add-autoconnectelements-to-the-autoconnectaux-object"title="Permanent link">¶</a></h3>
<p>To add AutoConnectElment(s) to an AutoConnectAux object, use the add function.</p>
<p>The add function adds specified AutoConnectElement to the AutoConnectAux. If specified the collection of AutoConnectElements as a <code>std::vector</code> of the references to each element, these elements added in bulk.</p>
<p>The AutoConnectElements contained in the AutoConnectAux object are uniquely identified by the name. When adding an AutoConnectElement, if an element with the same name already exists in the AutoConnectAux, checking the type, and if it is the same, the value will be replaced. If another type of AutoConnectElement exists with the same name, that add operation will be invalid.<supid="fnref:1"><aclass="footnote-ref"href="#fn:1"rel="footnote">1</a></sup> In the following example, an AutoConnectButton as <code>button</code> addition is invalid.</p>
<p>The add function adds the specified AutoConnectElement to AutoConnectAux. The AutoConnectElementVT type is the <ahref="https://en.cppreference.com/w/cpp/container/vector"><em>std::vector</em></a> of the <ahref="https://en.cppreference.com/w/cpp/utility/functional/reference_wrapper"><em>reference wrapper</em></a> to AutoConnectElements, and you can add these elements in bulk by using the <ahref="https://en.cppreference.com/w/cpp/language/list_initialization"><em>list initialization</em></a> with the sketch.</p>
AutoConnectElements contained in AutoConnectAux object are uniquely identified by name. When adding an AutoConnectElement, if an element with the same name already exists in the AutoConnectAux, checking the type, and if it is the same, the value will be replaced. If another type of AutoConnectElement exists with the same name, that add operation will be invalid.<supid="fnref:1"><aclass="footnote-ref"href="#fn:1"rel="footnote">1</a></sup> In the following example, AutoConnectButton <code>button</code> addition will invalid because <code>hello</code> with the same name already exists as AutoConnectText.</p>
<spanstyle="background-color: #49483e"><spanstyle="color: #f8f8f2">AutoConnectButton</span><spanstyle="color: #a6e22e">button</span><spanstyle="color: #f8f8f2">(</span><spanstyle="color: #e6db74">"hello"</span><spanstyle="color: #f8f8f2">,</span><spanstyle="color: #e6db74">"hello, world"</span><spanstyle="color: #f8f8f2">,</span><spanstyle="color: #e6db74">"alert('Hello world!')")</span><spanstyle="color: #f8f8f2">;</span><spanstyle="color: #75715e">// This is invalid.</span>
@ -1049,13 +1067,13 @@
</div>
<h3id="get-autoconnectelement-from-the-autoconnectaux"><iclass="fa fa-edit"></i> Get AutoConnectElement from the AutoConnectAux<aclass="headerlink"href="#get-autoconnectelement-from-the-autoconnectaux"title="Permanent link">¶</a></h3>
<p>To retrieve an element from AutoConnectAux, use the getElement or getElements function. Normally, the getElement is needed when accessing the value of AutoConnectElement in the sketch.</p>
<p>The <ahref="apiaux.html#getelement"><strong>getElement</strong></a> function returns an AutoConnectElement with the specified name as a key. When you use this function, you need to know the type of AutoConnectElement in advance. To retrieve an AutoConnectElement by specifying its type, use the following method.</p>
<p>To get all the AutoConnectElements of an AutoConnectAux object use the <ahref="apiaux.html#getelements"><strong>getElements</strong></a> function. This function returns the vector of the reference wrapper as <em>AutoConnectElementVT</em> to all AutoConnectElements registered in the AutoConnectAux.</p>
<p>To get all the AutoConnectElements in an AutoConnectAux object use the <ahref="apiaux.html#getelements"><strong>getElements</strong></a> function. This function returns the vector of the reference wrapper as <strong>AutoConnectElementVT</strong> to all AutoConnectElements registered in the AutoConnectAux.</p>
<p><em>AutoConnectElementVT</em> is a predefined type for it and can use methods of <ahref="https://en.cppreference.com/w/cpp/container/vector">std::vector</a><<ahref="https://en.cppreference.com/w/cpp/utility/functional/reference_wrapper">std::reference_wrapper</a>>.</p>
<h2id="loading-saving-autoconnectelements-with-json">Loading & saving AutoConnectElements with JSON<aclass="headerlink"href="#loading-saving-autoconnectelements-with-json"title="Permanent link">¶</a></h2>
<p>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 <ahref="acjson.html">JSON document for AutoConnect</a>. However, it can not save all AutoConnectElements contained in the page as a custom Web page. (ie. AutoConnectAux)</p>
<p><imgsrc="images/ac_load_save.svg"></p>
@ -1450,11 +1467,11 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
@ -1475,7 +1492,7 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
<spanstyle="color: #f8f8f2">}</span>
</pre></div>
<iclass="fa fa-arrow-down"></i><br>
<iclass="fa fa-eye"></i> It's shown as like:<spanstyle="margin-left:14px;width:272px;height:118px;border:1px solid lightgray;"><imgalign="top"width="270"src="images/acow.png"></span></p>
<iclass="fa fa-eye"></i> It's shown as like:<spanstyle="margin-left:14px;width:272px;height:118px;border:1px solid lightgray;"><imgalign="top"width="270"height="116"src="images/acow.png"></span></p>
<h3id="check-data-against-on-submission"><iclass="far fa-check-square"></i> Check data against on submission<aclass="headerlink"href="#check-data-against-on-submission"title="Permanent link">¶</a></h3>
<p>By giving a <ahref="apielements.html#pattern">pattern</a> to <ahref="apielements.html#autoconenctinput">AutoConnectInput</a>, you can find errors in data styles while typing in custom Web pages. The pattern is specified by <ahref="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a>.<supid="fnref:2"><aclass="footnote-ref"href="#fn:2"rel="footnote">2</a></sup> 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.</p>
<ahref="menuize.html"title="Constucting the menu"class="md-nav__link">
Constucting the menu
<ahref="menuize.html"title="Attach the menu"class="md-nav__link">
Attach the menu
</a>
</li>
@ -940,7 +940,7 @@
<h2id="validation-for-the-value">Validation for the value<aclass="headerlink"href="#validation-for-the-value"title="Permanent link">¶</a></h2>
<p>To convert input data correctly from the string, it must match its format. The validation implementation with sketches depends on various perspectives. Usually, the tiny devices have no enough power for the lexical analysis completely. But you can reduce the burden for data verification using the <ahref="achandling.html#check-data-against-on-submission"><strong>pattern</strong></a> of AutoConnectInput.</p>
<p>By giving a <ahref="acelements.html#pattern">pattern</a> to <ahref="apielements.html#pattern">AutoConnectInput</a>, you can find errors in data format while typing in custom Web pages. Specifying the input data rule as a <ahref="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a> will validate the type match during input. If there is an error in the format during input, the background color of the field will change to pink. Refer to section <ahref="achandling.html#check-data-against-on-submission">Handling the custom Web pages</a>.</p>
<p>By giving a <ahref="acelements.html#pattern">pattern</a> to <ahref="apielements.html#pattern">AutoConnectInput</a>, you can find errors in data format while typing in custom Web pages. Specifying the input data rule as a <ahref="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a> will validate the type match during input. If there is an error in the format during input, the background color of the field will change to pink. Refer to section <ahref="achandling.html#check-data-against-on-submission"><em>Handling the custom Web pages</em></a>.</p>
<p>However, input data will be transmitted even if the value does not match the pattern. Sketches require the validation of the received data. You can use the <ahref="apielements.html#isvalid">AutoConnectInput::isValid</a> function to validate it. The isValid function validates whether the value member variable matches a pattern and returns true or false.</p>
<p>The ssanf library function cannot be used with the old Arduino core. <aclass="footnote-backref"href="#fnref:1"rev="footnote"title="Jump back to footnote 1 in the text">↩</a></p>
</li>
<liid="fn:2">
<p>This regular expressiondoes not fully support the format of the e-mail address requested in <ahref="https://tools.ietf.org/html/rfc5322">RFC5322</a>. <aclass="footnote-backref"href="#fnref:2"rev="footnote"title="Jump back to footnote 2 in the text">↩</a></p>
<p>This regular expressiondoes not fully support the format of the e-mail address requested in <ahref="https://tools.ietf.org/html/rfc5322">RFC5322</a>. <aclass="footnote-backref"href="#fnref:2"rev="footnote"title="Jump back to footnote 2 in the text">↩</a></p>
</li>
<liid="fn:3">
<p>This regular expression does not consider semantic constraints. It is not possible to detect errors that do not exist as actual dates. <aclass="footnote-backref"href="#fnref:3"rev="footnote"title="Jump back to footnote 3 in the text">↩</a></p>
@ -1088,13 +1088,13 @@
</a>
<ahref="menuize.html"title="Constucting the menu"class="md-flex md-footer-nav__link md-footer-nav__link--next"rel="next">
<ahref="menuize.html"title="Attach the menu"class="md-flex md-footer-nav__link md-footer-nav__link--next"rel="next">
<ahref="menuize.html"title="Constucting the menu"class="md-nav__link">
Constucting the menu
<ahref="menuize.html"title="Attach the menu"class="md-nav__link">
Attach the menu
</a>
</li>
@ -655,6 +655,13 @@
An esp8266ap as SoftAP was connected but Captive portal does not start.
</a>
</li>
<liclass="md-nav__item">
<ahref="#connection-refused-with-the-captive-portal-after-established"title=" Connection refused with the captive portal after established."class="md-nav__link">
Connection refused with the captive portal after established.
</a>
</li>
<liclass="md-nav__item">
@ -907,6 +914,13 @@
An esp8266ap as SoftAP was connected but Captive portal does not start.
</a>
</li>
<liclass="md-nav__item">
<ahref="#connection-refused-with-the-captive-portal-after-established"title=" Connection refused with the captive portal after established."class="md-nav__link">
Connection refused with the captive portal after established.
</a>
</li>
<liclass="md-nav__item">
@ -1119,6 +1133,15 @@ For AutoConnect menus to work properly, call <a href="api.html#handlerequest"><e
<p>See also the explanation <ahref="basicusage.html#esp8266webserver-hosted-or-parasitic">here</a>.</p>
<h2id="an-esp8266ap-as-softap-was-connected-but-captive-portal-does-not-start"><iclass="fa fa-question-circle"></i> An esp8266ap as SoftAP was connected but Captive portal does not start.<aclass="headerlink"href="#an-esp8266ap-as-softap-was-connected-but-captive-portal-does-not-start"title="Permanent link">¶</a></h2>
<p>Captive portal detection could not be trapped. It is necessary to disconnect and reset ESP8266 to clear memorized connection data in ESP8266. Also, It may be displayed on the smartphone if the connection information of esp8266ap is wrong. In that case, delete the connection information of esp8266ap memorized by the smartphone once.</p>
<h2id="connection-refused-with-the-captive-portal-after-established"><iclass="fa fa-question-circle"></i> Connection refused with the captive portal after established.<aclass="headerlink"href="#connection-refused-with-the-captive-portal-after-established"title="Permanent link">¶</a></h2>
<p>This is a known issue with ESP32 and may occur when the following conditions are satisfied at the same time:</p>
<ul>
<li>SoftAP channel on ESP32 and the connecting AP channel you specified are different.</li>
<li>Never connected to the AP in the past, or NVS had erased by erase_flash causes the connection data lost.</li>
<li>There are receivable multiple WiFi signals which are the same SSID with different channels using the WiFi repeater etc. (This condition is loose, it may occur even if there is no WiFi repeater.)</li>
</ul>
<p>To avoid this problem, try <ahref="#1-change-wifi-channel">changing the channel</a>.</p>
<p>ESP32 hardware equips only one channel for WiFi signal to carry. At the AP_STA mode, if ESP32 as an AP will connect to another AP on another channel while maintaining the connection with the station, the channel switching will occur and the station may be disconnected. But it may not be just a matter of channel switching causes ESP8266 has the same constraints too. It may be a problem with AutoConnect or the arduino core or SDK issue. Unfortunately, I have not found a solution yet. However, I am continuing trial and error to solve this problem and will resolve in due course.</p>
<h2id="does-not-appear-esp8266ap-in-smartphone"><iclass="fa fa-question-circle"></i> Does not appear esp8266ap in smartphone.<aclass="headerlink"href="#does-not-appear-esp8266ap-in-smartphone"title="Permanent link">¶</a></h2>
<p>Maybe it is successfully connected at the <strong>first WiFi.begin</strong>. ESP8266 remembers the last SSID successfully connected and will use at the next. It means SoftAP will only start up when the first <em>WiFi.begin()</em> fails.</p>
<p>The saved SSID would be cleared by <em>WiFi.disconnect()</em> with WIFI_STA mode. If you do not want automatic reconnection, you can erase the memorized SSID with the following simple sketch.</p>
<ahref="menuize.html"title="Constucting the menu"class="md-nav__link">
Constucting the menu
<ahref="menuize.html"title="Attach the menu"class="md-nav__link">
Attach the menu
</a>
</li>
@ -924,10 +924,10 @@
<h1>How to embed</h1>
<h2id="embed-the-autoconnect-to-the-sketch">Embed the AutoConnect to the sketch<aclass="headerlink"href="#embed-the-autoconnect-to-the-sketch"title="Permanent link">¶</a></h2>
<p>Here holds two case examples. Both examples perform the same function. Only how to incorporate the <strong>AutoConnect</strong> into the sketch differs. Also included in the sample folder, HandlePortal.ino also shows how to use the <ahref="https://github.com/Hieromon/PageBuilder">PageBuilder</a> library for HTML assemblies.</p>
<p>Here hold two case examples. Both examples perform the same function. Only how to incorporate the <strong>AutoConnect</strong> into the sketch differs. Also included in the sample folder, HandlePortal.ino also shows how to use the <ahref="https://github.com/Hieromon/PageBuilder">PageBuilder</a> library for HTML assemblies.</p>
<h2id="what-does-this-example-do">What does this example do?<aclass="headerlink"href="#what-does-this-example-do"title="Permanent link">¶</a></h2>
<p>Uses the web interface to light the LED connected to the <strong><ahref="https://github.com/nodemcu/nodemcu-devkit-v1.0">NodeMCU</a></strong> module D0 port (which could be referred to as <em>BUILTIN_LED</em>), the following animation is it.</p>
<p>Access to the ESP8266 module connected WiFi from the browser then the page contains the current value of the D0 port would be displayed. The page has the buttons to switch the port value. The LED blinks according to the value of the button that was clicked. This example is a typical sketch of manipulating ESP8266's GPIO via WLAN.</p>
<p>Uses the web interface to light the LED connected to the D0 (sometimes called <em>BUILTIN_LED</em>) port of the <strong><ahref="https://github.com/nodemcu/nodemcu-devkit-v1.0">NodeMCU</a></strong> module like the following animation.</p>
<p>Access to the ESP8266 module connected WiFi from the browser then the page contains the current value of the D0 port would be displayed. The page has the buttons to switch the port value. The LED will blink according to the value with clicked by the button. This example is a typical sketch of manipulating ESP8266's GPIO via WLAN.</p>
<p><imgdata-gifffer="images/ac2.gif"/></p>
<p>Embed AutoConnect library into this sketch. There are few places to be changed. And you can use AutoConnect's captive portal function to establish a connection freely to other WiFi spots.</p>
<p>Declare only AutoConnect, performs handleClient.</p>
<p><imgsrc="images/handlePortal.svg"/></p>
<h2id="used-with-mqtt-as-a-client-application">Used with MQTT as a client application<aclass="headerlink"href="#used-with-mqtt-as-a-client-application"title="Permanent link">¶</a></h2>
<p>The effect of AutoConnect is not only for ESP8266/ESP32 as the web server. It has advantages for something WiFi client as well. For example, AutoConnect is also effective for publishing MQTT messages from various measurement points. Even if the SSID is different for each measurement point, it is not necessary to modify the sketch.</p>
<p>The effect of AutoConnect is not only for ESP8266/ESP32 as the web server. It has advantages for something WiFi client as well. For example, AutoConnect is also convenient for publishing MQTT messages from various measurement points. Even if the SSID is different for each measurement point, it is not necessary to modify the sketch.</p>
<p>This example tries to publish the WiFi signal strength of ESP8266 with MQTT. It uses the <ahref="https://thingspeak.com/">ThingSpeak</a> for MQTT broker. ESP8266 publishes the RSSI value to the channel created on ThingSpeak as <ahref="https://github.com/knolleary/pubsubclient">MQTT client</a>. This example is well suited to demonstrate the usefulness of AutoConnect, as RSSI values are measured at each access point usually. Just adding a few lines of code makes it unnecessary to upload sketches with the different SSIDs rewrite for each access point.</p>
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.88055563px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26458332">Original FSbrowser.ino (part of code)</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.88055563px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26458332">Original FSbrowser.ino (a part of code)</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.88055563px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26458332">Modified FSbrowser.ino (part of code)</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.88055563px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26458332">Modified FSbrowser.ino (a part of code)</tspan></text>
<ahref="menuize.html"title="Constucting the menu"class="md-nav__link">
Constucting the menu
<ahref="menuize.html"title="Attach the menu"class="md-nav__link">
Attach the menu
</a>
</li>
@ -940,7 +940,7 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi
<h3id="lives-with-your-sketches"><iclass="fa fa-arrow-circle-right"aria-hidden="true"></i> Lives with your sketches<aclass="headerlink"href="#lives-with-your-sketches"title="Permanent link">¶</a></h3>
<p><spanclass="lead">The sketches which provide the web page using ESP8266WebServer there is, AutoConnect will not disturb it. AutoConnect can use an already instantiated ESP8266WebServer object, or itself can assign it. This effect also applies to ESP32. The corresponding class for ESP32 will be the WebServer.</span></p>
<h3id="easy-to-add-the-custom-web-pages-enhanced-wv097"><iclass="fa fa-arrow-circle-right"aria-hidden="true"></i> Easy to add the <ahref="acintro.html">custom Web pages</a><sup><sub>ENHANCED w/v0.9.7</sub></sup><aclass="headerlink"href="#easy-to-add-the-custom-web-pages-enhanced-wv097"title="Permanent link">¶</a></h3>
<p><spanclass="lead">You can easily add your owned web screens that can consist of representative HTML elements and invoke them from the menu. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD.</span></p>
<p><spanclass="lead">You can easily add your owned web pages that can consist of representative HTML elements and invoke them from the menu. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD.</span></p>
@ -983,13 +983,13 @@ Install third-party platform using the <em>Boards Manager</em> of Arduino IDE. P
Install third-party platform using the <em>Boards Manager</em> of Arduino IDE. You can add multiple URLs into <em>Additional Board Manager URLs</em> field, separating them with commas. Package URL is <ahref="https://dl.espressif.com/dl/package_esp32_index.json">https://dl.espressif.com/dl/package_esp32_index.json</a> for ESP32.</p>
<p>The <ahref="https://github.com/Hieromon/PageBuilder">PageBuilder</a> library to build HTML for ESP8266WebServer is needed.<br/>
To install the PageBuilder library into your Arduino IDE, you can use the <em>Library Manager</em>. Select the board of ESP8266 series in the Arduino IDE, open the library manager and search keyword '<strong>PageBuilder</strong>' with the topic '<strong>Communication</strong>', then you can see the <em>PageBuilder</em>. The latest version is required 1.3.2later.<supid="fnref:1"><aclass="footnote-ref"href="#fn:1"rel="footnote">1</a></sup></p>
To install the PageBuilder library into your Arduino IDE, you can use the <em>Library Manager</em>. Select the board of ESP8266 series in the Arduino IDE, open the library manager and search keyword '<strong>PageBuilder</strong>' with the topic '<strong>Communication</strong>', then you can see the <em>PageBuilder</em>. The latest version is required <strong>1.3.2</strong><strong>later</strong>.<supid="fnref:1"><aclass="footnote-ref"href="#fn:1"rel="footnote">1</a></sup></p>
<p>By adding the <ahref="https://github.com/bblanchon/ArduinoJson">ArduinoJson</a> library, AutoConnect will be able to handle the <ahref="acintro.html"><strong>custom Web pages</strong></a> described with JSON. With AutoConnect v0.9.7 you can insert user-owned screens that can consist of representative HTML elements as styled TEXT, INPUT, BUTTON, CHECKBOX, SELECT, SUBMIT and invoke them from the AutoConnect menu. These HTML elements can be added by sketches using the AutoConnect API. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD. <ahref="https://arduinojson.org/v5/doc/">ArduinoJson version 5</a> is required to use this feature.<supid="fnref:2"><aclass="footnote-ref"href="#fn:2"rel="footnote">2</a></sup></p>
<p>By adding the <ahref="https://github.com/bblanchon/ArduinoJson">ArduinoJson</a> library, AutoConnect will be able to handle the <ahref="acintro.html"><strong>custom Web pages</strong></a> described with JSON. With AutoConnect v0.9.7 you can insert user-owned web pages that can consist of representative HTML elements as styled TEXT, INPUT, BUTTON, CHECKBOX, SELECT, SUBMIT and invoke them from the AutoConnect menu. These HTML elements can be added by sketches using the AutoConnect API. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD. <ahref="https://arduinojson.org/v5/doc/">ArduinoJson version 5</a> is required to use this feature.<supid="fnref:2"><aclass="footnote-ref"href="#fn:2"rel="footnote">2</a></sup></p>
<divclass="admonition info">
<pclass="admonition-title">AutoConnect supports ArduinoJson version 5 only</p>
<p>And ArduinoJson version 6 is still in beta. The Arduino Library Manager installs the ArduinoJson version 6 by default. Open the Arduino Library Manager and make sure that ArduinoJson version 5 is installed.</p>
<p>ArduinoJson version 6 is still in beta, but Arduino Library Manager installs the ArduinoJson version 6 by default. Open the Arduino Library Manager and make sure that ArduinoJson version 5 is installed.</p>
</div>
<h3id="install-the-autoconnect">Install the AutoConnect<aclass="headerlink"href="#install-the-autoconnect"title="Permanent link">¶</a></h3>
<p>Clone or download from the <ahref="https://github.com/Hieromon/AutoConnect">AutoConnect GitHub repository</a>.</p>
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.</p>
<p><strong>Acknowledgments</strong></p>
<p>The <strong>Luxbar</strong> is licensed under the MIT License.<br/>
<ahref="#extend-autoconnect-menu-with-your-sketches"title=" Extend AutoConnect menu with your sketches"class="md-nav__link">
Extend AutoConnect menu with your sketches
<ahref="#by-attaching-autoconnect-menu"title=" by attaching AutoConnect menu"class="md-nav__link">
by attaching AutoConnect menu
</a>
</li>
@ -682,8 +682,8 @@
<liclass="md-nav__item">
<ahref="menuize.html"title="Constucting the menu"class="md-nav__link">
Constucting the menu
<ahref="menuize.html"title="Attach the menu"class="md-nav__link">
Attach the menu
</a>
</li>
@ -816,8 +816,8 @@
</li>
<liclass="md-nav__item">
<ahref="#extend-autoconnect-menu-with-your-sketches"title=" Extend AutoConnect menu with your sketches"class="md-nav__link">
Extend AutoConnect menu with your sketches
<ahref="#by-attaching-autoconnect-menu"title=" by attaching AutoConnect menu"class="md-nav__link">
by attaching AutoConnect menu
</a>
</li>
@ -887,12 +887,12 @@ Enter SSID and Passphrase and tap "<strong>apply</strong>" to starts WiFi connec
</pre></div>
<p>You can change the HOME path using the AutoConnect API. The <ahref="api.html#home"><strong>AutoConnect::home</strong></a> function sets the URI as a link of the HOME item of the AutoConnect menu.</p>
<h2id="extend-autoconnect-menu-with-your-sketches"><iclass="fa fa-bars"></i>Extend AutoConnect menu with your sketches<aclass="headerlink"href="#extend-autoconnect-menu-with-your-sketches"title="Permanent link">¶</a></h2>
<p>The AutoConnect menu can contain HTML pages of your sketch as custom items. It works for HTML pages implemented by <strong>ESP8266WebServer::on</strong> handler or <strong>WebServer::on</strong> handler for ESP32. That is, you can make it as menu items to invoke the legacy web page. The below screenshot is the result of adding an example sketch for the ESP8266WebServer library known as <ahref="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer/examples/FSBrowser">FSBrowser</a> to the AutoConnect menu item. It adds Edit and List items with little modification of the legacy sketch code.</p>
<p>The AutoConnect menu can contain HTML pages of your owns sketch as custom items. It works for HTML pages implemented by <strong>ESP8266WebServer::on</strong> handler or <strong>WebServer::on</strong> handler for ESP32. That is, you can make it as menu items to invoke the legacy web page. The below screenshot is the result of adding an example sketch for the ESP8266WebServer library known as <ahref="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer/examples/FSBrowser">FSBrowser</a> to the AutoConnect menu item. It adds Edit and List items with little modification to the legacy sketch code.</p>
<p>You can extend the AutoConnect menu to improve the original sketches and according to the procedure described in section <ahref="advancedusage.html#casts-the-html-pages-to-be-add-on-into-the-menu">Advanced Usage section</a>.</p>
<p>You can extend the AutoConnect menu to improve the original sketches and according to the procedure described in section <ahref="advancedusage.html#casts-the-html-pages-to-be-add-on-into-the-menu"><em>Advanced Usage</em></a>.</p>
<ahref="menuize.html"title="Constucting the menu"class="md-nav__link md-nav__link--active">
Constucting the menu
<ahref="menuize.html"title="Attach the menu"class="md-nav__link md-nav__link--active">
Attach the menu
</a>
@ -759,7 +759,7 @@
<h1>Constucting the menu</h1>
<h1>Attach the menu</h1>
<h2id="what-menus-can-be-made-using-autoconnect">What menus can be made using AutoConnect<aclass="headerlink"href="#what-menus-can-be-made-using-autoconnect"title="Permanent link">¶</a></h2>
<p>AutoConnect generates a menu dynamically depending on the instantiated <ahref="acintro.html#how-it-works">AutoConnectAux</a> at the sketch executing time. Usually, it is a collection of <ahref="acelements.html">AutoConnectElement</a>. In addition to this, you can generate a menu from only AutoConnectAux, without AutoConnectElements.<br>In other words, you can easily create a built-in menu featuring the WiFi connection facility embedding the legacy web pages.</p>
@ -784,12 +784,18 @@
<li>Add the menu item named "<strong>Edit</strong>" and "<strong>List</strong>" of AutoConnectAux as each page.</li>
<li>Replace the instance of ESP8266WebServer to AutoConnect.</li>
<li>Change the menu title to FSBrowser using <ahref="apiconfig.html#title">AutoConnectConfig::title</a>.</li>
<li>Join the legacy pages to AutoConnect declared at step #1 using <ahref="api.html#join">AutoConnect::join</a>.<br>Joining multiple at one time with <ahref="https://ja.cppreference.com/w/cpp/container/vector/vector">std::vector</a>'s'<ahref="https://en.cppreference.com/w/cpp/language/list_initialization">list initialization</a>.</li>
<li>Join the legacy pages to AutoConnect declared at step #1 using <ahref="api.html#join">AutoConnect::join</a>.<br>Joining multiple at one time with the <ahref="https://en.cppreference.com/w/cpp/language/list_initialization">list initialization</a> for<ahref="https://ja.cppreference.com/w/cpp/container/vector/vector">std::vector</a>.</li>
<li>According to the basic procedure of AutoConnect.<br>Establish a connection with <ahref="api.html#begin">AutoConnect::begin</a> and perform <ahref="api.html#handleclient">AutoConnect::handleClient</a> in <strong>loop()</strong>.</li>
</ol>
<p><iclass="fa fa-code"></i> <strong>Modification for FSBrowser</strong><small>(part of sketch code)</small></p>
<p><iclass="fa fa-code"></i> <strong>Modification for FSBrowser</strong><small>(a part of sketch code)</small></p>
<p>... and embeds a hyperlink with an <ahref="apiextra.html#icons">icon</a> in the bottom of the body section of <em>index.htm</em> contained in the data folder to jump to the AutoConnect menu.</p>
Hieromon Ikasamo
5 years ago
