Magic Mirror² module to show lights and window states on a floorplan of an openhab server
JavaScript
Switch branches/tags
Nothing to show
Clone or download
DomQuixote and paphko Update Readme to reflect a new best practice
I found that early this year there has been a change in openhab that allows for a Member of trigger of a rule. This makes the process a lot cleaner (no more rule adaptations, just add the item to the correct group). I propose to change the readme to reflect this.
Latest commit c8b66ed Jun 14, 2018

README.md

Magic Mirror Module: mmm-openhabfloorplan

This MagicMirror2 module allows you to show a floorplan of your house / apartment with the current state of lights, window contacts, and labels provided by a running openhab server (working with openHAB 1.x and 2.x). Unlike most other modules, the data can be pushed from the openhab server via http requests to the magic mirror, so state changes are immediately shown.

Example floorplan

Installation

In your terminal, go to your MagicMirror's Module folder:

cd ~/MagicMirror/modules

Clone this repository:

git clone https://github.com/paphko/mmm-openhabfloorplan.git

Preparing the Floorplan

First of all, you should create an image showing your individual floorplan. You can use mmm-openhabfloorplan/images/floorplan-default.png as template (shown here) and use an image editor like paint.net to change it as you like. Save it as mmm-openhabfloorplan/images/floorplan.png (leave floorplan-default.png untouched).

Configuring the Module

Now add the module to the modules array in the config/config.js file. Yes, the configuration looks complicated, but there is quite a lot that can be configured. The in-line comments should explain everything you need to know, so copy this sample configuration and adjust it to your individual openhab server, openhab items, and your floorplan. When you are done adding all items and positioning them as you like, change draft to false.

modules: [
	{
		module: 'mmm-openhabfloorplan',
		position: 'bottom_left', // this can be any of the regions
		config: {
			updateInterval: 60 * 60 * 1000, // refreshing all windows / lights / labels once per hour; 0 to disable periodic update
			draft: true, // if true, all lights, windows, and label names are shown; if false, get states from openhab
			openhab: {
				url: "http://openhab:8080", // must not have a trailing slash!
				// user: "", // only if you have authentication enabled
				// password: "", // only if you have authentication enabled
				version: 2, // supported are versions 1 and 2
			},
			floorplan: {
				image: "floorplan-default.png", // image in subfolder 'images'; change to floorplan.png to avoid git repository changes
				width: 400, // this must be the width of the image above
				height: 333, // this must be the height of the image above
			},
			// light: { // this part shows default settings for lights; may optionally be overwritten
			//	image: "light.png", // located in subfolder 'images'
			//	width: 19, // image width
			//	height: 19, // image height
			// },
			// window: { // this part shows default settings for windows; may optionally be overwritten
			//	defaultColor: "red", // css format, i.e. color names or color codes
			// },
			// label: { // this part shows default settings for labels; may optionally be overwritten
			//	defaultColor: "grey", // css format
			//	defaultSize: "medium", // value of font-size style, e.g. xx-small, small, medium, large, x-large, 1.2em, 20px
			// },
			lights: { // list all light items to be shown (must be of openhab type Switch or Dimmer)
				// format: "openhab item (name is case-sensitive!): { left, top }"
				L_Living:      { left: 80,  top: 110 },
				L_Sleeping:    { left: 80,  top: 240 },
				L_Garden:      { left: 310, top: 5 },
				L_Terrace:     { left: 70,  top: 5 },
				L_Front_Door:  { left: 238, top: 310 },
				L_Front_left:  { left: 40,  top: 310 },
				L_Front_right: { left: 340, top: 310 },
				L_Kitchen:     { left: 280, top: 110 },
				L_Entry:       { left: 210, top: 220 },
			},
			windows: { // list all window / door contacts to be shown (must be of openhab type Switch or Contact)
				// openhab item: left, top, radius (draws quadrant), midPoint, and optionally counterwindow and color
				Reed_Door:           { left: 232, top: 289, radius: 32, midPoint: "bottom-right", color: "orange" },
				Reed_Entry:          { left: 188, top: 298, radius: 23, midPoint: "bottom-left" },
				Reed_Living:         { left: 12,  top: 106, radius: 29, midPoint: "top-left", counterwindow: "vertical" },
				Reed_Dining_right:   { left: 170, top: 12,  radius: 29, midPoint: "top-left", counterwindow: "horizontal" },
				Reed_Dining_left:    { left: 141, top: 12,  radius: 29, midPoint: "top-left" },
				Reed_Kitchen:        { left: 283, top: 44,  radius: 30, midPoint: "top-right", color: "orange" },
				Reed_Utility:        { left: 359, top: 180, radius: 29, midPoint: "bottom-right" },
				Reed_Sleeping_right: { left: 12,  top: 231, radius: 30, midPoint: "top-left" },
				// openhab item: left, top, width, height (draws rectangle), and optionally color
				Reed_Sleeping_left:  { left: 90,  top: 301, width: 37, height: 20 },
				Reed_Bath:           { left: 275, top: 301, width: 37, height: 20 },
			},
			labels: { // list all strings to be shown (may probably be any openhab type, resonable for String and Number)
				// openhab item: left, top, and optionally color, font size, prefix, postfix, and number of decimals for floating numbers
				Temperature_Entry:          { left: 162, top: 280 },
				Temperature_Living:         { left: 22,  top: 72,  decimals: 1 },
				Temperature_Dining_right:   { left: 200, top: 25,  color: "white", size: "x-small" },
				Temperature_Dining_left:    { left: 135, top: 25,  color: "white", size: "x-small" },
				Temperature_Utility:        { left: 345, top: 220, color: "green", decimals: 2 },
				Temperature_Sleeping_right: { left: 22,  top: 242, prefix: "outside: ", postfix: "°C" },
				Temperature_Sleeping_left:  { left: 58,  top: 280, prefix: "inside: ", postfix: "°C" },
				Temperature_Bath:           { left: 277, top: 280, postfix: "°C", decimals: 1 },
			}
		}
	},
]

Configuring Openhab

If you simply want to pull states with the update interval as configured above, you don't need to do any changes to your openhab configuration. But it is really impressive if state changes are immediately (with less than 1sec delay in my case) shown on the mirror!

First, you must have to change MagicMirror config:

var config = {
address: "192.168.0.11", // IP of your MM server, for listening on it's @
port: 8080,
ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "192.168.0.12", "::1"] // Add IP of your client, for listening since this @ ex:192.168.0.12 

The easiest and least invasive way of configuring openhab to push state changes to the magic mirror server, is to add all items you want to update to a group gMagicMirrorItems and create the following rule:

val String mirrorUrl = "http://<MAGIC_MIRROR_URL>:<MAGIC_MIRROR_PORT>/openhab"

rule "send updates to MagicMirror"

when
	Member of gMagicMirrorItems changed
then
		var url = mirrorUrl + "?item=" + triggeringItem.name + "&state=" + triggeringItem.state
		sendHttpGetRequest(url)
		logInfo("MagicMirror","Sent to MM: "+ url)
end