Close

Completely Hackable IoT dashboard

A project log for Home Smart Mesh

Mesh of sensors, zigbee, custom RF, BT, wifi, all to MQTT Gateways on Raspberry Pi with database, dashboard and webapps.

WassimWassim 04/26/2017 at 19:090 Comments

Demo

So we can see there bullets going up with the temperature changing color accordingly, note that the color matches the gradient position of the rectangle it's in. The curves show the last 24 h, still planning to add dynamic real time animations, the technology allows but not the time. This page shows an ugly text debug window at the bottom helping me to check all received notifications.

What's behind this ?

D3js

Websockets

Poco

Security

Some Javascript

I learned how to split my javascript in more than one file (not trivial, yes, I'm serious), so I isolated the usage of the d3js graphic elements from a simple interface:

var StatusParams = 
{
	svgID : "#StatusDisp",
	data  :
	[
		{ x: 100, y: 100, r: 20, color: "Blue", 
			Temperature : 26, Light : 500,
			Name : "LivingRoom"
		},
		{ x: 300, y: 100, r: 20, color: "Blue", 
			Temperature : 26, Light : 500,
			Name : "BathRoom"
		},
		{ x: 500, y: 100, r: 20, color: "Blue", 
			Temperature : 26, Light : 500,
			Name : "Balcony"
		}
	]
};

var nmap = {6 : 0,
			7 : 1,
			16 : 2};

//---------------------------------------------------------------------------
//					Time Chart
//---------------------------------------------------------------------------
var now = Date.now();
var start_disp = now - 24*60*60*1000;//1 day
var ChartsParamsList = 
[
	{
		svgID : "#ChartLivTemp",
		scale_x_domain : [start_disp,now],
		scale_y_domain : [10,25],
		NodeId : 6,
		SensorName : "Temperature",
		Label : "Livingroom Temperature °C"
	},
	{
		svgID : "#ChartLivHum",
		scale_x_domain : [start_disp,now],
		scale_y_domain : [0,100],
		NodeId : 6,
		SensorName : "Humidity",
		Label : "Livingroom Humidity %RH"
	},
Then let's call it the main function is simply initializing using these tables
var MyPanel = new StatusPanel(StatusParams);
var MyChartList = new TimeChartsList(ChartsParamsList);
var reqList = [statusReq].concat(MyChartList.getAllRequestsDuration());
initWebsocket(reqList,MyPanel,MyChartList);

d3js has excellent doc and tutorials so I won't detail it here

The source code is of course available with the rest of the IoT_Framework here in github

Another Screenshot

Looking to those curves bring more ideas, for home automation yes we can feel here that it was raining outside, that someone took a shower at around 8h and went to sleep at around eleven the night before (of course entries are more precise down to the second).

Discussions