HowTo: Magic Mirror – Aktuelle Verkehrsübersicht anzeigen

Veröffentlicht am von

Ein cooles und praktisches Plugin für den MagicMirror ist das Plugin “MMM-GoogleMapsTraffic“. Dieses zeigt euch den Status des aktuellen Straßenverkehrs in Eurer Umgebung an.

Wie Ihr dies installiert ist im folgenden Artikel beschrieben

Sicherheitshinweise

Ich weiß die folgenden Hinweise sind immer irgendwie lästig und wirken unnötig. Aber leider haben schon viele Menschen die es "besser" wussten aus Leichtsinnigkeit Augen, Finger oder anderes verloren bzw. sich verletzt. Im Vergleich dazu ist ein Datenverlust fast nicht der Rede Wert, aber auch diese können echt ärgerlich sein. Deswegen nehmt Euch bitte fünf Minuten Zeit um die Sicherheitshinweise zu lesen. Denn auch das coolste Projekt ist keine Verletzung oder anderen Ärger wert.
https://www.nerdiy.de/sicherheitshinweise/

Affiliatelinks/Werbelinks

Die hier in aufgeführten Links zu Online-Shops sind sogenannte Affiliate-Links. Wenn Du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekommt Nerdiy.de von dem betreffenden Online-Shop oder Anbieter eine Provision. Für Dich verändert sich der Preis nicht. Falls Du Deine Einkäufe über diese Links tätigst unterstützt Du Nerdiy.de dabei auch in Zukunft weitere nützliche Projekte anbieten zu können. 🙂 

Voraussetzungen

Hilfreiche Artikel:
Bevor ihr mit der Installation startet solltet ihr den RaspberryPi soweit vorbereitet haben, dass dieser über das Netzwerk erreichbar und per SSH Steuerbar ist. Außerdem sollte die MagicMirror-Software eingerichtet sein.

Die folgenden Artikel beschreiben was zu tun ist um alles soweit vorzubereiten:
RaspberryPi – Einrichten für Nerdiys!
RaspberryPi – Die Erste Konfiguration!
RaspberryPi – Den RaspberryPi über SSH steuern
MagicMirror – Installation der benötigten Software

Benötigtes Werkzeug:
-keins-

Benötigtes Material:

In der folgenden Liste findet Ihr alle Teile die Ihr zur Umsetzung dieses Artikels benötigt.

Per SSH auf dem RaspberryPi einloggen

Um zu beginnen müsst Ihr Euch als erstes mit Putty per SSH auf dem RasPi einloggen. Wie das geht ist im Artikel RaspberryPi - Den RaspberryPi über SSH steuern beschrieben.

Nach der Eingabe Eures Benutzernamen und Passworts könnt Ihr die ersten Befehle eingeben.

Installation des Moduls

Damit ihr euch den aktuellen Straßenverkehr in Eurer Umgebung anzeigen könnt benötigt Ihr das Modul “MMM-GoogleMapsTraffic”. Ihr findet es unter https://github.com/vicmora/MMM-GoogleMapsTraffic

Installiert dies auf eurem RaspberryPi. Wie Ihr Module installiert ist im folgendem Artikel beschrieben:
MagicMirror – 3rd-Party-Module installieren

Konfiguration des Moduls

Das Modul konfiguriert Ihr – wie von MagicMirror-Modulen gewohnt – indem Ihr die Modul-Konfiguration in die Konfiguration Eurer MagicMirror Installation eintragt.
Öffnet dazu die Konfigurationsdatei Eurer MagicMirror-Installation mit folgendem Befehl:

sudo nano ~/MagicMirror/config/config.js

Bevor Ihr die folgende Konfigurationsdatei eintragt müsst Ihr allerdings noch ein paar Ersetzungen vornehmen.

{
     module: 'MMM-GoogleMapsTraffic',
     position: 'top_left',
     config: {
         key: 'YOUR_KEY',
         lat: YOUR_LATITUDE,
         lng: YOUR_LONGITUDE,
         height: '300px',
         width: '300px'
         styledMapType: "transparent",
         disableDefaultUI: true,
         backgroundColor: 'hsla(0, 0%, 0%, 0)',
     },
 }

Google Maps API-Key eintragen

Damit dieses Modul funktioniert benötigt es Zugriff auf die GoogleMaps API. Dazu ist ein API-Key notwendig.
Wie Ihr einen GoogleMaps API Key bekommt ist in folgendem Artikel beschrieben:
GoogleMaps API-Key registrieren

Habt Ihr einen Google-Maps API-Key registriert. ersetzt Ihr in der Modul-Konfiguration “YOUR_KEY” durch Euren GoogleMaps API-Key.

Breiten- und Längengrad eintragen

Neben dem API-Key benötigt das Modul außerdem den Breiten- und Längengrad des gewünschten Ortes.
Wie Ihr mithilfe von Google-Maps den Breiten- und Längengrad eines beliebigen Ortes herausfindet ist in folgendem Artikel beschrieben:
Breiten- und Längengrad einer beliebigen Position mit GoogleMaps ermitteln

Habt Ihr Breiten- und Längengrad Eures gewünschten Ortes ermittelt ersetzt Ihr “YOUR_LATITUDE” durch den Breitengrad Eures gewünschten Ortes und “YOUR_LONGITUDE” durch den Längengrad Eures gewünschten Ortes.

Weitere Optionen

Neben den oben angegebenen Optionen gibt es noch weitere einstellbare Optionen, welche zum Großteil das Aussehen des Moduls beeinflussen.

Eine Liste der Möglichen Optionen:

Zitat aus dem Modul-GitHub: https://github.com/vicmora/MMM-GoogleMapsTraffic

Configuration options

Option Description
key Required Google api key. See below for help.
lat Required Latitude used to center the map. See below for help.

Type: float
lng Required Longitude used to center the map. See below for help.

Type: float
height Height of the map.

Type: string (pixels)
Default value: 300px
width Width of the map.

Type: string (pixels)
Default value: 300px
zoom Zoom value to display from lat/lng.

Type: integer
Default value: 10
mapTypeId The map type to display (roadmap, satellite, hybrid, terrain).

Type: string
Default value: roadmap
styledMapType Style of the map. See below for help.

Type: string
Possible value: standard, dark, night, black or custom
Default value: standard
disableDefaultUI Disable default UI buttons (Zoom and Street View).

Type: boolean
Default value: true
updateInterval How often the module should load the map.

Type: int in millisecond
Default value: 900000 (15 mins)
markers Additional markers in the map as an array. See example.
backgroundColor Backgound behind the map.Can be set to transparent ('hsla(0, 0%, 0%, 0)') or left at black (default).

Type: string
Default value: 'rgba(0, 0, 0, 0)'

Die Konfiguration dieser Optionen sind für einen ersten Test nicht notwendig. Solltet Ihr sie nicht eintragen verwendet das Modul die Standardwerte der jeweiligen Optionen.

Resultat

Habt Ihr die Konfiguration korrekt eingetragen sollte euch beim nächsten Laden das MagicMirrors folgende Anzeige begrüßen.

Weitere Informationen

https://github.com/MichMich/MagicMirror
https://github.com/vicmora/MMM-GoogleMapsTraffic

Viel Spaß mit dem Projekt

Ich hoffe bei euch hat alles wie beschrieben funktioniert. Falls nicht oder ihr Fragen oder Anregungen habt lasst es mich in den Kommentaren bitte wissen. Ich trage dies dann ggf. in den Artikel nach.
Auch Ideen für neue Projekte sind immer gerne willkommen. 🙂

P.S. Viele dieser Projekte - besonders die Hardwareprojekte - kosten viel Zeit und Geld. Natürlich mache ich das weil ich Spaß daran habe, aber wenn Du es cool findest, dass ich die Infos dazu mit Euch teile, würde ich mich über eine kleine Spende an die Kaffeekasse freuen. 🙂

