firmware wip - html css stuff
This commit is contained in:
parent
03bca4dda5
commit
5fc445daee
1 changed files with 139 additions and 128 deletions
|
@ -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="/">🌱 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', '🌱 ";
|
||||||
|
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', '🌱 ";
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue