Software

Smart Mirror

Betriebssystem

Zuerst versorgen wir unseren Raspberry Pi4 mit einem Betriebssystem.

Dazu ladet Ihr Euch in vorbereitung folgende Software herunter und legt die SD-Karte in das Kartenlesegerät von Eurem Rechner ein:

Wenn Ihr alle Dateien heruntergeladen habt, öffnet balenaEtcher.

Klickt auf „Flash from file“ und wählt die zuvor runtergeladene und entpackte Imagedatei „Raspbian OS with Desktop“ aus.

Klickt nun auf “Select target” und wählt Eure zuvor eingelegte SD-Karte aus.

Im letzten schritt klickt Ihr auf „Flash“. Das Flashen der SD-Karte dauert einen Moment.

Nachdem das Flashen abgeschlossen wurde, schließt Ihr Euren Raspberry Pi4 an einen Monitor an und legt die SD-Karte in den vorgegebenen Kartenslot. Schließt zu guter Letzt noch eine Maus und Tastatur an und versorgt das Gerät mit Strom.

Der Raspberry Pi4 installiert nun selbständig innerhalb von wenigen Minuten das Betriebssystem.

Einstellungen

Nachdem der Raspberry Pi4 zum ersten Mal gestartet wurde, seht Ihr auf Eurem monitor folgendes Bild:

Klickt auf „Next“ und tragt in den jeweiligen Feldern Euer Land, Eure Sprache und Eure Zeit Zone ein.

Klickt auf „Next“ und tragt ein Wunsch Passwort in die vorgegebenen Felder ein.

Klickt auf “Next”. In diesem Fenster müsst Ihr keine anpassungen vornehmen.

Klickt auf “Next”. Der Raspberry Pi4 sucht jetzt nach verfügbaren Wlan-Netzwerken. Wählt Eures entsprechend aus und gebt das Kennwort ein.

Anschließend sucht der Raspberry Pi4 nach Updates und installiert selbige. Klickt dazu auf “Next”

Nach der erfolgreichen Installation der Updates müssen wir das Gerät Neustarten. Klickt dazu auf „Restart“.

Glückwunsch! Du jetzt ein vollständig installiertes und Aktuelles Betriebssystem auf Deinem Raspberry Pi4 installiert!

Nun kommen noch ein paar kleine Einstellungen um den Pi auch vom Heimischen PC Direkt zu Steuern ohne davor hängen zu müssen.

Zugriff mit VNC und SSH

Klickt oben Links auf die Das Beerensymbol und wählt „Einstellungen“ und im Untermenü „Raspberry-Pi-Konfiguration” aus.

Es öffnet sich ein neues Fenster. Klickt dort bitte in dem oberen Reiter auf „Schnittstellen“ und aktiviert die Punkte „VNC und SSH“. Klickt anschließend auf ok. Der Raspberry Pi4 muss nun noch einmal neugestartet werden, um die Änderungen zu übernehmen.

Zugriff mit Putty

Öffnet das zuvor runtergeladene Programm putty und gebt die IP-Adresse Eures Raspberry Pi4 in das entsprechende Feld ein (Host Name or IP-adress) und klickt anschließend auf „open“

Es öffnet sich ein neues Fenster, wo Euer Benutzer Name abgefragt wird. Dieser ist Standardmäßig pi

Drückt „Enter“ auf Eurer Tastatur. Er werdet nun nach Eurem Passwort gefragt, welches Ihr in der erst Einrichtung vergeben habt. Nach der Eingabe drückt Ihr wieder “Enter”

Nachdem Ihr Eure Korrektes Passwort eingeben habt, Seit ihr nun per SSH mit Eurem Raspberry Pi4 verbunden.

Installation von Magic Mirror

1.

Zunächst Aktivieren wir den Open GL-Treiber, um die CPU-Auslastung zu verringern. Dazu geben wir im putty folgenden code ein und bestätigen diesen mit Enter.

sudo nano /boot/config.txt

