-
Notifications
You must be signed in to change notification settings - Fork 0
/
soil_moisture.html
63 lines (56 loc) · 2.24 KB
/
soil_moisture.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
<title>Soil Moisture</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<script>
//created a new XMLHttpRequest Object
var xhr = new XMLHttpRequest();
// On Changing the request State
xhr.onreadystatechange = function()
{
if(this.readyState==4&& this.status==288) //if state is=4(response received) and status=200 (no errors)
{
var fetched = JSON.parse(xhr.responseText); // parse json file to object
document.getElementById("Soil_value").innerHTML="<p>"+fetched.feeds[0].field1+" PPM";
/* In Millibar */
document.getElementById("inPPB").innerHTML = "Soil Moisture: "+fetched.feeds[0].field1*1000 + "( ppb )";
var airquality = parseFloat(fetched.feeds[0].field1);
var status_holder = document.getElementById("status_holder");
var status = document.getElementById("currrent_status");
}
}
/****** Fetch Request to thingspeak *****/
xhr.open("GET", "https://api.thingspeak.com/channels/1257450/feeds.json?api_key=0XB1NQXWH8ND45KT&results=2", true);
/**** Sending of Fetch Request to thingspeak ****/
xhr.send();
</script>
</head>
<body>
<div class="analysis_holder">
<div class="conversion_panel"><h1> Soil Moisture Analysis</h1>
<hr/>
<ul type="square">
<li id="inPPB" style="font-size: 1.7em"></li>
</ul>
<hr/>
<img src="images/arduino-soil-moisture-sensor-1.jpg" width="100%" height="430px">
</div>
</div>
<div class="current_value" id="pressure_container">
<i class="fa fa-cloud rain"></i>
<p class="container_headers" style="text-align:center; font-weight: bold">Soil Moisture</p> <hr/>
<div id="pressure_value">
<img src="images/loading.gif" height="30%" width="30%" alt="Loading Barometric Pressure">
</div>
</div>
<br/>
<div class="graph_holder">
<p>Soil Moisture ANALYSIS </p>
<hr/>
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/1257450/charts/3?bgcolor=%23fFf&color=%230000000&dynamic=true&api_key=0XB1NQXWH8ND45K"></iframe>
</div>
</div>
</body>
</html>