DeltaLima/CanGrow
DeltaLima/CanGrow
0
0
Fork 0
Code Issues 14 Pull requests Projects 1 Releases 3 Packages Wiki Activity

firmware wip - html css stuff

Browse source
This commit is contained in:
Marcus 2024-05-10 03:29:59 +02:00
parent 60d282fb34
commit 7d60fa3a16
4 changed files with 97 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
Arduino/CanGrow/CanGrow_HTML.h
View file

@ -88,7 +88,7 @@ a:active {
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
} }
.nav li a , .nav span { .nav li a , .nav span, .button, .button:link, input[type=button], input[type=submit], input[type=reset] {
color: #ddd; color: #ddd;
display: block; display: block;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
@ -97,21 +97,48 @@ a:active {
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 , .activeMenu , .menuTime{
.nav li a:hover , .activeMenu, .button:link:hover, .button:visited:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
background: #04AA6D; background: #04AA6D;
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
} }
.nav li a:active { .nav li a:active {
background: #026b45;
color: #cae0d0; color: #cae0d0;
} }
.activeMenu { .activeMenu {
background: #444; background: #444;
} }
.MenuTime { .MenuTime {
background: #292929; background: #292929;
} }
.button, .button:link, .button:visited, input[type=button], input[type=submit], input[type=reset] {
background: #026b45;
color: #fff;
border-radius: 3px;
padding: 6px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
border: none;
}
.button:link:active, .button:visited:active, input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
background: #026b45;
color: #cae0d0;
}
input[type=text], input[type=date], input[type=number], input[type=password], select {
background: #cae0d0;
color: #1d211e;
border: 1px solid #026b45;
}
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {
.center, .nav { .center, .nav {
width: 60%; min-width: 420px; width: 60%; min-width: 420px;

5
Arduino/CanGrow/CanGrow_WebFunctions.h
View file

@ -229,8 +229,7 @@ void SysMaintenance() {
body += "<h2>&#9208;&#65039; Maintenance Mode</h2>"; body += "<h2>&#9208;&#65039; Maintenance Mode</h2>";
body += "<form action='/system/maintenance'><input type='hidden' name='on' value='true' /><input type='submit' value='On'/></form>"; body += "<a class='button' href='/system/maintenance?on=1'>On</a>&nbsp;&nbsp;<a class='button' href='/system/maintenance?off=1'>Off</a>";
body += "<form action='/system/maintenance'><input type='hidden' name='off' value='true' /><input type='submit' value='Off'/></form>";
body += FPSTR(HTMLfooter); body += FPSTR(HTMLfooter);
webserver.send(200, "text/html", body); webserver.send(200, "text/html", body);
@ -370,7 +369,7 @@ void WEBroot() {
body += "<input type='submit' value='Save'>\n"; body += "<input type='submit' value='Save'>\n";
body += "</form><br>\n"; body += "</form><br>\n";
body += "<form action='/system/maintenance'><input type='submit' value='Maintenance Mode'/></form>"; body += "<a class='button' href='/system/maintenance'>Maintenance Mode</a>";
body += FPSTR(HTMLfooter); body += FPSTR(HTMLfooter);

13
playground/html/root/gauge.css
View file

@ -1,7 +1,5 @@
.gauge { .gauge {
position: relative; position: relative;
margin-right: 10px;
} }
.gaugeWrapper { .gaugeWrapper {
@ -10,10 +8,6 @@
justify-content: center; justify-content: center;
} }
.gaugeLabel {
font-weight: bold;
}
.gauge__container { .gauge__container {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -81,6 +75,7 @@
display: table; display: table;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
font-weight: bold;
} }
.gauge__label--low { .gauge__label--low {
@ -111,7 +106,7 @@
.gauge__label--high { width: 24px; } .gauge__label--high { width: 24px; }
@media only screen and (min-width: 720px) { @media only screen and (min-width: 720px) {
.gauge { height: calc(120px + 3em); } .gauge { height: calc(120px + 4.2em); }
.gauge__container { width: 240px; height: 120px; } .gauge__container { width: 240px; height: 120px; }
.gauge__marker { height: 120px; left: 119.5px; } .gauge__marker { height: 120px; left: 119.5px; }
.gauge__background { width: 240px; height: 120px; } .gauge__background { width: 240px; height: 120px; }
@ -122,6 +117,8 @@
.gauge__label--low { width: 48px; } .gauge__label--low { width: 48px; }
.gauge__label--spacer { width: 144px; text-align: center;} .gauge__label--spacer { width: 144px; text-align: center;}
.gauge__label--high { width: 48px; } .gauge__label--high { width: 48px; }
.gaugeLabel { font-size: 1.3em; }
.gauge__labels { font-size: 2em; }
} }
.gauge--liveupdate .gauge__data, .gauge--liveupdate .gauge__data,
@ -148,5 +145,3 @@
-o-transform: rotate(-.50turn); -o-transform: rotate(-.50turn);
transform: rotate(-.50turn); transform: rotate(-.50turn);
} }

88
playground/html/root/index.html
View file

@ -4,7 +4,7 @@
<head> <head>
<meta charset='UTF-8'> <meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>CanGrow - Ruderalis Indica</title> <title>CanGrow - Amnesia Haze</title>
<link rel='stylesheet' type='text/css' href='gauge.css'> <link rel='stylesheet' type='text/css' href='gauge.css'>
<link rel='icon' href='data:;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAABcElEQVQ4y42TzU/bQBDFf7Nx1qGuAYVgQSuo2khBggPhyIH//9AiJAQ9tEeLqCKiUD6sxF52OMSEBCdW57aa9968fTsr3V5XWVLPO6sANNL7ZRAMNeU6Ea4T1UEI6pr55kcAwhpMrYOpk2/r/yEQmKWkIonf+TZVgex4Fw0bIEtIAALF3gbZ8U5VwKa3PJ18JT9IpiLvyflBwuhLG5veVUM0/0aoCONPa2hQjWZ8uEVeupJnXSBwO8YOH8iTeAKc2Q4Xt2C1VZL93F7MjbK/bxDnp5Zn7b+So+9pdQ+K/Q5qJlrRj5Ts6DM+rK7Ih7Mr3HaM7jYQVZqXQ6Tb6yqBYdTfomhHiFfUyMI3f+01/z7RHNzTGDyWGThP63SA2d8EEfIkrgQpzmOvH0AV+3M4zegNpUwagAYG8Yp4BS0nl4Kz5Mpf0JXJMby6w/66Aa+M+9uE53/Iexsggq4ESOYWC0jmsBfX8xdXhcJjL4cLc3kBl8uJGQ/CrpAAAAAASUVORK5CYII='> <link rel='icon' href='data:;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAABcElEQVQ4y42TzU/bQBDFf7Nx1qGuAYVgQSuo2khBggPhyIH//9AiJAQ9tEeLqCKiUD6sxF52OMSEBCdW57aa9968fTsr3V5XWVLPO6sANNL7ZRAMNeU6Ea4T1UEI6pr55kcAwhpMrYOpk2/r/yEQmKWkIonf+TZVgex4Fw0bIEtIAALF3gbZ8U5VwKa3PJ18JT9IpiLvyflBwuhLG5veVUM0/0aoCONPa2hQjWZ8uEVeupJnXSBwO8YOH8iTeAKc2Q4Xt2C1VZL93F7MjbK/bxDnp5Zn7b+So+9pdQ+K/Q5qJlrRj5Ts6DM+rK7Ih7Mr3HaM7jYQVZqXQ6Tb6yqBYdTfomhHiFfUyMI3f+01/z7RHNzTGDyWGThP63SA2d8EEfIkrgQpzmOvH0AV+3M4zegNpUwagAYG8Yp4BS0nl4Kz5Mpf0JXJMby6w/66Aa+M+9uE53/Iexsggq4ESOYWC0jmsBfX8xdXhcJjL4cLc3kBl8uJGQ/CrpAAAAAASUVORK5CYII='>
<style> <style>
@ -13,11 +13,12 @@ body {
background-color: #1d211e; background-color: #1d211e;
font-family: helvetica; font-family: helvetica;
} }
.center {
width: 60%; min-width: 420px;
margin: auto;
.center {
width: 100%;
margin: auto;
} }
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
text-align: center; text-align: center;
} }
@ -51,9 +52,10 @@ a:active {
.inputShort { .inputShort {
width: 42px; width: 42px;
} }
.nav { .nav {
background: #333; background: #333;
width: 60%; min-width: 420px; width: 100%;
margin: auto; margin: auto;
margin-bottom: 10px; margin-bottom: 10px;
padding: 0; padding: 0;
@ -71,7 +73,7 @@ a:active {
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
} }
.nav li a , .nav span { .nav li a , .nav span, .button, .button:link, input[type=button], input[type=submit], input[type=reset] {
color: #ddd; color: #ddd;
display: block; display: block;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
@ -80,45 +82,73 @@ a:active {
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 , .activeMenu , .menuTime{
.nav li a:hover , .activeMenu, .button:link:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
background: #04AA6D; background: #04AA6D;
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
} }
.nav li a:active { .nav li a:active {
background: #026b45;
color: #cae0d0; color: #cae0d0;
} }
.activeMenu { .activeMenu {
background: #444; background: #444;
} }
.MenuTime { .MenuTime {
background: #292929; background: #292929;
} }
.button, .button:link , input[type=button], input[type=submit], input[type=reset] {
background: #026b45;
color: #fff;
border-radius: 3px;
padding: 6px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
border: none;
}
.button:link:active, input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
background: #026b45;
color: #cae0d0;
}
input[type=text], input[type=date], input[type=number], input[type=password], select {
background: #cae0d0;
color: #1d211e;
border: 1px solid #026b45;
}
@media only screen and (min-width: 1280px) {
.center, .nav {
width: 60%; min-width: 420px;
}
}
</style> </style>
</head> </head>
<body> <body>
<ul class='nav'><li><a href='/'>&#x1F331; Ruderalis Indica</a></li> <ul class='nav'><li><a href='/'>&#x1F331; Amnesia Haze</a></li>
<li><a href='/growSettings' >&#128262; Grow settings</a></li> <li><a href='/growSettings' >&#128262; Grow settings</a></li>
<li><a href='/systemSettings' >&#9881; System settings</a></li> <li><a href='/systemSettings' >&#9881; System settings</a></li>
<li><a href='/wifiSettings' >&#128225; WiFi settings</a></li> <li><a href='/wifiSettings' >&#128225; WiFi settings</a></li>
<li><a href='/help' >&#x2753; Help</a></li> <li><a href='/help' >&#x2753; Help</a></li>
<li><span class='MenuTime'>23:57:31</span></li> <li><span class='MenuTime'>03:22:14</span></li>
<li><span>Ⓜ️</span></li>
<li><a href='https://git.la10cy.net/DeltaLima/CanGrow' target='_blank'>CanGrow v0.1</a></li> <li><a href='https://git.la10cy.net/DeltaLima/CanGrow' target='_blank'>CanGrow v0.1</a></li>
</ul><div class='center'><h2>&#x1F331; Amnesia Haze</h2>
</ul>
<div class='center'><h2>&#x1F331; Ruderalis Indica</h2>
<div class='gaugeWrapper'> <div class='gaugeWrapper'>
<div class='gauge gauge--liveupdate' id='gaugeTemperature' style='float:left;'> <div class='gauge gauge--liveupdate spacer' id='gaugeTemperature' style='float:left; margin-right: 10px;'>
<span class='gaugeLabel'>Temperature</span> <span class='gaugeLabel'>Temperature</span>
<div class='gauge__container'> <div class='gauge__container'>
<div class='gauge__background'></div> <div class='gauge__background'></div>
<div class='gauge__center'></div> <div class='gauge__center'></div>
<div class='gauge__data'></div> <div class='gauge__data'></div>
<!-- <div class='gauge__needle'></div> --> <div class='gauge__needle'></div>
</div> </div>
<div class='gauge__labels mdl-typography__headline'> <div class='gauge__labels mdl-typography__headline'>
<span class='gauge__label--low'></span> <span class='gauge__label--low'></span>
@ -127,13 +157,13 @@ a:active {
</div> </div>
</div> </div>
<div class='gauge gauge--liveupdate' id='gaugeHumidity' style='float:left;'> <div class='gauge gauge--liveupdate spacer' id='gaugeHumidity' style='float:left; margin-right: 10px;'>
<span class='gaugeLabel'>Humidity</span> <span class='gaugeLabel'>Humidity</span>
<div class='gauge__container'> <div class='gauge__container'>
<div class='gauge__background'></div> <div class='gauge__background'></div>
<div class='gauge__center'></div> <div class='gauge__center'></div>
<div class='gauge__data'></div> <div class='gauge__data'></div>
<!-- <div class='gauge__needle'></div> --> <div class='gauge__needle'></div>
</div> </div>
<div class='gauge__labels mdl-typography__headline'> <div class='gauge__labels mdl-typography__headline'>
<span class='gauge__label--low'></span> <span class='gauge__label--low'></span>
@ -143,12 +173,12 @@ a:active {
</div> </div>
<div class='gauge gauge--liveupdate' id='gaugeSoilmoisture' style='float:left;'> <div class='gauge gauge--liveupdate' id='gaugeSoilmoisture' style='float:left;'>
<span class='gaugeLabel'>Moisture</span> <span class='gaugeLabel'>Soilmoisture</span>
<div class='gauge__container'> <div class='gauge__container'>
<div class='gauge__background'></div> <div class='gauge__background'></div>
<div class='gauge__center'></div> <div class='gauge__center'></div>
<div class='gauge__data'></div> <div class='gauge__data'></div>
<!-- <div class='gauge__needle'></div> --> <div class='gauge__needle'></div>
</div> </div>
<div class='gauge__labels mdl-typography__headline'> <div class='gauge__labels mdl-typography__headline'>
<span class='gauge__label--low'></span> <span class='gauge__label--low'></span>
@ -166,24 +196,26 @@ a:active {
var gaugeHumidity = new Gauge(document.getElementById('gaugeHumidity')); var gaugeHumidity = new Gauge(document.getElementById('gaugeHumidity'));
var gaugeSoilmoisture = new Gauge(document.getElementById('gaugeSoilmoisture')); var gaugeSoilmoisture = new Gauge(document.getElementById('gaugeSoilmoisture'));
</script> </script>
Grow started: 2024-04-12<br>
Day of Grow: 20<br> <script>gaugeTemperature.value('nan', 42, ' °C'); gaugeHumidity.value('nan'); gaugeSoilmoisture.value('140'); </script>Grow started: 2024-05-08<br>
<script>gaugeTemperature.value(22.00, 42, ' °C' ); gaugeHumidity.value(59.00 ); gaugeSoilmoisture.value(98 ); </script>Pump water level: <span style='color: red;'>Critical</span><br> Day of Grow: 1<br>
Growlight brightnes: 100 %<br> Pump water level: <span style='color: red;'>Critical</span><br>
Growlight brightness: 100 %<br>
<form method='post' action='/switch'> <form method='post' action='/switch'>
MOSFET<select id='output' name='output' required> MOSFET<select id='output' name='output' >
<option disabled value='' selected hidden>---</option> <option disabled value='' selected hidden>---</option>
<option value='1'>LED</option> <option value='1'>LED</option>
<option value='2'>FAN</option> <option value='2'>FAN</option>
<option value='3'>PUMP</option> <option value='3'>PUMP</option>
</select><br>On/Off: <select id='state' name='state' required> </select><br>On/Off: <select id='state' name='state' >
<option disabled value='' selected hidden>---</option> <option disabled value='' selected hidden>---</option>
<option value='1'>On</option> <option value='1'>On</option>
<option value='0'>Off</option> <option value='0'>Off</option>
</select><br> </select><br>
Intensity: <input type='range' id='OutputPWM' name='OutputPWM' min='1' max='255' value='255'/><br> Intensity: <input type='range' id='OutputPWM' name='OutputPWM' min='1' max='255' value='255'/><br>
<input type='submit' value='Save'> <input type='submit' value='Save'>
</form> </form><br>
<a class='button' href='/system/maintenance'>Maintenance Mode</a>
</div> </div>
</body> </body>
</html> </html>