Mein SmartMirror mit MagicMirror² Software auf einem RapberryPi und IKEA RIBBA Rahmen

  • Hier ein kleines Tutorial wie ich meinen SmartMirror umgesetzt habe, natürlich ist das Projekt noch beliebig erweiterbar, aber hier erstmal das Basis Tutorial was gerne in weiteren Beitragen beliebig erweitert werden darf, was mich sehr freuen würde.

    73033588_2420352334851878_1711225529355999759_n.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com&_nc_cat=102


    Auf Instagram haben vielleicht schon viele das obige Bild gesehen, by the Way lasst mir gern ein Follow auf Instagram SchimmerMediaHD da :)

    Dort sieht man auf jeden Fall das ich für meinen SmartMirror die Software "MagicMirror²" verwende und demnach wird das nachfolgende Tutorial in Verbindung mit einem RaspBerry Pi 3 B+und eben dieser Software sein :)


    _____________________________________________________________________________

    Benötigte Sachen

    - Raspberry Pi 3B+ (Kit mit allem was ihr braucht)

    - Display (LTN173KT01 / LP173WD1 / B173RW01)

    - Display Controller (Für LTN173KT01 / LP173WD1 / B173RW01)

    - Maus & Tastaur (Falls noch nicht vorhanden)

    - IKEA Ribba Bilderrahmen (61x91cm) (bei IKEA günstiger)

    - Spiegelfolie mit Rakel (meist im Lieferumfang enthalten) (67x100cm)

    _____________________________________________________________________________

    Benötigte Software

    - Etcher

    - Raspbian (Das neuste mit Desltop)

    - MagicMirror² (wird mit Befehl auf dem Raspberry Pi installiert)

    _____________________________________________________________________________

    1. Installieren des neuen Raspbian mit Desktop

    - Als erstes Etcher und das neuste Raspbian mit Desktop herunterladen

    - dann Etcher installieren und das Raspbian Immage entpacken

    - Die Micro SD Karte mit einem SD Adapter in den PC stecken

    - öffne Etcher und wähle das zuvor entpacke Raspbian Immage aus

    - wähle als zweites in der Software das Entsprechende Laufwerk mit der Micro SD Karte aus

    - Nochmal alles überprüfen & wenn alles stimmt auf "Flash!" klicken.

    _____________________________________________________________________________

    2. Raspberry Pi starten & Einrichten

    - Micro SD Karte in Raspberry Pi schieben & Netzwerk, Tastatur, Maus, Netzteil & Monitor anschließen

    - Entweder über Schalter am Netzteil (verlinktes Set) oder durch einstecken des Netzteils Einschalten

    - einloggen mit User: pi und dem Passwort: raspbian

    - Raspberry Pi auf den neusten Stand bringen mit folgender Kommando Zeile

    Code
    1. sudo apt-get update && sudo apt-get upgrade

    - dann noch die Firmware auf den neusten Stand bringen mit folgender Kommando Zeile

    Code
    1. sudo rpi-update

    - nun müssen wir nur noch ein paar Einstellungen in der raspi-config machen. Um die Einstellungen zu öffnen folgenden Befehl eingeben

    Code
    1. sudo raspi-config


    - dann als erstes den Speicher auf die gesamte SD Karte ausweiten, dazu erst auf "Advanced Options" und dann "Expent Filesystem".


    - um später eventuell nochmal Fernzugriff auf euren Pi zu haben noch SSH Freischalten, dazu erst auf "Interfacing Options" und anschließend auf "P2 SSH" um das ganze auf enabled mit "Ja" zu setzen.


    - Dann noch die Location, Zeitzone und Tastatur auf Deutsch stellen, dazu einfach auf "Localisation Options" & dort dann die passenden Einstellungen vornehmen unter "Change Locale", "Change Timezone" & "Change Keyboard Layout"


    - Zum Schluss könnt ihr noch optional euer Passwort ändern über "Change User Password" und dann das ganze mit "<Finish>" abschließen (hier kommt ihr mit der Tab Taste hin)


    - dann einmal mit folgender Kommandozeile neustarten

    Code
    1. sudo reboot

    _____________________________________________________________________________

    3. MagicMirror² Software installieren

    Nun installieren wir die MagicMirror² Software auf dem Raspberry Pi mit nur einer einzigen Befehl über die Kommandozeile. Wichtig hierbei ist das wir kein "sudo" davor eingeben, sonst bekommt man einen Fehler.

    Code
    1. bash -c "$(curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh)"

    _____________________________________________________________________________

    4. Der erste Start vom Smart Mirror

    - dafür als erstes das Verzeichnis wechseln um im MagicMirror Ordner zu sein mit...

    Code
    1. cd ~/MagicMirror

    - danach Folgenden Befehl eingeben um den Bildschirm in einen Smart Mirror zu verwandeln

    Code
    1. DISPLAY=:0 npm start

    - damit ist euer SmartMirror aber noch nicht fertig, ein paar Schritte folgen noch. Um weiter machen zu können am einfachsten einfach kurz den Stecker vom Pi ziehen und wieder rein stecken oder falls Ihr mein Empfohlenes Kit bestellt habt, eben den Schalter einmal kurz betätigen.

    _____________________________________________________________________________

    5. Display Drehen (falls Notwendig)

    - Je nachdem ob Ihr euren Bildschirm hinter dem Spiegel Quer oder Hochkant verwendet wollt müsst ihr diesen noch drehen. Für das Querformat müsst ihr nichts mehr ändern, denn wie ihr ja schon gesehen habt, hat das ja bereits funktioniert. Wer allerdings, wie ich auch, das ganze hochkant nutzen möchte muss nach dem Login mit folgendem Befehl eine Config Datei öffnen...

    Code
    1. sudo nano /boot/config.txt

    - und hier dann ganz nach unten scrollen (mit den Pfeiltasten) um dort folgenden Code einzufügen...

    Code
    1. display_rotate=1

    - das ganze dann mit [Strg+X] und anschließendem [J] und [Enter] bestätigen und speichern.

    - anschließend noch ein reboot mit folgendem Befehl und euer Monitor zeigt alles vom Pi in Hochkant an.

    Code
    1. reboot

    _____________________________________________________________________________

    6. Standart Module Einstellen (Wetter/Uhrzeit/Kalender/etc.)

    - als erstes öffnen wir die Datei wo wir die ganzen Einstellungen vornehmen können, dafür wechseln wir in das Verzeichnis mit dem Befehl...

    Code
    1. cd ~/MagicMirror

    - und dann öffnen wir mit dem Editor "nano" die config.js Datei, das geht mit dem Befehl...

    Code
    1. nano config/config.js

    - die "ipWhitelist" könnt Ihr auf "[]" stellen damit Ihr Zugriff von anderen Geräten aus habt, also so...

    Code
    1. ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], --> zu --> ipWhitelist: [],

    - oben können wir dann noch die Sprache von "en" auf "de" stellen, also...

    Code
    1. language: "en", --> zu --> language: "de",


    6.1 Positionen für Module

    - top_bar

    - top_left

    - top_center

    - top_right

    - upper_third

    - middle_center

    - lower_thrid

    - bottom_left

    - bottom_center

    - bottom_right

    - bottom_bar

    - fullscreen_above

    - fullscreen_below


    ***************************************************************

    ✪ Das "calendar" Modul steht noch auf "US Holidays" und unten ist ein Kallender von "calendarlabs.com" verlinkt. Dies können wir viel interaktiver und cooler gestalten indem wir hier unseren persönlichen Google Kalender einbinden.

    - dazu einfach nach dieser Anleitung "Kalender abrufen (nur ansehen)" vorgehen und im Google Konto einloggen, dann auf die "Übersicht der Kalender" und dort Links an der Seite euren Kalender auswählen. Am besten wählt ihr den aus, der auch auf eurem Smartphone genutzt wird, so synchronisieren sie sich automatisch.

    - hier dann auf die 3 Punkte und dann "Einstellungen und Freigabe" anklicken

    - hier dann etwas runter scrollen bis zu dem Punkt "Kalender integrieren" und hier könnt ihr euch den Link bei "Privatadresse im iCal-Format" kopieren, denn so könnt Ihr den Kalender einbinden ohne ihn für die Öffentlichkeit freigeben zu müssen.

    - nun könnt Ihr in der Config den "header:" umbenennen. So zum Beispiel...

    Code
    1. header: "US Holidays", --> zu --> header: "Mein Kalender",

    - dann wird "Mein Kalender" als Überschrift von dem Modul angezeigt. Nun brauchen wir nur noch bei "url:" die eben kopierte URL von unserem Privaten Google Kalender eintragen, was dann in etwa so aussieht...

    Code
    1. url: "https://calendar.google.com/calendar/ical/EuerAccount%gmail.com/private-123456789/basic.ics"

    ***************************************************************

    ✪ Das "currentweather" Modul richten wir als nächstes ein. Dazu müssen wir uns auf "openweathermap.org" einen Account erstellen. Wichtig hierbei ist das Ihr einen Haken bei "System news (API usage alert, system update, temporary system shutdown, etc)" setzt, denn wir benötigen einen API Zugang.

    - den "API Zugang" bekommt Ihr indem ihr bei "Price" auf "Free - Get API key and Start" klickt

    - unter "API" und dann "API keys" findet ihr dann "Euren API Key". Diesen könnt Ihr dann schon mal zwischenspeichern.

    - nun müsst Ihr nur noch auf "Weather" nach "Eurer Stadt oder Eurem Dorf" suchen und oben aus dem Browser den Code kopieren. In meinem Fall ist es "2924201".

    - jetzt müssen wir die Daten nur noch in unsrer Config Datei wie folgt einfügen...

    Code
    1. location: "New York", --> zu --> location: "Eure Stadt oder Euer Dorf",
    2. locationID: "", --> zu --> locationID: "Eure LocationID (bei mir 2924201)",
    3. appid: "YOUR_OPENWEATHER_API_KEY" --> zu --> appid: "Euer vorher kopierter API Key"

    ***************************************************************

    ✪ Beim Modul "weatherforecast" brachen wir die selben Daten wie oben beim "currentweather" Modul. Daher ändern wir hier das ganze einfach wie folgt ab...

    Code
    1. location: "New York", --> zu --> location: "Eure Stadt oder Euer Dorf",
    2. locationID: "", --> zu --> locationID: "Eure LocationID (bei mir 2924201)",
    3. appid: "YOUR_OPENWEATHER_API_KEY" --> zu --> appid: "Euer vorher kopierter API Key"

    ***************************************************************

    ✪ Das "newsfeed" Modul ist natürlich für viele auch interessant und hier habt Ihr verschiedene Möglichkeiten beliebige RSS Feeds zu hinterlegen.

    - Für die Supporter meines YouTube Kanals, oder generell falls ihr einen Lieblings YouTuber habt könnt ihr euch mit dem "YouTube RSS Extractor" einen RSS Link von eurem Lieblings Kanal bekommen, der euch dann immer über die neusten Videos auf dem jeweiligen Kanal informiert. Hier folgt der RSS Feed Link meines YouTube Kanals...

    Code
    1. https://www.youtube.com/feeds/videos.xml?channel_id=UC3PCSf8gzYLVBdqs1-SMmRA


    - oder falls Ihr an den neusten Nachrichten interessiert seid könnt Ihr auch den RSS Feed von ARD nehmen...

    Code
    1. http://www.tagesschau.de/xml/rss2


    - und dann das ganze einfach wie Folgt in der Config Datei abändern...

    Code
    1. title: "New York Times", --> zu --> title: "Euer YouTuber / oder ARD News",
    2. url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml" --> url: "RSS Link"

    ***************************************************************

    ✪ Config Datei Speichern

    Zum Speichern der Config Datei nachdem Ihr diese bearbeitet habt, müsst ihr nur [Strg+X] drücken und dann das ganze mit [J] und anschließendem [Enter] bestätigen. schon sind eure Einstellungen gespeichert.

    _____________________________________________________________________________

    7. Drittanbieter Module Einstellen (ioBroker, Alexa, Xiaomi, PV-Anlage, IP-Cam)

    diesen Punkt 7. könnt Ihr überspringen falls ihr keine Drittanbieter Module installieren wollt und euch der bisherige Stand der Information eures SmartMirros ausreicht. Dann könnt Ihr einfach direkt bei Punkt 8. weitermachen.


    ✪ Xiaomi Aqara SmartHome Modul (MMM-xiaomi)

    - Um dieses Modul zu installieren müsst ihr erstmal in das MagicMirror Verzeichnis navigieren mit...

    Code
    1. cd ~/MagicMirror/modules

    - und dann könnt ihr einfach mit dem "git clone" Befehl euch das Modul herunterladen...

    Code
    1. git clone https://github.com/mirko3000/MMM-xiaomi.git

    - installieren geht dann einfach im selben verzeichnis mit folgendem Befehl...

    Code
    1. npm install

    - danach müssen wir noch in der "Config.js" Datei etwas hinzufügen, dazu wechseln wir erstmal das Verzeichnis mit...

    Code
    1. cd ~/MagicMirror

    und dann...

    Code
    1. nano config/config.js

    - in der Datei müssen wir dann etwas einfügen um das Modul zu platzieren, die "position" ist variable und ihr müsst die IP-Adresse eure Xiaomi Gateway sowie den dazu gehörigen Key und dann von den einzelnen ZigBee Komponenten die Device ID wissen. Hier dazu mein Beispiel...

    - für den Fall das Ihr das Token (Xiaomi Gateway Key) und die einzelnen Device ID´s nicht kennt, dann könnt ihr das mit "miio Tool" ermitteln. Zum installieren dieses Tools folgendes in der Kommandozeile eingeben...

    Code
    1. npm install -g miio

    - und nachdem ihr das intsalliert habt könnt ihr das Tool ausführen und nach allen Devices im netwerk suchen mit...

    Code
    1. miio discover

    der Output sieht dann in etwa so aus, man sieht eigentlich direkt da wo das Token dabei steht ist die Gateway und "lumi.weather" ist dann quasi ein Temperatur un Luftfeuchtigkeits Sensor...

    - Zum Speichern dann wieder nur [Strg+X] drücken und dann das ganze mit [J] und anschließendem [Enter] bestätigen. schon sind eure Einstellungen gespeichert.

    ***************************************************************

    ✪ schöneres Wetter Modul (MMM-OpenmapWeather)

    - da ich ein Grafisch etwas ansprechenderes Wetter Modul wollte als das was Standardmäßig mit dabei ist habe ich mich bei den Modulen mal etwas umgesehen und das Modul hier gefunden, zum installieren auch hier wieder in das "MagicMirror" Verzeichnis wechseln mit...

    Code
    1. cd ~/MagicMirror/modules

    - und dann könnt ihr einfach mit dem "git clone" Befehl euch das Modul herunterladen...

    Code
    1. git clone https://github.com/sathyarajv/MMM-OpenmapWeather.git

    - danach müssen wir noch in der "Config.js" Datei etwas hinzufügen, dazu öffnen wir die Datei mit dem Nano Editor...

    Code
    1. nano config/config.js

    - hier fügen wir jetzt einfach folgenden Code ein, bzw. ersetzen den Code vom Standard Wetter Modul. Der Vorteil bei diesem von mir ausgewähltem Modul ist das wir hier den selben API Key nutzen können wie bei dem Standard Modul, denn das ganze läuft hier auch über OpenWeatherMap , oben habe ich schon beschrieben wie ihr dort den Key und eure Location Daten bekommen könnt, diese könnt Ihr einfach hier ersetzen...

    - Zum Speichern dann wieder nur [Strg+X] drücken und dann das ganze mit [J] und anschließendem [Enter] bestätigen. schon sind eure Einstellungen gespeichert.

    ***************************************************************

    ✪ PV-Anlage Modul (MMM-SolarEdge)

    - ich habe seit Mitte 2019 meine PV Anlage (9,6kWp) mit Stromspeicher von Sonnen (12,5kWh), diese arbeitet mit einem Wechselrichter von SolarEdge weshalb dieses Modul hier für mich absolut passend ist. Insallation ist hier auch wieder ganz einfach, wieder in das MagicMirror Verzeichnis wechseln...

    Code
    1. cd ~/MagicMirror/modules

    - und dann könnt ihr einfach mit dem "git clone" Befehl euch das Modul herunterladen...

    Code
    1. git clone https://github.com/bertieuk/MMM-SolarEdge.git

    - nachdem das ganze installiert ist benötigt ihr natürlich noch eure "SiteID" und einen "API Key" zu eurem SolarEdge Portal. Sprecht zur Not nochmal mit eurem Installateur (in meinem Fall Firma Sames Solar), falls Ihr noch keinen Zugang habt, die können euch dabei helfen wenn ihr es selbst nicht hin bekommt. Wenn Ihr dann einen Zugang habt einfach über das SolarEdge Portal Einloggen...


    - nachdem ihr dann eingeloggt seid, könnt ihr auch schon oben aus der Adressleiste die "SiteID" herauslesen, das ist die Nummer die nach dem "site/" steht, oder ihr schaut einfach rechts auf der Seite bei "Anlagenstatus" bei "ID"...


    - jetzt brauchen wir noch die Entsprechende API dazu um das ganze dann auch mit unserem SmartMirror verbinden zu können, diese finden wir wenn wir oben auf das Zahnrad (Admin) klickt und dann dort auf "Anlagenzugriff", dort steht dann unten "API-Zugriff" dort einfach das Häkchen bei "Ich habe die SolarEdge API AGBs gelesen, verstanden & stimme zu" setzen und einen API Key generieren und kopieren. Die "SiteID" steht hier auch nochmal :)


    - die nun gewonne "SiteID" und der "API-Key" wird nun in der Config.js in einem Script eingetragen, dazu wechseln wir wieder in das MagicMirror Verzeichnis mit...

    Code
    1. cd ~/MagicMirror

    und dann...

    Code
    1. nano config/config.js

    - und hier dann eben die "SiteID" und den "API Key" in folgendem Script eintragen und in das Config.js einfügen.

    Code
    1. {
    2. module: 'MMM-SolarEdge',
    3. position: 'bottom_left',
    4. config: {
    5. apiKey: "################################", //Requires your own API Key
    6. siteId: "12345", //SolarEdge site ID
    7. }
    8. },

    - Zum Speichern dann wieder nur [Strg+X] drücken und dann das ganze mit [J] und anschließendem [Enter] bestätigen. schon sind eure Einstellungen gespeichert.

    ***************************************************************

    ✪ Live Wetter Karten Modul (MMM-Buienradar)

    - Einrichtungs Tutorial Folgt


    ***************************************************************

    ✪ Alexa Steuerungs Modul (MMM-AlexaControl)

    - Einrichtungs Tutorial Folgt


    ***************************************************************

    ✪ ioBroker Modul (MMM-ioBroker)

    - Einrichtungs Tutorial Folgt


    ***************************************************************

    ✪ IP-Kamera Modul (MMM-RTSPStream)

    - um das Modul zu installieren müsst Ihr einfach folgenden Befehl in die Kommandozeile kopieren oder per Hand eingeben...

    Code
    1. bash -c "$(curl -s https://raw.githubusercontent.com/shbatm/MMM-RTSPStream/develop/scripts/installer.sh)"

    - danach müssen wir noch in der "Config.js" Datei etwas hinzufügen, dazu wechseln wir erstmal das Verzeichnis mit...

    Code
    1. cd ~/MagicMirror

    und dann...

    Code
    1. nano config/config.js

    - in der Datei müssen wir dann etwas einfügen um das Modul zu platzieren, die "position" ist variable und bei "IP-Adresse-des-ONVIF-Streams" trägst du die IP der Cam ein...

    - das wäre jetzt ein Beispiel wie man das ganze mit einer Kamera einbinden kann, man kann aber auch mehrere Kameras eintragen die dann immer XX Sekunden gezeigt werden und dann kommt die nächste Kamera. Wenn Ihr das Modul installiert habt könnt Ihr auch einfach in eurem Browser folgendes Aufrufen und euer Script damit erstellen...

    Code
    1. http://Raspberry-Pi-IP:8080/MMM-RTSPStream/config.html

    - und nachdem Ihr eure Parameter eingegeben habt, könnt ihr das Script über "Generate" erzeugen und dann in eure Config.js rein kopieren.


    - Zum Speichern dann wieder nur [Strg+X] drücken und dann das ganze mit [J] und anschließendem [Enter] bestätigen. schon sind eure Einstellungen gespeichert.

    _____________________________________________________________________________

    8. Bildschirm Rotation einstellen (Querformat oder Hochformat)


    - Wenn Ihr den Bildschirm so wie ich im Video hochkant verwendet möchtet, dann geht das sehr leicht. Einfach in der Kommandozeile mit folgendem Befehl erstmal wieder ins Stammverzeichnis wechseln...

    Code
    1. cd ~

    - dann als nächstes mit dem Folgenden Befehl und dem Nano Editor, die "Config.txt" im "boot Verzeichnis" aufrufen

    Code
    1. sudo nano /boot/config.txt

    - und hier dann unten einfach folgende Zeile Einfügen. Ich verwende hier die Variable "1" am ende um das Bild 90° nach Rechts zu drehen. Ihr könnt aber bei bedarf auch weitere Variablen wie "2" oder "3" nehmen.

    Code
    1. # Bildschirm drehen
    2. display_rotate=1

    - Zum Speichern dann wieder nur [Strg+X] drücken und dann das ganze mit [J] und anschließendem [Enter] bestätigen. schon sind eure Einstellungen gespeichert.

    _____________________________________________________________________________

    9. Bildschirm dauerhaft AN lassen (kein Sleep Mode)


    - damit Euer SmartMirror auch immer die gewünschten Informationen Anzeigen kann, solltet Ihr den Bildschirm daran hindern aus zu gehen. Das ist auch schnell gemacht. Einfach mit dem nano Editor die "autostart" Datei im "LXDE-pi" Verzeichnis öffnen mit Folgendem Befehl...

    Code
    1. sudo nano ~/.config/lxsession/LXDE-pi/autostart

    - und dann den Folgenden Inhalt in die Datei schreiben...

    Code
    1. @xset s 0 0
    2. @xset s noblank
    3. @xset s noexpose
    4. @xset dpms 0 0 0

    - Zum Speichern dann wieder nur [Strg+X] drücken und dann das ganze mit [J] und anschließendem [Enter] bestätigen. schon sind eure Einstellungen gespeichert.

    _____________________________________________________________________________

    10. SmartMirror automatisch starten beim booten vom Raspberry Pi


    - als erstes mit dem Befehl ins Stammverzeichnis gehen

    Code
    1. cd ~

    - dann diesen Befehl eintippen...

    Code
    1. pm2 startup

    - dann mit dem nano Editor folgende Datei Erstellen mit dem Befehl...

    Code
    1. nano mm.sh

    - und folgendes in die Datei rein schreiben...

    Code
    1. cd ~/MagicMirror
    2. DISPLAY=:0 npm start

    - Zum Speichern dann wieder nur [Strg+X] drücken und dann das ganze mit [J] und anschließendem [Enter] bestätigen. schon sind eure Einstellungen gespeichert.

    - dann muss die Datei noch die entsprechenden Berechtigungen bekommen um auch ausführbar zu sein, das macht ihr mit dem befehl...

    Code
    1. chmod +x mm.sh

    - dann das ganze einmal ausführen mit...

    Code
    1. pm2 start mm.sh

    - und mit dem hier einmal speichern...

    Code
    1. pm2 save

    - wenn alles fertig ist, noch einmal rebooten damit er alles einmal frisch lädt und Bäm...

    Code
    1. sudo reboot

    und dann sollte nach dem starten automatisch euer SmartMirror starten und in meinem Fall sieht das ganze dann am ende so aus...

    70765675_182793346103459_892784381038237591_n.jpg?_nc_ht=scontent-frx5-1.cdninstagram.com&_nc_cat=111&oh=fec7e1475d31eb02455332a226c181dd&oe=5E85BC67