<!DOCTYPE html>
<html>
// special thanks to our webpage engineer in JKSM team, Kyle.
<head>
<title> Auto-Watering System </title>
<meta http-equiv="refresh" content="100" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div id="col1">
<h3> Relationship between time and soil&air humidities </h3>
<canvas id="line-chart" width="100%" height="30%"></canvas>
<h3> Relationship between soil and air humidities </h3>
<canvas id="line-chart2" width="100%" height="30%"></canvas>
</div>
<div id="col2">
<form action="output.php" method="POST">
<input type="radio" id="man" name="mode" value="-1"> Manual
<br>
<input type="radio" id="auto" name="mode" value="-2"> Auto
<br>
<input type="radio" id="iot" name="mode" value="0"> IoT!!!
<br>
<div id="slideDiv">
<div> Power Percentage of Colding Modula </div>
<input class="slider" name="powerslider" id="power" type="range" min="0" max="100" value="50">
<input type="submit" name="submit" value="Submit" id="submitPower">
<div id="showPower" style="display: inline;"></div>
</div>
</form>
<div class="box"> Is the soil's humidity is suitable for growth? <div id="soilSuitable"></div>
</div>
</div>
<iframe id="frmFile" src="python/client.txt" onload="LoadFile();" style="display: none;"></iframe>
</body>
<script type="text/javascript">
var soilHu = [];
var airTemp = [];
var airHu = [];
var time = [];
var soilSuit;
// function LoadFile() {
// var oFrame = document.getElementById("file");
// console.log(oFrame);
// console.log(oFrame.contentWindow);
// console.log(oFrame.contentWindow.document);
// var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;
// var arrLines = strRawContents.split("\n");
// alert("File " + oFrame.src + " has " + arrLines.length + " lines");
// var data = arrLines[arrLines.length - 1].split(" ");
// soilHu.push(data[0]);
// soilSuit = data[1];
// airTemp.push(data[2]);
// airHu.push(data[3]);
function LoadFile() {
var oFrame = document.getElementById("frmFile");
var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;
while (strRawContents.indexOf("\r") >= 0)
strRawContents = strRawContents.replace("\r", "");
var arrLines = strRawContents.split("\n");
for (var i = 0; i < arrLines.length; i++) {
console.log(arrLines[i]);
var curLine = arrLines[i].split(" ");
time.push(i);
soilHu.push(curLine[0]);
soilSuit = curLine[1];
airTemp.push(curLine[2]);
airHu.push(curLine[3]);
}
if(soilSuit == 1){
document.getElementById("soilSuitable").innerHTML = "TRUE!!";
} else{
document.getElementById("soilSuitable").innerHTML = "NOT YET... But soon!";
}
// var years = [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050];
// // For drawing the lines
// var africa = [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478];
// var asia = [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267];
// var europe = [168, 170, 178, 190, 203, 276, 408, 547, 675, 734];
// var latinAmerica = [40, 20, 10, 16, 24, 38, 74, 167, 508, 784];
// var northAmerica = [6, 3, 2, 2, 7, 26, 82, 172, 312, 433];
var ctx = document.getElementById("line-chart");
var ctx2 = document.getElementById("line-chart2");
// var myChart = new Chart(ctx, {
// type: 'line',
// data: {
// labels: years,
// datasets: [{
// data: africa,
// label: "Africa",
// borderColor: "#3e95cd",
// fill: false
// }]
// }
// });
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: time,
datasets: [{
data: soilHu,
label: "Soil Humidity",
borderColor: '#8e5ea2',
fill: false
},
{
data: airHu,
label: "Air Humidity",
borderColor: '#3cba9f',
fill: false
}]
}
});
soilHu.sort();
airHu.sort();
var myChart = new Chart(ctx2, {
type: 'line',
data: {
labels: airHu,
datasets: [{
data: soilHu,
label: "Soil Humidity",
borderColor: "#3e95cd",
fill: false
}]
}
});}
</script>
<script type="text/javascript">
// deal with output
var output;
var slider = document.getElementById("power");
var showOut = document.getElementById("showPower");
document.getElementById("iot").addEventListener("click", function() {
output = slider.value;
showOut.innerHTML = slider.value; // Display the default slider value
$("#slideDiv").removeClass("disabledbutton");
// update();
});
document.getElementById("man").addEventListener("click", function() {
output = -1;
$("#slideDiv").addClass("disabledbutton");
// update();
});
document.getElementById("auto").addEventListener("click", function() {
output = -2;
$("#slideDiv").addClass("disabledbutton");
// update();
});
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
showOut.innerHTML = this.value;
output = this.value;
}
document.getElementById("submitPower").addEventListener("click", function() {
showOut.innerHTML = slider.value; // Display the default slider value
// update();
});
// function update() {
// console.log("test" + output);
// var xhttp;
// xhttp = new XMLHttpRequest();
// xhttp.onreadystatechange = function() {
// if (this.readyState == 4 && this.status == 200) {
// // document.getElementById("txtHint").innerHTML = this.responseText;
// }
// };
// // xhttp.open("GET", "output.php?outputIndex=" + output, true);
// // xhttp.send();
// xhttp.open("POST", "output.php", true);
// xhttp.send(output);
// }
</script>
</html>
_C1WiM8YSBJ.jpg)
_C1WiM8YSBJ.jpg){kind=link}
Comments