initial commit: dht client

2020-04-09 12:12:05 +03:00
commit 794eda52af
9 changed files with 3468 additions and 0 deletions
--- a/charts.html
+++ b/charts.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<meta charset="utf-8"/>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+	<script>
+		var current;
+		window.onload = function () {
+			var dataPoints1 = [];
+			var dataPoints2 = [];
+			/*{ 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: "Retrieving current A23 conditions..."
+				},
+			/*	subtitles:[{
+					text: "X Axis scale is Logarithmic",
+					fontSize: 14
+				}],*/
+				axisX:{
+					valueFormatString: "HH:mm DD MMM",
+					crosshair: {
+						enabled: true,
+						snapToDataPoint: true
+					}
+				},
+				axisY: {
+					title: "Temperature",
+					lineColor: "#C24642",
+					titleFontColor: "#C24642",
+					labelFontColor: "#C24642",
+					crosshair: {
+						enabled: true
+					}
+				},
+				axisY2:  [
+					{
+						title: "Relative hum %",
+						titleFontColor: "#51CDA0",
+						labelFontColor: "#51CDA0"
+					}
+				],
+					//{title: "Temperature",
+					//lineColor: "#C24642",
+					//titleFontColor: "#C0504E",
+					//labelFontColor: "#C0504E"
+				//},
+				toolTip:{
+					shared:true
+				},
+				legend:{
+					cursor:"pointer",
+					verticalAlign: "bottom",
+					horizontalAlign: "left",
+					dockInsidePlotArea: true,
+					itemclick: toogleDataSeries
+				},
+				data: [{
+					name: "Temperature",
+					type: "spline",//line
+					showInLegend: true,
+					markerType: "square",
+					xValueFormatString: "HH:mm on DD MMM, YYYY",
+					color: "#F08080",
+					dataPoints: dataPoints2
+				},
+				{
+					name: "Humidiry",
+					type: "spline",
+					axisYType: "secondary",
+					axisYIndex: 1,
+					showInLegend: true,
+					lineDashType: "dash",
+					dataPoints: dataPoints1
+				}]
+			});
+
+
+			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++) {
+					if(data[i].field_name == "A23_DHT"){
+						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,
+								y: dht.hum
+							});
+							dataPoints2.push({
+								x: date,
+								y: dht.temp
+							});
+						}
+					}
+				}
+				chart.render();
+				
+				$.getJSON("/n/dht", function(data){
+					if(data && data.dht){
+						chart.title.set("text", "A23 Currently is " + data.dht.temp + "°C, " + data.dht.hum +"% RH" );
+					}else {						
+						chart.title.set("text", "A23 conditions");
+					}
+				});
+			}
+
+			$.getJSON("/n/dht/A23_DHT", addData);
+
+		}
+	</script>
+</head>
+<body>
+<div id="chartContainer" style="height: 370px; width: 100%;"></div>
+<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
+</body>
+</html>