Frontend with some changes
This commit is contained in:
coja
parent
a9ed2ae8c8
commit
2edc0c6189
|
|
@ -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>
|
||||
|
|
@ -1,70 +1,66 @@
|
|||
#include <ESP8266WiFi.h>
|
||||
#include <ESP8266WebServer.h>
|
||||
#include <ESP8266WiFi.h>
|
||||
|
||||
#ifdef ESP32
|
||||
#pragma message(THIS EXAMPLE IS FOR ESP8266 ONLY!)
|
||||
#pragma message(THIS EXAMPLE IS FOR ESP8266 ONLY !)
|
||||
#error Select ESP8266 board.
|
||||
#endif
|
||||
|
||||
ESP8266WebServer server(80); // 80 is the port number
|
||||
|
||||
const char* ssid = "Decentrala";
|
||||
const char* password = "";
|
||||
const char *ssid = "Decentrala";
|
||||
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 Redon()
|
||||
{
|
||||
void switch1On() {
|
||||
digitalWrite(4, HIGH);
|
||||
server.send(200, "text/html", ledon);
|
||||
server.send(200, "text/html", resSwitch1On);
|
||||
}
|
||||
|
||||
void Redoff()
|
||||
{
|
||||
void switch1Off() {
|
||||
digitalWrite(4, LOW);
|
||||
server.send(200, "text/html", ledoff);
|
||||
server.send(200, "text/html", resSwitch1Off);
|
||||
}
|
||||
|
||||
void violeton()
|
||||
{
|
||||
void switch2On() {
|
||||
digitalWrite(14, HIGH);
|
||||
server.send(200, "text/html", led1on);
|
||||
server.send(200, "text/html", resSwitch2On);
|
||||
}
|
||||
|
||||
void violetoff()
|
||||
{
|
||||
void switch2Off() {
|
||||
digitalWrite(14, LOW);
|
||||
server.send(200, "text/html", led1off);
|
||||
server.send(200, "text/html", resSwitch2Off);
|
||||
}
|
||||
|
||||
void setup() {
|
||||
|
||||
Serial.begin(115200);
|
||||
Serial.begin(74880);
|
||||
WiFi.mode(WIFI_STA);
|
||||
WiFi.begin(ssid, password);
|
||||
|
||||
while (WiFi.status() != WL_CONNECTED)delay(500);
|
||||
while (WiFi.status() != WL_CONNECTED)
|
||||
delay(500);
|
||||
|
||||
Serial.print(WiFi.localIP());
|
||||
|
||||
server.on("/led1on", Redon);
|
||||
server.on("/led1off", Redoff);
|
||||
server.on("/led2on", violeton);
|
||||
server.on("/led2off", violetoff);
|
||||
server.on("/switch1on", switch1On);
|
||||
server.on("/switch1off", switch1Off);
|
||||
server.on("/switch2on", switch2On);
|
||||
server.on("/switch2off", switch2Off);
|
||||
|
||||
server.enableCORS(true);
|
||||
server.begin();
|
||||
|
||||
pinMode(14, OUTPUT);//D5
|
||||
pinMode(4, OUTPUT);//D2
|
||||
pinMode(14, OUTPUT); // D5
|
||||
pinMode(4, OUTPUT); // D2
|
||||
|
||||
digitalWrite(14, LOW);
|
||||
digitalWrite(4, LOW);
|
||||
|
||||
}
|
||||
|
||||
void loop()
|
||||
{
|
||||
void loop() {
|
||||
server.handleClient();
|
||||
delay(1);
|
||||
}
|
||||
Loading…
Reference in New Issue