Wir sind nun in der config.txt Datei und müssen folgenden Wert dort unter dem Punkt [pi4] ergänzen, falls er nicht schon vorhanden ist. Um an den Punk [pi4] zu gelangen, müsst Ihr Eure Pfeiltasten der Tastatur benutzen.

dtoverlay=vc4-kms-v3d

Wenn Ihr die Zeile hinzugefügt habt, drückt „strg + o“ und anschließend auf „Enter“

Jetzt drückt Ihr „strg +x“ und anschließend wieder auf “Enter”. Ihr habt nun die config.txt Datei gespeichert und seid wieder in der Eingabeaufforderung von putty.

2.

Jetzt laden wir die neuste Node.js Version herunter und installieren Sie. Gebt dazu folgenden Code in Eure putty Eingabe Aufforderung ein und drückt “Enter” auf Eurer Tastatur.

curl -sL //deb.nodesource.com/setup_14.x | sudo -E bash -

Nachdem Node.js heruntergeladen wurde, gebt folgenden Befehl in die Eingabeaufforderung ein und bestätigt diesen wierder mit “Enter”.

sudo apt install -y nodejs

Node.js wird jetzt installiert.

3.

Nach der erfolgreichen Installation, Klonen wir die MagicMirror Repository von MichiMichi mit folgendem Code

git clone //github.com/MichMich/MagicMirror

und drücken wie immer auf “Enter”.

Das Klonen benötigt je nach Internetleitung einen kleinen Moment. Zeit sich ein Bier aufzumachen oder mit der Frau zu besprechen, wo der Spiegel denn aufgehangen werden darf.

4.


Klonen abgeschlossen? Perfekt! Nun gehen wir das Verzeichnis von MagicMirror mit folgendem Befehl und bestätigen diesen mit “Enter”

cd MagicMirror/

Wenn wir uns in dem MagicMirror Verzeichnis befinden, geben folgenden Installationsbefehl ein und bestätigen diesen mit „Enter“

npm install

5.
In diesem fünften schritt müssen wir eine Kopie der „Config file“ erstellen und gleichzeitig unebenen. Dazu geben wir diesen Code in die Eingabeaufforderung unseres puttys ein und drücken „Enter“

cp config/config.js.sample config/config.js

6.

Jetzt Starten wir das Programm mit dem Befehl

npm run start

und drücken natürlich “Enter”

Die installation von MagicMirror ist nun abgeschlossen.

MagicMirror automatisch Starten

Die folgenden Methode beschreibt die Möglichkeit, Deinen MagicMirror beim Booten automatisch zu starten.

PM2

PM2 ist ein Produktionsprozessmanager für Node.js-Anwendungen mit integriertem Load Balancer. Es ermöglicht Dir, Anwendungen für immer am Leben zu erhalten, sie ohne Ausfallzeiten neu zu laden und allgemeine Aufgaben der Systemverwaltung zu erleichtern. In diesem Fall verwenden wir es, um ein Shell-Skript am Laufen zu halten.

1.

Verbinde Dich wie oben schon beschrieben per SSH mit Deinem Raspberry Pi4 und gebe folgende code ein und bestätige diesen mit „Enter“

sudo npm install -g pm2

2.

Um sicherzustellen, dass PM2 seine Arbeit beim (Neu-)Booten des Betriebssystems erledigen kann, muss es beim Booten gestartet werden. Zum Glück hat PM2 dafür einen praktischen Helfer. Gebt folgenden Befehl ein:

pm2 startup

und bestätigt anschließend wieder mit “Enter”

3.

Um PM2 in Kombination mit MagicMirror zu verwenden, müssen wir ein einfaches Shell-Skript erstellen. Vorzugsweise legen wir dieses Skript außerhalb des MagicMirror-Ordners ab, um sicherzustellen, dass es keine Probleme gibt, wenn wir den Spiegel aktualisieren möchten. Dazu nutzen wir folgenden Code:

cd ~
nano mm.sh

“Enter” nicht vergessen 😉

