Family Dashboard – Home Assistant vs Magic Mirror

This is a post of creating a family dashboard for a portrait oriented screen. I have used Magic Mirror 2 for many years and might continue doing so. However I wanted to get some better gauges and charts that Magic Mirror does not provide. To make this happen I will use Home Assistant. I am already using Home Assistant with my magic mirror sending some sensors as MQTT to the mirror.

I have actually installed MM2 as well but decided to not use PM2 to auto start it. So I can use any of them. Both versions are shown below.

Pros and Cons

First of all some pros and cons regarding Magic Mirror vs Home Assistant

Magic Mirror

Very stable
Low CPU and memory intensive. Works on a RPI2.
Many modules
Clean UI

Hard to display graphs
Hard to customize

Home Assistant
You might already be using HA
Nice interface
Easy to change layout
Endless possibilities
Motion graphs and custom lovelace cards

Breaking changes might crash the layout

Setting up the screen and RPI

You may use any screen you want. In my case I have used my existing mirror screen and just replaced the Raspberry.

Install Raspberry OS. This is simple. Boot it up and enable Wifi. Open a browser. You want the browser to start up automatically with your URL every time the RPI is started. There are two ways of doing this. Or you can actually use a combination of both.

1. Just add the startup page in Chromium. This will not start the browser it self but you may set it as the start page.

2. Add a script.

This will auto start chromium with the url of your choice.

sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

Append the following to the end of the file and save:

/usr/bin/chromium-browser –kiosk –ignore-certificate-errors –disable-restore-session-state https://myhomeasstanturl.com/mirror/

I had issues opening up https pages with a RPI3. It worked manually but not via startpage in Chromium or via cmd. It seems like the loading is to fast and the browser does not keep up. Seems to be a common problem. With a rpi4 it just works fine. Start without kiosk as you might want to test first. You could also use “–start-fullscreen” if you prefer using input as a mouse or keyboard.

Reboot and test!

Rotating the screen

If you want to use it as portrait do the following. Go to preferences screen configurator and rotate here. There are ways of doing this via terminal but I do not see the need for that.

Creating the HA Dashboard.

This is the fun part. If you are using Home Assistant you might already be familiar with lovelace and cards. You may already have created a nice dashboard. If so the hard part is done. I will show you how I did mine and how I was able to replace the features of the Magic Mirror with HA.

1. Create a user called mirror or something else in HA. Make it a non admin. You can use “can only log in from the local network” but it may cause problems if using a proxy or similar. Save.

2. Install a new theme called blackend. Why? Because you want your screen to be black. At least I do as I am using a mirrorglass.

3. Test in a private window to log in as you new user. Change theme. You might have to change theme later again.

Creating the dashboard

You will need HACS enabled in Home Assistant as we need some extra stuff to make this look good. If you do not have enabled HACS in Home Assistant google it. It makes 3rd party integrations available.

Create a new dashboard in configuration, dashboards and call it mirror. Save. Install layout-card via Hacs. You will need it in order to make the layout correct.

Start by changing the layout of the Mirror tab of your new dashboard to grid like in the image below.

 

Now add a horizental-stack card. And another one. And even more. See below. It might be a good idea to just add some random cards at a start just to make the layout correct. Later on you may just change them. In general 3 columns works fine and you want to add cards inside cards.

 

I have attached the code for El och Sol below. This can be added as a manual card and you just have to replace the entities.

type: custom:layout-card
layout: vertical
column_width: 100%
cards:
- type: markdown
content: '# EL OCH SOL'
- type: custom:layout-card
layout: grid
gridrows: 380px 200px auto
gridcols: 380px auto 180px
cards:
- type: gauge
min: 0
max: 15000
entity: sensor.current_consumed_positive
name: Husets förbrukning
severity:
green: 0
yellow: 5000
red: 10000
needle: true
- type: gauge
min: 0
max: 14000
entity: sensor.power_photovoltaics_fronius_power_flow_0_192_168_0_3
name: Solceller
- type: gauge
min: 0
max: 5
name: Elpris
severity:
green: 0
yellow: 1
red: 2
entity: sensor.nordpool_kwh_se3_sek_2_10_025
unit: SEK
- type: gauge
min: 0
max: 90000
entity: sensor.energy_day_fronius_inverter_1_192_168_0_3
name: Dagens Sol
- type: gauge
min: 0
max: 100
name: Renault Batteri
severity:
green: 70
yellow: 40
red: 10
entity: sensor.vf1ag000361750753_battery_level

Make sidebar disappear

You want a fullscreen without any sidebar. You will use the frontend integration from HACS here. Use Kiosk.

Add this in your configuration.yaml:

kiosk_mode:
  user_settings:
    - users:
    - "mirror"
  hide_sidebar: true
  kiosk: true
  ignore_entity_settings: true

Calendar and Feeds

There are some different ways of adding calendars and feeds. I have used two components

The ICS Calendar to get data from Google and Laget. And Atomic Calendar Revive to display this in a good way in my dashboard. You can install both via HACS. Before I uswed Skolmaten via hacs but nowdays I use the ICS for this as well.

There are many configurations that can be done in the Atomic card. You will have to test this until you are happy. You want the calendar to be as minimal as possible but still show all the basics. I have attached my config below.

type: custom:atomic-calendar-revive
name: null
enableModeChange: true
firstDayOfWeek: 1
maxDaysToShow: 7
entities:
- calendar.xxx_xxx
- calendar.xxx_xxx
showDate: false
sortByStartTime: false
showColors: false
eventTitleColor: white
showRelativeTime: false
calShowDescription: true
showLastCalendarWeek: false
dimFinishedEvents: true
locationTextSize: 100
eventTitleSize: 100
dateSize: 100
defaultMode: Event
showCurrentEventLine: false
showMonth: true
disableLocationLink: false
showFullDayProgress: true
showEventIcon: false
showNoEventsForToday: false
disableEventLink: true
refreshInterval: 60

Adding Nordpool spotprice

I have used the current spotprice before to see what my electricity costs. To get this working you will need the apexchart-card. As well as the Nordpol integration. I have not added the apex charts yet on my mirror but it looks like this.

 

 

The code is here:

 

type: custom:apexcharts-card
graph_span: 24h
experimental:
color_threshold: true
header:
title: Prices next 24h (kr/kWh)
show: true
apex_config:
yaxis:
min: 0
hours_12: false
span:
start: hour
offset: '-6h'
now:
show: true
label: Now
series:
- entity: sensor.nordpool_kwh_se3_sek_2_10_025
type: column
data_generator: |
return (entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
})).concat(entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
}));
color_threshold:
- value: 0
color: green
- value: 1
color: orange
- value: 2
color: red
- value: 3
color: darkred
- value: 4
color: darkred

Conclusion

In general I like both. There are some advantages of using home assistant. I can edit my dashboard from anywhere and it will be updated directly. Right now I am using both. I start MM from cmd via npm start and control it via vnc. I will run a test now to see how things turns out.