Merge pull request #313 from tablatronix/development

Development and cleanup
This commit is contained in:
Shawn A
2018-01-17 10:54:37 -06:00
committed by GitHub
12 changed files with 1471 additions and 387 deletions
+13 -10
View File
@@ -43,16 +43,19 @@ First attempt at a library. Lots more changes and fixes to do. Contributions are
![ESP8266 WiFi Captive Portal Homepage](http://i.imgur.com/YPvW9eql.png) ![ESP8266 WiFi Captive Portal Configuration](http://i.imgur.com/oicWJ4gl.png)
## Wishlist
- ~~remove dependency on EEPROM library~~
- ~~move HTML Strings to PROGMEM~~
- ~~cleanup and streamline code~~ (although this is ongoing)
- if timeout is set, extend it when a page is fetched in AP mode
- ~~add ability to configure more parameters than ssid/password~~
- ~~maybe allow setting ip of ESP after reboot~~
- ~~add to Arduino Library Manager~~
- ~~add to PlatformIO~~
- add multiple sets of network credentials
- ~~allow users to customize CSS~~
- [x] remove dependency on EEPROM library
- [x] move HTML Strings to PROGMEM
- [x] cleanup and streamline code (although this is ongoing)
- [x] if timeout is set, extend it when a page is fetched in AP mode
- [x] add ability to configure more parameters than ssid/password
- [x] maybe allow setting ip of ESP after reboot
- [x] add to Arduino Library Manager
- [x] add to PlatformIO
- [ ] add multiple sets of network credentials
- [x] allow users to customize CSS
- [ ] ESP32 support or instructions
- [ ] rewrite documentation for simplicity, based on scenarios/goals
- [ ] rely on the SDK's built in auto connect more than forcing a connect
## Quick Start
+920 -304
View File
File diff suppressed because it is too large Load Diff
+103 -27
View File
@@ -5,7 +5,7 @@
inspired by:
http://www.esp8266.com/viewtopic.php?f=29&t=2520
https://github.com/chriscook8/esp-arduino-apboot
https://github.com/esp8266/Arduino/tree/esp8266/hardware/esp8266com/esp8266/libraries/DNSServer/examples/CaptivePortalAdvanced
https://github.com/esp8266/Arduino/tree/master/libraries/DNSServer/examples/CaptivePortalAdvanced
Built by AlexT https://github.com/tzapu
Licensed under MIT license
**************************************************************/
@@ -22,21 +22,43 @@ extern "C" {
#include "user_interface.h"
}
const char HTTP_HEAD[] PROGMEM = "<!DOCTYPE html><html lang=\"en\"><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\"/><title>{v}</title>";
const char HTTP_STYLE[] PROGMEM = "<style>.c{text-align: center;} div,input{padding:5px;font-size:1em;} input{width:95%;} body{text-align: center;font-family:verdana;} button{border:0;border-radius:0.3rem;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%;} .q{float: right;width: 64px;text-align: right;} .l{background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAALVBMVEX///8EBwfBwsLw8PAzNjaCg4NTVVUjJiZDRUUUFxdiZGSho6OSk5Pg4eFydHTCjaf3AAAAZElEQVQ4je2NSw7AIAhEBamKn97/uMXEGBvozkWb9C2Zx4xzWykBhFAeYp9gkLyZE0zIMno9n4g19hmdY39scwqVkOXaxph0ZCXQcqxSpgQpONa59wkRDOL93eAXvimwlbPbwwVAegLS1HGfZAAAAABJRU5ErkJggg==\") no-repeat left center;background-size: 1em;}</style>";
const char HTTP_HEAD[] PROGMEM = "<!DOCTYPE html><html lang='en'><head><meta name='format-detection' content='telephone=no'><meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'/><title>{v}</title>";
// const char HTTP_STYLE[] PROGMEM = "<style>.c{text-align: center;} div,input{padding:5px;font-size:1em;} input{width:95%;} body{text-align: center;font-family:verdana;} button{border:0;border-radius:0.3rem;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%;} .q{float: right;width: 64px;text-align: right;} .l{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAALVBMVEX///8EBwfBwsLw8PAzNjaCg4NTVVUjJiZDRUUUFxdiZGSho6OSk5Pg4eFydHTCjaf3AAAAZElEQVQ4je2NSw7AIAhEBamKn97/uMXEGBvozkWb9C2Zx4xzWykBhFAeYp9gkLyZE0zIMno9n4g19hmdY39scwqVkOXaxph0ZCXQcqxSpgQpONa59wkRDOL93eAXvimwlbPbwwVAegLS1HGfZAAAAABJRU5ErkJggg==') no-repeat left center;background-size: 1em;}</style>";
const char HTTP_STYLE[] PROGMEM = "<style>"
".c,body{text-align:center;font-family:verdana}div,input{padding:5px;font-size:1em}input{width:95%;margin:5px 0}button{border:0;border-radius:.3rem;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%}"
".wrap {text-align:left;display:inline-block;min-width:260px}"
// links
"a{color:#000;font-weight:700;text-decoration:none}a:hover{color:#1fa3ec;text-decoration:underline}"
// quality icons
".q{height:16px;margin:0;padding:0 5px;text-align:right;min-width:38px;float:right}.q.q-0:after{background-position-x:0}.q.q-1:after{background-position-x:-16px}.q.q-2:after{background-position-x:-32px}.q.q-3:after{background-position-x:-48px}.q.q-4:after{background-position-x:-64px}.q.l:before{background-position-x:-80px;padding-right:5px}.ql .q{float:left}.qinv .q{-webkit-filter:invert(1);filter:invert(1)}.q:after,.q:before{content:'';width:16px;height:16px;display:inline-block;background-repeat:no-repeat;background-position: 16px 0;"
"background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAQCAMAAADeZIrLAAAAJFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADHJj5lAAAAC3RSTlMAIjN3iJmqu8zd7vF8pzcAAABsSURBVHja7Y1BCsAwCASNSVo3/v+/BUEiXnIoXkoX5jAQMxTHzK9cVSnvDxwD8bFx8PhZ9q8FmghXBhqA1faxk92PsxvRc2CCCFdhQCbRkLoAQ3q/wWUBqG35ZxtVzW4Ed6LngPyBU2CobdIDQ5oPWI5nCUwAAAAASUVORK5CYII=');}"
// icons @2x media query (32px rescaled)
"@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.q:before,.q:after {"
"background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAAgCAMAAACfM+KhAAAALVBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAOrOgAAAADnRSTlMAESIzRGZ3iJmqu8zd7gKjCLQAAACmSURBVHgB7dDBCoMwEEXRmKlVY3L//3NLhyzqIqSUggy8uxnhCR5Mo8xLt+14aZ7wwgsvvPA/ofv9+44334UXXngvb6XsFhO/VoC2RsSv9J7x8BnYLW+AjT56ud/uePMdb7IP8Bsc/e7h8Cfk912ghsNXWPpDC4hvN+D1560A1QPORyh84VKLjjdvfPFm++i9EWq0348XXnjhhT+4dIbCW+WjZim9AKk4UZMnnCEuAAAAAElFTkSuQmCC');"
"background-size: 95px 16px;}}"
// msg callouts
".msg{padding:20px;margin:20px 0;border:1px solid #eee;border-left-width:5px;border-radius:3px;border-left-color:#777}.msg h4{margin-top:0;margin-bottom:5px}.msg.P{border-left-color:#1fa3ec}.msg.P h4{color:#1fa3ec}.msg.D{border-left-color:#d9534f}.msg.D h4{color:#d9534f}"
// lists
"dt{font-weight:bold}dd{margin:0;padding:0 0 0.5em 0}"
"</style>";
const char HTTP_SCRIPT[] PROGMEM = "<script>function c(l){document.getElementById('s').value=l.innerText||l.textContent;document.getElementById('p').focus();}</script>";
const char HTTP_HEAD_END[] PROGMEM = "</head><body><div style='text-align:left;display:inline-block;min-width:260px;'>";
const char HTTP_PORTAL_OPTIONS[] PROGMEM = "<form action=\"/wifi\" method=\"get\"><button>Configure WiFi</button></form><br/><form action=\"/0wifi\" method=\"get\"><button>Configure WiFi (No Scan)</button></form><br/><form action=\"/i\" method=\"get\"><button>Info</button></form><br/><form action=\"/r\" method=\"post\"><button>Reset</button></form>";
const char HTTP_ITEM[] PROGMEM = "<div><a href='#p' onclick='c(this)'>{v}</a>&nbsp;<span class='q {i}'>{r}%</span></div>";
const char HTTP_FORM_START[] PROGMEM = "<form method='get' action='wifisave'><input id='s' name='s' length=32 placeholder='SSID'><br/><input id='p' name='p' length=64 type='password' placeholder='password'><br/>";
const char HTTP_FORM_LABEL[] PROGMEM = "<label for=\"{i}\">{p}</label>";
const char HTTP_FORM_PARAM[] PROGMEM = "<br/><input id='{i}' name='{n}' length={l} placeholder='{p}' value='{v}' {c}>";
const char HTTP_FORM_END[] PROGMEM = "<br/><button type='submit'>save</button></form>";
const char HTTP_SCAN_LINK[] PROGMEM = "<br/><div class=\"c\"><a href=\"/wifi\">Scan</a></div>";
const char HTTP_SAVED[] PROGMEM = "<div>Credentials Saved<br />Trying to connect ESP to network.<br />If it fails reconnect to AP to try again</div>";
const char HTTP_HEAD_END[] PROGMEM = "</head><body><div class='wrap'>";
const char HTTP_PORTAL_OPTIONS[] PROGMEM = "<form action='/wifi' method='GET'><button>Configure WiFi</button></form><br/><form action='/0wifi' method='GET'><button>Configure WiFi (No Scan)</button></form><br/><form action='/i' method='GET'><button>Info</button></form><br/><form action='/r' method='GET'><button>Restart</button></form><br/><form action='/exit' method='GET'><button>Quit</button></form>";
const char HTTP_ITEM[] PROGMEM = "<div><a href='#p' onclick='c(this)'>{v}</a><div role='img' aria-label='{r}%' title='{r}%' class='q q-{q} {i}'></div></div>";
// const char HTTP_ITEM[] PROGMEM = "<div><a href='#p' onclick='c(this)'>{v}</a> {R} {r}% {q} {e}</div>"; // test all tokens
//const char HTTP_ITEM_PADLOCK[] PROGMEM = "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAALVBMVEX///8EBwfBwsLw8PAzNjaCg4NTVVUjJiZDRUUUFxdiZGSho6OSk5Pg4eFydHTCjaf3AAAAZElEQVQ4je2NSw7AIAhEBamKn97/uMXEGBvozkWb9C2Zx4xzWykBhFAeYp9gkLyZE0zIMno9n4g19hmdY39scwqVkOXaxph0ZCXQcqxSpgQpONa59wkRDOL93eAXvimwlbPbwwVAegLS1HGfZAAAAABJRU5ErkJggg==' width='13px'/>";
const char HTTP_FORM_START[] PROGMEM = "<form method='POST' action='wifisave'><label for='s'>SSID</label><input id='s' name='s' maxlength=32 placeholder='{v}'><br/><label for='p'>Password</label><input id='p' name='p' maxlength='64' type='password' placeholder=''><br/>";
const char HTTP_FORM_END[] PROGMEM = "<br/><button type='submit'>Save</button></form>";
const char HTTP_FORM_LABEL[] PROGMEM = "<label for='{i}'>{t}</label>";
const char HTTP_FORM_PARAM_START[] PROGMEM = "<hr>";
const char HTTP_FORM_PARAM[] PROGMEM = "<br/><input id='{i}' name='{n}' maxlength={l} placeholder='' value='{v}' {c}>";
const char HTTP_FORM_PARAM_END[] PROGMEM = "<br/>";
const char HTTP_SCAN_LINK[] PROGMEM = "<br/><form action='/wifi' method='get'><button>Refresh</button></form>";
const char HTTP_SAVED[] PROGMEM = "<div class='msg'>Saving Credentials<br/>Trying to connect ESP to network.<br />If it fails reconnect to AP to try again</div>";
const char HTTP_END[] PROGMEM = "</div></body></html>";
#define WIFI_MANAGER_MAX_PARAMS 20
#define WIFI_MANAGER_MAX_PARAMS 10
#define WFM_LABEL_BEFORE 1
#define WFM_LABEL_AFTER 2
@@ -73,30 +95,34 @@ class WiFiManagerParameter {
class WiFiManager
{
public:
WiFiManager(Stream& consolePort);
WiFiManager();
~WiFiManager();
boolean autoConnect(boolean showStaticIPFields = false);
boolean autoConnect(char const *apName, char const *apPassword = NULL, boolean showStaticIPFields = false);
boolean autoConnect();
boolean autoConnect(char const *apName, char const *apPassword = NULL);
//if you want to always start the config portal, without trying to connect first
boolean startConfigPortal();
boolean startConfigPortal(char const *apName, char const *apPassword = NULL);
boolean process();
void startWebPortal();
void stopWebPortal();
// get the AP name of the config portal, so it can be used in the callback
String getConfigPortalSSID();
void resetSettings();
//sets timeout before webserver loop ends and exits even if there has been no setup.
//usefully for devices that failed to connect at some point and got stuck in a webserver loop
//sets timeout before AP,webserver loop ends and exits even if there has been no setup.
//useful for devices that failed to connect at some point and got stuck in a webserver loop
//in seconds setConfigPortalTimeout is a new name for setTimeout
void setConfigPortalTimeout(unsigned long seconds);
void setTimeout(unsigned long seconds);
void setTimeout(unsigned long seconds); // @deprecated, alias
//sets timeout for which to attempt connecting, usefull if you get a lot of failed connects
//sets timeout for which to attempt connecting, useful if you get a lot of failed connects
void setConnectTimeout(unsigned long seconds);
void setDebugOutput(boolean debug);
//defaults to not showing anything under 8% signal quality if called
void setMinimumSignalQuality(int quality = 8);
@@ -110,14 +136,22 @@ class WiFiManager
void setSaveConfigCallback( void (*func)(void) );
//adds a custom parameter
void addParameter(WiFiManagerParameter *p);
//if this is set, it will exit after config, even if connection is unsucessful.
//if this is set, it will exit after config, even if connection is unsuccessful.
void setBreakAfterConfig(boolean shouldBreak);
//if this is set, try WPS setup when starting (this will delay config portal for up to 2 mins)
//TODO
//if this is set, portal will be blocking and wait until save or exit, is false user must manually process to handle config portal
void setConfigPortalBlocking(boolean shouldBlock);
//if this is set, customise style
void setCustomHeadElement(const char* element);
//if this is true, remove duplicated Access Points - defaut true
void setRemoveDuplicateAPs(boolean removeDuplicates);
//setter for ESP wifi.persistent so we can remember it and restore user preference, as WIFi._persistent is protected
void setRestorePersistent(boolean persistent);
//if true, always show static net inputs, IP, subnet, gateway, if false, only show when already set.
void setShowStaticFields(boolean alwaysShow);
//if true disable captive portal redirection
void setCaptivePortalEnable(boolean enabled);
private:
std::unique_ptr<DNSServer> dnsServer;
@@ -130,14 +164,23 @@ class WiFiManager
void setupConfigPortal();
void startWPS();
bool startAP();
const char* _apName = "no-net";
const char* _apPassword = NULL;
// typedef enum WiFiMode
// {
// WIFI_OFF = 0, WIFI_STA = 1, WIFI_AP = 2, WIFI_AP_STA = 3
// } WiFiMode_t;
String _apName = "no-net";
String _apPassword = "";
String _ssid = "";
String _pass = "";
unsigned long _configPortalTimeout = 0;
unsigned long _connectTimeout = 0;
unsigned long _configPortalStart = 0;
boolean _userpersistent = true;
WiFiMode_t _usermode = WIFI_OFF;
boolean _enableCaptivePortal = true;
IPAddress _ap_static_ip;
IPAddress _ap_static_gw;
@@ -147,11 +190,13 @@ class WiFiManager
IPAddress _sta_static_sn;
boolean _sta_show_static_fields = false;
// option parameters
int _paramsCount = 0;
int _minimumQuality = -1;
boolean _removeDuplicateAPs = true;
boolean _shouldBreakAfterConfig = false;
boolean _tryWPS = false;
boolean _configPortalIsBlocking = true;
const char* _customHeadElement = "";
@@ -161,6 +206,8 @@ class WiFiManager
int status = WL_IDLE_STATUS;
int connectWifi(String ssid, String pass);
uint8_t waitForConnectResult();
uint8_t waitForConnectResult(uint16_t timeout);
String getWLStatusString(uint8_t status);
void handleRoot();
void handleWifi(boolean scan);
@@ -168,9 +215,24 @@ class WiFiManager
void handleInfo();
void handleReset();
void handleNotFound();
void handle204();
void handleExit();
void handleErase();
boolean captivePortal();
boolean configPortalHasTimeout();
boolean stopConfigPortal();
uint8_t handleConfigPortal();
bool WiFi_Mode(WiFiMode_t m);
bool WiFi_Mode(WiFiMode_t m,bool persistent);
bool WiFi_Disconnect();
bool WiFi_enableSTA(bool enable);
bool WiFi_enableSTA(bool enable,bool persistent);
bool ESP_eraseConfig();
void debugSoftAPConfig();
String getParamOut();
String getScanItemOut();
String getStaticOut();
// DNS server
const byte DNS_PORT = 53;
@@ -179,17 +241,31 @@ class WiFiManager
int getRSSIasQuality(int RSSI);
boolean isIp(String str);
String toStringIp(IPAddress ip);
boolean validApPassword();
String encryptionTypeStr(uint8_t authmode);
void reportStatus(String &page);
boolean connect;
boolean _debug = true;
boolean abort;
boolean reset = false;
boolean configPortalActive = false;
boolean webPortalActive = false;
boolean _debug = true;
boolean portalTimeoutResult = false;
boolean portalAbortResult = false;
boolean storeSTAmode = true; // option store persistent STA mode in connectwifi
int timer = 0;
void (*_apcallback)(WiFiManager*) = NULL;
void (*_savecallback)(void) = NULL;
Stream& _debugPort; // debug output stream ref
WiFiManagerParameter* _params[WIFI_MANAGER_MAX_PARAMS];
template <typename Generic>
void DEBUG_WM(Generic text);
template <typename Generic, typename Genericb>
void DEBUG_WM(Generic text,Genericb textb);
template <class T>
auto optionalIPFromString(T *obj, const char *s) -> decltype( obj->fromString(s) ) {
@@ -102,7 +102,7 @@ void setup() {
//sets timeout until configuration portal gets turned off
//useful to make it all retry or go to sleep
//in seconds
//wifiManager.setTimeout(120);
//wifiManager.setConfigPortalTimeout(120);
//fetches ssid and pass and tries to connect
//if it does not connect it starts an access point with the specified name
@@ -129,7 +129,7 @@ void setup() {
//sets timeout until configuration portal gets turned off
//useful to make it all retry or go to sleep
//in seconds
//wifiManager.setTimeout(120);
//wifiManager.setConfigPortalTimeout(120);
//fetches ssid and pass and tries to connect
//if it does not connect it starts an access point with the specified name
@@ -20,7 +20,7 @@ void setup() {
//sets timeout until configuration portal gets turned off
//useful to make it all retry or go to sleep
//in seconds
wifiManager.setTimeout(180);
wifiManager.setConfigPortalTimeout(180);
//fetches ssid and pass and tries to connect
//if it does not connect it starts an access point with the specified name
@@ -0,0 +1,18 @@
; PlatformIO Project Configuration File
;
; Build options: build flags, source filter
; Upload options: custom upload port, speed and extra flags
; Library options: dependencies, extra library storages
; Advanced options: extra scripting
;
; Please visit documentation for the other options and examples
; http://docs.platformio.org/page/projectconf.html
[env:nodemcuv2]
platform=espressif8266
board=nodemcuv2
framework=arduino
[platformio]
src_dir=AutoConnectWithTimeout
lib_dir=/Users/shawn/projects/microcontrollers/dev/libraries
@@ -5,7 +5,7 @@
#include <DNSServer.h>
#include <WiFiManager.h> //https://github.com/tzapu/WiFiManager
// select wich pin will trigger the configuraton portal when set to LOW
// select which pin will trigger the configuration portal when set to LOW
// ESP-01 users please note: the only pins available (0 and 2), are shared
// with the bootloader, so always set them HIGH at power-up
#define TRIGGER_PIN 0
@@ -33,7 +33,7 @@ void loop() {
//sets timeout until configuration portal gets turned off
//useful to make it all retry or go to sleep
//in seconds
//wifiManager.setTimeout(120);
//wifiManager.setConfigPortalTimeout(120);
//it starts an access point with the specified name
//here "AutoConnectAP"
@@ -42,6 +42,9 @@ void loop() {
//WITHOUT THIS THE AP DOES NOT SEEM TO WORK PROPERLY WITH SDK 1.5 , update to at least 1.5.1
//WiFi.mode(WIFI_STA);
// disable captive portal redirection
// wifiManager.setCaptivePortalEnable(false);
if (!wifiManager.startConfigPortal("OnDemandAP")) {
Serial.println("failed to connect and hit timeout");
delay(3000);
@@ -0,0 +1,57 @@
/**
* OnDemandWebPortal.ino
* example of running the webportal manually, independantly from the captiveportal
* trigger pin will start a webportal for 120 seconds then turn it off.
*
*/
#include <ESP8266WiFi.h> //https://github.com/esp8266/Arduino
//needed for library
#include <ESP8266WebServer.h>
#include <DNSServer.h>
#include <WiFiManager.h> //https://github.com/tzapu/WiFiManager
// select which pin will trigger the configuration portal when set to LOW
// ESP-01 users please note: the only pins available (0 and 2), are shared
// with the bootloader, so always set them HIGH at power-up
#define TRIGGER_PIN 0
// set your ap credentials
const char *ssid = "********";
const char *password = "********";
int timeout = 120; // seconds
WiFiManager wifiManager;
bool webportalrunning = false;
int start = millis();
void setup() {
// put your setup code here, to run once:
Serial.begin(115200);
Serial.println("\n Starting");
pinMode(TRIGGER_PIN, INPUT_PULLUP);
}
void loop() {
if(webportalrunning){
wifiManager.process();
if(millis()-start > timeout*1000){
Serial.println("webportaltimeout");
webportalrunning = false;
wifiManager.stopWebPortal(); // auto off
}
}
// is configuration portal requested?
if ( digitalRead(TRIGGER_PIN) == LOW && !webportalrunning) {
wifiManager.startWebPortal();
webportalrunning = true;
start = millis();
}
// put your main code here, to run repeatedly:
}
+176 -41
View File
@@ -6,15 +6,132 @@
<title>{v}</title>
<!-- /HTTP_HEAD -->
<!-- HTTP_STYLE -->
<style>
.c{text-align: center;}
div,input{padding:5px;font-size:1em;}
input{width:95%;}
body{text-align: center;font-family:verdana;}
button{border:0;border-radius:0.3rem;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%;}
.q{float: right;width: 64px;text-align: right;}
.l{background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAALVBMVEX///8EBwfBwsLw8PAzNjaCg4NTVVUjJiZDRUUUFxdiZGSho6OSk5Pg4eFydHTCjaf3AAAAZElEQVQ4je2NSw7AIAhEBamKn97/uMXEGBvozkWb9C2Zx4xzWykBhFAeYp9gkLyZE0zIMno9n4g19hmdY39scwqVkOXaxph0ZCXQcqxSpgQpONa59wkRDOL93eAXvimwlbPbwwVAegLS1HGfZAAAAABJRU5ErkJggg==") no-repeat left center;background-size: 1em;}
</style>
<style>
.c,
body {
text-align: center;
font-family: verdana
}
.wrap {
text-align:left;
display:inline-block;
min-width:260px;
}
div,
input {
padding: 5px;
font-size: 1em;
}
input {
width: 95%;
margin:5px 0;
}
button {
border: 0;
border-radius: .3rem;
background-color: #1fa3ec;
color: #fff;
line-height: 2.4rem;
font-size: 1.2rem;
width: 100%;
}
a {
color: #000;
font-weight: 700;
text-decoration: none;
}
a:hover {
color: #1fa3ec;
text-decoration: underline;
}
.q {
height: 16px;
margin: 0;
padding: 0 5px;
text-align: right;
min-width: 38px;
float:right;
}
.q.q-0:after {
background-position-x: 0;
}
.q.q-1:after {
background-position-x: -16px;
}
.q.q-2:after {
background-position-x: -32px;
}
.q.q-3:after {
background-position-x: -48px;
}
.q.q-4:after {
background-position-x: -64px;
}
.q.l:before {
background-position-x: -80px;
padding-right: 5px
}
.ql .q {
float: left;
}
.qinv .q {
-webkit-filter: invert(1);
filter: invert(1);
}
.q:after,
.q:before {
content: '';width:16px;height:16px;display:inline-block;background-repeat:no-repeat;background-position: 16px 0;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAQCAMAAADeZIrLAAAAJFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADHJj5lAAAAC3RSTlMAIjN3iJmqu8zd7vF8pzcAAABsSURBVHja7Y1BCsAwCASNSVo3/v+/BUEiXnIoXkoX5jAQMxTHzK9cVSnvDxwD8bFx8PhZ9q8FmghXBhqA1faxk92PsxvRc2CCCFdhQCbRkLoAQ3q/wWUBqG35ZxtVzW4Ed6LngPyBU2CobdIDQ5oPWI5nCUwAAAAASUVORK5CYII=');
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.q:before,
.q:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAAgCAMAAACfM+KhAAAALVBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAOrOgAAAADnRSTlMAESIzRGZ3iJmqu8zd7gKjCLQAAACmSURBVHgB7dDBCoMwEEXRmKlVY3L//3NLhyzqIqSUggy8uxnhCR5Mo8xLt+14aZ7wwgsvvPA/ofv9+44334UXXngvb6XsFhO/VoC2RsSv9J7x8BnYLW+AjT56ud/uePMdb7IP8Bsc/e7h8Cfk912ghsNXWPpDC4hvN+D1560A1QPORyh84VKLjjdvfPFm++i9EWq0348XXnjhhT+4dIbCW+WjZim9AKk4UZMnnCEuAAAAAElFTkSuQmCC');
background-size: 95px 16px;
}
}
.msg {
padding: 20px;
margin: 20px 0;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #777;
}
.msg h4 {
margin-top: 0;
margin-bottom: 5px;
}
.msg.P {
border-left-color: #1fa3ec;
}
.msg.P h4 {
color: #1fa3ec;
}
/*.msg.S {
border-left-color: #5cb85c;
}
.msg.S h4 {
color: #5cb85c;
}*/
.msg.D {
border-left-color: #d9534f;
}
.msg.D h4 {
color: #d9534f;
}
dt {
font-weight: bold;
}
dd {
margin: 0;
padding: 0 0 0.5em 0;
}
</style>
<!-- /HTTP_STYLE -->
<!-- HTTP_SCRIPT -->
<script>
@@ -24,55 +141,73 @@
<!-- HTTP_HEAD_END -->
</head>
<body>
<div style="text-align:left;display:inline-block;min-width:260px;">
<div class='wrap'>
<!-- /HTTP_HEAD_END -->
<!--
<div><a href='#' onclick='c(this)'>{v}</a> {r}% {i}</div>
<div><a href='#' onclick='c(this)'>{v}</a> 100% <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAMAAAC+Ge+yAAAACVBMVEUAAAC7u7v///9etNz6AAAAI0lEQVQI133GsQ3AMAAEoXv2H9qNJacKFbEaWTQJ+uQB/nMdEaYAXeJkZ9AAAAAASUVORK5CYII='/></div>
<div><a href='#' onclick='c(this)'>Vila17</a> 95% <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAADFBMVEUAAAAAtgD///8AAADV1YIHAAAAA3RSTlMAAAD6dsTeAAAAHUlEQVR4AWMAAmYgYGBkArHAAMoEYnQmMxSQywQAKvMA3+mlSFAAAAAASUVORK5CYII='/></div>
<div><a href='#'>LilRid</a> 100% <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAABlBMVEUAAAD///+l2Z/dAAAAIklEQVR4AWNgZGRkAAIQBURQDEZAgM5kgAJGEAQDwkxkbQAOhgBBk64+mQAAAABJRU5ErkJggg=='/></div>
<div><a href='#'>Marcelica</a> 100% <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAACVBMVEUAAAC7u7v///9etNz6AAAAJ0lEQVR4AY3GsREAIBSDUD77D63x4tlKw0MdmD0ijTO9f6SFnv7YXB4qAIVn0xoMAAAAAElFTkSuQmCC'/></div>
<div><a href='#'>PMica</a> 110% <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAALVBMVEX///8EBwfBwsLw8PAzNjaCg4NTVVUjJiZDRUUUFxdiZGSho6OSk5Pg4eFydHTCjaf3AAAAZElEQVQ4je2NSw7AIAhEBamKn97/uMXEGBvozkWb9C2Zx4xzWykBhFAeYp9gkLyZE0zIMno9n4g19hmdY39scwqVkOXaxph0ZCXQcqxSpgQpONa59wkRDOL93eAXvimwlbPbwwVAegLS1HGfZAAAAABJRU5ErkJggg==' width="13px"/></div>
-->
<!--style>
.q{float: right;width: 64px;text-align: right;}
.l{background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAALVBMVEX///8EBwfBwsLw8PAzNjaCg4NTVVUjJiZDRUUUFxdiZGSho6OSk5Pg4eFydHTCjaf3AAAAZElEQVQ4je2NSw7AIAhEBamKn97/uMXEGBvozkWb9C2Zx4xzWykBhFAeYp9gkLyZE0zIMno9n4g19hmdY39scwqVkOXaxph0ZCXQcqxSpgQpONa59wkRDOL93eAXvimwlbPbwwVAegLS1HGfZAAAAABJRU5ErkJggg==") no-repeat left center;background-size: 1em;}
</style-->
<!-- SAMPLE -->
<h2>/</h2><hR>
<!-- /SAMPLE -->
<!-- HTTP_PORTAL_OPTIONS -->
<form action=\"/wifi\" method=\"get\"><button>Configure WiFi</button></form><br/><form action=\"/0wifi\" method=\"get\"><button>Configure WiFi (No Scan)</button></form><br/><form action=\"/i\" method=\"get\"><button>Info</button></form><br/><form action=\"/r\" method=\"post\"><button>Reset</button></form>
<form action='/wifi' method='get'><button>Configure WiFi</button></form><br/><form action='/0wifi' method='get'><button>Configure WiFi (No Scan)</button></form><br/><form action='/i' method='get'><button>Info</button></form><br/><form action='/r' method='post'><button>Restart</button></form>
<!-- /HTTP_PORTAL_OPTIONS -->
<div><a href='#' onclick='c(this)'>{v}</a> <span class="q {i}">{r}%</span></div>
<div><a href='#'>PMisa</a> <span class="q l">100%</span> </div>
<div><a href='#'>Dragos_Networks</a>&nbsp;<span class="q l">10%</span> </div>
<div><a href='#'>PMisa</a> <span class="q l">8%</span> </div>
<!-- SAMPLE -->
<h2>/wifi</h2><hr>
<div><a href='#p' onclick='c(this)'>Acccess Point 01</a><div role='img' aria-label='88%' title='88%' class='q q-4 l'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 02</a><div role='img' aria-label='88%' title='88%' class='q q-4'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 03</a><div role='img' aria-label='60%' title='60%' class='q q-3 l'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 04</a><div role='img' aria-label='60%' title='60%' class='q q-3'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 05</a><div role='img' aria-label='60%' title='60%' class='q q-3'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 06</a><div role='img' aria-label='40%' title='40%' class='q q-2'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 07</a><div role='img' aria-label='40%' title='40%' class='q q-2 l'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 08</a><div role='img' aria-label='20%' title='20%' class='q q-1'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 09</a><div role='img' aria-label='20%' title='20%' class='q q-1'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 10</a><div role='img' aria-label='20%' title='20%' class='q q-1'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 11</a><div role='img' aria-label='10%' title='10%' class='q q-0'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 12</a><div role='img' aria-label='10%' title='10%' class='q q-0'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 13</a><div role='img' aria-label='10%' title='10%' class='q q-0'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 14</a><div role='img' aria-label='10%' title='10%' class='q q-0 l'></div></div>
<!-- /SAMPLE -->
<!-- HTTP_ITEM -->
<div><a href='#p' onclick='c(this)'>{v}</a>&nbsp;<span class='q {i}'>{r}%</span></div>
<div><a href='#p' onclick='c(this)'>{v}</a><div role='img' aria-label='{r}%' title='{r}%' class='q q-{q} {i}'></div></div>
<!-- /HTTP_ITEM -->
<!-- HTTP_FORM_START -->
<form method='get' action='wifisave'><input id='s' name='s' length=32 placeholder='SSID'><br/><input id='p' name='p' length=64 type='password' placeholder='password'><br/>
<!-- /HTTP_FORM_START -->
<!-- SAMPLE -->
<h3>custom parameter</h3><hr>
<br/><label for='custom'>Label for Custom Param</label>
<br/><input id='custom' name='custom' length='255' placeholder='placeholder' value='' {c}>
<!-- /SAMPLE -->
<!-- HTTP_FORM_LABEL -->
<br/><label for='{i}'>{p}</label>
<!-- /HTTP_FORM_LABEL -->
<!-- HTTP_FORM_PARAM -->
<br/><input id='{i}' name='{n}' length='{l}' placeholder='{p}' value='{v}' {c}>
<!-- /HTTP_FORM_PARAM -->
<!-- HTTP_FORM_END -->
<br/><button type='submit'>save</button></form>
<br/><button type='submit'>Save</button></form>
<!-- /HTTP_FORM_END -->
<!-- HTTP_SCAN_LINK -->
<br/><div class=\"c\"><a href=\"/wifi\">Scan</a></div>
<br/><form action='/wifi' method='get'><button>Refresh</button></form>
<!-- /HTTP_SCAN_LINK -->
<!-- HTTP_SAVED -->
<div>Credentials Saved<br />Trying to connect ESP to network.<br />If it fails reconnect to AP to try again</div>
<div class='msg P'><h4>Saving Credentials</h4>Trying to connect ESP to network.<br />If it fails reconnect to AP to try again</div>
<!-- /HTTP_SAVED -->
<!-- SAMPLE -->
<div class='msg'><h4>Information</h4>Connected to AP: homeAP</div>
<div class='msg D'><h4>Connect Failed</h4>An error occured</div>
<!-- /SAMPLE -->
<!-- SAMPLE -->
<h2>/info</h3><hr>
<dl>
<dt>Chip ID</dt><dd>123456</dd>
<dt>Flash Chip ID</dt><dd>1234556</dd>
<dt>IDE Flash Size</dt><dd>4194304 bytes</dd>
<dt>Real Flash Size</dt><dd>4194304 bytes</dd>
<dt>Soft AP IP</dt><dd>192.168.4.1</dd>
<dt>Soft AP MAC</dt><dd>00:00:00:00:00:00</dd>
<dt>Station MAC</dt><dd>00:00:00:00:00:00</dd>
</dl>
<!-- /SAMPLE -->
<!-- HTTP_END -->
</div>
</body>
Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

+176
View File
@@ -0,0 +1,176 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>Config ESP</title>
<script>
function c(l,e) {
console.log(l);
// preventDefault();
document.getElementById('s').value = l.innerText || l.textContent;
// document.location.href = document.location +"#wmform";
document.getElementById('p').focus();
return false;
}
</script>
<style>
.c,
body {
text-align: center
}
div,
input {
padding: 5px;
font-size: 1em
}
input {
width: 95%
}
body {
font-family: verdana
}
button {
border: 0;
border-radius: .3rem;
background-color: #1fa3ec;
color: #fff;
line-height: 2.4rem;
font-size: 1.2rem;
width: 100%
}
a {
color: #000;
font-weight: 700;
text-decoration: none
}
a:hover {
color: #1fa3ec;
text-decoration: underline
}
.q {
height: 16px;
margin: 0;
padding: 0 5px;
text-align: right;
min-width: 38px
}
.q.q-0:after {
background-position-x: 0
}
.q.q-1:after {
background-position-x: -16px
}
.q.q-2:after {
background-position-x: -32px
}
.q.q-3:after {
background-position-x: -48px
}
.q.q-4:after {
background-position-x: -64px
}
.q.l:before {
background-position-x: -80px;
padding-right: 5px
}
.ql .q {
float: left
}
.qr .q {
float: right
}
.qinv .q {
-webkit-filter: invert(1);
filter: invert(1)
}
.q:after,
.q:before {
content: '';
width: 16px;
height: 16px;
display: inline-block;
background-repeat: no-repeat;
background-position: 16px 0;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAQCAMAAADeZIrLAAAAJFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADHJj5lAAAAC3RSTlMAIjN3iJmqu8zd7vF8pzcAAABsSURBVHja7Y1BCsAwCASNSVo3/v+/BUEiXnIoXkoX5jAQMxTHzK9cVSnvDxwD8bFx8PhZ9q8FmghXBhqA1faxk92PsxvRc2CCCFdhQCbRkLoAQ3q/wWUBqG35ZxtVzW4Ed6LngPyBU2CobdIDQ5oPWI5nCUwAAAAASUVORK5CYII=');
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.q:before,
.q:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAAgCAMAAACfM+KhAAAALVBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAOrOgAAAADnRSTlMAESIzRGZ3iJmqu8zd7gKjCLQAAACmSURBVHgB7dDBCoMwEEXRmKlVY3L//3NLhyzqIqSUggy8uxnhCR5Mo8xLt+14aZ7wwgsvvPA/ofv9+44334UXXngvb6XsFhO/VoC2RsSv9J7x8BnYLW+AjT56ud/uePMdb7IP8Bsc/e7h8Cfk912ghsNXWPpDC4hvN+D1560A1QPORyh84VKLjjdvfPFm++i9EWq0348XXnjhhT+4dIbCW+WjZim9AKk4UZMnnCEuAAAAAElFTkSuQmCC');
background-size: 95px 16px;
}
}
</style>
</head>
<body>
<!-- classes, left/right invert -->
<div class="qr" style='text-align:left;display:inline-block;min-width:260px;'>
<div><a href='#p' onclick='c(this)'>Acccess Point 01</a><div role='img' aria-label='88%' title='88%' class='q q-4 l'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 02</a><div role='img' aria-label='88%' title='88%' class='q q-4'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 03</a><div role='img' aria-label='88%' title='88%' class='q q-3'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 04</a><div role='img' aria-label='88%' title='88%' class='q q-3'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 05</a><div role='img' aria-label='88%' title='88%' class='q q-3'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 06</a><div role='img' aria-label='88%' title='88%' class='q q-2'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 07</a><div role='img' aria-label='88%' title='88%' class='q q-2'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 08</a><div role='img' aria-label='88%' title='88%' class='q q-1'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 09</a><div role='img' aria-label='88%' title='88%' class='q q-1'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 10</a><div role='img' aria-label='88%' title='88%' class='q q-1'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 11</a><div role='img' aria-label='88%' title='88%' class='q q-0'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 12</a><div role='img' aria-label='88%' title='88%' class='q q-0'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 13</a><div role='img' aria-label='88%' title='88%' class='q q-0'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 14</a><div role='img' aria-label='88%' title='88%' class='q q-0 l'></div></div>
<br/>
<form id="wmform" method='get' action='wifisave'>
<input id='s' name='s' length=32 placeholder='SSID'>
<br/>
<input id='p' name='p' length=64 type='password' placeholder='password'>
<br/>
<br/>
<input id='server' name='server' length=4 placeholder='mqtt server' value=''>
<br/>
<input id='port' name='port' length=5 placeholder='mqtt port' value='8080'>
<br/>
<input id='blynk' name='blynk' length=3 placeholder='blynk token' value='YOUR_BLYNK_TOKEN'>
<br/>
<br/>
<input id='ip' name='ip' length=15 placeholder='Static IP' value='10.0.1.56'>
<br/>
<input id='gw' name='gw' length=15 placeholder='Static Gateway' value='10.0.1.1'>
<br/>
<input id='sn' name='sn' length=15 placeholder='Subnet' value='255.255.255.0'>
<br/>
<br/>
<button type='submit'>save</button>
</form>
<br/>
<div class="c"><a href="/wifi">Scan</a></div>
</div>
</body>
</html>