Wir befinden uns nun in der Datei mm.sh und müssen folgende Zeilen hinzufügen:

cd ./MagicMirror
DISPLAY=:0 npm start

Anschließend speichern wir die Datei mit „strg+o“ und drücken „Enter“ und verlassen die Datei mit „Strg+x“ und drücken „Enter“

4.

Jetzt vergeben wir noch Lese und schreibrechte auf die Datei mit:

chmod +x mm.sh

Wir sind nun bereit, den MagicMirror mit diesem Skript mit PM2 zu verwenden. Dazu nutzen wir:

pm2 start mm.sh

und drückend anschließend “Enter”

Dein Spiegel sollte jetzt hochfahren und nach einigen Sekunden auf Ihrem Bildschirm erscheinen.

Um sicherzustellen, dass der MagicMirror nach dem Neustart neu gestartet wird, müssen Sie den aktuellen Status aller über PM2 ausgeführten Skripte speichern. Führen Sie dazu folgenden Befehl aus:

pm2 save


Und das ist alles! Dein MagicMirror sollte nun nach dem Start neu starten und nach einem Fehler neu starten.

Wenn MagicMirror über PM2 läuft, haben wir einige praktische Tools zur Hand:

Restart:

pm2 restart mm

Stop:

pm2 stop mm

Anpassung der Ansicht

MagicMirror läuft mit sogenannten Modulen.

In meinem Fall möchte gerne die Uhrzeit und das Home Assistant Lovelace Dashboard auf dem Spiegle anzeigen lassen.

Wenn Ihr weitere Module installieren wollt, empfehle ich Euch folgenden Github Beitrag.

Die Module werden angepasst in der config.js Datei im Magic Mirror Verzeichnis. /home/pi/MagicMirror/config

Hinweis:

Ihr könnt den “VNC Viewer” benutzen um Euch den Bildschirm Eures Raspberry Pi4 auf Eurem Rechner anzeigen zu lassen.

Ihr könnt Euch folgenden Code kopieren und alles in der config.js ersetzten. Dann habt ihr dieselbe Konfiguration, welche ich nutze und könnt diese ggf. ergänzen.

/* Magic Mirror Config Sample
 *
 * By Michael Teeuw //michaelteeuw.nl
 * MIT Licensed.
 *
 * For more information on how you can configure this file
 * see //docs.magicmirror.builders/getting-started/configuration.html#general
 * and //docs.magicmirror.builders/modules/configuration.html
 */
let config = {
	address: "localhost", 	// Address to listen on, can be:
							// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
							// - another specific IPv4/6 to listen on a specific interface
							// - "0.0.0.0", "::" to listen on any interface
							// Default, when address config is left out or empty, is "localhost"
	port: 8080,
	basePath: "/", 	// The URL path where MagicMirror is hosted. If you are using a Reverse proxy
					// you must set the sub path here. basePath must end with a /
	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], 	// Set [] to allow all IP addresses
															// or add a specific IPv4 of 192.168.1.5 :
															// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
															// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
															// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

	useHttps: false, 		// Support HTTPS or not, default "false" will use HTTP
	httpsPrivateKey: "", 	// HTTPS private key path, only require when useHttps is true
	httpsCertificate: "", 	// HTTPS Certificate path, only require when useHttps is true

	language: "en",
	locale: "en-US",
	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
	timeFormat: 24,
	units: "metric",
	// serverOnly:  true/false/"local" ,
	// local for armv6l processors, default
	//   starts serveronly and then starts chrome browser
	// false, default for all NON-armv6l devices
	// true, force serveronly mode, because you want to.. no UI on this device

	modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left"
		},
		
			{
		module: 'MMM-SmartWebDisplay',
		position: 'middle_center',	// This can be any of the regions.
		config: {
			// See 'Configuration options' for more information.
			logDebug: false, //set to true to get detailed debug logs. To see them : "Ctrl+Shift+i"
			height:"600 pixel", //hauteur du cadre en pixel ou %
			width:"1800 pixel", //largeur
               		updateInterval: 0, //in min. Set it to 0 for no refresh (for videos)
                	NextURLInterval: 0, //in min, set it to 0 not to have automatic URL change. If only 1 URL given, it will be updated
                	displayLastUpdate: false, //to display the last update of the URL
					displayLastUpdateFormat: 'ddd - HH:mm:ss', //format of the date and time to display
                	url: ["//EURE_HomeAssistant_Dahsboard_URL",], //source of the URL to be displayed
					scrolling: "no", // allow scrolling or not. html 4 only
					shutoffDelay: 10000 //delay in miliseconds to video shut-off while using together with MMM-PIR-Sensor 
			}
	},
	]
};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}

