firmware - add soilmoisture calibration, add grow end date to root page

query json without jquery: https://gist.github.com/laurenancona/bd560948d71054e3d1477e43c4d48cb6
This commit is contained in:
DeltaLima 2024-12-12 02:19:04 +01:00
parent f5ac68375d
commit 85d785f3cd
3 changed files with 213 additions and 103 deletions

View file

@ -545,7 +545,7 @@ const char HTMLsystemSubNav[] PROGMEM = R"EOF(
</ul> </ul>
)EOF"; )EOF";
const char JSsoilmoistureTypeSelect[] PROGMEM = R"EOF( const char JSsoilmoisture[] PROGMEM = R"EOF(
<script> <script>
function MoistureSensorType() { function MoistureSensorType() {
let selVal = document.getElementById('SelMoistureSensor_Type').value; let selVal = document.getElementById('SelMoistureSensor_Type').value;
@ -571,5 +571,30 @@ const char JSsoilmoistureTypeSelect[] PROGMEM = R"EOF(
break; break;
} }
} }
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', '/api/sensors', true);
xobj.onreadystatechange = function() {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
}
xobj.send(null);
}
function SoilmoistureRefresh() {
loadJSON(function(response) {
json = JSON.parse(response);
document.getElementById('iSoilmoistureRaw').textContent = json.soilmoistureRaw;
console.log(json.soilmoistureRaw);
});
}
</script> </script>
)EOF"; )EOF";
const char HTMLsoilmoistureCalibrateText[] PROGMEM = R"EOF(<p class='helpbox'> <b>Calibration</b><br>
Put your soilmoisture sensor into dry soil and hit Refresh.<br>
Adjust the value of '<i>Soilmoisture dry</i>' if needed according to the reading.<br>
Repeat this with wet soil for '<i>Soilmoisture wet</i>'.</p>)EOF";

View file

