firmware wip - html css stuff
This commit is contained in:
parent
03bca4dda5
commit
5fc445daee
|
|
@ -33,6 +33,22 @@
|
|||
// https://github.com/PaulStoffregen/Time
|
||||
#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
|
||||
|
|
@ -52,12 +68,11 @@ bool FirstRun;
|
|||
|
||||
|
||||
/*
|
||||
*
|
||||
* EEPROM saved variables
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
//
|
||||
// WiFi
|
||||
//
|
||||
|
|
@ -98,9 +113,6 @@ bool UseLEDrelais;
|
|||
// Which temperature sensor to use?
|
||||
byte TemperatureSensor_Type;
|
||||
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Grow Stuff
|
||||
//
|
||||
|
|
@ -130,31 +142,10 @@ byte SunriseMinute = 0;
|
|||
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
|
||||
*
|
||||
*/
|
||||
|
||||
WiFiUDP ntpUDP;
|
||||
|
|
@ -267,7 +258,8 @@ const char HTMLheader[] PROGMEM = R"EOF(
|
|||
text-decoration: none;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.nav li a:hover {
|
||||
|
||||
.nav li a:hover , .activeMenu , .menuTime{
|
||||
background: #04AA6D;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
|
|
@ -276,17 +268,34 @@ const char HTMLheader[] PROGMEM = R"EOF(
|
|||
.nav li a:active {
|
||||
color: #cae0d0;
|
||||
}
|
||||
|
||||
.activeMenu {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.MenuTime {
|
||||
background: #292929;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function highlightActiveMenu(menuEntry) {
|
||||
document.getElementById(menuEntry).classList.add("activeMenu");
|
||||
}
|
||||
|
||||
function replaceStr(dst, content) {
|
||||
document.getElementById(dst).innerHTML = content;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<ul class="nav">
|
||||
<li><a href="/">CanGrow</a></li>
|
||||
<li><a id="growSettings" href="/growSettings">Grow settings</a></li>
|
||||
<li><a id="systemSettings" href="/systemSettings">System settings</a></li>
|
||||
<li><a href="/wifiSettings">WiFi settings</a></li>
|
||||
<li><a href="/help">Help</a></li>
|
||||
<li><span id="MenuGrowName"></span></li>
|
||||
<li><span id="MenuTime"></span></li>
|
||||
<li><a id="MenuGrowName" href="/">🌱 CanGrow</a></li>
|
||||
<li><a id="MgrowSettings" href="/growSettings">Grow settings</a></li>
|
||||
<li><a id="MsystemSettings" href="/systemSettings">System settings</a></li>
|
||||
<li><a id="MwifiSettings" href="/wifiSettings">WiFi settings</a></li>
|
||||
<li><a id="Mhelp" href="/help">Help</a></li>
|
||||
<li><span id="MenuTime" class="MenuTime"></span></li>
|
||||
<li><a id="CanGrowVer" href="https://git.la10cy.net/DeltaLima/CanGrow" target="_blank">CanGrow</a></li>
|
||||
</ul>
|
||||
<div class="center">
|
||||
|
||||
|
|
@ -327,9 +336,7 @@ Here you will get some helpful help.
|
|||
|
||||
const char JSreplaceStr[] PROGMEM = R"EOF(
|
||||
<script>
|
||||
function replaceStr(dst, content) {
|
||||
document.getElementById(dst).innerHTML = content;
|
||||
}
|
||||
|
||||
</script>
|
||||
)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() {
|
||||
String body = FPSTR(HTMLheader);
|
||||
// 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
|
||||
|
|
@ -1271,7 +1290,7 @@ void WEBlogout() {
|
|||
void WEBhelp() {
|
||||
String body = FPSTR(HTMLheader);
|
||||
body += FPSTR(HTMLhelp);
|
||||
body += returnHTMLfooter();
|
||||
body += returnHTMLfooter("help");
|
||||
webserver.send(200, "text/html", body);
|
||||
}
|
||||
|
||||
|
|
@ -1324,7 +1343,6 @@ void WEBroot() {
|
|||
break;
|
||||
}
|
||||
}
|
||||
body += getWaterlevel();
|
||||
body += "<br>";
|
||||
body += "Growlight brightnes: ";
|
||||
body += ((PINled_PWM * 100) / 255);
|
||||
|
|
@ -1421,7 +1439,7 @@ void WEBwifiSettings() {
|
|||
body += "DNS: <input type='text' name='WIFIdns'><br>\n";
|
||||
body += "<input type='submit' value='Save'>\n";
|
||||
body += "</form>\n";
|
||||
body += returnHTMLfooter();
|
||||
body += returnHTMLfooter("wifiSettings");
|
||||
|
||||
webserver.send(200, "text/html", body);
|
||||
}
|
||||
|
|
@ -1509,7 +1527,7 @@ void WEBsystemSettings() {
|
|||
body += "<input type='submit' value='Save'>\n";
|
||||
body += "</form>\n";
|
||||
|
||||
body += returnHTMLfooter();
|
||||
body += returnHTMLfooter("systemSettings");
|
||||
|
||||
webserver.send(200, "text/html", body);
|
||||
}
|
||||
|
|
@ -1593,7 +1611,7 @@ void WEBgrowSettings() {
|
|||
body += "<input type='submit' value='Save'>\n";
|
||||
body += "</form>\n";
|
||||
body += FPSTR(JSconvertDateToEpoch);
|
||||
body += returnHTMLfooter();
|
||||
body += returnHTMLfooter("growSettings");
|
||||
|
||||
webserver.send(200, "text/html", body);
|
||||
}
|
||||
|
|
@ -1857,13 +1875,6 @@ void POSTswitchMOSFET() {
|
|||
webserver.send(302, "text/plain", "switch: success!\n");
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
String JSreplaceStr(String elementID, String content) {
|
||||
String jsReturn = "<script>document.getElementById('" + elementID + "').innerHTML='" + content + "';</script>";
|
||||
return jsReturn;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue