diff --git a/data/http/favicon.png b/data/http/favicon.png new file mode 100644 index 0000000..d768c7b Binary files /dev/null and b/data/http/favicon.png differ diff --git a/data/http/firefox.png b/data/http/firefox.png new file mode 100644 index 0000000..c3af122 Binary files /dev/null and b/data/http/firefox.png differ diff --git a/data/http/index.html b/data/http/index.html new file mode 100644 index 0000000..6dbf624 --- /dev/null +++ b/data/http/index.html @@ -0,0 +1,40 @@ + + + + ESP8266 Treppenlicht + + + + + + +
+ ESP8266 Treppenlicht Controller +
+
+
+
+
+ toggle all + + +
+
+ + +
+
+ + +
+
+ + + + + + + diff --git a/data/http/input.js b/data/http/input.js new file mode 100644 index 0000000..f1ea08e --- /dev/null +++ b/data/http/input.js @@ -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; +} \ No newline at end of file diff --git a/data/http/style.css b/data/http/style.css new file mode 100644 index 0000000..f4edb62 --- /dev/null +++ b/data/http/style.css @@ -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 */ +} diff --git a/data/tt.html b/data/tt.html deleted file mode 100644 index 74076d0..0000000 --- a/data/tt.html +++ /dev/null @@ -1 +0,0 @@ -Hello from LittleFS ;) \ No newline at end of file diff --git a/data/tt.html.gzip b/data/tt.html.gzip new file mode 100644 index 0000000..6c07718 Binary files /dev/null and b/data/tt.html.gzip differ diff --git a/doku.md b/doku.md index 6f9dc96..c119866 100644 --- a/doku.md +++ b/doku.md @@ -37,4 +37,19 @@ upload_flags = --host-port ... $ sudo ufw allow tcp/ +``` + + +```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); ``` \ No newline at end of file diff --git a/src/main.cpp b/src/main.cpp index db09149..6c956ed 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -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);