@@ -0,0 +1,40 @@ | |||
<!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> |
@@ -0,0 +1,8 @@ | |||
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; | |||
} |
@@ -0,0 +1,132 @@ | |||
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 */ | |||
} |
@@ -1 +0,0 @@ | |||
Hello from LittleFS ;) |
@@ -37,4 +37,19 @@ upload_flags = | |||
--host-port <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); | |||
``` |
@@ -84,12 +84,15 @@ void handleNotFound() { | |||
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 ); | |||
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); | |||
@@ -178,7 +181,7 @@ void setup() { | |||
mount_fs(); | |||
//format_fs(); | |||
ls("/"); | |||
ls("tester/"); | |||
ls("http/"); | |||
// readFile("/test.txt"); | |||
pinMode(NODEMCU_LED, OUTPUT); |