Hieromon Ikasamo
6 years ago
parent
58cfc4d799
commit
65f964e036
@ -0,0 +1,35 @@ |
|||||||
|
## The elements for the custome Web pages |
||||||
|
|
||||||
|
Representative HTML elements for making the custom Web page are provided as AutoConnectElements. |
||||||
|
|
||||||
|
- AutoConnectButton: Labeled action button |
||||||
|
- AutoConnectCheckbox: Labeled checkbox |
||||||
|
- AutoConnectElement: General tag |
||||||
|
- AutoConnectInput: Labeled text input box |
||||||
|
- AutoConnectRadio: Labeled radio button |
||||||
|
- AutoConnectSelect: Selection list |
||||||
|
- AutoConnectSubmit: Submit button |
||||||
|
- AutoConnectText: Style attributed text |
||||||
|
|
||||||
|
Each element has a common attribute and its own attributes. |
||||||
|
|
||||||
|
## Layout on custom Web page |
||||||
|
|
||||||
|
You can specify the direction to arrange the radio buttons as **AutoConnectRadio** vertically or horizontally. The checkbox as **AutoConnectCheckbox** is not divided in a line by each element. In order to arrange vertically, it is necessary to clearly indicate the **<br>** tag. Other elements are aligned vertically. This basic layout depends on the CSS of the AutoConnect menu so it can not be changed drastically. |
||||||
|
|
||||||
|
## AutoConnectElement - <small>A basic class of elements</small> |
||||||
|
|
||||||
|
## AutoConnectButton |
||||||
|
|
||||||
|
## AutoConnectCheckbox |
||||||
|
|
||||||
|
## AutoConnectInput |
||||||
|
|
||||||
|
## AutoConnectRadio |
||||||
|
|
||||||
|
## AutoConnectSelect |
||||||
|
|
||||||
|
## AutoConnectSubmit |
||||||
|
|
||||||
|
## AutoConnectText |
||||||
|
|
||||||
@ -0,0 +1,7 @@ |
|||||||
|
|
||||||
|
|
||||||
|
## loading and saving AutoConnectElements |
||||||
|
|
||||||
|
## page transition |
||||||
|
|
||||||
|
## Parameter handling |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
## What it is |
||||||
|
|
||||||
|
<span style="margin-left:20px;float:right;width:320px;height:550px;"><img data-gifffer="../images/aux_ov.gif" data-gifffer-width="320" data-gifffer-height="550" /></span> |
||||||
|
AutoConnect can handle custom Web pages prepared by user sketches individually. Custom Web pages are displayed in the [AutoConnect menu](menu.md) 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**](acelements.md) class. Furthermore, an input box, a check box, a submit button, etc. are implemented by classes derived from AutoConnectElement. |
||||||
|
|
||||||
|
<img src="../images/ac_objects.svg"> |
||||||
|
|
||||||
|
AutoConnectAux is a container for AutoConnectElements. To make a custom Web page, create elements that make up the page and put it in the AutoConnectAux object. Joining that AutoConnectAux object to AutoConnect will integrate the custom Web page into the AutoConnect menu. |
||||||
|
|
||||||
|
<img src="../images/ac_declaration.svg"> |
||||||
|
|
||||||
|
The above figure shows a code sequence that declares AutoConnectElements and put in the AutoConnectAux container and integrates those into AutoConnect. Declare two text elements named '*header*', '*caption*' and add those to the AutoConnectAux object *aux*. Bind it to an AutoConnect object called the '*portal*'. It's basic procedure for configuring the custom Web page. Also, further explanation of AutoConnectElements is the [documentation](acelements.md). |
||||||
|
|
||||||
|
## Custom Web pages in AutoConnect menu |
||||||
|
|
||||||
|
<ul class="horizontal-list"> |
||||||
|
<li><img style="margin:0 20px auto;float:left;width:320px;height:360px;" src="../images/ac_auxmenu.png"> |
||||||
|
Custom Web pages as AutoConnectAux are integrated into the <a href="menu.html">AutoConnect menu</a>. AutoConnectAux object owns title and URI as member variables. 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 is displayed at the bottom of the AutoConnect menu as the left figure.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup> It is a hyperlink as URI you given to the page and taps it will display the page composed of AutoConnectElements. The title is also shown to top left corner of the custom page, and a hyperlink to AutoConnect statistical screen is contained.</li> |
||||||
|
</ul> |
||||||
|
|
||||||
|
[^1]:There is no overlay in the actual menu. |
||||||
|
|
||||||
|
## Multiple custom Web pages |
||||||
|
|
||||||
|
You can create multiple custom pages, integrate them into the AutoConnect menu, and specify pages to invokes from the menu. The following code combines three AutoConnectAuxs to a AutoConnect object as '*portal*'. |
||||||
|
|
||||||
|
<img align="center" width="520px" src="../images/ac_auxjoin_multi.svg"> |
||||||
|
|
||||||
|
<ul class="horizontal-list"> |
||||||
|
<li><span style="margin-left:20px;float:right;width:320px;height:550px;"><img data-gifffer="../images/aux_menu.gif" data-gifffer-width="320" data-gifffer-height="550" /></span><b>False</b> is specified as the third parameter of '<i>aux2</i>' in the above code. 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. Because '<i>aux1</i>' and '<i>aux2</i>' in this example have a pair of page transitions. The sketch of this animation is written to transition to '<i>aux2</i>' by the utility of the <b>AutoConnectSubmit</b> element owned by '<i>aux1</i>'.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup><br>An '<i>aux2</i>' page transitions only from the submit button of '<i>aux1</i>'. 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 '<i>aux2</i>' from AutoConnect menu lines. The third parameter of the AutoConnectAux constructor is used for this purpose.</li> |
||||||
|
</ul> |
||||||
|
|
||||||
|
## Basic steps to use custom Web pages |
||||||
|
|
||||||
|
So, the basic procedure is as follows. |
||||||
|
|
||||||
|
1. Create or define AutoConnectAux. |
||||||
|
2. Create or define [AutoConnectElement(s)](acelements.md). |
||||||
|
3. Add [AutoConnectElement(s)](acelements.md) to AutoConnectAux. |
||||||
|
4. Create more AutoConnectAux containing [AutoConnectElement(s)](acelements.md), if necessary. |
||||||
|
5. Join prepared AutoConnectAux(s) to [AutoConnect](api.md#autoconnect-api). |
||||||
|
6. Invoke [AutoConnect::begin()](api.md#begin). |
||||||
|
|
||||||
|
[^2]: |
||||||
|
The sketch is actually this: |
||||||
|
```cpp |
||||||
|
#include <ESP8266WiFi.h> |
||||||
|
#include <ESP8266WebServer.h> |
||||||
|
#include <AutoConnect.h> |
||||||
|
|
||||||
|
AutoConnect portal; |
||||||
|
|
||||||
|
ACText(header, "MQTT broker settings"); |
||||||
|
ACText(caption1, "Publishing the WiFi..."); |
||||||
|
ACSubmit(save, "SAVE", "/mqtt_save"); |
||||||
|
AutoConnectAux aux1("/mqtt_setting", "MQTT Setting", { header, caption1, save }); |
||||||
|
|
||||||
|
ACText(caption2, "Save parameters"); |
||||||
|
ACSubmit(start, "START", "/mqtt_start"); |
||||||
|
AutoConnectAux aux2("/mqtt_save", "MQTT Setting", false, { caption2, start }); |
||||||
|
|
||||||
|
AutoConnectAux aux3("/mqtt_start", "MQTT Start"); |
||||||
|
|
||||||
|
void setup() { |
||||||
|
portal.join({ aux1, aux2, aux3 }); |
||||||
|
portal.begin(); |
||||||
|
} |
||||||
|
|
||||||
|
void loop() { |
||||||
|
portal.handleClient(); |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
<script> |
||||||
|
window.onload = function() { |
||||||
|
Gifffer(); |
||||||
|
}; |
||||||
|
</script> |
||||||
@ -0,0 +1 @@ |
|||||||
|
To process the described AutoConnect element written in the JSON is you need to install the ArduinoJson library. |
||||||
@ -0,0 +1,37 @@ |
|||||||
|
## <i class="fa fa-code"></i> Constructor |
||||||
|
|
||||||
|
### AutoConnectAux |
||||||
|
|
||||||
|
```cpp |
||||||
|
AutoConnectAux(const String& uri = String(""), const String& title = String(""), const bool menu = true, const AutoConnectElementVT addons = AutoConnectElementVT()) |
||||||
|
``` |
||||||
|
|
||||||
|
## <i class="fa fa-code"></i> Public member functions |
||||||
|
|
||||||
|
### add |
||||||
|
|
||||||
|
```cpp |
||||||
|
void add(AutoConnectElement& addon) |
||||||
|
``` |
||||||
|
```cpp |
||||||
|
void add(AutoConnectElementVT addons) |
||||||
|
``` |
||||||
|
Add an element to the auxiliary page. Add the element set to the auxiliary page. |
||||||
|
|
||||||
|
|
||||||
|
template<typename T> |
||||||
|
T& getElement(const String& name); |
||||||
|
AutoConnectElement* getElement(const String& name); /**< Get registered AutoConnectElement as specified name */ |
||||||
|
void menu(const bool post) { _menu = post; } /**< Set or reset the display as menu item for this aux */ |
||||||
|
bool release(const String& name); /**< Release an AutoConnectElement */ |
||||||
|
bool setElementValue(const String& name, const String value); /**< Set value to specified element */ |
||||||
|
bool setElementValue(const String& name, std::vector<String> const& values); /**< Set values collection to specified element */ |
||||||
|
void setTitle(const String title) { _title = title; } /**< Set a title of the auxiliary page */ |
||||||
|
void on(const AuxHandlerFunctionT handler, const AutoConnectExitOrder_t order = AC_EXIT_AHEAD) { _handler = handler; _order = order; } /**< Set user handler */ |
||||||
|
bool load(const String& in); /**< Load whole elements to AutoConnectAux Page */ |
||||||
|
bool load(const __FlashStringHelper* in); /**< Load whole elements to AutoConnectAux Page */ |
||||||
|
bool load(Stream& in); /**< Load whole elements to AutoConnectAux Page */ |
||||||
|
bool loadElement(const String& in, const String& name = String("")); /**< Load specified element */ |
||||||
|
bool loadElement(const __FlashStringHelper* in, const String& name = String("")); /**< Load specified element */ |
||||||
|
bool loadElement(Stream& in, const String& name = String("")); /**< Load specified element */ |
||||||
|
size_t saveElement(Stream& out, std::vector<String> const& names = {}); /**< Write elements of AutoConnectAux to the stream */ |
||||||
@ -0,0 +1,241 @@ |
|||||||
|
## <i class="fa fa-code"></i> Constructor |
||||||
|
|
||||||
|
### AutoConnectConfig |
||||||
|
|
||||||
|
```cpp |
||||||
|
AutoConnectConfig(); |
||||||
|
``` |
||||||
|
```cpp |
||||||
|
AutoConnectConfig(const char* ap, const char* password); |
||||||
|
``` |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Parameters**</dt> |
||||||
|
<dd><span class="apidef">ap</span>SSID for SoftAP. The length should be up to 31. The default value is **esp8266ap** for ESP8266, **esp32ap** for ESP32.</dd> |
||||||
|
<dd><span class="apidef">password</span>Password for SodtAP. The length should be from 8 to up to 63. The default value is **12345678**.</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
## <i class="fa fa-code"></i> Public member variables |
||||||
|
|
||||||
|
### apid |
||||||
|
SoftAP's SSID. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>String</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### apip |
||||||
|
|
||||||
|
Sets IP address for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd><span class="apidef" style="width:230px;">IPAddress</span>The default value is **192.168.244.1**</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### autoReconnect |
||||||
|
|
||||||
|
Automatically will try to reconnect with the past established access point (BSSID) when the current configured SSID in ESP8266/ESP32 could not be connected. By enabling this option, *AutoConnect::begin()* function will attempt to reconnect to a known access point using credentials stored in the EEPROM, even if the connection failed by current SSID. |
||||||
|
If the connection fails, starts the captive portal in SoftAP + STA mode. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>bool</dd> |
||||||
|
<dt>**Value**</dt> |
||||||
|
<dd><span class="apidef" style="width:230px;">true</span>Reconnect automatically.</dd> |
||||||
|
<dd><span class="apidef" style="width:230px;">false</span>Starts Captive Portal in SoftAP + STA mode without trying to reconnect. This is the default.</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
When the autoReconnect option is enabled, an automatic connection will behave if the following conditions are satisfied. |
||||||
|
|
||||||
|
- Invokes *AutoConnect::begin* without user name and password parameter as ```begin()```. |
||||||
|
- If one of the saved BSSIDs (not the SSID) of the credentials matches the BSSID detected by the network scan. |
||||||
|
|
||||||
|
### autoReset |
||||||
|
|
||||||
|
Reset ESP8266 module automatically after WLAN disconnected. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>bool</dd> |
||||||
|
<dt>**Value**</dt> |
||||||
|
<dd><span class="apidef" style="width:230px;">true</span>Reset after WiFi disconnected automatically.</dd> |
||||||
|
<dd><span class="apidef" style="width:230px;">false</span>No reset.</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### autoRise |
||||||
|
|
||||||
|
Captive portal activation switch. False for disabling the captive portal. It prevents starting the captive portal even if the connection at the first *WiFi.begin* fails. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>bool</dd> |
||||||
|
<dt>**Value**</dt> |
||||||
|
<dd><span class="apidef" style="width:230px;">true</span>Enable the captive portal. This is the default.</dd> |
||||||
|
<dd><span class="apidef" style="width:230px;">false</span>Disable the captive portal.</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### autoSave |
||||||
|
|
||||||
|
The credential saved automatically at the connection establishment. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>AC_SAVECREDENTIAL_t</dd> |
||||||
|
<dt>**Value**</dt> |
||||||
|
<dd><span class="apidef" style="width:230px;">AC_SAVECREDENTIAL_AUTO</span>The credential saved automatically. This is the default.</dd> |
||||||
|
<dd><span class="apidef" style="width:230px;">AC_SAVECREDENTIAL_NEVER</span>The credential no saved.</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### bootUri |
||||||
|
|
||||||
|
Specify the location to be redirected after module reset in the AutoConnect menu. It is given as an enumeration value of **AC_ONBOOTURI_t** indicating either the AutoConnect root path or the user screen home path. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>AC_ONBOOTURI_t</dd> |
||||||
|
<dt>**Value**</dt> |
||||||
|
<dd><span class="apidef" style="width:230px;">AC_ONBOOTURI_ROOT</span>Resetting the module redirects it to the AutoConnect root path. The root path is assumed to be AUTOCONNECT_URI defined in AutoConnectDefs.h.</dd> |
||||||
|
<dd><span class="apidef" style="width:230px;">AC_ONBOOTURI_HOME</span>It is redirected to the uri specified by [**AutoConnectConfig::homeUri**](api.md#homeuri).</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### boundaryOffset |
||||||
|
|
||||||
|
Sets the offset address of the credential storage area for EEPROM. This value must be between greater than 4 and less than flash sector size. (4096 by SDK) |
||||||
|
The default value is 0. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>uint16_t</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
!!! warning "It will conflict with user data." |
||||||
|
If the sketch leaves this offset at zero, it will conflict the storage area of credentials with the user sketch owned data. It needs to use the behind of credential area. |
||||||
|
|
||||||
|
### channel |
||||||
|
|
||||||
|
The channel number of WIFi when SoftAP starts. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>uint8_t</dd> |
||||||
|
<dt>**Value**</dt> |
||||||
|
<dd>1 ~ 14. The default value is 1.</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
!!! info "How do I choose Channel" |
||||||
|
Espressif Systems had announced the [application note](https://www.espressif.com/sites/default/files/esp8266_wi-fi_channel_selection_guidelines.pdf) about Wi-Fi channel selection. |
||||||
|
|
||||||
|
### dns1 |
||||||
|
|
||||||
|
Set primary DNS server address when using static IP address. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>IPAddress</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
#### dns2 |
||||||
|
|
||||||
|
Set secondary DNS server address when using static IP address. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>IPAddress</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### gateway |
||||||
|
|
||||||
|
Sets gateway address for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd><span class="apidef" style="width:230px;">IPAddress</span>The default value is **192.168.244.1**</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### hidden |
||||||
|
|
||||||
|
Sets SoftAP to hidden SSID. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>uint8_t</dd> |
||||||
|
<dt>**Value**</dt> |
||||||
|
<dd><span class="apidef" style="width:230px;">0</span>SSID will be appeared. This is the default.</dd> |
||||||
|
<dd><span class="apidef" style="width:230px;">1</span>SSID will be hidden.</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### homeUri |
||||||
|
|
||||||
|
Sets the home path of user sketch. This path would be linked from 'HOME' in the AutoConnect menu. The default for homeUri is "/". |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>String</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### hostName |
||||||
|
|
||||||
|
Sets the station host name of ESP8266/ESP32. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>String</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### immediateStart |
||||||
|
|
||||||
|
Disable the first WiFi.begin() and start the captive portal. If this option is enabled, the module will be in AP_STA mode and the captive portal will be activated regardless of [**autoRise::AutoConnectConfig**](api.md#autorise) specification. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>bool</dd> |
||||||
|
<dt>**Value**</dt> |
||||||
|
<dd><span class="apidef" style="width:230px;">true</span>Start the captive portal with [**AutoConnect::begin**](api.md#begin).</dd> |
||||||
|
<dd><span class="apidef" style="width:230px;">false</span>Enable the first WiFi.begin() and it will start captive portal when connection failed. This is default.</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### netmask |
||||||
|
|
||||||
|
Sets subnet mask for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd><span class="apidef" style="width:230px;">IPAddress</span>The default value is **255.255.255.0**</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### psk |
||||||
|
|
||||||
|
Sets password for SoftAP. The length should be from 8 to up to 63. The default value is **12345678**. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>String</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### staip |
||||||
|
|
||||||
|
Set a static IP address. The IP will behave with STA mode. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>IPAddress</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### staGateway |
||||||
|
|
||||||
|
Set the gateway address when using static IP address. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>IPAddress</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
### staNetmask |
||||||
|
|
||||||
|
Set the subnetmask when using static IP address. |
||||||
|
<dl class="apidl"> |
||||||
|
<dt>**Type**</dt> |
||||||
|
<dd>IPAddress</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
## <i class="fa fa-code"></i> AutoConnectConfig example |
||||||
|
|
||||||
|
```arduino |
||||||
|
AutoConenct Portal; |
||||||
|
AutoConenctConfig Config("", "passpass"); // SoftAp name is determined at runtime |
||||||
|
Config.apid = ESP.hostname(); // Retrieve host name to SotAp identification |
||||||
|
Config.apip = IPAddress(192,168,10,101); // Sets SoftAP IP address |
||||||
|
Config.gateway = IPAddress(192,168,10,1); // Sets WLAN router IP address |
||||||
|
Config.netmask = IPAddress(255,255,255,0); // Sets WLAN scope |
||||||
|
Config.autoReconnect = true; // Enable auto-reconnect |
||||||
|
Config.autoSave = AC_SAVECREDENTIAL_NEVER; // No save credential |
||||||
|
COnfig.boundaryOffet = 64; // Reserve 64 bytes for the user data in EEPROM. |
||||||
|
Config.homeUri = "/index.html" // Sets home path of the sketch application |
||||||
|
Config.staip = IPAddress(192,168,10,10); // Sets static IP |
||||||
|
Config.staGateway = IPAddress(192,168,10,1); // Sets WiFi router address |
||||||
|
Config.staNetmask = IPAddress(255,255,255,0); // Sets WLAN scope |
||||||
|
Config.dns1 = IPAddress(192,168,10,1); // Sets primary DNS address |
||||||
|
Portal.config(Config); // Configure AutoConnect |
||||||
|
Portal.begin(); // Starts and behaves captive portal |
||||||
|
``` |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
## <i class="fa fa-gift"></i> Icons |
||||||
|
|
||||||
|
The library presents two PNG icons which can be used to embed a hyperlink to the AutoConnect menu. |
||||||
|
|
||||||
|
- Bar type <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAApklEQVRYR2NkGGDAOMD2M4w6YDQEkEMgEJggZwCxGI0T5mug+alAvBFkD7IDXtLBcpjfXgEZ4ugOeAETpHEIgIwHeVYC3QH+0CgAS9AQgCwHRcFmdAfQ0E7cRo9mw0EVAqPlAKhwEKVTVsBZDsyiQ2k4Wg6gxPKgyoZ0Sn+o1iCHQBBQaiYQi9DYJTjbAyAJWluOtz0wWg7QOOqxGz+aDUdDYMBDAACA0x4hs/MPrwAAAABJRU5ErkJggg==" title="AutoConnect menu" alt="AutoConnect menu" /> |
||||||
|
- Cog type <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC2klEQVRIS61VvWsUQRSfmU2pon9BUIkQUaKFaCBKgooSb2d3NSSFKbQR/KrEIiIKBiGF2CgRxEpjQNHs7mwOUcghwUQ7g58IsbGxEBWsb2f8zR177s3t3S2cA8ftzPu993vzvoaSnMu2vRKlaqgKp74Q/tE8qjQPyHGcrUrRjwlWShmDbFMURd/a6TcQwNiYUmpFCPElUebcuQ2vz6aNATMVReHEPwzfSSntDcNwNo2rI+DcvQzhpAbA40VKyV0p1Q9snzBG1qYVcYufXV1sREraDcxpyHdXgkfpRBj6Uwm2RsC5dxxmZ9pdOY9cKTISRcHTCmGiUCh4fYyplTwG2mAUbtMTBMHXOgK9QfyXEZr+TkgQ1oUwDA40hEgfIAfj+HuQRaBzAs9eKyUZ5Htx+T3ZODKG8DzOJMANhmGomJVMXPll+hx9UUAlzZrJJ4QNCDG3VEfguu7mcpmcB/gkBOtShhQhchAlu5jlLUgc9ENgyP5gf9+y6LTv+58p5zySkgwzLNOIGc8sEoT1Lc53NMlbCQQuvMxeCME1NNPVVkmH/i3IzzXDtCSA0qQQwZWOCJDY50jsQRjJmkslEOxvTcDRO6zPxOh5xZglKkYLhWM9jMVnkIsTyMT6NBj7IbOCEjm6HxNVVTo2WXqEWJZ1T8rytB6GxizyDkPhWVpBqfiXUtbo/HywYJSpA9kMamNNPZ71R9Hcm+TMHHZNGw3EuraXEUldbfvw25UdOjqOt+JhMwJd7+jSTpZaEiIcaCDwPK83jtWnTkwnunFMtxeL/ge9r4XItt1RNNaj/0GAcV2bR3U5sG3nEh6M61US+Qrfd9Bs31GGulI2GOS/8dgcQZV1w+ApjIxB7TDwF9GcNzJzoA+rD0/8HvPnXQJCt2qFCwbBTfRI7UyXumWVt+HJ9NO4XI++bdsb0YyrqXmlh+AWOLHaLqS5CLQR5EggR3YlcVS9gKeH2hnX8r8Kmi1CAsl36QAAAABJRU5ErkJggg==" title="AutoConnect menu" alt="AutoConnect menu" /> |
||||||
|
|
||||||
|
To reference the icon, use the **AUTOCONNECT_LINK** macro in the sketch. It expands into the string literal as an HTML ```<a></a>``` tag with PNG embedded of the AutoConnect menu hyperlinks. Icon type is specified by the parameter of the macro. |
||||||
|
|
||||||
|
<dl class="apidl"> |
||||||
|
<dd><span class="apidef">BAR_24</span>Bars icon, 24x24.</dd> |
||||||
|
<dd><span class="apidef">BAR_32</span>Bars icon, 32x32.</dd> |
||||||
|
<dd><span class="apidef">BAR_48</span>Bars icon, 48x48.</dd> |
||||||
|
<dd><span class="apidef">COG_24</span>Cog icon, 24x24.</dd> |
||||||
|
<dd><span class="apidef">COG_32</span>Cog icon, 32x32.</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
!!! note "Usage" |
||||||
|
```arduino |
||||||
|
String html = "<html>"; |
||||||
|
html += AUTOCONNECT_LINK(BAR_32); |
||||||
|
html += "</html>"; |
||||||
|
server.send(200, "text/html", html); |
||||||
|
``` |
||||||
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 160 KiB |
|
After Width: | Height: | Size: 189 KiB |
Loading…
Reference in new issue