playground
This commit is contained in:
parent
debb350411
commit
806de10a6e
3 changed files with 454 additions and 0 deletions
playground/html/growAir
236
playground/html/growAir/cangrow.css
Normal file
236
playground/html/growAir/cangrow.css
Normal file
|
@ -0,0 +1,236 @@
|
|||
body {
|
||||
color: #cae0d0;
|
||||
background-color: #1d211e;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: #343B35;
|
||||
}
|
||||
|
||||
.center {
|
||||
/*width: 100; */
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.centered {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #262B27;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
border-width: 0;
|
||||
color: #262B27;
|
||||
background-color: #262B27;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-style: inset;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
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;*/
|
||||
display: inline-block;
|
||||
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;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.subnav {
|
||||
/*text-align: center;*/
|
||||
margin: auto;
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.subnavTitle {
|
||||
font-size: 1em;
|
||||
/*font-weight: bold;*/
|
||||
margin-top: -10px;
|
||||
margin-bottom: 10px;
|
||||
/*text-align: center;*/
|
||||
}
|
||||
.nav li {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.subnav li {
|
||||
background: #262B27;
|
||||
list-style: none;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.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], .linkForm input[type=submit] {
|
||||
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);
|
||||
}
|
||||
|
||||
.subnav li a, .subnav span {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.nav li a:hover, .subnav li a:hover, .activeNav, .button:link:hover, .button:visited:hover, input[type=button]:hover,
|
||||
input[type=submit]:hover, input[type=reset]:hover, .linkForm input[type=submit]:hover {
|
||||
background: #04AA6D;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.nav li a:active, .subnav li a:active {
|
||||
background: #026b45;
|
||||
color: #cae0d0;
|
||||
}
|
||||
|
||||
.activeNav {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.navTime {
|
||||
background: #292929;
|
||||
}
|
||||
|
||||
.button, .button:link, .button:visited, input[type=button], input[type=submit],input[type=reset],
|
||||
.linkForm input[type=submit] {
|
||||
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, .linkForm input[type=submit]: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;
|
||||
}
|
||||
|
||||
.linkForm {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.linkForm input[type=submit] {
|
||||
background: #262B27;
|
||||
padding: 5px;
|
||||
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.force_hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.visible {
|
||||
display: inline;
|
||||
/*justify-content: center!important;*/
|
||||
}
|
||||
/* a disabled class */
|
||||
a.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
@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) {
|
||||
|
||||
}*/
|
179
playground/html/growAir/cangrow.js
Normal file
179
playground/html/growAir/cangrow.js
Normal file
|
@ -0,0 +1,179 @@
|
|||
function toggleDisplay(id) {
|
||||
let el = document.getElementById(id);
|
||||
let el_cs = getComputedStyle(el);
|
||||
|
||||
if (el_cs.getPropertyValue('display') === 'none') {
|
||||
el.style.display = 'inline';
|
||||
} else {
|
||||
el.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function hideAllClass(classname) {
|
||||
|
||||
const el = document.getElementsByClassName(classname);
|
||||
|
||||
for(let i = 0; i < el.length ; i++) {
|
||||
el[i].style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function showSelect(selectId, prefix, hideClass = '') {
|
||||
if(hideClass != '') {
|
||||
hideAllClass(hideClass);
|
||||
}
|
||||
|
||||
let selVal = document.getElementById(selectId).value;
|
||||
toggleId = prefix + selVal;
|
||||
if(document.getElementById(toggleId) !== null ) {
|
||||
toggleDisplay(toggleId);
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDelete(name) {
|
||||
return confirm('Delete ' + name + '?');
|
||||
}
|
||||
|
||||
function SystemOutputAddselectRequired(selectId) {
|
||||
let selVal = document.getElementById(selectId).value;
|
||||
//hideAllClass('hidden');
|
||||
console.log('selectReq Status: ' + selVal);
|
||||
switch(selVal) {
|
||||
case '1':
|
||||
document.getElementById('gpio').required = true;
|
||||
document.getElementById('gpio_pwm').required = true;
|
||||
|
||||
document.getElementById('i2c_type').required = false;
|
||||
document.getElementById('i2c_addr').required = false;
|
||||
document.getElementById('i2c_port').required = false;
|
||||
document.getElementById('webcall_host').required = false;
|
||||
document.getElementById('webcall_path_on').required = false;
|
||||
document.getElementById('webcall_path_off').required = false;
|
||||
break;
|
||||
|
||||
case '2':
|
||||
document.getElementById('gpio').required = false;
|
||||
document.getElementById('gpio_pwm').required = false;
|
||||
|
||||
document.getElementById('i2c_type').required = true;
|
||||
document.getElementById('i2c_addr').required = true;
|
||||
document.getElementById('i2c_port').required = true;
|
||||
document.getElementById('webcall_host').required = false;
|
||||
document.getElementById('webcall_path_on').required = false;
|
||||
document.getElementById('webcall_path_off').required = false;
|
||||
break;
|
||||
|
||||
case '3':
|
||||
document.getElementById('gpio').required = false;
|
||||
document.getElementById('gpio_pwm').required = false;
|
||||
|
||||
document.getElementById('i2c_type').required = false;
|
||||
document.getElementById('i2c_addr').required = false;
|
||||
document.getElementById('i2c_port').required = false;
|
||||
document.getElementById('webcall_host').required = true;
|
||||
document.getElementById('webcall_path_on').required = true;
|
||||
document.getElementById('webcall_path_off').required = true;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/a/67412019
|
||||
function SystemOutputAdd_replaceI2cAddr(selectId, replaceId) {
|
||||
let sel = document.querySelector('#' + replaceId);
|
||||
let selVal = document.getElementById(selectId).value;
|
||||
// Remove existing options
|
||||
Array.from(sel).forEach((option) => {
|
||||
sel.removeChild(option)
|
||||
});
|
||||
// get or set your new options here.
|
||||
if(selVal) {
|
||||
addr[selVal].map((optionData) => {
|
||||
let opt = document.createElement('option');
|
||||
let PortsUsed = 0;
|
||||
let label = optionData[0];
|
||||
opt.value = optionData[1];
|
||||
// iterate through i2c modules available ports
|
||||
for(i = 0; i < optionData[2].length; i++) {
|
||||
if(optionData[2][i] > 0) {
|
||||
PortsUsed++;
|
||||
}
|
||||
}
|
||||
if(PortsUsed >= optionData[2].length) {
|
||||
opt.disabled = true;
|
||||
label = label + ' (used)';
|
||||
}
|
||||
opt.appendChild(document.createTextNode(label));
|
||||
sel.appendChild(opt);
|
||||
});
|
||||
SystemOutputAdd_replaceI2cPort('i2c_type', 'i2c_addr', 'i2c_port');
|
||||
}
|
||||
|
||||
}
|
||||
//////////////////////////////////////
|
||||
function SystemOutputAdd_replaceI2cPort(selectTypeId, selectAddrId, replaceId) {
|
||||
let repl = document.querySelector('#' + replaceId);
|
||||
let selValType = document.getElementById(selectTypeId).value;
|
||||
let selValAddr = document.getElementById(selectAddrId).value;
|
||||
// Remove existing options
|
||||
Array.from(repl).forEach((option) => {
|
||||
repl.removeChild(option)
|
||||
});
|
||||
if(selValAddr) {
|
||||
console.log('true');
|
||||
// iterate through i2c modules available ports
|
||||
for(i = 0; i < addr[selValType][selValAddr][2].length; i++) {
|
||||
let opt = document.createElement('option');
|
||||
let label = 'Port ' + i;
|
||||
opt.value = i;
|
||||
if(addr[selValType][selValAddr][2][i] > 0) {
|
||||
label = label + ' (used)';
|
||||
opt.disabled = true;
|
||||
}
|
||||
opt.appendChild(document.createTextNode(label));
|
||||
repl.appendChild(opt);
|
||||
console.log('PortID ' + i + ' Port sum ' + addr[selValType][selValAddr][2].length);
|
||||
}
|
||||
} else {
|
||||
let opt = document.createElement('option');
|
||||
opt.appendChild(document.createTextNode('n/a'));
|
||||
opt.disabled = true;
|
||||
repl.appendChild(opt);
|
||||
}
|
||||
}
|
||||
//javascript is my passion
|
||||
|
||||
|
||||
function SystemSensorAddGpioI2cSel(selectId) {
|
||||
let selVal = document.getElementById(selectId).value;
|
||||
hideAllClass('hidden');
|
||||
if(selVal == 1) {
|
||||
document.getElementById('type_1').style.display = 'inline';
|
||||
document.getElementById('i2c_addr').required = false;
|
||||
if(ESP == '32') {
|
||||
document.getElementById('gpio').required = true;
|
||||
}
|
||||
} else if(selVal > 1) {
|
||||
document.getElementById('type_2').style.display = 'inline';
|
||||
document.getElementById('i2c_addr').required = true;
|
||||
if(ESP == '32') {
|
||||
document.getElementById('gpio').required = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function convertDateToEpoch(src, dst) {
|
||||
var val = document.getElementById(src).value ;
|
||||
document.getElementById(dst).value = new Date(val).getTime() / 1000;
|
||||
}
|
||||
|
||||
|
||||
function GrowAirSelectControlSensorRead(selectId, inputSensor, inputRead) {
|
||||
let selVal = document.getElementById(selectId).value;
|
||||
let sensor = selVal.split(';')[0];
|
||||
let read = selVal.split(';')[1];
|
||||
document.getElementById(inputSensor).value = sensor;
|
||||
document.getElementById(inputRead).value = read;
|
||||
}
|
39
playground/html/growAir/index.html
Normal file
39
playground/html/growAir/index.html
Normal file
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='UTF-8'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||
<title>CanGrow - CanGrow v0.2-dev</title>
|
||||
<link rel='stylesheet' href='cangrow.css'>
|
||||
<script type='text/javascript' src='cangrow.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<ul class='nav'><li><a href='/'>🌱 CanGrow</a></li>
|
||||
<li><a class='activeNav' href='/grow/' >🔆 Grow settings</a></li>
|
||||
<li><a class='' href='/system/' >⚙ System settings</a></li>
|
||||
<li><a class='' href='/wifi/' >📡 WiFi settings</a></li>
|
||||
<li><a class='' href='/help' >❓ Help</a></li>
|
||||
<li><span class='navTime'>22:04:07</span></li>
|
||||
<li><a href='https://git.la10cy.net/DeltaLima/CanGrow' target='_blank'>CanGrow v0.2-dev</a></li>
|
||||
</ul>
|
||||
<div class='center'>
|
||||
|
||||
<ul class='subnav'>
|
||||
<li><a class='' href='/grow/'>🛠️ General</a></li>
|
||||
<li><a class='' href='/grow/light/'>💡 Light</a></li>
|
||||
<li><a class='activeNav' href='/grow/air/'>🌀 Air</a></li>
|
||||
<li><a class='' href='/grow/water/'>💧 Water</a></li>
|
||||
<li><a class='' href='/grow/dashboard/' >🖥️ Dashboard</a></li>
|
||||
</ul>
|
||||
|
||||
<p>here you can set air stuff<br></p>
|
||||
|
||||
|
||||
<form method='post' action='/grow/air/'><input type='hidden' name='output' value='1' required><h2>PWM Fan</h2><u>Type:</u><br><b>GPIO</b><br><u>Speed</u><br><input type='range' name='speed' min='0' max='100' value='67'/> %<br><input type='hidden' name='controlSensor' value='1' id='controlSensor1'><input type='hidden' name='controlRead' value='1' id='controlRead1'><u>Controled by</u><br><select name='controlBy' id='ctrl1'onChange="GrowAirSelectControlSensorRead('ctrl1', 'controlSensor1', 'controlRead1');"><option value='' selected hidden>---</option><option value='0;0'>Fühler innen - Temperature (28.97 °C)</option><option value='0;1'>Fühler innen - Humidity (33.78 %)</option><option value='0;4'>Fühler innen - Gas resistance (225.49 KOhm)</option><option value='1;0'>SHT31 - Temperature (23.81 °C)</option><option value='1;1' selected>SHT31 - Humidity (40.48 %)</option><option value='4;1'>Chirp - Temperature (0.00 °C)</option></select><br><u>Control mode</u><br><select name='controlMode' required><option value='1' selected>Yes</option><option value='0'>No</option>'/> %</select><br><u>Min</u><br><input class='inputShort' type='number' name='min' min='0' max='255' value='1' required><br><u>Max</u><br><input class='inputShort' type='number' name='max' min='0' max='255' value='2' required><br><input type='submit' value='💾 Save settings' style='margin-top: 8px;'></form><hr>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='footer'><span>Build: debb350-esp8266:d1_mini_clone-20250121220238</span></div></div></body></html>
|
Loading…
Add table
Add a link
Reference in a new issue