Documentation updates

This commit is contained in:
2023-11-10 12:19:06 -06:00
parent a81d497dcc
commit 7c53fd81b4
10 changed files with 113 additions and 94 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

@@ -28,12 +28,12 @@ getIt = function (aUrl, callback) {
function RefreshStatus() {
getIt(url,
function (data) {
obj = JSON.parse(data);
UpdateGraph(obj.raw, obj.sense); // raw and averaged
document.getElementById('uptime').innerHTML = 'Uptime: ' + obj.uptime;
document.getElementById('currText').innerHTML = 'raw: ' + obj.raw + ', avg: ' + obj.sense;
}
function (data) {
obj = JSON.parse(data);
UpdateGraph(obj.raw, obj.sense); // raw and averaged
document.getElementById('uptime').innerHTML = 'Uptime: ' + obj.uptime;
document.getElementById('currText').innerHTML = 'raw: ' + obj.raw + ', avg: ' + obj.sense;
}
);
}

View File

@@ -39,7 +39,7 @@
<div class='SoilTemp_C' id='SoilTemp_C' >--.- &deg;F</div>
<div class='SoilMoisture_X' id='SoilMoisture_X' >-- %</div>
<div class='DrumDoorIcon' id='DrumDoorIcon' ><img src='open.png' title='Open' /></div>
<div class='DrumState' id='DrumState' ><img src='open.png' title='Open' /></div>
<div class='DrumOpenSensor' id='DrumOpenSensor' >O</div>
<div class='DrumClosedSensor' id='DrumClosedSensor' >C</div>
<div class='DrumMotorLabel' id='DrumMotorLabel' >Motor</div>
@@ -57,7 +57,7 @@
<div class='WaterCycleOn_sec' id='WaterCycleOn_sec' >8 s</div>
<div class='WaterCycle_sec' id='WaterCycle_sec' >10 s</div>
<div class='WaterCycleOnBox' id='WaterCycleOnBox' ></div>
<div class='WaterCycleStatusIcon' id='WaterCycleStatusIcon' ><img src='pointer.png' title='Pump On Time' /></div>
<div class='WaterCyclePointer_sec' id='WaterCyclePointer_sec' ><img src='pointer.png' title='Pump On Time' /></div>
</div>
</td>
<td width='10%' align='center'>

View File

@@ -1,9 +1,13 @@
//
// Main Page period status update
//
// @todo Draw the 'drum' as an arc instead of trying to rotate a picture of an arc.
// which will work better to reflect the opening.
//
//
// var mySite = 'http://192.168.1.23'; // from myip.js
var url = mySite + '/state';
setInterval(RefreshStatus, 2500);
setInterval(RefreshStatus, 1000); // @todo speed this up to 500 msec or even 250
getIt = function (aUrl, callback) {
var xhr = new XMLHttpRequest();
@@ -19,28 +23,24 @@ getIt = function (aUrl, callback) {
function ConvertTempToString(tempC, showF) {
var tempF = tempC * 9 / 5 + 32;
if (showF)
return tempF.toFixed(1) + "&deg;F";
if (showF == 0)
return tempF.toFixed(0) + "&deg;F";
else
return tempC.toFixed(1) + "&deg;C";
return tempC.toFixed(0) + "&deg;C";
}
function ConvertSecToMMSS(sec) {
mm = parseInt(sec/60).toString().padStart(4,'0');
ss = (sec%60).toString().padStart(2,'0');
return mm + ":" + ss;
}
function RefreshStatus() {
getIt(url,
function(data) {
obj = JSON.parse(data);
if (obj.state === 1)
state = "On";
else
state = "Off";
document.getElementById('version').innerHTML = obj.version;
document.getElementById('name').innerHTML = obj.name;
//document.getElementById('state').innerHTML = 'Output: ' + state;
//document.getElementById('raw').innerHTML = 'raw: ' + obj.raw;
//document.getElementById('sense').innerHTML = 'Sense: ' + obj.sense;
//document.getElementById('toggle').innerHTML = 'Toggle: ' + obj.toggle;
//document.getElementById('reset').innerHTML = 'Reset: ' + obj.reset;
//document.getElementById('countdown').innerHTML = 'Countdown: ' + obj.countdown;
document.getElementById('uptime').innerHTML = 'Uptime: ' + obj.uptime;
document.getElementById('wifimode').innerHTML = 'WiFi Mode: ' + obj.wifimode;
// IP Address
@@ -67,7 +67,7 @@ function RefreshStatus() {
}
if (typeof obj.SoilHeater != "undefined") {
document.getElementById('SoilHeater').innerHTML = obj.SoilHeater;
document.getElementById('SoilHeater').innerHTML = (obj.SoilHeater) ? "Heat On" : "Heat Off";
} else {
document.getElementById('SoilHeater').innerHTML = "--";
}
@@ -83,24 +83,34 @@ function RefreshStatus() {
document.getElementById('SoilMoisture_X').innerHTML = "--";
}
if (obj.DrumDoorIcon == 1) {
document.getElementById('DrumDoorIcon').style.display === "none";
if (obj.DrumState == 1) { // closed, hide the "open" image
document.getElementById('DrumState').style.display === "none";
} else {
document.getElementById('DrumDoorIcon').style.display === "block";
document.getElementById('DrumState').style.display === "block";
}
document.getElementById('DrumOpenSensor').innerHTML = obj.DrumOpenSensor;
document.getElementById('DrumClosedSensor').innerHTML = obj.DrumClosedSensor;
document.getElementById('DrumMotorStatus').innerHTML = obj.DrumMotorStatus;
document.getElementById('DrumOpenSensor').innerHTML = (obj.DrumOpenSensor) ? "O" : "!O";
document.getElementById('DrumClosedSensor').innerHTML = (obj.DrumClosedSensor) ? "C" : "!C";
document.getElementById('DrumMotorStatus').innerHTML = (obj.DrumMotorStatus == 0) ? "stopped" : (obj.DrumMotorStatus == 1) ? "CW" : "CCW";
document.getElementById('DrumMotorOn_sec').innerHTML = obj.DrumMotorOn_sec + "s";
document.getElementById('DrumMotor_V').innerHTML = parseFloat(obj.DrumMotor_V).toFixed(1) + "V";
document.getElementById('DrumMotor_I').innerHTML = parseFloat(obj.DrumMotor_I).toFixed(1) + "A";
document.getElementById('DrumMotor_V').innerHTML = parseFloat(obj.DrumMotor_V).toFixed(1) + " V";
document.getElementById('DrumMotor_I').innerHTML = parseFloat(obj.DrumMotor_I).toFixed(1) + " A";
document.getElementById('WaterInTank').innerHTML = obj.WaterInTank;
document.getElementById('WaterPumpStatus').innerHTML = obj.WaterPumpStatus;
document.getElementById('WaterMotor_V').innerHTML = parseFloat(obj.WaterMotor_V).toFixed(1) + "V";
document.getElementById('WaterCyclePeriod_sec').innerHTML = obj.WaterCyclePeriod_sec + "s";
document.getElementById('WaterCycleOn_sec').innerHTML = obj.WaterCycleOn_sec + "s";
document.getElementById('WaterCycle_sec').innerHTML = obj.WaterCycle_sec + "s";
document.getElementById('WaterPumpStatus').innerHTML = (obj.WaterPumpStatus) ? "On" : "Off";
document.getElementById('WaterMotor_V').innerHTML = parseFloat(obj.WaterMotor_V).toFixed(1) + " V";
document.getElementById('WaterCyclePeriod_sec').innerHTML = ConvertSecToMMSS(obj.WaterCyclePeriod_sec);
document.getElementById('WaterCycleOn_sec').innerHTML = ConvertSecToMMSS(obj.WaterCycleOn_sec);
document.getElementById('WaterCycle_sec').innerHTML = ConvertSecToMMSS(obj.WaterCycle_sec);
// The full-scale pump timer box ranges from 22 to 234px
// The WaterCycleOnBox.width is proportional to the WaterCyclePeriod_sec and the (234 - 22)px width
var boxW = (234 - 22);
// The WaterCyclePointer_sec.width (24) is positioned from 22 to 234 - 1/2 width.
var onW = (obj.WaterCycleOn_sec/obj.WaterCyclePeriod_sec) * boxW;
var ptrX = 22 + (obj.WaterCycle_sec/obj.WaterCyclePeriod_sec) * boxW - 12;
console.log("onW: " + onW + ", ptrX: " + ptrX);
document.getElementById('WaterCycleOnBox').width = onW;
document.getElementById('WaterCyclePointer_sec').left = ptrX;
}
);
}

View File

@@ -53,7 +53,7 @@ div.ChamberHumi {
}
div.SoilMoisture_X {
position: absolute;
left: 130px;
left: 135px;
top: 135px;
color: white;
}
@@ -64,12 +64,12 @@ div.SoilHumiIcon {
}
div.SoilThermoIcon {
position: absolute;
left: 170px;
left: 175px;
top: 100px;
}
div.SoilTemp_C {
position: absolute;
left: 165px;
left: 170px;
top: 135px;
color: white;
}
@@ -90,7 +90,7 @@ div.SoilHeaterOffIcon {
top: 181px;
}
div.DrumDoorIcon {
div.DrumState {
position: absolute;
transform: rotate(180deg);
left: 14px;
@@ -109,7 +109,7 @@ div.DrumClosedSensor {
div.DrumMotorLabel {
position: absolute;
left: 95px;
top: 270px;
top: 260px;
width: 50px;
text-align: center;
color: white;
@@ -117,7 +117,7 @@ div.DrumMotorLabel {
div.DrumMotorStatus {
position: absolute;
left: 95px;
top: 290px;
top: 280px;
width: 50px;
text-align: center;
color: white;
@@ -231,19 +231,19 @@ div.WaterCycleOnBox {
height: 20px;
background-color: #BDD7EE;
z-index: -35;
//border-color: red;
border-color: red;
border-style: solid;
border-width: 1px;
}
div.WaterCycleStatusIcon {
div.WaterCyclePointer_sec {
position: absolute;
left: 80px;
top: 469px;
width: 25px;
width: 24px;
text-align: center;
z-index: -25;
border-color: green;
//border-style: solid;
border-style: solid;
border-width: 1px;
}
</style>