Added EspEasy (garden) handlers.
Added garden chart; GetDevice messages has days filter; Fixed charts & newchart data added.
This commit is contained in:
d-popov
@@ -59,7 +59,7 @@ INFO:
|
||||
window.onload = function () {
|
||||
$.getJSON("/n/dht?e=now", function(data){
|
||||
if(data && data.dht){
|
||||
$('#current').text( "A23 Currently is " + data.dht.temp + "°C, " + data.dht.hum +"% RH. Dew Point at:" + data.dht.dew );
|
||||
$('#current').text( "A23 Currently is " + data.dht.temp + "°C, " + data.dht.hum +"% RH. Dew point : " + data.dht.dew + "°C" );
|
||||
}else {
|
||||
//chart.title.set("text", "A23 conditions");
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
window.onload = function () {
|
||||
var dataPoints1 = [];
|
||||
var dataPoints2 = [];
|
||||
var dataPoints3 = [];
|
||||
/*{ x: new Date(2017, 0, 3), y: 650 },
|
||||
{ x: new Date(2017, 0, 4), y: 700 },
|
||||
*/
|
||||
@@ -25,6 +26,16 @@
|
||||
text: "X Axis scale is Logarithmic",
|
||||
fontSize: 14
|
||||
}],*/
|
||||
toolTip:{
|
||||
shared:true
|
||||
},
|
||||
legend:{
|
||||
cursor:"pointer",
|
||||
verticalAlign: "bottom",
|
||||
horizontalAlign: "left",
|
||||
dockInsidePlotArea: true,
|
||||
itemclick: toogleDataSeries
|
||||
},
|
||||
axisX:{
|
||||
valueFormatString: "HH:mm DD MMM",
|
||||
crosshair: {
|
||||
@@ -39,13 +50,25 @@
|
||||
labelFontColor: "#C24642",
|
||||
crosshair: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
minimum:0,
|
||||
maximum: 50,
|
||||
},
|
||||
axisY2: [
|
||||
{
|
||||
title: "Relative hum %",
|
||||
title: "Air RH %",
|
||||
titleFontColor: "#51CDA0",
|
||||
labelFontColor: "#51CDA0"
|
||||
labelFontColor: "#51CDA0",
|
||||
minimum:0,
|
||||
maximum: 100,
|
||||
},
|
||||
{
|
||||
title: "Soil RH %",
|
||||
lineColor: "#99D9EA",
|
||||
titleFontColor: "#99D9EA",
|
||||
labelFontColor: "#99D9EA",
|
||||
minimum:0,
|
||||
maximum: 100,
|
||||
}
|
||||
],
|
||||
//{title: "Temperature",
|
||||
@@ -53,19 +76,9 @@
|
||||
//titleFontColor: "#C0504E",
|
||||
//labelFontColor: "#C0504E"
|
||||
//},
|
||||
toolTip:{
|
||||
shared:true
|
||||
},
|
||||
legend:{
|
||||
cursor:"pointer",
|
||||
verticalAlign: "bottom",
|
||||
horizontalAlign: "left",
|
||||
dockInsidePlotArea: true,
|
||||
itemclick: toogleDataSeries
|
||||
},
|
||||
data: [{
|
||||
name: "Temperature",
|
||||
type: "spline",//line
|
||||
type: "line",//line
|
||||
showInLegend: true,
|
||||
markerType: "square",
|
||||
xValueFormatString: "HH:mm on DD MMM, YYYY",
|
||||
@@ -73,13 +86,23 @@
|
||||
dataPoints: dataPoints2
|
||||
},
|
||||
{
|
||||
name: "Humidiry",
|
||||
axisYType: "secondary",//at right
|
||||
//axisYIndex: 1,
|
||||
name: "RH Air",
|
||||
type: "spline",
|
||||
axisYType: "secondary",
|
||||
axisYIndex: 1,
|
||||
showInLegend: true,
|
||||
lineDashType: "dash",
|
||||
dataPoints: dataPoints1
|
||||
},
|
||||
{
|
||||
axisYType: "secondary",
|
||||
//axisYIndex: 1,
|
||||
name: "RH Soil",
|
||||
type: "spline",
|
||||
showInLegend: true,
|
||||
lineDashType: "dash",
|
||||
color: "#99D9EA",
|
||||
dataPoints: dataPoints3
|
||||
}]
|
||||
});
|
||||
|
||||
@@ -95,9 +118,10 @@
|
||||
|
||||
function addData(data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var date = new Date(data[i]["timestamp"]);
|
||||
if(data[i].field_name == "A23_DHT"){
|
||||
//console.log("Got DHT:" + date);
|
||||
var dht = JSON.parse(data[i].field_value).dht;
|
||||
var date = new Date(data[i]["timestamp"]);
|
||||
if(dht && dht.hum <= 100){
|
||||
dataPoints1.push({
|
||||
x: date,
|
||||
@@ -109,6 +133,15 @@
|
||||
});
|
||||
}
|
||||
}
|
||||
if(data[i].field_name === "A23_Garden_Humidity")
|
||||
{
|
||||
//console.log("Got Soil:" + date);
|
||||
var soil = parseFloat( data[i].field_value);
|
||||
dataPoints3.push({
|
||||
x: date,
|
||||
y: soil
|
||||
});
|
||||
}
|
||||
}
|
||||
chart.render();
|
||||
|
||||
@@ -120,8 +153,9 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$.getJSON("/n/device/A23_DHT", addData);
|
||||
|
||||
$.getJSON("/n/device/A23_DHT/7", addData);
|
||||
$.getJSON("/n/device/A23_Garden_Humidity/7", addData);
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
180
views/chartGarden.ejs
Normal file
180
views/chartGarden.ejs
Normal file
@@ -0,0 +1,180 @@
|
||||
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
|
||||
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
|
||||
|
||||
<%- contentFor('head') %>
|
||||
<script>
|
||||
var current;
|
||||
window.onload = function () {
|
||||
var temp = {in:[], out:[]};
|
||||
var hum = {in:[], out:[],outSoil:[]};
|
||||
var press = {out:[]};
|
||||
/*{ 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: "HH:mm DD MMM",
|
||||
crosshair: {
|
||||
enabled: true,
|
||||
snapToDataPoint: true
|
||||
}
|
||||
},
|
||||
axisY: [
|
||||
{
|
||||
title: "Air Temperature",
|
||||
lineColor: "#C24642",
|
||||
titleFontColor: "#C24642",
|
||||
labelFontColor: "#C24642",
|
||||
suffix: " °C",
|
||||
minimum: -10,
|
||||
// maximum: 40,
|
||||
} , {
|
||||
title: "ATM Pressure",
|
||||
lineColor: "#A477C6",
|
||||
titleFontColor: "#A477C6",
|
||||
labelFontColor: "#A477C6",
|
||||
suffix: "hPa",
|
||||
minimum: 990,
|
||||
//maximum: 1080,
|
||||
},
|
||||
],
|
||||
axisY2: [
|
||||
{
|
||||
title: "Relative Humidity",
|
||||
titleFontColor: "#51CDA0",
|
||||
labelFontColor: "#51CDA0",
|
||||
minimum: 0,
|
||||
maximum: 100,
|
||||
suffix: "%",
|
||||
}
|
||||
],
|
||||
data: [{
|
||||
name: "Out Temperature",
|
||||
type: "line",//line
|
||||
showInLegend: true,
|
||||
markerType: "square",
|
||||
xValueFormatString: "HH:mm on DD MMM, YYYY",
|
||||
color: "#F08080",
|
||||
dataPoints: temp.out
|
||||
},
|
||||
{
|
||||
name: "In Temperature",
|
||||
type: "line",//line
|
||||
showInLegend: true,
|
||||
//markerType: "square",
|
||||
//xValueFormatString: "HH:mm on DD MMM, YYYY",
|
||||
color: "#92D050",
|
||||
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: "spline",
|
||||
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") {
|
||||
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) });
|
||||
press.out.push({ x: date, y: parseFloat(dht.Pres)});
|
||||
if (dht.Soil) {
|
||||
hum.outSoil.push({ x: date, y: parseFloat(dht.Soil) });
|
||||
}
|
||||
}
|
||||
var date = new Date(data[i]["timestamp"]);
|
||||
if(data[i].field_name == "A23_DHT"){
|
||||
//console.log("Got DHT:" + 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
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
chart.render();
|
||||
|
||||
/*
|
||||
$.getJSON("/n/dht?e=now", function(data){
|
||||
if(data && data.dht){
|
||||
chart.title.set("text", "Currently " + data.temp + "°C, " + data.hum +"% RH, ATM:" + data.press + "hPa");
|
||||
}else {
|
||||
chart.title.set("text", "Weather conditions");
|
||||
}
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
$.getJSON("/n/device/A23_DHT/1", addData);
|
||||
$.getJSON("/n/device/A23_Garden_dht/1", addData);
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -1,4 +1,6 @@
|
||||
|
||||
|
||||
<a href="/n/accontrol" >control</a>
|
||||
<a href="/n/logout" >log out</a>
|
||||
<a href="/n/chart"> chart</a>
|
||||
<a href="/n/chart"> chart</a>
|
||||
<a href="/n/garden"> garden</a>
|
||||
Reference in New Issue
Block a user