Installation des Moduls MMM Pageviewer

Um diese Konfiguration nutzen zu können, müssen wir aber das Modul MMM-SmartWebDisplay vorher installieren.

Dazu verbinden wir uns wie gewohnt mit putty zu unserem Raspberry Pi4. (Weiter oben beschrieben)

Stoppt Euren MagicMirror mit folgendem Befehl und bestätigt diesen mit “Enter”

pm2 stop mm

Geht in das MagicMirror verzeichnis. Nutzt dazu den Code:

cd ~/MagicMirror/modules

Klone folgende Repository mit dem Code:

git clone //github.com/edward-shen/MMM-pages.git

Nach dem Klonen passt Eure config.js Datei wie oben beschrieben an und startet Euren Raspberry Pi4 neu.
Das war es auch schon. Im nächsten schritt Programmieren wir den D1 Mini um den Pi4 über eine Gesten Steuerung an oder auszuschalten.

Programmierung des D1 Mini

Mit dem D1 Mini wollen sie werte des APDS9960 auslesen und in Home Assistant verarbeiten.

Neben dem APDS9960 wird auch das Relay an den D1 Mini angeschlossen.

Ihr könnt die Programmierung vornehmen, wenn Ihr den Spiegel komplett zusammengebaut habt.

Wem das aber zu kompliziert ist, kann auch die Programmierung schon vorab auf den D1 Mini installieren. Es wird zu Fehlermeldungen kommen, da der APDS9960 nicht angeschlossen ist. Nach dem Zusammenbau müsst Ihr dann ein “Over The Air Update” machen. Dann sollte der Sensor erkannt werden und wir können die Entsprechenden Automatisierung in Home Assistant über NODERED erstellen.

1.

Öffnet ESPHome in Eurer Home Assitant instanz und erstellt eine neue Konfiguration in dem Unten rechts auf das Grüne Plus Zeichen klickt.

Tragt Eure WLAN-Daten in die entsprechenden Felder ein und klickt anschließend auf „NEXT“.

Wählt im folgenden Fenster ESP8266 aus und klickt wieder auf „NEXT“.

Wenn Ihr alles richtig gemacht habt, dann sollte folgendes Fenster erscheinen, welches ihr mit “CLOSE” Schließen könnt.

2.

Sucht nun in der Übersicht nach Eurer soeben erstellten Konfiguration. In meinem Fall “s4uspiegelanaus” und klickt auf „EDIT“

Kopiert Euch folgenden code und ersetzt den vorhandenen. Bitte denkt daran, Eure WLAN-Daten, und evtl. OTA und API Passwörter einzutragen.

esphome:
  name: s4uspiegelanaus
  platform: ESP8266
  board: d1_mini

wifi:
  ssid: "EUERWALNNAME"
  password: "EUERWALNPASSWORT"

captive_portal:

logger:

api:
  password: "EUERAPIPASSWORT"

ota:
  password: "EUEROTAPASSWORT"

i2c:
  sda: D1
  scl: D2
  scan: true
  id: i2c_bus_1

apds9960:
  address: 0x39
  update_interval: 1s