@ -377,6 +377,9 @@ void WEBroot() {
body += "<b>Grow started: &#x1F5D3;&#xFE0F;</b> "; body += "<b>Grow started: &#x1F5D3;&#xFE0F;</b> ";
body += returnStrDateFromEpoch(GrowStart); body += returnStrDateFromEpoch(GrowStart);
body += "<br>\n"; body += "<br>\n";
body += "<b>Grow end (est.): &#x1F5D3;&#xFE0F; </b> ";
body += returnStrDateFromEpoch(GrowStart + (60 * 60 * 24 * (DaysVeg + DaysVeg) ) );
body += "<br>\n";
body += "<b>Day of Grow: </b> "; body += "<b>Day of Grow: </b> ";
if(DayNight == true) { if(DayNight == true) {
body += " &#x1F31E; "; body += " &#x1F31E; ";
@ -599,14 +602,6 @@ void WEBgrowSettings() {
body += "'/> %<br><br>\n"; body += "'/> %<br><br>\n";
body += "<b>Pump configuration</b><br>"; body += "<b>Pump configuration</b><br>";
// PumpMode byte // PumpMode byte
@ -633,11 +628,6 @@ void WEBgrowSettings() {
body += "Pump interval vegetation: every <input class='inputShort' type='number' name='PumpIntervalVeg' min='0' max='255' value='"; body += "Pump interval vegetation: every <input class='inputShort' type='number' name='PumpIntervalVeg' min='0' max='255' value='";
body += PumpIntervalVeg; body += PumpIntervalVeg;
body += "' required> Days<br>\n"; body += "' required> Days<br>\n";
@ -682,23 +672,6 @@ void WEBsystemSettings() {
// form starts // form starts
body += "<form method='post' action='/systemSettings/save'>\n"; body += "<form method='post' action='/systemSettings/save'>\n";
// UseFan bool
//~ body += "Fan mode: <select id='UseFan' name='UseFan' required>\n";
//~ if(configured == false){body += "<option disabled value='' selected hidden>---</option>\n";}
//~ body += "<option value='1'" + returnStrSelected(UseFan, 0) + ">Off</option>\n";
//~ body += "<option value='1'" + returnStrSelected(UseFan, 1) + ">Use</option>\n";
//~ body += "<option value='0'" + returnStrSelected(UseFan, 2) + ">Do not use</option>\n";
//~ body += "</select><br>\n";
/*
// UsePump bool
body += "Use PUMP: <select id='UsePump' name='UsePump' required>\n";
if(configured == false){body += "<option disabled value='' selected hidden>---</option>\n";}
body += "<option value='1'" + returnStrSelected(UsePump, 1) + ">Yes</option>\n";
body += "<option value='0'" + returnStrSelected(UsePump, 0) + ">No</option>\n";
body += "</select><br>\n";
*/
body += "<b>Output configuration</b><br>"; body += "<b>Output configuration</b><br>";
// OutputInvert bool // OutputInvert bool
body += "Invert Outputs: <select id='OutputInvert' name='OutputInvert' required>\n"; body += "Invert Outputs: <select id='OutputInvert' name='OutputInvert' required>\n";
@ -723,8 +696,6 @@ void WEBsystemSettings() {
body += "</select><br><br>\n"; body += "</select><br><br>\n";
body += "<b>Sensor configuration</b><br>"; body += "<b>Sensor configuration</b><br>";
// MoistureSensor_Type byte // MoistureSensor_Type byte
@ -739,19 +710,25 @@ void WEBsystemSettings() {
// SoilmoistureDry byte // SoilmoistureDry byte
body += "Soilmoisture dry: <input type='number' id='iSoilmoistureDry' name='SoilmoistureDry' min='0' value='"; body += "Soilmoisture dry: <input type='number' id='iSoilmoistureDry' name='SoilmoistureDry' min='0' value='";
body += SoilmoistureDry; body += SoilmoistureDry;
body += "' required>\n"; body += "' required><br>\n";
body += "<p class='helpbox'><b>Analog capacitive:</b> <i>360</i><br> \
<b>I2C Chirp:</b> <i>250</i></p>";
// SoilmoistureWet byte // SoilmoistureWet byte
body += "Soilmoisture wet: <input type='number' id='iSoilmoistureWet' name='SoilmoistureWet' min='0' value='"; body += "Soilmoisture wet: <input type='number' id='iSoilmoistureWet' name='SoilmoistureWet' min='0' value='";
body += SoilmoistureWet; body += SoilmoistureWet;
body += "' required>\n"; body += "' required><br>\n";
body += "<p class='helpbox'><b>Analog capacitive:</b> <i>160</i><br> \
<b>I2C Chirp:</b> <i>485</i></p>"; if(configured == true) {
body += "Soilmoisture raw reading: <i><span id='iSoilmoistureRaw'>";
body += valSoilmoistureRaw;
body += "</span></i> <input type='button' class='button' value='&#x1F503; Refresh' style='padding: 3px;' onclick='SoilmoistureRefresh();'><br>\n";
body += FPSTR(HTMLsoilmoistureCalibrateText);
} else {
body += "<p class='helpbox'> <b>Calibration</b><br> \
You have to save settings first before you can calibrate the soilmoisture sensor.<p>";
}
// MoistureSensor_Type Javascript // MoistureSensor_Type Javascript
body += FPSTR(JSsoilmoistureTypeSelect); body += FPSTR(JSsoilmoisture);
// TemperatureSensor_Type byte // TemperatureSensor_Type byte

View file

@ -4,19 +4,25 @@
<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='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>
body { body {
color: #cae0d0; color: #cae0d0;
background-color: #1d211e; background-color: #1d211e;
font-family: helvetica; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
} }
.center { .center {
width: 100%; width: 100%;
margin: auto; margin: auto;
}
.centered {
display: block;
margin-left: auto;
margin-right: auto;
} }
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
@ -53,6 +59,12 @@ a:active {
width: 42px; width: 42px;
} }
.helpbox {
font-size: 0.8em;
margin-left: 15px;
margin-top: 5px;
margin-bottom: 5px;
}
.nav { .nav {
background: #333; background: #333;
width: 100%; width: 100%;
@ -63,9 +75,27 @@ a:active {
border-radius: 3px; border-radius: 3px;
} }
.subnav {
text-align: center;
display: table;
margin: auto;
margin-bottom: 10px;
padding: 0;
position: relative;
border-radius: 3px;
}
.nav li { .nav li {
display: inline-block; display: inline-block;
list-style: none; list-style: none;
border-radius: 3px;
}
.subnav li {
background: #026b45;
list-style: none;
border-radius: 3px;
margin-bottom: 3px;
} }
.nav li:first-of-type { .nav li:first-of-type {
@ -73,7 +103,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, .button, .button:link, input[type=button], input[type=submit], input[type=reset] { .nav li a, .nav span, .subnav li a, .subnav 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;
@ -83,13 +113,13 @@ a:active {
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, .button:link:hover, .button:visited:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { .nav li a:hover, .subnav 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, .subnav li a:active {
background: #026b45; background: #026b45;
color: #cae0d0; color: #cae0d0;
} }
@ -125,73 +155,151 @@ input[type=text], input[type=date], input[type=number], input[type=password], se
border-radius: 3px; border-radius: 3px;
} }
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1820px) {
.center, .nav { .center, .nav {
width: 60%; min-width: 420px; width: 60%; min-width: 420px;
} }
.subnav li {
display: '';
margin-bottom: 3px;
}
} }
@media only screen and (min-width: 640px) {
.subnav li {
display: inline-block;
margin-bottom: 3px;
}
}
/* VPD colors */
.vpd_danger1 {
color: #1a6c9c;
}
.vpd_earlyveg {
color: #22ab9c;
}
.vpd_lateveg {
color: #9cc55b;
}
.vpd_latebloom {
color: #9cc55b;
}
.vpd_danger2 {
color: #1a6c9c;
}
</style> </style>
</head> </head>
<body> <body>
<ul class='nav'><li><a href='/'>&#x1F331; Ruderalis Indica</a></li> <ul class='nav'><li><a href='/'>&#x1F331; Amnesiaaaa 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' class='activeMenu'>&#9881; System settings</a></li> <li><a href='/systemSettings' class='activeMenu'>&#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'>00:03:39</span></li> <li><span class='MenuTime'>00:23:10</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.3-dev</a></li>
</ul><div class='center'><h2>&#9881; System settings</h2><p>here you can set which features and sensors you use<br></p><form method='post' action='/systemSettings/save'> </ul><div class='center'><h2>&#9881; System settings</h2>
<table> <ul class='subnav'>
<tr> <li><a href='/system/update'>&#x1F504; Firmware update</a></li>
<td>Use FAN: </td> <li><a href='/system/restart' >&#x1F501; CanGrow restart</a></li>
<td> <li><a href='/system/wipe' >&#x1F4A3; Factory reset</a></li>
<select id='UseFan' name='UseFan' required> </ul>
<option value='1' selected >Yes</option> <p>here you can set which features and sensors you use<br></p><form method='post' action='/systemSettings/save'>
<option value='0'>No</option> <b>Output configuration</b><br>Invert Outputs: <select id='OutputInvert' name='OutputInvert' required>
</select> <option value='0'>No</option>
</td> <option value='1' selected >Yes</option>
</tr> </select><br>
<tr> <p class='helpbox'>When using CanGrow PCB v0.6, set to <b>Yes</b></p>
<td>Use PUMP: </td> Use relais for LED (disable PWM): <select id='UseLEDrelais' name='UseLEDrelais' required>
<td><select id='UsePump' name='UsePump' required> <option value='0' selected >No</option>
<option value='1' selected >Yes</option> <option value='1'>Yes</option>
<option value='0'>No</option> </select><br>
</select> Use relais for FAN1 (disable PWM): <select id='UseFANrelais' name='UseFANrelais' required>
</td> <option value='0'>No</option>
</tr> <option value='1' selected >Yes</option>
</select><br><br>
<b>Sensor configuration</b><br>Soilmoisture sensor: <select id='SelMoistureSensor_Type' name='MoistureSensor_Type' onchange='MoistureSensorType();' required>
<option value='1' selected >Analog capacitive</option>
<option value='2'>I2C Chirp (0x20)</option>
</select><br>
Soilmoisture dry: <input type='number' id='iSoilmoistureDry' name='SoilmoistureDry' min='0' value='360' required><br>
Soilmoisture wet: <input type='number' id='iSoilmoistureWet' name='SoilmoistureWet' min='0' value='160' required><br>
Soilmoisture raw reading: <i><span id='iSoilmoistureRaw'>123</span></i> <input type='button' class='button' value='&#x1F503; Refresh' style='padding: 3px;' onclick='SoilmoistureRefresh();'>
<p class='helpbox'>
<b>Calibration</b><br>
Put your soilmoisture sensor into dry soil and hit Refresh.<br>
Adjust the value of 'Soilmoisture dry' if needed according to the reading.<br>
Repeat this with wet soil for 'Soilmoisture wet'.
</p>
<tr> <script>
<td>Use relais for LED:
</td>
<td>
<select id='UseLEDrelais' name='UseLEDrelais' required>
<option value='1'>Yes</option>
<option value='0' selected >No</option>
</select>
</td>
</tr>
<tr>
<td></td>Use relais for FAN: </td>
<select id='UseFANrelais' name='UseFANrelais' required>
<option value='1'>Yes</option>
<option value='0' selected >No</option>
</select>
</tr>
PUMP ON time: <input class='inputShort' type='number' name='PumpOnTime' min='0' max='255' value='3' required> Seconds<br>
Soilmoisture sensor: <select id='MoistureSensor_Type' name='MoistureSensor_Type' required>
<option value='1' selected >Analog capacitive</option>
<option value='2'>I2C chirp</option>
</select><br>
Soilmoisture low: <input class='inputShort' type='number' name='SoilmoistureLow' min='0' value='20' required> %<br>
Temperature sensor: <select id='TemperatureSensor_Type' name='TemperatureSensor_Type' required>
<option value='1' selected >DHT11/22</option>
<option value='2'>I2C chirp</option>
</select><br>
NTP offset: <input class='inputShort' type='number' name='NtpOffset' min='-12' max='14' value='2' required> Hours<br>
Maintenance Duration: <input class='inputShort' type='number' name='MaintenanceDuration' min='0' max='900' value='300' required> Seconds<br>
<input type='submit' value='Save'>
</table> function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', '/api/sensors', true);
xobj.onreadystatechange = function() {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
}
xobj.send(null);
}
function SoilmoistureRefresh() {
loadJSON(function(response) {
json = JSON.parse(response);
document.getElementById('iSoilmoistureRaw').textContent = json.soilmoistureRaw;
console.log(json.soilmoistureRaw);
});
}
function MoistureSensorType() {
let selVal = document.getElementById('SelMoistureSensor_Type').value;
let wet = document.getElementById('iSoilmoistureWet');
let dry = document.getElementById('iSoilmoistureDry');
switch(selVal) {
case '1':
wet.value = 160;
dry.value = 360;
console.log(selVal);
break;
case '2':
wet.value = 485;
dry.value = 250;
console.log(selVal);
break;
default:
wet.value = 0;
dry.value = 0;
console.log(selVal);
break;
}
}
</script>
Temperature sensor: <select id='TemperatureSensor_Type' name='TemperatureSensor_Type' required>
<option value='1' selected >I2C BME280 (0x76)</option>
<option value='2'>I2C BME280 (0x77)</option>
<option value='3'>I2C SHT31 (0x44)</option>
<option value='4'>I2C SHT31 (0x45)</option>
<option value='5'>I2C Chirp (0x20)</option>
</select><br>
Humidity sensor: <select id='HumiditySensor_Type' name='HumiditySensor_Type' required>
<option value='1' selected >I2C BME280 (0x76)</option>
<option value='2'>I2C BME280 (0x77)</option>
<option value='3'>I2C SHT31 (0x44)</option>
<option value='4'>I2C SHT31 (0x45)</option>
</select><br><br>
<b>General configuration</b><br>NTP offset/UTC timezone: <input class='inputShort' type='number' name='NtpOffset' min='-12' max='14' value='1' required> Hours<br>
Maintenance Duration: <input class='inputShort' type='number' name='MaintenanceDuration' min='0' max='900' value='300' required> Seconds<br>
PWM Frequency: <input type='number' name='PWMFrequency' min='0' max='20000' value='13370' required> Hz<br>
Display rotation interval: <input class='inputShort' type='number' name='DisplayScreenDuration' min='0' max='255' value='3' required> Seconds<br>
<p class='helpbox'><b>0</b> will always show sensor value screen</p>ESP32-Cam IP (optional): <input type='text' name='Esp32CamIP' maxlength='16' value='' ><br><br>
<input type='submit' value='&#x1F4BE; Save settings'>
</form> </form>
</div> </div>