2024-05-03 00:33:23 +02:00
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset='UTF-8'>
|
|
|
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
|
|
|
|
<title>CanGrow - Ruderalis Indica</title>
|
|
|
|
|
<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='>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
color: #cae0d0;
|
|
|
|
|
background-color: #1d211e;
|
|
|
|
|
font-family: helvetica;
|
|
|
|
|
}
|
|
|
|
|
.center {
|
|
|
|
|
width: 60%; min-width: 420px;
|
|
|
|
|
margin: auto;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
a:link, a:visited {
|
|
|
|
|
color: #04AA6D;
|
|
|
|
|
}
|
|
|
|
|
a:hover {
|
|
|
|
|
color: #64AA6D;
|
|
|
|
|
}
|
|
|
|
|
a:active {
|
|
|
|
|
color: #04AA6D;
|
|
|
|
|
}
|
|
|
|
|
.infomsg , .warnmsg {
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
padding: 4px;
|
|
|
|
|
width: fit-content; min-width: 200px; max-width: 420px;
|
|
|
|
|
margin: auto;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
text-align: center;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
|
|
|
|
|
}
|
|
|
|
|
.infomsg {
|
|
|
|
|
background: #04AA6D;
|
|
|
|
|
}
|
|
|
|
|
.warnmsg {
|
|
|
|
|
background: #aa4204;
|
|
|
|
|
}
|
|
|
|
|
.inputShort {
|
|
|
|
|
width: 42px;
|
|
|
|
|
}
|
|
|
|
|
.nav {
|
|
|
|
|
background: #333;
|
|
|
|
|
width: 60%; min-width: 420px;
|
|
|
|
|
margin: auto;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
position: relative;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav li {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
list-style: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav li:first-of-type {
|
|
|
|
|
background: #026b45;
|
|
|
|
|
border-top-left-radius: 3px;
|
|
|
|
|
border-bottom-left-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
.nav li a , .nav span {
|
|
|
|
|
color: #ddd;
|
|
|
|
|
display: block;
|
|
|
|
|
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
|
|
|
|
|
font-size:0.8em;
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
|
|
|
|
|
}
|
|
|
|
|
.nav li a:hover , .activeMenu , .menuTime{
|
|
|
|
|
background: #04AA6D;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
.nav li a:active {
|
|
|
|
|
color: #cae0d0;
|
|
|
|
|
}
|
|
|
|
|
.activeMenu {
|
|
|
|
|
background: #444;
|
|
|
|
|
}
|
|
|
|
|
.MenuTime {
|
|
|
|
|
background: #292929;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<ul class='nav'><li><a href='/'>🌱 Ruderalis Indica</a></li>
|
2024-05-03 01:41:09 +02:00
|
|
|
<li><a href='/growSettings' >🔆 Grow settings</a></li>
|
|
|
|
|
<li><a href='/systemSettings' >⚙ System settings</a></li>
|
|
|
|
|
<li><a href='/wifiSettings' >📡 WiFi settings</a></li>
|
|
|
|
|
<li><a href='/help' >❓ Help</a></li>
|
2024-05-03 00:33:23 +02:00
|
|
|
<li><span class='MenuTime'>23:57:31</span></li>
|
|
|
|
|
<li><a href='https://git.la10cy.net/DeltaLima/CanGrow' target='_blank'>CanGrow v0.1</a></li>
|
|
|
|
|
</ul><div class='center'><h2>🌱 Ruderalis Indica</h2>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class='gaugeWrapper'>
|
|
|
|
|
<div class='gauge gauge--liveupdate' id='gaugeTemperature' style='float:left;'>
|
|
|
|
|
<span class='gaugeLabel'>Temperature</span>
|
|
|
|
|
<div class='gauge__container'>
|
|
|
|
|
<div class='gauge__background'></div>
|
|
|
|
|
<div class='gauge__center'></div>
|
|
|
|
|
<div class='gauge__data'></div>
|
2024-05-03 01:33:38 +02:00
|
|
|
<!-- <div class='gauge__needle'></div> -->
|
2024-05-03 00:33:23 +02:00
|
|
|
</div>
|
|
|
|
|
<div class='gauge__labels mdl-typography__headline'>
|
|
|
|
|
<span class='gauge__label--low'></span>
|
|
|
|
|
<span class='gauge__label--spacer'></span></span>
|
|
|
|
|
<span class='gauge__label--high'></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class='gauge gauge--liveupdate' id='gaugeHumidity' style='float:left;'>
|
|
|
|
|
<span class='gaugeLabel'>Humidity</span>
|
|
|
|
|
<div class='gauge__container'>
|
|
|
|
|
<div class='gauge__background'></div>
|
|
|
|
|
<div class='gauge__center'></div>
|
|
|
|
|
<div class='gauge__data'></div>
|
2024-05-03 01:33:38 +02:00
|
|
|
<!-- <div class='gauge__needle'></div> -->
|
2024-05-03 00:33:23 +02:00
|
|
|
</div>
|
|
|
|
|
<div class='gauge__labels mdl-typography__headline'>
|
|
|
|
|
<span class='gauge__label--low'></span>
|
|
|
|
|
<span class='gauge__label--spacer'></span>
|
|
|
|
|
<span class='gauge__label--high'></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class='gauge gauge--liveupdate' id='gaugeSoilmoisture' style='float:left;'>
|
|
|
|
|
<span class='gaugeLabel'>Moisture</span>
|
|
|
|
|
<div class='gauge__container'>
|
|
|
|
|
<div class='gauge__background'></div>
|
|
|
|
|
<div class='gauge__center'></div>
|
|
|
|
|
<div class='gauge__data'></div>
|
2024-05-03 01:33:38 +02:00
|
|
|
<!-- <div class='gauge__needle'></div> -->
|
2024-05-03 00:33:23 +02:00
|
|
|
</div>
|
|
|
|
|
<div class='gauge__labels mdl-typography__headline'>
|
|
|
|
|
<span class='gauge__label--low'></span>
|
|
|
|
|
<span class='gauge__label--spacer'></span>
|
|
|
|
|
<span class='gauge__label--high'></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src='gauge.js'></script>
|
|
|
|
|
<script>
|
|
|
|
|
var gaugeTemperature = new Gauge(document.getElementById('gaugeTemperature'));
|
|
|
|
|
var gaugeHumidity = new Gauge(document.getElementById('gaugeHumidity'));
|
|
|
|
|
var gaugeSoilmoisture = new Gauge(document.getElementById('gaugeSoilmoisture'));
|
|
|
|
|
</script>
|
|
|
|
|
Grow started: 2024-04-12<br>
|
|
|
|
|
Day of Grow: 20<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>
|
|
|
|
|
Growlight brightnes: 100 %<br>
|
|
|
|
|
<form method='post' action='/switch'>
|
|
|
|
|
MOSFET<select id='output' name='output' required>
|
|
|
|
|
<option disabled value='' selected hidden>---</option>
|
|
|
|
|
<option value='1'>LED</option>
|
|
|
|
|
<option value='2'>FAN</option>
|
|
|
|
|
<option value='3'>PUMP</option>
|
|
|
|
|
</select><br>On/Off: <select id='state' name='state' required>
|
|
|
|
|
<option disabled value='' selected hidden>---</option>
|
|
|
|
|
<option value='1'>On</option>
|
|
|
|
|
<option value='0'>Off</option>
|
|
|
|
|
</select><br>
|
|
|
|
|
Intensity: <input type='range' id='OutputPWM' name='OutputPWM' min='1' max='255' value='255'/><br>
|
|
|
|
|
<input type='submit' value='Save'>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