Buy Me a Coffee at ko-fi.com       

20 Kommentare

  1. Hallo. Genau so, wie Du es hier vorstellst, hätte ich es gerne auf meinem Mirror. Leider aber bekomme ich dann immer einer Fehlermeldung, das die Config nicht stimmt.
    Würdest Du mir da ein wenig helfen?
    Viele Grüße
    Bodo

    Antworten

    1. Hi Bodo,
      das liegt oft an einer fehlerhaften Formatierung der Config-Datei. Das kniffelige hier ist, dass alle geöffneten Klammern auch wieder korrekt geschlossen werden müssen.
      Du kannst deine Config-Datei ja mal hier rein kopieren und gucken ob Dir die Fehlermeldungen weiterhelfen. 🙂 https://jshint.com/
      Ansonsten kannst du die Config aber auch bei https://pastebin.com/ hochladen und mir den link senden. Dann kann ich mir das mal angucken, wenn du das willst.
      Denk dran eventuell vorhandene API Keys oder Zugangsdaten aus der Config zu löschen bevor du sie an irgendwen weiterleitest. 🙂
      Beste Grüße
      Fabian

      Antworten

  2. Hallo Fabian,
    habe Deine Antwort leider erst jetzt gesehen. Sorry. Ich werde mal versuchen ob ich es morgen schaffe, Dir den Code zu schicken. Auf jeden Fall aber jetzt schon mal vielen vielen Dank für die angebotene Hilfe. Ich bin da seit Wochen dran und drehe mich im Kreis.
    Ich melde mich schnellst möglich.
    Viele Grüße
    Bodo

    Antworten

    1. Hi Bodo,
      gucke mal hier: https://pastebin.com/b0iVmzaV
      Das müsste eigentlich funktionieren. Es gab ein paar Kommas und Klammern die an der falschen Stelle waren. Man kann sowas ganz gut debuggen, wenn man es zum Beispiel unter https://js.do/ eingibt und durch einen Klick auf “Run code” die Fehlermeldung anzeigen lässt und abarbeitet. 🙂
      Ich hoffe es klappt alles.
      Beste Grüße
      Fabian

      Antworten

  4. Hallo Fabian,
    zunächst einmal vielen vielen Dank für Deine Bemühungen. Es hat aber leider nicht geklappt. Wenn ich Deinen Code lade, bootet er nicht und schreibt direkt im Spiegel, dass etwas mit der Config nicht stimmt.
    Dann bin ich hin gegangen und habe meine funktionierende wieder geladen. Und die läuft. Dann habe ich in MEINE laufende Conig nur DEIN Maps Traffic Modul reingepackt und dann kommt die gleiche Meldung.
    Darauf hin habe ich aus DEINER Datei nur den Bereich Google Traffic kopiert und bei js.do geladen.
    {
    Modul : ‘MMM-GoogleMapsTraffic’ ,
    Position : ‘top_left’ ,
    config : {
    Schlüssel : ‘YOUR_KEY’ ,
    lat : ‘YOUR_LATITUDE’ ,
    lng : ‘YOUR_LONGITUDE’ ,
    Höhe : ‘300px’ ,
    Breite : ‘300px’ ,
    styledMapType : “transparent” ,
    disableDefaultUI : true ,
    backgroundColor : ‘hsla (0, 0%, 0%, 0)’
    }}
    } ,

    Und dann erhalte ich folgende Fehlermeldung: JavaScript-Fehler: Nicht erfasster Syntaxfehler: Unerwartetes Token ‘:’ in Zeile 4

    Könntest Du Dir das bitte nochmal ansehen? Weiterhin ist mir aufgefallen, das in Deiner Datei jeweils am Ende eines jeden Moduls eine “Doppelklammer” ist. Ist das so richtig?

    Viele Grüße
    Bodo

    Antworten

    1. Hi Bodo,
      ich habe mir das gerade nochmal angeguckt. 🙂
      Hast du den reinen Code der config bei js.do eingefügt? Wenn ich das mache zeigt er mir keine Fehlermeldung an. :/ Den “raw” code aus dem pastebin kannst du dir auch hier anzeigen lassen: https://pastebin.com/raw/b0iVmzaV

      Das es eine Fehlermeldung gibt, wenn du nur ein Modul bei js.do einfügst ist nachvollziehbar. Die ganze config-datei besteht im Prinzip aus einer “Keyed collection” (Infos findest du zum Beispiel hier: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Keyed_collections)
      Das heißt, wenn du nur den oben markierten Teil einfügst, weiß der javascript Interpreter gar nicht um was für ein Konstrukt es sich da handelt und wirft dementsprechend eine Fehlermeldung. Wenn du zum Beispiel den “Deklarationsteil” vor das Modul packst sollte es wieder klappen. Ein Beispiel habe ich mal hier hochgeladen: https://pastebin.com/inKvNBh3

      Ich hoffe ich habe dich richtig verstanden, was die Doppelklammern angeht. Du meinst in dem hochgeladenen Code (unter https://pastebin.com/b0iVmzaV) zum Beispiel die Klammern in Zeile 63 und 64 oder? Falls ja: Das ist richtig so. Man muss drauf achten, dass alle zuvor geöffneten Klammern auch wieder geschlossen werden. So Schließt die Klammer in Zeile 63 zum Beispiel die Klammer von Zeile 58. Die Klammer aus Zeile 64 schließt die Klammer aus Zeile 55. Ähnliches gilt für die eckige Klammer in Zeile 111. Diese schließt die eckig Klammer aus Zeile 40. Mit diesen geschweiften Klammern werden also immer Codeblöcke zusammengefasst. Das wird nur manchmal etwas unübersichtlich. Gerade, wenn die Blöcke über mehrere Zeilen gehen.

      Zu guter letzt habe ich die config von https://pastebin.com/b0iVmzaV mal eben in meinen magic mirror geladen. Dort wird sie angezeigt. Kann es vllt. sein, dass der Fehler in einem der installierten Module liegt? Wenn du möchtest schick mir doch mal einen Screenshot von deiner Fehlermeldung. 🙂
      Beste Grüße
      Fabian

      Antworten

  5. Hallo Fabian,
    also,…….es geht jetzt aufwärts. Wahnsinn,……nach 2 Monaten ärgern. Ich hatte bis jetzt immer alles aus der Script Datei eingefügt. Und jetzt, wo ich oben auf Klon geklickt und diese Datei kopiert habe, bekomme ich zumindest schon einmal ein Maps Fenster. Wenn auch mit Fehlermeldung.
    Die bleibt, auch wenn ich den API Code und die beiden anderen Daten eingebe.
    Gruß Bodo

    Antworten

    1. Hey Bodo,
      habe es gerade nochmal ausprobiert. Wenn ich meinen API Key, Längengrad und Breitengrad eingebe wird die Karte angezeigt.
      Bist du dir sicher, dass du den Breiten und Längengrad im richtigen Format eingetragen hast?
      Ich habe dir hier mal den Code des Moduls eingefügt. Du musst nur noch den API key einfügen und dann sollte dir der Verkehr um den Reichstag angezeigt werden. 🙂 https://pastebin.com/JsprMVFb
      Beste Grüße
      Fabian

      Antworten

  6. Hallo Fabian,
    es wird immer besser. Jetzt ist zwar die Karte zu sehen, allerdings mit einer Fehlermeldung drüber.
    This page can’t load Google Maps correctly.
    In Deinem Modul sind beim Breiten und Längengrad auch viel mehr Zahlen. Ich hatte die aus der Web Adresse von Goggle Maps entnommen. z.B.: https://www.google.com/maps/place/Reichstagsgeb%C3%A4ude,+Platz+der+Republik+1,+10557+Berlin/@52.5186222,13.3741289,17z/data=!3m1!4b1!4m5!3m4!1s0x47a851c748c80e45:0xbf985f98f930a812!8m2!3d52.518619!4d13.3763176
    Und daraus dann 52.5186222 und 13.3741289
    Aber das hat doch nichts mit der Fehlermeldung zu tun. Vielleicht habe ich ja auch auf der Maps Plattform etwas falsch gemacht. Dort habe ich den API Code auf “Maps Java Script API” und “Maps Static API” eingeschränkt. Könnte das der Fehler gewesen sein?
    Gruß Bodo

    Antworten

    1. Hey Bodo,
      das klingt doch gut. 🙂 Ich würde einfach mal versuchen den API Gebrauch nicht weiter einzuschränken. Das kann sehr gut sein, dass die Fehlermeldung damit zusammenhängt. 🙂
      Die zusätzlichen Ziffern in dem Breiten- und Längengrad sind nur eine etwas genauere Angabe. Da du aber eh nur eine Region kennzeichnen willst sollte das nicht weiter tragisch sein.
      Beste Grüße
      Fabian

      Antworten

  7. Hallo Fabian,
    nochmals vielen Dank. Ich werde es ausprobieren und mich dann, wahrscheinlich morgen, bei Dir melden.
    Viele Grüße
    Bodo

    Antworten

  8. Fabian,
    habe alle Einschränkungen aufgehoben. Meldung bleibt. Ich kann sie allerdings mit der Maus bestätigen. Dann bleibt sie bis zum nächsten starten des Spiegels weg. Kommt aber jedes mal wieder.
    Gruß Bodo

    Antworten

    1. Hey Bodo,
      seltsam. Dann muss es aber tatsächlich iwie mit der Google API zusammenhängen. Mir wurde diese Fehlermeldung nicht angezeigt. :/ Vllt. einfach mal einen neuen API Zugang erstellen und ausprobieren?
      Beste Grüße
      Fabian

      Antworten

  9. Hallo Fabian,
    also,……….habe soeben eine neue API generiert und eingetragen in der Config. Leider ohne Erfolg. Die Meldung bleibt.
    Ich werde mal versuchen alles in der Cloud Plattform zu löschen und dann neu zu erstellen. Mal sehen was dann dabei raus kommt. Allerdings sieht hier auch alles ein wenig anders wie in Deiner Anleitung aus.
    Viele Grüße
    Bodo

    Antworten

  10. Fabian !!!!!!!!!
    Es ist geschafft !!!!!!!!!! Dank dieser Anleitung hier https://www.wpgmaps.com/documentation/creating-a-google-maps-api-key/
    habe ich die Fehlermeldung weg bekommen. Es war etwas mit den Anmeldedaten und dem verknüpften Konto bei Google.
    Ich will aber erst mal noch einen Tag abwarten, ob nicht doch noch der Teufel wieder zurück kommt.
    Bis dahin, Dir auf jeden Fall aber schonmal vielen vielen Dank!!!!!!!!!!!!!!!
    Ich melde mich aber nochmal bei Dir.
    Viele Grüße
    Bodo

    Antworten

  12. Hallo Fabian, ich würde Dich da gerne noch etwas fragen. Nur zum Verständnis. Hier https://pastebin.com/b0iVmzaV in Zeile 53 (in Java Script) sieht man diese “Doppelklammer”. Unten dann in der RAW Datei ist an der gleichen Stelle aber nur eine Klammer die geschlossen wird. Was ist denn hier der Unterschied?
    Viele Grüße
    Bodo

    Antworten

    1. Hi Bodo,
      ich bin mir nicht ganz sicher, was du meinst. In der Ansicht bei mir ist eine geschweifte Klammer in Zeile 53 und eine in zeile 54. Die KLammer in Zeile 53 schließt den Block welcher mit der Klammer in Zeile 44 “config: {” geöffnet wurde. Die Klammer in Zeile 54 schließt den Block der in Zeile 41 geöffnet wurde.
      Meintest du das? 🙂
      Beste Grüße
      Fabian

      Antworten

Kommentar hinterlassen

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.