242 lines
8.7 KiB
Plaintext
242 lines
8.7 KiB
Plaintext
<h5>Conditions in the last <%= model.days ? model.days : '7' %> days</h5>
|
|
|
|
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
|
|
<div id="now" class="form-text">getting inside conditions...</div>
|
|
|
|
<div class="fieldset col-12">
|
|
<select name="waterTime" id="waterTime">
|
|
<option value="5">5 seconds</option>
|
|
<option value="15">15 seconds</option>
|
|
<option value="30">30 seconds</option>
|
|
<option value="60">1 min</option>
|
|
<option value="120">2 min</option>
|
|
<option value="180">3 min</option>
|
|
<option value="300">5 min</option>
|
|
</select>
|
|
<button id="water" class="btn">Water</button>
|
|
<button id="waterStop" class="btn btn-warning">Stop water</button>
|
|
<div class="btn-group" role="group">
|
|
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Period
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
|
<a class="dropdown-item" href=config.localPath + "/garden/1">Day</a>
|
|
<a class="dropdown-item" href=config.localPath + "/garden/2">2 Days</a>
|
|
<a class="dropdown-item" href=config.localPath + "/garden/7">Week</a>
|
|
<a class="dropdown-item" href=config.localPath + "/garden/30">Month</a>
|
|
<a class="dropdown-item" href=config.localPath + "/garden/91">Quarter</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<%- contentFor('head') %>
|
|
<script>
|
|
var current;
|
|
window.onload = function () {
|
|
var temp = { in: [], out: [], outDew:[] };
|
|
var hum = { in: [], out: [], outSoil: []};
|
|
var press = { out: [] };
|
|
var time = [];
|
|
/*{ x: new Date(2017, 0, 3), y: 650 },
|
|
{ x: new Date(2017, 0, 4), y: 700 },
|
|
*/
|
|
|
|
var chart = new CanvasJS.Chart("chartContainer", {
|
|
animationEnabled: true,
|
|
theme: "light2",
|
|
zoomEnabled: true,
|
|
zoomType: "x",
|
|
exportEnabled: true,
|
|
title: {
|
|
text: "Weather conditions in the lasts 7 days"
|
|
},
|
|
/* subtitles:[{
|
|
text: "X Axis scale is Logarithmic",
|
|
fontSize: 14
|
|
}],*/
|
|
toolTip: {
|
|
shared: true
|
|
},
|
|
legend: {
|
|
cursor: "pointer",
|
|
verticalAlign: "bottom",
|
|
horizontalAlign: "left",
|
|
dockInsidePlotArea: true,
|
|
itemclick: toogleDataSeries
|
|
},
|
|
axisX: {
|
|
valueFormatString: <%=model.days?model.days:7%> > 2?"DD MMM":"HH:mm DD MMM",
|
|
crosshair: {
|
|
enabled: true,
|
|
snapToDataPoint: true
|
|
}
|
|
},
|
|
axisY: [
|
|
{
|
|
title: "Air Temperature",
|
|
lineColor: "#C24642",
|
|
titleFontColor: "#C24642",
|
|
labelFontColor: "#C24642",
|
|
suffix: " °C",
|
|
crosshair: {
|
|
enabled: true
|
|
},
|
|
//minimum: -10,
|
|
// maximum: 40,
|
|
}, {
|
|
title: "ATM Pressure",
|
|
lineColor: "#A477C6",
|
|
titleFontColor: "#A477C6",
|
|
labelFontColor: "#A477C6",
|
|
suffix: " hPa",
|
|
crosshair: {
|
|
enabled: true
|
|
},
|
|
minimum: 990,
|
|
//maximum: 1080,
|
|
},
|
|
],
|
|
axisY2: [
|
|
{
|
|
title: "Relative Humidity",
|
|
titleFontColor: "#51CDA0",
|
|
labelFontColor: "#51CDA0",
|
|
minimum: 0,
|
|
maximum: 100,
|
|
suffix: " %",
|
|
crosshair: {
|
|
enabled: true
|
|
},
|
|
}
|
|
],
|
|
data: [{
|
|
name: "Out Temperature",
|
|
type: "line",//line
|
|
showInLegend: true,
|
|
markerType: "square",
|
|
xValueFormatString: "HH:mm on DD MMM, YYYY",
|
|
color: "#F08080",
|
|
dataPoints: temp.out
|
|
},
|
|
/*{
|
|
name: "Dew Point",
|
|
type: "line",//line
|
|
showInLegend: true,
|
|
markerType: "none",
|
|
color: "#94D8F6",
|
|
dataPoints: temp.outDew
|
|
},*/
|
|
{
|
|
name: "In Temperature",
|
|
type: "line",//line
|
|
showInLegend: true,
|
|
markerType: "none",
|
|
color: "#92D050",
|
|
lineThickness: 4,
|
|
dataPoints: temp.in
|
|
},
|
|
{
|
|
name: "ATM Pressure",
|
|
axisYIndex: 1,
|
|
type: "line",
|
|
showInLegend: true,
|
|
lineDashType: "dash",
|
|
color: "#A477C6",
|
|
dataPoints: press.out
|
|
},
|
|
//----- sright axies -----
|
|
{
|
|
name: "Air RH",
|
|
axisYType: "secondary", //at right
|
|
//axisYIndex: 1,
|
|
type: "spline",
|
|
showInLegend: true,
|
|
//lineDashType: "dash",
|
|
dataPoints: hum.out
|
|
},
|
|
{
|
|
name: "Soil RH",
|
|
axisYType: "secondary",
|
|
axisYIndex: 1,
|
|
type: "line",
|
|
lineThickness: 4,
|
|
showInLegend: true,
|
|
//lineDashType: "dash",
|
|
color: "#99D9EA",
|
|
dataPoints: hum.outSoil
|
|
}]
|
|
});
|
|
|
|
|
|
function toogleDataSeries(e) {
|
|
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
|
|
e.dataSeries.visible = false;
|
|
} else {
|
|
e.dataSeries.visible = true;
|
|
}
|
|
chart.render();
|
|
}
|
|
|
|
function addData(data) {
|
|
for (var i = 0; i < data.length; i++) {
|
|
var date = new Date(data[i]["timestamp"]);
|
|
if (data[i].field_name == "A23_Garden_dht") {
|
|
time.push(date);
|
|
var dht = JSON.parse(data[i].field_value);
|
|
hum.out.push({ x: date, y: parseFloat(dht.Hum) });
|
|
temp.out.push({ x: date, y: parseFloat(dht.Temp) });
|
|
temp.outDew.push({ x: date, y: parseFloat(dht.Temp) - ((parseFloat(dht.Hum))/5) });
|
|
press.out.push({ x: date, y: parseFloat(dht.Pres) });
|
|
if (dht.Soil) {
|
|
hum.outSoil.push({ x: date, y: parseFloat(dht.Soil) });
|
|
}
|
|
}
|
|
if (data[i].field_name == "A23_DHT") {
|
|
time.push(date);
|
|
var dht = JSON.parse(data[i].field_value).dht;
|
|
if (dht && dht.hum <= 100) {
|
|
hum.in.push({
|
|
x: date,
|
|
y: dht.hum
|
|
});
|
|
temp.in.push({
|
|
x: date,
|
|
y: dht.temp
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
if (temp.out.length > 0 && hum.out.length > 0 && press.out.length > 0 && time.length > 0) {
|
|
//setTimeout(function(){
|
|
chart.title.set("text", "Out: " + temp.out[temp.out.length-1].y + "°C, "
|
|
+ hum.out[hum.out.length-1].y + "% RH, "
|
|
+ press.out[press.out.length-1].y + " hPa ("
|
|
+ time[time.length-1].toLocaleString() + ")");
|
|
//},5000);
|
|
}
|
|
chart.render();
|
|
}
|
|
|
|
$.getJSON(config.localPath + "/device/A23_DHT/<%= model.days ? model.days : '7' %>", addData);
|
|
$.getJSON(config.localPath + "/device/A23_Garden_dht/<%= model.days ? model.days : '7' %>", addData);
|
|
setTimeout(function(){
|
|
$.getJSON(config.localPath + "/dht?e=now", function(data){
|
|
if(data && data.dht){
|
|
$("#now").text("In A23 currently is " + data.dht.temp + "°C, " + data.dht.hum +"% RH" );
|
|
}else {
|
|
$("#now").text("failed to get inside conditions" );
|
|
}
|
|
});
|
|
},5000);
|
|
|
|
$("#water").on("click", function(){$.ajax({url:config.localPath + "/water?t="+$("#waterTime").val()});});
|
|
$("#waterStop").on("click", function(){$.ajax({url:config.localPath + "/waterStop"});});
|
|
}
|
|
</script> |