schmidtsi76327/ESP8266_Treppenlicht
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'master' of https://git.efi.th-nuernberg.de/gitea/schmidtsi76327/ESP8266_Treppenlicht

Browse Source
This commit is contained in:
Dominik Bartsch 2021-06-21 11:10:55 +02:00
commit 61d6cde899
5 changed files with 154 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
include/http/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 531 B

41
include/http/index.html
View File

@ -1,23 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <title>ESP8266 Treppenlicht</title>
<title>My test page</title> <!-- main style sheet -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"> <link href="/favicon.png" rel="icon" type="image/png" sizes="16x16">
<link href="style.css" rel="stylesheet" type="text/css"> <link href="/style.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>
<h1>Mozilla is cool</h1> <div class="topbar">
<p>At Mozilla, we’re a global community of</p> 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="l_pwm"></label>
<input type="range" min="1" max="100" value="50" class="rangeslider" id="range1">
</div>
</div>
<ul> <!-- changed to list in the tutorial -->
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Read the <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a> to learn even more about the values and principles that guide the pursuit of our mission.</p>
</body> </body>
<script src="/input.js"></script>
</html> </html>

8
include/http/input.js Normal file
View File

@ -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;
}

129
include/http/style.css
View File

@ -1,14 +1,22 @@
html { html {
font-size: 10px; font-size: 10px;
font-family: 'Open Sans', sans-serif; font-family: sans-serif, Arial, Helvetica;
background-color: #b3b3b3;
} }
.topbar {
padding: 1em;
background-color: #1f1f1f;
h1 { color: white;
font-size: 60px; font-size: x-large;
text-align: center; text-align: center;
} }
.control {
padding: 1em;
}
p, li { p, li {
font-size: 16px; font-size: 16px;
line-height: 2; line-height: 2;
@ -16,26 +24,109 @@ p, li {
} }
html {
background-color: #00539F;
}
body { body {
width: 600px;
margin: 0 auto; margin: 0 auto;
background-color: #FF9500; border: 1px solid black;
padding: 0 20px 20px 20px; border-radius: 3;
border: 5px solid black;
} }
h1 {
margin: 0;
padding: 20px 0; /* The switch - the box around the slider */
color: #00539F; .switch {
text-shadow: 3px 3px 1px black; position: relative;
display: inline-block;
width: 60px;
height: 34px;
} }
img { /* Hide default HTML checkbox */
display: block; .switch input {
margin: 0 auto; 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 */
} }

7
src/main.cpp
View File

@ -15,6 +15,7 @@
#include "index.html.gz.h" #include "index.html.gz.h"
#include "style.css.gz.h" #include "style.css.gz.h"
#include "favicon.png.gz.h"
// images are possible // images are possible
// maybe check out FS <- SPIFFS // maybe check out FS <- SPIFFS
@ -43,6 +44,11 @@ void handleCssGz() {
server.sendHeader(F("Content-Encoding"), F("gzip")); server.sendHeader(F("Content-Encoding"), F("gzip"));
server.send(200, dataType, (const char*)style_css_gz, style_css_gz_len); server.send(200, dataType, (const char*)style_css_gz, style_css_gz_len);
} }
void handleFaviconGz() {
const char* dataType = "image/png";
server.sendHeader(F("Content-Encoding"), F("gzip"));
server.send(200, dataType, (const char*)favicon_png_gz, favicon_png_gz_len);
}
void handleNotFound() { void handleNotFound() {
digitalWrite(led, 1); digitalWrite(led, 1);
@ -83,6 +89,7 @@ void setup_webserver() {
server.on("/", handleRootGz); server.on("/", handleRootGz);
server.on("/style.css", handleCssGz); server.on("/style.css", handleCssGz);
server.on("/favicon.png", handleFaviconGz);
server.onNotFound(handleNotFound); server.onNotFound(handleNotFound);
server.begin(); server.begin();