Replaced MagicMirror with Lovelace Dashboard

Finally got around to replacing my MagicMirror display with a Dashboard, most of the information in MagicMirror was coming from Home Assistant so it was time to change.

  • Layout: I ended up using Layout-Card and Card-Mod to change it to a single column with horizontal and vertical cards filled with the individual cards. found some extra settings to remove the vertical scroll bar

  • Time and Date, I wanted the date above the time and I ened up using two different cards - probably could have used the digital-clock one for both

  • Location using Life360 and a mushroom template card, the icon changes colour based on battery charge and card-mod to increase the font-size. Kiosk mode used to remove all the extras.

  • Shopping List: We use alexa shopping list, so first I changed from anylist to todoist and synced the shopping list into HA, unfortunately there is little control over the shopping list card so then I found the todoist card which meant I didnt need to sync the list to home assistant but it is there now! Also I have started playing with the powertodoist version of the card which I will probably move over to.

  • Energy Now: using energy-flow-plus but about to move over to powerflow plus when I get a chance both from the same developer

  • Rain radar: weather-radar-card

  • Live Rain and Wind is coming from my netatmo integration (shared data from neighbour as well!)

  • Calendar: Atomic Calendar synced to a google shared calendar

Running on a Raspberry Pi, I used Marco Pascucci guide to autostarting a webpage - just remember to take out the --icognito flag otherwise you will spend hours trying to figure out why your settings are not being saved!

I also have mmwave sensor mounted above the monitor so using hass-screenapi I set an automation to detect presence and turn on the monitor.

Yaml dashboard code is here https://github.com/jtbnz/LovelaceMirrorDashboard/blob/2a66e01aaac6538eaa3f5ebef177870eb24ed70a/dashboard.yaml

Credits and links:
Layout Card https://github.com/thomasloven/lovelace-layout-card
Card Mod https://github.com/thomasloven/lovelace-card-mod
Kiosk Mode https://github.com/NemesisRE/kiosk-mode
Remove vertical scroll bar https://community.home-assistant.io/t/unnecessary-scroll-bars-using-views-with-layout-cards-like-horizontal-layout-card/493187/4
Guide to sync alexa to todoist (but use the updated script below) https://community.home-assistant.io/t/sync-your-alexa-todoist-shopping-list-to-the-home-assistant-shopping-list/274277/103
Updated alexa shoppinglist sync https://github.com/fenty17/ha-shopping-list-sync

Todoist-card https://github.com/grinstantin/todoist-card
powertodoist-card https://community.home-assistant.io/t/powertodoist-card-lists-kanbans-and-much-more-beta-release/583251/31

Time: https://github.com/fufar/simple-clock-card
Date: https://github.com/wassy92x/lovelace-digital-clock

Energy flow: https://github.com/flixlix/energy-flow-card-plus
Powerflow:https://github.com/flixlix/power-flow-card-plus

Rain Radar https://github.com/Makin-Things/weather-radar-card

Calendar https://github.com/totaldebug/atomic-calendar-revive

Marcos Guide to starting a raspberry pi into a webpage https://mpascucci.github.io/tutorial/rpi/

Remotely turn on and off the monitor https://github.com/muddyland/hass-screenapi

11 Likes

Hi Jon, thanks for sharing your project. I am trying to build something same. Checked MagicMirror, which is a great project, but missing some fancy items. Because almost all the data i wanted to shown is from HA i want to build a dashboard inside that. I have find all the hardware and a mirror, so i am ready to build. I also want that the screen is only on when someone is in the room.
In a earlier stage i found:
https://forum.magicmirror.builders/topic/11704/update-replaced-my-pir-sensor-with-a-doppler-microwave-sensor

So i bought these sensor, but i did not find a way to assembly this in the setup with an HA dashboard, it seems like you got that managed. Can you explain how you did that? You made use of hass-screenapi, but where do you configure the doppler-microwave sensor as sensor. And how do you have it wired.

I hope to hear from you. Kind regards

sure, I followed this guide for the aqara.
https://smarthomescene.com/blog/aqara-fp1-tips-tricks-and-automations-examples/

then I have an automation, that when clear set a timer for 5 minutes, then another automation that looks to see when the timer finishes. this handles multiple entry and exists as it resets the timer every time.


alias: Mirror Monitor Off after 5 minutes set timer
description: ""
trigger:
  - platform: state
    entity_id:
      - binary_sensor.aqara_fp1_motion
    to: "off"
