{"id":3013,"date":"2020-02-26T23:25:29","date_gmt":"2020-02-26T14:25:29","guid":{"rendered":"https:\/\/programresource.net\/?p=3013"},"modified":"2020-02-29T19:45:41","modified_gmt":"2020-02-29T10:45:41","slug":"easy-access-web-page-when-using-esp8266-esp32-as-web-server-and-access-point","status":"publish","type":"post","link":"https:\/\/programresource.net\/en\/2020\/02\/26\/3013.html","title":{"rendered":"Easy access web page when using ESP8266\/ESP32 as Web Server and Access Point"},"content":{"rendered":"\n

ESP8266 \/ ESP32 can be easily used as Web server. Also, ESP device can connect to internet via Wi-Fi, or itself can be used as Access Point.<\/p>\n\n\n\n

Some usage are, connect to ESP device from Smartphone, open web page, configure setting or control peripheral device. <\/p>\n\n\n\n

E.g. ESP as smart plug controller, configure on\/off scheduling time, or ESP as remote-controlled robot with servo and motor, and control using browser interface.<\/p>\n\n\n\n

One annoying thing when using ESP as access point \/ web server is, after connecting to ESP device from Smartphone, I have to open browser and type in IP address in URL and open page.<\/p>\n\n\n\n

Well, this can be automated using Captive Portal technology.<\/p>\n\n\n\n

You might have seen “Disclaimer” or “Sign in” web page after connecting to free Wi-Fi spot at airport, hotel, or stores. This is using Captive Portal.<\/p>\n\n\n\n

Simple sketch below is basic code for ESP8266. When you run this sketch, ESP8266 will run as Access Point.<\/p>\n\n\n\n

Connect to ESP8266 Access Point from Smartphone. It may differ depending on OS or type of Smartphone; popup notification asking you to Login shows up.<\/p>\n\n\n\n

When you tap login, ESP8266 web page shows up. Quick and easy!<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

Now you don’ t have to remember ESP device IP address or hostname to access.<\/p>\n\n\n

\n#include <ESP8266WiFi.h>\n#include <ESP8266WebServer.h>\n#include <ESP8266mDNS.h>\n#include <DNSServer.h>\n\nconst char* ap_ssid = "ESP8266AP";\t\t\/\/AP SSID\nconst char* ap_password = "12345678";\t\/\/AP password 8 character or more\nIPAddress ip(192, 168, 1, 100);\nIPAddress subnet(255, 255, 255, 0);\nconst byte DNS_PORT = 53;\nDNSServer dnsServer;\nESP8266WebServer server(80);\n\nString toStringIp(IPAddress ip) {\n\tString res = "";\n\tfor (int i = 0; i < 3; i++) {\n\t\tres += String((ip >> (8 * i)) & 0xFF) + ".";\n\t}\n\tres += String(((ip >> 8 * 3)) & 0xFF);\n\treturn res;\n}\n\nvoid captivePortal() {\n\tserver.sendHeader("Location", String("http:\/\/") + toStringIp(server.client().localIP()), true);\n\tserver.send(302, "text\/plain", "");\n\tserver.client().stop();\n}\n\nbool handleUrl(String path) {\n\tif (path.endsWith("\/")){\n\t     char chbuffer[64];\n\t     sprintf(chbuffer,"Hello ESP8266");\n\t     server.send(200,"text\/plain",chbuffer);\n\t\treturn true;\n\t}\n\treturn false;\n}\n\nvoid setup() {\n\tWiFi.mode(WIFI_AP);\n\tWiFi.softAPConfig(ip, ip, subnet);\n\tWiFi.softAP(ap_ssid, ap_password);\n\tdnsServer.start(DNS_PORT, "*", ip);\n\tWiFi.setSleepMode(WIFI_NONE_SLEEP);\n\n\tserver.onNotFound([]() {\n\t\tif (!handleUrl(server.uri())) {\n\t\t\tcaptivePortal();\n\t\t}\n\t});\n\tserver.begin();\n}\n\nvoid loop() {\n\tdnsServer.processNextRequest();\n\tserver.handleClient();\n}\n<\/pre><\/div>\n\n\n
ESP32 sample.<\/p>\n\n\n
\n#include <WiFi.h>\n#include <WiFiClient.h>\n#include <WebServer.h>\n#include <ESPmDNS.h>\n#include <DNSServer.h>\n \nconst char* ap_ssid = "ESP32AP";      \/\/AP SSUD\nconst char* ap_password = "12345678";   \/\/AP Password\nIPAddress ip(192, 168, 1, 100);\nIPAddress subnet(255, 255, 255, 0);\nconst byte DNS_PORT = 53;\nDNSServer dnsServer;\nWebServer server(80);\n \nString toStringIp(IPAddress ip) {\n    String res = "";\n    for (int i = 0; i < 3; i++) {\n        res += String((ip >> (8 * i)) & 0xFF) + ".";\n    }\n    res += String(((ip >> 8 * 3)) & 0xFF);\n    return res;\n}\n \nvoid captivePortal() {\n    server.sendHeader("Location", String("http:\/\/") + toStringIp(server.client().localIP()), true);\n    server.send(302, "text\/plain", "");\n    server.client().stop();\n}\n \nbool handleUrl(String path) {\n    if (path.endsWith("\/")){\n         char chbuffer[64];\n         sprintf(chbuffer,"Hello ESP32");\n         server.send(200,"text\/plain",chbuffer);\n        return true;\n    }\n    return false;\n}\n \nvoid setup() {\n    WiFi.mode(WIFI_AP);\n    WiFi.softAPConfig(ip, ip, subnet);\n    WiFi.softAP(ap_ssid, ap_password);\n    dnsServer.start(DNS_PORT, "*", ip);\n \n    server.onNotFound([]() {\n        if (!handleUrl(server.uri())) {\n            captivePortal();\n        }\n    });\n    server.begin();\n}\n \nvoid loop() {\n    dnsServer.processNextRequest();\n    server.handleClient();\n}\n<\/pre><\/div>\n\n\n
Reference:
https:\/\/github.com\/esp8266\/Arduino\/blob\/master\/libraries\/DNSServer\/examples\/CaptivePortalAdvanced\/handleHttp.ino<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
ESP8266 \/ ESP32 can be easily used as Web server. Also, ESP device can connect to internet via Wi-Fi, or itself can be used as Access Point. Some usage are, connect to ESP device from Smartphone, open web page, configure setting or control peripheral device. E.g. ESP as smart plug controller, configure on\/off scheduling time, or ESP as remote-controlled robot with servo and motor, and control using browser interface. One annoying thing when using ESP as access point \/ web server is, after connecting to ESP device from Smartphone, I have to open browser and type in IP address in URL and open page. Well, this can be automated using …<\/p>\n","protected":false},"author":2,"featured_media":3008,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[866],"tags":[918,917,740,686,922],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/programresource.net\/images\/2020\/02\/Screenshot_20200226-223059.png","jetpack_shortlink":"https:\/\/wp.me\/p3pJyQ-MB","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/posts\/3013"}],"collection":[{"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/comments?post=3013"}],"version-history":[{"count":2,"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/posts\/3013\/revisions"}],"predecessor-version":[{"id":3041,"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/posts\/3013\/revisions\/3041"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/media\/3008"}],"wp:attachment":[{"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/media?parent=3013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/categories?post=3013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/tags?post=3013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}