<!DOCTYPE html>
<html>
 <head>
 <meta charset='UTF-8'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<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='>
 <style>
body {
  color: #cae0d0;
  background-color: #1d211e;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.center {
  width: 100%; 
  margin: auto;    
} 

.centered {
  display: block;
  margin-left: auto;
  margin-right: 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;
}

.helpbox {
  font-size: 0.8em;
  margin-left: 15px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.nav {
  background: #333;
  width: 100%; 
  margin: auto;
  margin-bottom: 10px;
  padding: 0;
  position: relative;
  border-radius: 3px;
}

.subnav {
  text-align: center;
  display: table;
  margin: auto;
  margin-bottom: 10px;
  padding: 0;
  position: relative;
  border-radius: 3px;
}

.nav li {
  display: inline-block;
  list-style: none;
  border-radius: 3px;
}

.subnav li {
  background: #026b45;
  list-style: none;
  border-radius: 3px;
  margin-bottom: 3px;
}

.nav li:first-of-type {
  background: #026b45;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.nav li a, .nav span, .subnav li a, .subnav span,  .button, .button:link, input[type=button], input[type=submit], input[type=reset] {
  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, .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;
  color: #fff;
  border-radius: 3px;
}

.nav li a:active, .subnav li a:active {
  background: #026b45;
  color: #cae0d0;
}

.activeMenu {
  background: #444;
}

.MenuTime {
  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;
  border-radius: 3px;
}

 @media only screen and (min-width: 1820px) {
  .center, .nav {
    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>
</head>
<body>
 <ul class='nav'><li><a  href='/'>&#x1F331; Amnesiaaaa Haze</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='/wifiSettings' >&#128225; WiFi settings</a></li>
<li><a href='/help' >&#x2753; Help</a></li>
<li><span class='MenuTime'>00:23:10</span></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>
<ul class='subnav'>
  <li><a  href='/system/update'>&#x1F504; Firmware update</a></li>
  <li><a href='/system/restart' >&#x1F501; CanGrow restart</a></li>
  <li><a href='/system/wipe' >&#x1F4A3; Factory reset</a></li>
</ul>
<p>here you can set which features and sensors you use<br></p><form method='post' action='/systemSettings/save'>
<b>Output configuration</b><br>Invert Outputs: <select id='OutputInvert' name='OutputInvert' required>
<option value='0'>No</option>
<option value='1' selected >Yes</option>
</select><br>
<p class='helpbox'>When using CanGrow PCB v0.6, set to <b>Yes</b></p>
Use relais for LED (disable PWM): <select id='UseLEDrelais' name='UseLEDrelais' required>
<option value='0' selected >No</option>
<option value='1'>Yes</option>
</select><br>
Use relais for FAN1 (disable PWM): <select id='UseFANrelais' name='UseFANrelais' required>
<option value='0'>No</option>
<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>

<script>

  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>

 </div>
</body>
</html>