#include <ESP8266WiFi.h>
2#include "./DNSServer.h"
3#include <ESP8266WebServer.h>
4
5const byte DNS_PORT = 53; // 53 is set as DNS port
6IPAddress apIP(10, 10, 10, 1); // Network Server
7DNSServer dnsServer; // DNS server object
8ESP8266WebServer webServer(80); // Webserver object
9
10
11int GPIO_2 = 2; //Pin defanition - Relay will be connected to GPIO-0
12
13/*START OF HMTL CODE*/
14String style_detials = //This String defines the style attributes for webpage
15 "<style type=\"text/css\">"
16 " body{"
17 " background-color: #a69695;"
18 "}"
19 "button{"
20 " display: inline-block;"
21 "}"
22 "#buttons{"
23 " text-align: center;"
24 "}"
25
26 ".controllButtons{"
27 " margin-top: 15px;"
28 "margin-left: 5px;"
29 "background-color: white;"
30 "padding: 10px;"
31 "border:1px solid black;"
32 "border-radius: 10px;"
33 "cursor: pointer;"
34 "font-size: 14px;"
35 "}"
36
37 ".controllButtons:hover{"
38 " background-color: orange;"
39 "padding: 10px;"
40 "border:1px solid black;"
41 "border-radius: 10px;"
42 "cursor: pointer;"
43 "font-size: 14px;"
44 "}"
45
46 "@media only screen and (max-width: 700px) {"
47 " button{"
48 " display: block;"
49 "}"
50 "#buttons{"
51 " margin-top: 10%;"
52 "margin-left: 35%;"
53 "}"
54 " .controllButtons{"
55 " margin-top: 15px;"
56 "margin-left: 5px;"
57 "background-color: white;"
58 "padding: 15px;"
59 "border:1px solid black;"
60 "border-radius: 10px;"
61 "cursor: pointer;"
62 "font-size: 16px;"
63 "}"
64
65 ".controllButtons:hover{"
66 " background-color: orange;"
67 "padding: 15px;"
68 "border:1px solid black;"
69 "border-radius: 10px;"
70 "cursor: pointer;"
71 "font-size: 16px;"
72 "}"
73 "}"
74
75 "</style>";
76
77String Home_Screen = "" //Page 1 - Home Screen HTML code
78 "<!DOCTYPE html><html>"
79 "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
80 + style_detials +
81 "<div id=\"buttons\">"
82 "<a style=\"text-decoration:none;\" href=\"relay_ON\"> <button id=\"switchLight1\" class=\"controllButtons\">Turn ON</button> </a>"
83 "<a style=\"text-decoration:none;\" href=\"relay_OFF\"><button id=\"switchLight2\" class=\"controllButtons\">Turn OFF</button> </a>"
84 "</div>"
85 "<body><h1>Welcome - CircuitDigest</h1>"
86 "</body></html>";
87
88String ON_Screen = "" //Page 2 - If device is turned ON
89 "<!DOCTYPE html><html>"
90 "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
91 + style_detials +
92 "<div id=\"buttons\">"
93 "<a style=\"text-decoration:none;\" href=\"relay_ON\"> <button id=\"switchLight1\" class=\"controllButtons\">Turn ON</button> </a>"
94 "<a style=\"text-decoration:none;\" href=\"relay_OFF\"><button id=\"switchLight2\" class=\"controllButtons\">Turn OFF</button> </a>"
95 "</div>"
96 "<body><h1>Smart Plug - Turned ON</h1>"
97 "</body></html>";
98
99String OFF_Screen = "" //Page 3 - If device is turned OFF
100 "<!DOCTYPE html><html>"
101 "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
102 + style_detials +
103 "<div id=\"buttons\">"
104 "<a style=\"text-decoration:none;\" href=\"relay_ON\"> <button id=\"switchLight1\" class=\"controllButtons\">Turn ON</button> </a>"
105 "<a style=\"text-decoration:none;\" href=\"relay_OFF\"><button id=\"switchLight2\" class=\"controllButtons\">Turn OFF</button> </a>"
106 "</div>"
107 "<body><h1>Smart Plug - Turned OFF</h1>"
108 "</body></html>";
109
110/*END OF HMTL CODE*/
111
112
113
114void setup() {
115 pinMode(LED_BUILTIN, OUTPUT); //LED pin as output for indication
116 pinMode(GPIO_2, OUTPUT); //GPIO pin as output for Relay control
117
118 WiFi.mode(WIFI_AP); //Set ESP in AP mode
119 WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
120 WiFi.softAP("ESP_Smart_Plug"); // Name your AP network
121
122 dnsServer.start(DNS_PORT, "*", apIP);
123
124 webServer.onNotFound([]() {
125 webServer.sendHeader("Location", String("http://www.circuitdigest-automation.com/home.html"), true); //Open Home screen by default
126 webServer.send ( 302, "text/plain", "");
127 });
128
129 webServer.on("/home.html", []() {
130 webServer.send(200, "text/html", Home_Screen);
131 });
132
133
134//ON_Screen
135 webServer.on("/relay_ON", [](){ //If turn on Button is pressed
136 digitalWrite(LED_BUILTIN, LOW); //Turn off LED
137 digitalWrite(GPIO_2, HIGH); //Turn off Relay
138 webServer.send(200, "text/html", ON_Screen); //Display this screen
139 });
140
141
142//OFF_Screen
143 webServer.on("/relay_OFF", [](){ //If turn off Button is pressed
144 digitalWrite(LED_BUILTIN, HIGH); //Turn on LED
145 digitalWrite(GPIO_2, LOW); //Turn on Relay
146 webServer.send(200, "text/html", OFF_Screen); //Display this screen
147 });
148
149
150
151 webServer.begin();
152}
153
154void loop() {
155 dnsServer.processNextRequest();
156 webServer.handleClient();
157}
_3u05Tpwasz.png?auto=compress%2Cformat&w=40&h=40&fit=fillmax&bg=fff&dpr=2)
Comments