coja/esp8266
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Frontend with some changes

Browse Source
This commit is contained in:
coja 2024-03-25 03:29:53 +01:00
parent a9ed2ae8c8
commit 2edc0c6189
3 changed files with 161 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -0,0 +1 @@
#ESP8266 ArduinoIDE

135
webserver/index.html Normal file
View File

@ -0,0 +1,135 @@
<!DOCTYPE html>
<html>
<head>
<script>
const action = (url) => {
fetch("http://192.168.0.31/" + url, { method: "post" })
.then((response) => console.log(response))
.catch((err) => console.error(err));
}
window.onload = (event) => {
document.querySelector("input.switch1").onclick = (e) => action(e.currentTarget.checked ? "switch1on" : "switch1off");
document.querySelector("input.switch2").onclick = (e) => action(e.currentTarget.checked ? "switch2on" : "switch2off");
}
</script>
<style>
* {
margin: 0;
}
body {
background-color: #f1f1f1;
}
.container {
width: calc(100% - 20px);
max-width: 600px;
margin: 0 auto;
padding: 30px 25px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
min-height: 100vh;
background-color: #f5f5f5;
}
h1 {
margin-bottom: 30px;
}
.switch-wrap {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container">
<section>
<h1>Switches</h1>
<div class="switch-wrap">
<label>Switch1</label>
<label class="switch">
<input type="checkbox" class="switch1" />
<span class="slider round"></span>
</label>
</div>
<div class="switch-wrap">
<label>Switch2</label>
<label class="switch">
<input type="checkbox" class="switch2" />
<span class="slider round"></span>
</label>
</section>
</div>
</div>
</body>
</html>

54
webserver/webserver.ino
View File

@ -1,70 +1,66 @@
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h> #include <ESP8266WebServer.h>
#include <ESP8266WiFi.h>
#ifdef ESP32 #ifdef ESP32
#pragma message(THIS EXAMPLE IS FOR ESP8266 ONLY!) #pragma message(THIS EXAMPLE IS FOR ESP8266 ONLY !)
#error Select ESP8266 board. #error Select ESP8266 board.
#endif #endif
ESP8266WebServer server(80); // 80 is the port number ESP8266WebServer server(80); // 80 is the port number
const char* ssid = "Decentrala"; const char *ssid = "Decentrala";
const char* password = ""; const char *password = "";
String resSwitch1On = "Switch1 is On", resSwitch1Off = "Switch1 is Off",
resSwitch2On = "Switch2 is On", resSwitch2Off = "Switch2 is Off";
String ledon,ledoff,led1on,led1off; void switch1On() {
void Redon()
{
digitalWrite(4, HIGH); digitalWrite(4, HIGH);
server.send(200, "text/html", ledon); server.send(200, "text/html", resSwitch1On);
} }
void Redoff() void switch1Off() {
{
digitalWrite(4, LOW); digitalWrite(4, LOW);
server.send(200, "text/html", ledoff); server.send(200, "text/html", resSwitch1Off);
} }
void violeton() void switch2On() {
{
digitalWrite(14, HIGH); digitalWrite(14, HIGH);
server.send(200, "text/html", led1on); server.send(200, "text/html", resSwitch2On);
} }
void violetoff() void switch2Off() {
{
digitalWrite(14, LOW); digitalWrite(14, LOW);
server.send(200, "text/html", led1off); server.send(200, "text/html", resSwitch2Off);
} }
void setup() { void setup() {
Serial.begin(115200); Serial.begin(74880);
WiFi.mode(WIFI_STA); WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password); WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)delay(500); while (WiFi.status() != WL_CONNECTED)
delay(500);
Serial.print(WiFi.localIP()); Serial.print(WiFi.localIP());
server.on("/led1on", Redon); server.on("/switch1on", switch1On);
server.on("/led1off", Redoff); server.on("/switch1off", switch1Off);
server.on("/led2on", violeton); server.on("/switch2on", switch2On);
server.on("/led2off", violetoff); server.on("/switch2off", switch2Off);
server.enableCORS(true);
server.begin(); server.begin();
pinMode(14, OUTPUT);//D5 pinMode(14, OUTPUT); // D5
pinMode(4, OUTPUT);//D2 pinMode(4, OUTPUT); // D2
digitalWrite(14, LOW); digitalWrite(14, LOW);
digitalWrite(4, LOW); digitalWrite(4, LOW);
} }
void loop() void loop() {
{
server.handleClient(); server.handleClient();
delay(1); delay(1);
} }