condition: []
action:
  - service: timer.start
    data: {}
    target:
      entity_id: timer.5min_timer
mode: single

Hi Jon, thank you for your reply. I want to use a rcwl-0516 sensor
https://github.com/jdesbonnet/RCWL-0516, but you make use of aqara? Then it is offcourse different. I think i must search the internet a bit further :slight_smile:

@Jon_White thanks a lot for the input.
I had many hardware’s (pi2, pi3, windows tablet) and gui’s (smart-mirror.de, HA+TileBoard, …) in my wardrobe behind my magic mirror.

But using “just” Dashboards is the best!
Have now setup my dashboard and it’s working like it should.

PS.: any hint’s what is happening when an HA Update (inkl. Frontend) is made?
Will it recover? or do you have some automation to reboot it after HA restart?

thx

I have an automation that reboots every morning at 2am, this was the easiest solution! With the HA version 2024.1 there is a fix so that you can run automations on a shutdown so I might add this in as well.

1 Like

thx a lot for the hints.
I have used: GitHub - muddyland/hass-screenapi: This is a simple API for Home Assistant to be able to turn off the monitor attached to a Raspberry Pi
and extended it to reload chromium-browser. It will be triggered 30 seconds after an HA start with an automation.

Will see how it goes on coming updates/restart’s of HA.

I am waiting fro pulling the trigger since a lot.
Now Lovelace has reached such a maturity that it makes little sense to stay on MagicMirror anymore.
I am going to follow soon.

Of anyone is interested, I can share my modified screenapi python, kiosk.sh, …

pOpY

1 Like

Hi POpY
I’ highly appreciate you sharing your code :slight_smile:
thanks in advance
Flo

So here is my complete solution wich works flawlessly for now on rpi 4b+ running latest raspbian os (debian bookworm).

  1. to autostart chromium kiosk and hass-screenapi (python)
    Edit user autostart file “nano .config/lxsession/LXDE-pi/autostart” to this:

Note, when uncommenting (remove #) “lxpanel” and “pcmanfm” line, you can use the rpi desktop to set things up.

#################################################
# LXDE-pi autostart script                      #
#                                               #
# This file must be in the user's home e.g.     #
# /home/pi/.config/lxsession/LXDE-pi/autostart. #
#################################################

##enable/disable this for desktop
#@lxpanel --profile LXDE-pi
#@pcmanfm --desktop --profile LXDE-pi

## enable/disable screen saver
#@xscreensaver -no-splash  # comment this line out to disable screensaver

# Set the current xsession not to blank out the screensaver and then disables the screensaver altogether.
@xset s noblank
@xset s off

# set DPMS timeouts (Standby Suspend Off)
@xset dpms 43200 43200 43200

# disables the display power management system (we dont want this because we use DPMS to switch on/off the display)
#@xset -dpms

# Run the wanted app
@bash /home/pi/kiosk.sh
  1. create/edit kiosk bash script file “nano kiosk.sh” to this:
#!/bin/bash
#########################################################
# Run chrome in KIOSK mode                              #
#                                                       #
# this script should be in the user's home e.g.         #
# /home/pi/kiosk.sh                                     #
# and should have exec right                            #
# $ chmod 750 kiosk.sh                                  #
#                                                       #
# This script should be executed by the XLDE autostart  #
# /home/pi/.config/lxsession/LXDE-pi/autostart          #
#########################################################

### Use unclutter to hide the mouse
# unclutter -idle 0.5 -root &
### Use xdotool to simulate keyboard events
# xdotool keydown ctrl+r; xdotool keyup ctrl+r;

### These two lines of the script use sed to search through the Chromium preferences file and clear out any flags that would make the warning bar appear, a behavior you don’t really want happening on your Raspberry Pi Kio>
#sed -i 's/"exited_cleanly":false/"exited_cleanly":true/' /home/pi/.config/chromium/Default/Preferences
#sed -i 's/"exit_type":"Crashed"/"exit_type":"Normal"/' /home/pi/.config/chromium/Default/Preferences

#launch python screenapi for homeassistant
/usr/bin/python3 /home/pi/hass-screenapi/manage.py runserver 0:8000 &

### This line launches Chromium with our parameters. We will go through each of these parameters so you know what you can modify, and how you can modify it.
### --kiosk : operate in kiosk mode (limited acces to browser and OS e.g. no system bar, no tabs)
### --noerrdialogs : do not show error dialogs
### --disable-infobars : disable info bar (e.g. "chroium is not de default browser")
### --start-fullscreen (not necessary in kiosk mode)
### --incognito

#we start the browser in a loop so we can kill it to reload the site
while true; do
        rm /tmp/restart_chromium 2> /dev/null
        chromium-browser http://homeassistant.local:8123/dashboard-kiosk/0 --kiosk --noerrdialogs --disable-infobars --no-first-run --enable-features=OverlayScrollbar --start-maximized
        until [ -f /tmp/restart_chromium  ]
        do
             sleep 0.1
        done
done
  1. Install GitHub - muddyland/hass-screenapi: This is a simple API for Home Assistant to be able to turn off the monitor attached to a Raspberry Pi (installed in /home/pi/hass-screenapi) with git and manually test it (maybe some pip packages are missing)!
    Modify views.py with “nano /home/pi/hass-screenapi/screenapi/views.py” to this:
from django.http import JsonResponse
import json
import subprocess
import pyautogui
import time
from .decorators import *

@key_check
def index(request):
    return JsonResponse({"message":"Hello, world. This is just a dumb api"})

# Command to turn off the monitor
off_command = ["xset", "-display", ":0", "dpms", "force", "off"]
# Comamnd to turn on the monitor
on_command = ["xset", "-display", ":0", "dpms", "force", "on"]
# This will print out all the info about the screen, which we can parse to see if the monitor is on
status = ["xset", "-display", ":0", "q"]
#this will kill the browser
kill_command = ["killall", "-w", "chromium-browser"]
#this will restart the browser
restart_command = ["touch", "/tmp/restart_chromium"]

# Get Status of monitor
def is_on():
  run = subprocess.run(status, stdout=subprocess.PIPE)
  if "Monitor is On" in str(run.stdout):
    return True
  else:
    return False

# If post, check for action and apply if needed
# If Get, return the status of the moitor. this allows Home Assistant to poll for the status
@key_check
def monitor(request):
  if request.method == "POST":
    body = request.body
    do_action = json.loads(body)
    if do_action.get("on") and is_on() == False:
      pyautogui.hotkey('f5')
      time.sleep(4) # Sleep for 4 seconds because reload with F5 takes some time
      run = subprocess.run(on_command)
      return JsonResponse({'success': "True", "exit_code" : "0" })
    elif do_action.get("off") and is_on():
      run = subprocess.run(off_command)
      return JsonResponse({'success': "True", "exit_code" : run.returncode })
    elif do_action.get("restart"):
      run = subprocess.run(kill_command)
      run = subprocess.run(restart_command)
      return JsonResponse({'success': "True", "exit_code" : run.returncode })
    elif do_action.get("reload"):
      pyautogui.hotkey('f5')
      return JsonResponse({'success': "True", "exit_code" : "0" })

    else:
      return JsonResponse({"no_action": True})

  elif request.method == "GET":
    return JsonResponse({"status" : is_on()})
  1. HA’s “homeassistant.yaml” (included in configuration.yaml) for trusted networks (so you dont have to login). You have to check/change your ip’s & change the user id:
#################################################### Auth providers ###########################################
#incl. bypass login for magic mirror 192.168.0.210
auth_providers:
  - type: trusted_networks
    trusted_networks:
      - 192.168.0.0/24
      - fd00::/8
    trusted_users:
      192.168.0.210: [!!!! user-id = long uuid number of user to logon !!!!!!!]
    allow_bypass_login: true
  - type: homeassistant    
  1. in HA’s “switches.yaml” (included in configuration.yaml) create the switch for the monitor:
#monitor RPI magic mirror
- platform: rest
  name: MagicMirror Monitor
  resource: http://192.168.0.210:8000/monitor/
  body_on: '{"on" : "true"}'
  body_off: '{"off" : "true"}'
  headers: 
    AUTH: !secret magic_mirror_rest_headers_secret  
  is_on_template: "{{ value_json.status }}"
  1. in HA’s “secrets.yaml” (included in configuration.yaml) create the secret:
################################################### MagicMirror hass screen api auth ###########################################
magic_mirror_rest_headers_secret: xxxxxx
  1. in HA’s “rest_commands.yaml” (included in configuration.yaml) create the rest command for the monitor (reload, restart etc.):
#monitor RPI magic mirror
magicmirror_reload:
  url: http://192.168.0.210:8000/monitor/
  content_type:  'application/json; charset=utf-8'
  verify_ssl: false  
  method: POST
  timeout: 20
  headers:
    AUTH: !secret magic_mirror_rest_headers_secret
    accept: "application/json, text/html"
  payload: '{"reload" : "true"}'
  
magicmirror_restart:
  url: http://192.168.0.210:8000/monitor/
  content_type:  'application/json; charset=utf-8'
  verify_ssl: false  
  method: POST
  timeout: 20
  headers:
    AUTH: !secret magic_mirror_rest_headers_secret
    accept: "application/json, text/html"
  payload: '{"restart" : "true"}'
  1. use this in HA’s automations to refresh the monitor (F5) and turn it on after 4 seconds:
  - service: switch.turn_on
    target:
      entity_id: switch.magicmirror_monitor
    data: {}

and this to turn it off:

  - service: switch.turn_off
    target:
      entity_id: switch.magicmirror_monitor
    data: {}

I hope this helps :slight_smile:

Have fun
pOpY

1 Like

Did anybody find a good replacement for the magic mirror newsfeed module? For receiving the feed data I guess feedreader or feedparser are fine but I didn‘t find anything for displaying it in a similar way. Maybe in a hacky way with auto-entities and markdown cards but that still lacks all those only show one item and fading stuff :relieved:

Sorry, not using news feeds on the magic mirror dashboard.

Coud you guys share the hardware setup? I am looking for such a solution, but would like to buy a set rather than cutting and putting all tiny pieces together. Does something like this exists for a reasonable price_

I think no. Also have waited a long time if someone comes up with such an hardware to an good price. But up until now, i didn’t found anything.

This was a promissing project: mirr.OS one: Smart Home ist jetzt so individuell, wie du
I was using their software long time ago.
They have promissed that they are building an hardware, but up until now, nothing is buyable.

Because of that i have put mine together of an:

  • RPI4
  • Old 24 inch monitor
  • spy/magic mirror

All assembled in an old mirror frame.

you can also just buy an all in one pc and mount it on the wall, you dont get the mirror piece but you get an amazing touch screen interface!

Sorry, but the above may not work if you own a RPi5, what I choose to create a Magic Mirror using Lovelace and not using MagicMirror (apparently not available yet for RPi5 yet anyway). I also tried FullpageOS on my Pi with no success either, so I got back to the genuine RPi5 OS and auto boot the chromium browser.
From my understanding RPi5 uses something different called Wayfire (sorry, am just a geek and learning…). I succeeded to launch my Lovelace dashboard using this link:

https://www.raspberrypi.com/tutorials/how-to-use-a-raspberry-pi-in-kiosk-mode/

IMHO, Browser-Mod does the trick and offers even an entity to turn ON/OFF the screen that I will use in an automation. A separate MWW presence sensor will trigger the screen ON when present in the bathroom. I added a BT Xiaomi miscale - connected on an ESP32 BT proxy - which triggers the reading and display my daily weight on the dashboard + TTS announce my weight on my Alexa player media (damned, I’m overwight…).

I still need to hide the cursor which seems possible.
My concern is the login. For the moment, I have a keyboard and mouse attached to RPI but when installed, it won’t be the case any longer and I need to make sure it auto boot and logs in HA automatically.
Almost there… :slight_smile:

You can disable logins for local network.
This is my what I did.
Works perfectly. Without that, the password has to be entered from time to time.

Hey guys a question.
I am missing the top row (clock & weather) sometime (after some time).
After a browser reload, it comes back.

Anyone of you also suffering the issue?
Maybe @Jon_White?

i have attached an screenshot the top row is completly gone when the issue occurs.
See the red arrow, there is normally the clock on the left and the weather on the right.
Like in @Jon_White screenshot in the OP.

thx

Havent seen that, I have moved mine to the new sections dashboard. I use a max of two columns and it adjusts to changes really well - especially as the shopping list can grow.

My clock configuration is:

views:
  - theme: blackened
    title: Home
    type: sections
    sections:
      - type: grid
        cards:
          - type: custom:digital-clock
            timeFormat: ' '
            card_mod:
              style: |
                ha-card {
                 font-size: 2.8rem;
                }
          - type: custom:simple-clock-card
            hide_seconds: false
            font_size: 7rem
            theme: blackened
            bold_clock: true

1 Like