firmware wip - html css stuff

This commit is contained in:
Marcus 2024-04-19 02:31:15 +02:00
parent 03bca4dda5
commit 5fc445daee

View file

@ -33,6 +33,22 @@
// https://github.com/PaulStoffregen/Time // https://github.com/PaulStoffregen/Time
#include <TimeLib.h> #include <TimeLib.h>
/*
*
* Constants
*
*/
const char* CanGrowVer = "0.1";
const char* APssid = "CanGrow-unconfigured";
/*
* TODO - does not work atm. idk why.
* const char* APpass = "CanGrow";
const int APchannel = 6;
const bool APhidden = false;
*
*/
/* /*
* *
* Variables * Variables
@ -52,12 +68,11 @@ bool FirstRun;
/* /*
*
* EEPROM saved variables * EEPROM saved variables
*
*/ */
// //
// WiFi // WiFi
// //
@ -98,9 +113,6 @@ bool UseLEDrelais;
// Which temperature sensor to use? // Which temperature sensor to use?
byte TemperatureSensor_Type; byte TemperatureSensor_Type;
// //
// Grow Stuff // Grow Stuff
// //
@ -130,31 +142,10 @@ byte SunriseMinute = 0;
byte PINled_PWM = 255; byte PINled_PWM = 255;
/* /*
* *
* Constants
*
*/
/*
* WiFi
*/
const char* APssid = "CanGrow-unconfigured";
/*
* TODO - does not work atm. idk why.
* const char* APpass = "CanGrow";
const int APchannel = 6;
const bool APhidden = false;
*
*/
/*
* NTP * NTP
*
*/ */
WiFiUDP ntpUDP; WiFiUDP ntpUDP;
@ -267,7 +258,8 @@ const char HTMLheader[] PROGMEM = R"EOF(
text-decoration: none; text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
} }
.nav li a:hover {
.nav li a:hover , .activeMenu , .menuTime{
background: #04AA6D; background: #04AA6D;
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
@ -276,17 +268,34 @@ const char HTMLheader[] PROGMEM = R"EOF(
.nav li a:active { .nav li a:active {
color: #cae0d0; color: #cae0d0;
} }
.activeMenu {
background: #444;
}
.MenuTime {
background: #292929;
}
</style> </style>
<script>
function highlightActiveMenu(menuEntry) {
document.getElementById(menuEntry).classList.add("activeMenu");
}
function replaceStr(dst, content) {
document.getElementById(dst).innerHTML = content;
}
</script>
</head> </head>
<body> <body>
<ul class="nav"> <ul class="nav">
<li><a href="/">CanGrow</a></li> <li><a id="MenuGrowName" href="/">&#x1F331; CanGrow</a></li>
<li><a id="growSettings" href="/growSettings">Grow settings</a></li> <li><a id="MgrowSettings" href="/growSettings">Grow settings</a></li>
<li><a id="systemSettings" href="/systemSettings">System settings</a></li> <li><a id="MsystemSettings" href="/systemSettings">System settings</a></li>
<li><a href="/wifiSettings">WiFi settings</a></li> <li><a id="MwifiSettings" href="/wifiSettings">WiFi settings</a></li>
<li><a href="/help">Help</a></li> <li><a id="Mhelp" href="/help">Help</a></li>
<li><span id="MenuGrowName"></span></li> <li><span id="MenuTime" class="MenuTime"></span></li>
<li><span id="MenuTime"></span></li> <li><a id="CanGrowVer" href="https://git.la10cy.net/DeltaLima/CanGrow" target="_blank">CanGrow</a></li>
</ul> </ul>
<div class="center"> <div class="center">
@ -327,9 +336,7 @@ Here you will get some helpful help.
const char JSreplaceStr[] PROGMEM = R"EOF( const char JSreplaceStr[] PROGMEM = R"EOF(
<script> <script>
function replaceStr(dst, content) {
document.getElementById(dst).innerHTML = content;
}
</script> </script>
)EOF"; )EOF";
@ -1088,6 +1095,95 @@ void WebHandler() {
} }
/*
*
* return functions, they return things for the web stuff
*/
// returns footer with javascript stuff
String returnHTMLfooter(String MenuEntry = "") {
String footer;
// print actual time in header
footer += "<script>replaceStr('CanGrowVer', 'CanGrow v";
footer += CanGrowVer;
footer += "');\n";
footer += "replaceStr('MenuTime', '";
footer += timeClient.getFormattedTime();
footer += "');\n";
footer += "highlightActiveMenu('M";
footer += MenuEntry;
footer += "');";
footer += "</script>";
// show the GrowName in the menu if set
if(strlen(GrowName) > 0){
footer += "<script>replaceStr('MenuGrowName', '&#x1F331; ";
footer += GrowName;
footer += "');\n";
// include the GrowName in the title
footer += "document.title = 'CanGrow - ";
footer += GrowName;
footer += "';";
footer += "</script>";
}
footer += FPSTR(HTMLfooter);
return footer;
}
/*
* returnSelected(bool)
* returns char[] "selected" if bool is true
* useful for html forms, to preset a saved value as selected
*/
String returnStrSelected(byte savedValue, byte selectId) {
String returnStr;
if(configured == true) {
if(savedValue == selectId) {
returnStr = "selected";
} else {
returnStr = "";
}
}
return returnStr;
}
String returnStrDateFromEpoch(unsigned long epochTime) {
String dateStr;
byte Day = day(epochTime);
byte Month = month(epochTime);
unsigned int Year = year(epochTime);
dateStr = Year;
dateStr += "-";
if(Month < 10) {
dateStr += "0";
dateStr += Month;
} else {
dateStr += Month;
}
dateStr += "-";
if(Day < 10) {
dateStr += "0";
dateStr += Day;
} else {
dateStr += Day;
}
return dateStr;
}
void SysRestart() { void SysRestart() {
String body = FPSTR(HTMLheader); String body = FPSTR(HTMLheader);
// TODO only debug and development solution, remove this later // TODO only debug and development solution, remove this later
@ -1161,84 +1257,7 @@ void WebAuthApi() {
} }
} }
// returns footer with javascript stuff
String returnHTMLfooter() {
String footer;
// add replaceStr javascript function from PROGMEM
// first is dst ID, second is content (&#.. is a seedling emoji )
footer += FPSTR(JSreplaceStr);
// print actual time in header
footer += "<script>replaceStr('MenuTime', '";
footer += timeClient.getFormattedTime();
footer += "');\n";
footer += "</script>";
// show the GrowName in the menu if set
if(strlen(GrowName) > 0){
footer += "<script>replaceStr('MenuGrowName', '&#x1F331; ";
footer += GrowName;
footer += "');\n";
// include the GrowName in the title
footer += "document.title = 'CanGrow - ";
footer += GrowName;
footer += "';";
footer += "</script>";
}
footer += FPSTR(HTMLfooter);
return footer;
}
/*
* returnSelected(bool)
* returns char[] "selected" if bool is true
* useful for html forms, to preset a saved value as selected
*/
String returnStrSelected(byte savedValue, byte selectId) {
String returnStr;
if(configured == true) {
if(savedValue == selectId) {
returnStr = "selected";
} else {
returnStr = "";
}
}
return returnStr;
}
String returnStrDateFromEpoch(unsigned long epochTime) {
String dateStr;
byte Day = day(epochTime);
byte Month = month(epochTime);
unsigned int Year = year(epochTime);
dateStr = Year;
dateStr += "-";
if(Month < 10) {
dateStr += "0";
dateStr += Month;
} else {
dateStr += Month;
}
dateStr += "-";
if(Day < 10) {
dateStr += "0";
dateStr += Day;
} else {
dateStr += Day;
}
return dateStr;
}
/* /*
* *
* Web pages * Web pages
@ -1271,7 +1290,7 @@ void WEBlogout() {
void WEBhelp() { void WEBhelp() {
String body = FPSTR(HTMLheader); String body = FPSTR(HTMLheader);
body += FPSTR(HTMLhelp); body += FPSTR(HTMLhelp);
body += returnHTMLfooter(); body += returnHTMLfooter("help");
webserver.send(200, "text/html", body); webserver.send(200, "text/html", body);
} }
@ -1324,7 +1343,6 @@ void WEBroot() {
break; break;
} }
} }
body += getWaterlevel();
body += "<br>"; body += "<br>";
body += "Growlight brightnes: "; body += "Growlight brightnes: ";
body += ((PINled_PWM * 100) / 255); body += ((PINled_PWM * 100) / 255);
@ -1421,7 +1439,7 @@ void WEBwifiSettings() {
body += "DNS: <input type='text' name='WIFIdns'><br>\n"; body += "DNS: <input type='text' name='WIFIdns'><br>\n";
body += "<input type='submit' value='Save'>\n"; body += "<input type='submit' value='Save'>\n";
body += "</form>\n"; body += "</form>\n";
body += returnHTMLfooter(); body += returnHTMLfooter("wifiSettings");
webserver.send(200, "text/html", body); webserver.send(200, "text/html", body);
} }
@ -1509,7 +1527,7 @@ void WEBsystemSettings() {
body += "<input type='submit' value='Save'>\n"; body += "<input type='submit' value='Save'>\n";
body += "</form>\n"; body += "</form>\n";
body += returnHTMLfooter(); body += returnHTMLfooter("systemSettings");
webserver.send(200, "text/html", body); webserver.send(200, "text/html", body);
} }
@ -1593,7 +1611,7 @@ void WEBgrowSettings() {
body += "<input type='submit' value='Save'>\n"; body += "<input type='submit' value='Save'>\n";
body += "</form>\n"; body += "</form>\n";
body += FPSTR(JSconvertDateToEpoch); body += FPSTR(JSconvertDateToEpoch);
body += returnHTMLfooter(); body += returnHTMLfooter("growSettings");
webserver.send(200, "text/html", body); webserver.send(200, "text/html", body);
} }
@ -1858,13 +1876,6 @@ void POSTswitchMOSFET() {
} }
} }
/*
String JSreplaceStr(String elementID, String content) {
String jsReturn = "<script>document.getElementById('" + elementID + "').innerHTML='" + content + "';</script>";
return jsReturn;
}
*/