binary_sensor:
  - platform: apds9960
    direction: UP
    id: apds960_up
    on_state:
      then:
        - text_sensor.template.publish:
            id: direction_status
            state: "UP"

  - platform: apds9960
    direction: DOWN
    id: apds960_down
    on_state:
      then:
        - text_sensor.template.publish:
            id: direction_status
            state: "DOWN"

  - platform: apds9960
    direction: LEFT
    id: apds960_left
    on_state:
      then:
        - text_sensor.template.publish:
            id: direction_status
            state: "LEFT"

  - platform: apds9960
    direction: RIGHT
    id: apds960_right
    on_state:
      then:
        - text_sensor.template.publish:
            id: direction_status
            state: "RIGHT"

text_sensor:
  - platform: template
    name: "Status Wischsensor"
    id: direction_status
    
switch:
  - platform: gpio
    name: "S4U_Spiegel"
    pin: "D8"

Wenn Ihr Eure Daten ergänzt habt, dann klickt unten rechts auf „SAVE“.

Sobald die Konfiguration fertig gespeichert ist, können wir diese auf den D1 Mini kopieren. Klickt dazu bittet auf „INSTALL“

Ihr habt nun verschiedene Auswahlmöglichkeiten, die Konfiguration auf den D1 Mini zu übertragen. Die Methode „Manual download“ hat sich für mich am besten bewährt, weil Sie am wenigsten Fehler verursacht. Klickt also entsprechend auf „Manual download“.

ESPHome generiert Euch nun eine *.bin File welche wir mit dem Programm ESPHomeflasher auf unseren D1 Mini installieren können. Wenn die Kompilierung abgeschlossen ist Speichert die *bin auf Euren Computer und schließt den D1 Mini mit einem USB Kabel an Euren PC an.

Öffnet das Programm ESPHomeflasher und wählt den COM-Port aus an dem Euer D1 Mini angeschlossen. Wählt jetzt noch die zuvor gespeicherte *.bin Datei aus und klickt dann auf „Flash ESP“

Nach dem Euer ESP erfolgreich geflasht wurde, gehen wir zurück in unsere Home Assistant Instanz und gehen in ESPHome. Dort sollte nun die Konfiguration „s4uspiegelanaus“ Grün hinterlegt sein.


Vorerst sind wir an diesem Punkt fertig. Sobald Ihr den Spiegel zusammengebaut habt, müsst Ihr erneut auf „INSTALL“ klicken und dann „Wirelessly“ auswählen. ESPHome kopiert die Konfiguration dann nochmal auf den D1 Mini und erkennt den angeschlossenen APDS9960 Sensor und zeigt diesen dann auch in Home Assistant an.

3.

Nach dem Ihr alles zusammengebaut habt und den D1 Mini erneut geflasht habt, könnt Ihr die Entitäten in Ein Lovelace-Dashboard hinzufügen und die funktionen testen.

Wenn der Sensor Euch die gewünschten „Wischbewegungen im Dashboard darstellt und das Relais schaltet, nachdem ihr den Schalter aktiver, können wir eine Automatisierung erstellen. Öffnet dazu in Eurer Home Assistant Instanz auf Node-Red und legt einen neuen Flow an.

Für die Automatisierung benötigen wir die Funktionen „events-state“ und „call service“. Zieht diese jeweils zweimal in den Flow und verbindet jeweils einen event state am oberen Konnektor mit einem „call service“

Das sollte dann in etwa so aussehen:

Der Erste „event-stade“ wird wie folgt konfiguriert:

Der Erste „call service“ wird wie folgt konfiguriert:

Der Zweite „event-stade“ wird wie folgt konfiguriert:

Der Zweite „call service“ wird wie folgt konfiguriert:

Wenn Ihr die schritte abgeschlossen habt, klickt oben rechts auf „Übernahme (deploy)“

Die Automatisierung bewirkt folgendes:

  • Wenn wir nach „RIGHT“ wischen, schaltet das Relais „on“
  • Wenn wir nach „LEFT“ wischen, schaltet das Relais „off“

Die Programmierung ist hiermit komplett abgeschlossen. Wenn Ihr fragen haben solltet, dann schreibt mir doch eine Mail an info [at] smart-4u.de oder besucht mich auf Instagram.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert