web based home automation/multimedia system (screenshots)

[Mhwlng]

Some screenshots:








>>>more screenshots (mostly on a nexus 7)<<<


chrome on android and safari on ios7, have an option 'add to homescreen'.
This option adds an icon to the home screen, which always shows the web page full screen just like a regular app. (as the screenshots show)


Everything runs on windows 8.1 on a passively cooled intense pc and a raspberry pi:

I use girder 5 with an xPL plugin and node.js on a raspberry pi.

To communicate with zwave devices, (I made an xPL to zwave gateway using openzwave)
and several other devices (caller id, dmx lights controller)
I also use the xPL version of the rfxcom receiver (various oregon scientific devices, rfxpower)
and the xPL version of the irtrans device (samsung tv).

There is also a direct (non xPL) connection between girder and various other devices (e.g. denon 3808, remeha heater)

Girder then transfers the data in real time to a web service running on Internet Information Server (on windows 8.1).

When the web service receives new data, then signalr is used to 'push' the data to the client (web browser).
This means that you don't need to run ajax queries on the client , every second, to poll for new data.

on the client, knockout is used to automatically update the screen with incoming data from signalr.
This works in real time and is bi-directional.
So, if the web page is opened on two devices, and a slider is moved on one device, then the slider will also move on the other device.

The home automation control has been reduced to a single screen with as few buttons as possible.
Note that there are no buttons to switch lights on/off or switch central heating on/off or mute/stop the alarm clock.
Lights, central heating, alarm clock and powering on/off TV/Amplifier/HTPC are handled using (zwave) motion detectors and some logic to determine what room is occupied, If I'm sleeping or not at home (e.g. by detecting bluetooth phone)

The web application is responsive, so the screens adjust to screen orientation and screen size.

In the first screenshot, I also make use of isotope v2 to rearrange and resize the 'blocks' on the screen depending on device size and orientation.

for the trend charts, I used highcharts which uses SVG (vector) graphics with VML as fallback on older versions of internet explorer.

The multimedia part gets data from a web service built into j river media center
so girder is not involved in this part.

My main use is to control media center, connected to the tv in my living room, using a nexus 10.

The background image slideshows use information from:
-musicbrainz.org
-fanart.tv
-tvdb.com
-themoviedb.org
Touch the screen or leave the screen untouched for 20 seconds, to hide all the data that is shown on top of the slideshow.
touch the screen again, to make this data reappear.

[Rene]

Looks very good! What did you use for the charts?

[Mhwlng]

I used highcharts which uses SVG (vector) graphics with VML as fallback on older versions of internet explorer.

[Digit]

Really very nice!

[Mhwlng]

Thanks Robert!
I checked out the source code of your website and see that you use mosquitto for the same purpose that I use signalr+knockout... (update live data on the screen)

[Digit]

Only for 2 or 3 pages though, the older ones still use polling or need a manual refresh.
But that's all going to change somewhere this year, I hope.
And I'm also going to use Highcharts/Highstock just like you
See User Interface on a breadboard

[Mhwlng]

As a test, I ported the control screen (first screenshot at the top) from asp.net mvc (running on windows pc) to node.js & mqtt (running on a raspberry pi).

The goal was to make as few changes as possible to the MVC architecture and directory structure
and to make as few changes on the client side (javascript, html, css) as possible.

On the node.js server side, I used express for routing (the url is exactly the same for both systems)
and I organized all the model/view/controller files in a similar directory structure as in asp.net mvc.

the node.js/express MVC architecture is something similar to the first comment in this post.

I used the vash template engine, which is very similar to the 'razor' templating engine on asp.net mvc.
So only minor changes were required.

I used socket.io (on node.js) instead of signalr (on asp.net mvc) on both server and client side.
The functionality is quite similar, so only minor changes were required.

The client side code to receive live data from the server and then update the appropriate web page element (using knockout) is very simple :

socket.io (from node.js) :

Code: Select all

socket.on('broadcastCommonData', function (c) {
    ko.mapping.fromJS(c, CommonDataModel);
});

signalr (from asp.net MVC):

Code: Select all

$.connection.nrHub.client.broadcastCommonData = function (c) {
  ko.mapping.fromJS(c, CommonDataModel);
}

The raspberry pi sits behind a reverse proxy (IIS), so I can either call :
http://11.22.33.44/
or
http://myserver/hcppi/

To get socket.io working on the client behind the reverse proxy, I had to do this :

Code: Select all

if (document.URL.indexOf("hcppi") != -1)
  socket = io.connect(getRootUrl(document.URL), {path:'/hcppi/socket.io'});
else
  socket = io.connect(); 

There is probably a better solution.

On the asp.net mvc server, the js and css file for the client are automatically concatenated and minified.
on the node.js server, I simply execute uglifyjs & uglifycss manually to create .min.js and .min.css files.

XPL also works in Node.Js
I had to change the broadcast address from 192.168.2.555 to 0.0.0.0 ;

Code: Select all

var Xpl=require("xpl-api");
var xpl=new Xpl({
    source: "raspberrypi",
    xplLog: false,
    broadcastAddress: "0.0.0.0" 
});

xpl.on("message", function(message) {
    console.log("Receive message ", message);
});

xpl.bind(function(error) {
});

[Mhwlng]

I have been playing with MQTT on Microsoft Azure.

Using some example code from here.
I set up an azure worker role that runs "mosquitto.exe -c mosquitto.conf"

where mosquitto.conf contains :

Code: Select all

autosave_interval 300
persistence true
persistence_file mosquitto.db
persistence_location C:\Resources\Directory\320b11b69e364b02b6d225b602ab11bd.mosquitto.mosquitto\
allow_anonymous false
password_file passwd

On the raspberry pi, mqtt is configured as a bridge to Azure.

where mosquitto.conf contains :

Code: Select all

persistence true
persistence_location /var/lib/mosquitto/
allow_anonymous false
password_file /etc/mosquitto/passwd
connection hcp.azure
address aa.bb.cc.dd:1883
topic # out 1 "" raspberrypi1/
clientid hcp.raspberrypi1
cleansession false
keepalive_interval 60
username xxxx
password yyyy

All topics sent from the raspberry pi to azure will have a prefix 'raspberrypi1/'.

Another raspberry pi, will have another prefix.

[Mhwlng]

See picture :



I'm experimenting with a low cost TP-LINK TL-WR703N for data collection purposes (very small, WIFI+ETHERNET, Atheros AR9331 Chipset, 4MB Flash, 32MB Ram, nice case). (US$25,- on ebay)

It comes with chinese firmware, but can be replaced with OPENWRT.

Note that there is only 868KB flash memory free (out of 4GB).
If you install a web based configuration tool (LUCI) then free memory is only about 150KB.

You will have to compile and flash a CUSTOM OPENWRT image, to free up more flash memory.
A minimal image results in about 1.5MB flash memory free.

Installing the mosquitto MQTT broker fills up a lot of that (due to the inclusion of the openssl library, which is very big)

I use an external USB 1-wire dongle to connect a DS18B20 temperature sensor. (two types in the picture)
and installed DIGITEMP

Note that there are also other AR9331 based systems running OPENWRT.

These are some that I am playing with :

Carambola 2

Arduino Yun

Dragino (with arduino yun firmware)