<!DOCTYPE html> | |||||
<html> | |||||
<head> | |||||
<title>ESP8266 Treppenlicht</title> | |||||
<!-- main style sheet --> | |||||
<link href="/favicon.png" rel="icon" type="image/png" sizes="16x16"> | |||||
<link href="/style.css" rel="stylesheet" type="text/css"> | |||||
</head> | |||||
<body> | |||||
<div class="topbar"> | |||||
ESP8266 Treppenlicht Controller | |||||
</div> | |||||
<div class="control"> | |||||
<div class="brightness"> | |||||
</div> | |||||
<div class="onoff"> | |||||
toggle all | |||||
<label id="l_onoff"></label> | |||||
<label class="switch"> | |||||
<input type="checkbox"> | |||||
<span class="slider round"></span> | |||||
</label> | |||||
</div> | |||||
<div class="pwm"> | |||||
<label id="label_pwm"></label> | |||||
<input type="range" min="1" max="100" value="50" class="rangeslider" id="range1"> | |||||
</div> | |||||
<div class="timer"> | |||||
<label id="label_timer"></label> | |||||
<input type="range" min="1" max="100" value="50" class="rangeslider" id="timer_range"> | |||||
</div> | |||||
</div> | |||||
</body> | |||||
<script src="/input.js"></script> | |||||
</html> |
var slider = document.getElementById("range1"); | |||||
var output = document.getElementById("l_pwm"); | |||||
output.innerHTML = slider.value; // Display the default slider value | |||||
// Update the current slider value (each time you drag the slider handle) | |||||
slider.oninput = function() { | |||||
output.innerHTML = this.value; | |||||
} |
html { | |||||
font-size: 10px; | |||||
font-family: sans-serif, Arial, Helvetica; | |||||
background-color: #b3b3b3; | |||||
} | |||||
.topbar { | |||||
padding: 1em; | |||||
background-color: #1f1f1f; | |||||
color: white; | |||||
font-size: x-large; | |||||
text-align: center; | |||||
} | |||||
.control { | |||||
padding: 1em; | |||||
} | |||||
p, li { | |||||
font-size: 16px; | |||||
line-height: 2; | |||||
letter-spacing: 1px; | |||||
} | |||||
body { | |||||
margin: 0 auto; | |||||
border: 1px solid black; | |||||
border-radius: 3; | |||||
} | |||||
/* The switch - the box around the slider */ | |||||
.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: #04AA6D; | |||||
} | |||||
input:focus + .slider { | |||||
box-shadow: 0 0 1px #04AA6D; | |||||
} | |||||
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%; | |||||
} | |||||
/* The slider itself */ | |||||
.rangeslider { | |||||
-webkit-appearance: none; /* Override default CSS styles */ | |||||
appearance: none; | |||||
width: 50%; /* Full-width */ | |||||
height: 34px; /* Specified height */ | |||||
border-radius: 34px; /* range round corners */ | |||||
background: #d3d3d3; /* Grey background */ | |||||
outline: none; /* Remove outline */ | |||||
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */ | |||||
-webkit-transition: .2s; /* 0.2 seconds transition on hover */ | |||||
transition: opacity .2s; | |||||
} | |||||
/* Mouse-over effects */ | |||||
.rangeslider:hover { | |||||
opacity: 1; /* Fully shown on mouse-over */ | |||||
} | |||||
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ | |||||
.rangeslider::-webkit-slider-thumb { | |||||
-webkit-appearance: none; /* Override default look */ | |||||
appearance: none; | |||||
width: 26px; /* Set a specific slider handle width */ | |||||
height: 26px; /* Slider handle height */ | |||||
border-radius: 50%; /* Round Element */ | |||||
background: #04AA6D; /* Green background */ | |||||
cursor: pointer; /* Cursor on hover */ | |||||
} | |||||
.rangeslider::-moz-range-thumb { | |||||
width: 26px; /* Set a specific slider handle width */ | |||||
height: 26px; /* Slider handle height */ | |||||
background: #04AA6D; /* Green background */ | |||||
cursor: pointer; /* Cursor on hover */ | |||||
} |
Hello from LittleFS ;) |
--host-port <PORT> | --host-port <PORT> | ||||
... | ... | ||||
$ sudo ufw allow tcp/<PORT> | $ sudo ufw allow tcp/<PORT> | ||||
``` | |||||
```c++ | |||||
server.streamFile(f, mime::getContentType(SRH::_path), requestMethod); | |||||
=====> | |||||
const String& p = SRH::_path; | |||||
if(p.endsWith(".gzip")) { | |||||
server.sendHeader("Content-Encoding", "gzip"); | |||||
server.streamFile(f, mime::getContentType(p.substring(0, p.length()-5)), requestMethod); | |||||
} | |||||
else | |||||
server.streamFile(f, mime::getContentType(SRH::_path), requestMethod); | |||||
``` | ``` |
void setup_webserver() { | void setup_webserver() { | ||||
server.on("/", handleRootGz); | |||||
server.on("/style.css", handleCssGz); | |||||
server.on("/favicon.png", handleFaviconGz); | |||||
// server.on("/", handleRootGz); | |||||
// server.on("/style.css", handleCssGz); | |||||
// server.on("/favicon.png", handleFaviconGz); | |||||
// void serveStatic(const char* uri, fs::FS& fs, const char* path, const char* cache_header = NULL ); | // void serveStatic(const char* uri, fs::FS& fs, const char* path, const char* cache_header = NULL ); | ||||
server.serveStatic("/static", LittleFS, "/tt.html"); | |||||
server.serveStatic("/static", LittleFS, "/tt.html.gzip"); | |||||
server.serveStatic("/http", LittleFS, "/http/"); | |||||
server.serveStatic("/http", LittleFS, "/http/"); | |||||
server.serveStatic("/http", LittleFS, "/http/"); | |||||
server.onNotFound(handleNotFound); | server.onNotFound(handleNotFound); | ||||
mount_fs(); | mount_fs(); | ||||
//format_fs(); | //format_fs(); | ||||
ls("/"); | ls("/"); | ||||
ls("tester/"); | |||||
ls("http/"); | |||||
// readFile("/test.txt"); | // readFile("/test.txt"); | ||||
pinMode(NODEMCU_LED, OUTPUT); | pinMode(NODEMCU_LED, OUTPUT); |