Magic Mirror Module for Home Assistant using Templates

Third party integrations
1

Howdy All,

I wanted to share a module for Magic Mirror which I just released. It pulls info from your Home Assistant and lets you render the display for the Module as a Home Assistant Template. Basically it lets follows the Home Assistant WebSockets for triggering entities, and then requests that Home Assistant render a template. It uses that output to display within the Magic Mirror module.

This allows for a lot of flexibility in the Magic Mirror display instead of being limited to just an entity name and state.

Features:

  • Template rendering directly in Home Assistant.
  • Hiding or displaying module based on Home Assistant entity state or template render.
  • Websocket connection to Home Assistant for fast response to state changes.
  • Auto reconnect to Home Assistant when connection is lost.
  • Custom CSS classes added to the module and every section.
  • Targeted rerender of templates only on state change of watched entity.
  • Material Design icons embeded in module to use with output.

It is available at GitHub - wonderslug/MMM-HomeAssistantDisplay: A Magic Mirror Module to display information from Home Assis.

MMM-HomeAssistantDisplay
MMM-HomeAssistantDisplay628×1008 66 KB

8 Likes
2

Great module and I like the ability to have more dynamic functionality with what MagicMirror displays from Home Assistant :+1:

@wonderslug do I need to create templates for states in Home Assistant to get this to work? Here is the config I pulled from your example just incase there was something missing from my config? I don’t get any errors when running a config.js check on my Magic Mirror config file.

My Config
{
module: ‘MMM-HomeAssistantDisplay’,
position: ‘bottom_center’,
config: {
“host”: “homeassistant.local”,
“token”: “my-unique-token”,
“port”: 8123,
“title”: “Now Playing”,
“useModuleTigger”: true,
“moduleTriggerTemplate”: {{ states.media_player.bathroom.state == "playing"}},
“moduleTriggerEntities”: [
“media_player.bathroom”
],
class: “playing_in_bathroom”,
sections: [
{
triggerEntities: [
“media_player.bathroom”
],
displayTemplate: <div class="image"><img src="http://homeassistant.local:8123/{{ states.media_player.bathroom.attributes.entity_picture_local }}" height="200"/></div> <div class="title">{{ states.media_player.bathroom.attributes.media_title }}</div> ,
class: “playing_info”
}
]
}
},

3

I think you are missing some ` (backticks) quoting around the templates. But that just may be the forum system not displaying them.

You can always test your templates in the Home Assistant Template Editor.

I did notice that not all the media_player implementations have the entity_picture_local attribute. Some have the entity_picture one only. Make sure you check the entity on the developer states page

4

Thanks for your reply. Your indeed right, the backticks are pruned when you paste in here. I just checked the backticks again and it’s an exact replicate of your example in the readme. I also checked the templates in the template editor of HA and they all look good to me (showing the correct image URL and song title). I just don’t get any display on the mirror at all. Very strange!

5

You might want to try setting useModuleTigger to false so that the module will always display and see what you get then. If the templates are rendering fine in the Template Editor then it should be fine in the MM module.

6

Thanks for the suggestion @wonderslug, unfortunately the only that shows up is the module title. Just confirming there’s nothing special I need to do in Home Assistant besides creating the long lived access token?

Confirming I currently use MMM-homeassistant-sensors to read out of Home Assistant and that reads my bathroom speaker entity to return “now playing” information so connectivity over HTTP port 8123 works OK.

7

What sort of output are you getting from the Template Editor?

8

Hey @wonderslug, is it possible to display HA Camera entities in MagicMirror?

9

You should be able to display an image from the camera by using the entity_picture attribute from a camera. But thats just going to be a static image. Right now there is no refresh method right now. You could setup feeds from HA using the stream integration and possibly use the MMM-RTSPStream module to get the camera feed itself.

11

Hi, your module is great. I have different sensors that I would like to evaluate in a list. Can you tell me what the syntax is “on” or “open”.

>  {% if states.${item.entity}.state == "on" **[u]OR OPEN![/u]** %}<i class='mdi mdi-window-open'></i> ${item.name}{% endif %}
12

Should be “on”, but it depends on the entity. Binary Sensors are “on” and “off”. Sensors could be be anything really. All of my windows and contact sensors are binary_sensors and work with on and off

{% if states.binary_sensor.front_door.state == "on" %}<i class='mdi mdi-door-open'></i> Front Door{% endif %}

1 Like
13

Yes, I know that most of them are binary. I found this value on there. Thanks for the quick help.
I have modified the code for my shutters. But here I have the case that one type gives me the position and some only binary (open or closed). What would the And link look like here? I get either one or the other displayed.

14

I am running into an issue where the config:check checks out, and MM will load, but it will only load the modules in the config up to where the HADisplay module is (i.e. the HADisplay and compliments module don’t load).

Is this likely an issue with the connection to HA? Maybe an issue with CSS? I have the class commented out because I don’t have it in the custom.css file

{
        module: 'MMM-HomeAssistantDisplay',
        position: 'middle_right',
        config: {
            host: "address",
            token: "token",
            port: 8123,
            useTLS: false, 
				//class: "HAvalues",
                sections: [{
                    displayTemplate: `
                        {% if states.binary_sensor.garage_door.state == "on" %}Garage Door: OPEN{% endif %}
                    `
                }]
         }
		},
15

Is there a middle_right position? I dont think there is and that might be causing your error.

16

hey @wonderslug , I’m using your MMM module but having an issue with the icons not being displayed.

Is this still the correct format:
<i class='mdi mdi-window-open'></i>

Here is an example of what I am using:
{% if states.binary_sensor.office_motion.state == "on" %}<i class='mdi mdi-motion-sensor'></i>Office Motion{% endif %}

The “Office Motion” part shows up, but the actual icon does not. Wondering if this has changed at some point?