[Changed]: New Webinterface Layout

This commit is contained in:
Christian Mittring
2018-04-07 08:12:00 +02:00
parent 60755333bf
commit 05cdb44ab5
2 changed files with 19 additions and 7 deletions

View File

@@ -16,7 +16,7 @@
#include <EEPROM.h>
String Hardware = "0.10";
String Software = "0.06";
String Software = "0.07";
String ntp_server = "ntp2.uni-augsburg.de";
// Set web server port number to 80

View File

@@ -1,4 +1,6 @@
String logfile = "";
//Webserver
//###################################################################################
void setup_webserver(){
httpUpdater.setup(&server, "Licht", "Wecker");
@@ -18,8 +20,15 @@ void handle_webserver(){
}
String Header = "<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title>Lichtwecker</title></head><body style=\"text-align:left;margin:0.5em\"><div id=\"header\"><h1 style=\"margin:0px;padding:0px\">Licht Wecker</h1><hr></div><div id=\"content\" style=\"font-size:1.2em;\">";
String Footer = "</div><br><br><hr><div id=\"footer\">Not for Sale, Prototyp by <a href=\"http://christian.mittring-mering.de/\">CHM</a>, Hardware: " + Hardware + ", Software: "+ Software +"</div></body></html> ";
//Layout
//###################################################################################
String Meta = "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\"><meta charset=\"UTF-8\">";
String CSS = "<style>.card {box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);background-color: white;transition: 0.3s;margin: 0.2rem;padding: 0.4rem;padding-top: 0.5rem;display: inline-block;display: -webkit-inline-block;text-align:center;flex: 1;-webkit-flex: 1 1 250px;}.cardcontainer {box-sizing: border-box;display:flex;flex-wrap: wrap;display: -webkit-flex;-webkit-flex-wrap: wrap;overflow:auto;}#footer {border-top: 3px solid darkblue;-webkit-justify-content: space-around;display: absolute;justify-content: space-around;}</style>";
String Header = "<!DOCTYPE html><html><head>" + Meta + CSS + "<title>Lichtwecker</title></head><body style=\"text-align:left;margin: 0px;padding: 0px;\"><div id=\"header\" style=\"background-color: blue;margin: 0px;padding: 0px;color: white;border: 0.2em solid blue;text-align: center;\"><h1 style=\"margin:0px;padding:0px\">Licht Wecker</h1></div><div id=\"content\" style=\"font-size:1.2em;margin:0.5em;\" class=\"cardcontainer\">";
String Footer = "</div><br><br><div id=\"footer\">Not for Sale, Prototyp by <a href=\"http://christian.mittring-mering.de/\">CHM</a>, Hardware: " + Hardware + ", Software: "+ Software +"</div></body></html> ";
String card_start = "<div class=\"card\">";
String card_end = "</div>";
void handleRootPath() { //Handler for the rooth path
handleArgs();
@@ -85,21 +94,24 @@ void handleArgs(){
}
//Webpage
//###################################################################################
void print_website(){
bool A1 = Clock.checkAlarmEnabled(1);
bool A2 = Clock.checkAlarmEnabled(2);
String Alarm1 = "Alarm 1: <form action=\"/\" methode=\"get\"><input type=\"text\" name=\"al1h\" value=\"" + String(al1h) + "\">:<input type=\"text\" name=\"al1m\" value=\"" + String(al1m) + "\"><input type=\"submit\" value=\"Speichern\"></form> Sommerzeit: " + getBoolString(summer) + "<br>Aktiv: " + getBoolString(A1) + "<br><a href=\"?a1=true\">Aktivieren</a> " + "&nbsp;&nbsp;<a href=\"?a1=false\">Deaktivieren</a>";
String Alarm2 = "Alarm 2: <form action=\"/\" methode=\"get\"><input type=\"text\" name=\"al2h\" value=\"" + String(al2h) + "\">:<input type=\"text\" name=\"al2m\" value=\"" + String(al2m) + "\"><input type=\"submit\" value=\"Speichern\"></form> Sommerzeit: " + getBoolString(summer) + "<br>Aktiv: " + getBoolString(A2) + "<br><a href=\"?a2=true\">Aktivieren</a> " + "&nbsp;&nbsp;<a href=\"?a2=false\">Deaktivieren</a>";
String Alarm1 = "<b>Alarm 1:</b> <form action=\"/\" methode=\"get\"><input type=\"number\" name=\"al1h\" value=\"" + String(al1h) + "\">:<input type=\"number\" name=\"al1m\" value=\"" + String(al1m) + "\"><input type=\"submit\" value=\"Speichern\"></form> Sommerzeit: " + getBoolString(summer) + "<br>Aktiv: " + getBoolString(A1) + "<br><a href=\"?a1=true\">Aktivieren</a> " + "&nbsp;&nbsp;<a href=\"?a1=false\">Deaktivieren</a>";
String Alarm2 = "<b>Alarm 2:</b> <form action=\"/\" methode=\"get\"><input type=\"number\" name=\"al2h\" value=\"" + String(al2h) + "\">:<input type=\"number\" name=\"al2m\" value=\"" + String(al2m) + "\"><input type=\"submit\" value=\"Speichern\"></form> Sommerzeit: " + getBoolString(summer) + "<br>Aktiv: " + getBoolString(A2) + "<br><a href=\"?a2=true\">Aktivieren</a> " + "&nbsp;&nbsp;<a href=\"?a2=false\">Deaktivieren</a>";
String Alarm = "<h3>Alarm</h3>" + Alarm1 + "<br><br>" + Alarm2;
String Zeit = "<br><h3>Zeit</h3>" + String(h) + ":" + String(m) + ":" + String(s) + " - " + String(d) + "." + String(M) + "." + String(y) + " | DST: " + String(summertime_EU(y,M,d,h,1));
String NTP = "<br><h3>NTP</h3>" + String("st&uuml;ndliches Zeit Update &uuml;ber " + ntp_server + ": ") + getBoolString(ntp_update) + "<br><a href=\"?ntp=true\">Aktivieren</a> " + "&nbsp;&nbsp;<a href=\"?ntp=false\">Deaktivieren</a>";
String Reboot = "<br><h3>System:</h3><a href=\"?reset=true\">Neustart</a><br><br><a href=\"update\">Software Update Modus</a>";
String Body = Alarm + Zeit + NTP + Reboot;
String Body = card_start + Alarm + card_end + card_start + Zeit + card_end + card_start + NTP + card_end + card_start + Reboot + card_end;
server.send(200, "text/html", Header + Body + Footer);
}
void print_reset(){
String Body = "Neustart... <a href=\"/\">Neu laden</a>";
String Body = "<div class=\"card\">Neustart... <a href=\"/\">Neu laden</a></div>";
server.send(200, "text/html", Header + Body + Footer);
delay(500);
}