HowTo: Magic Mirror – Show current traffic overview

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


Safety instructions

I know the following notes are always kind of annoying and seem unnecessary. Unfortunately, many people who knew "better" have lost eyes, fingers or other things due to carelessness or injured themselves. Data loss is almost negligible in comparison, but even these can be really annoying. Therefore, please take five minutes to read the safety instructions. Because even the coolest project is not worth injury or other trouble.
https://www.nerdiy.de/sicherheitshinweise/

Affiliate links/advertising links

The links to online shops listed here are so-called affiliate links. If you click on such an affiliate link and make a purchase via this link, Nerdiy.de will receive a commission from the relevant online shop or provider. The price does not change for you. If you make your purchases via these links, you support Nerdiy.de in being able to offer other useful projects in the future. 🙂 


Requirements

Helpful articles:
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.

The following articles describe what you need to do to get everything ready:
RaspberryPi – setup for nerdiys!
RaspberryPi – The first configuration!
RaspberryPi – Control the RaspberryPi via SSH

MagicMirror - Installing the required software

Required tool:
-no-

Required material:

In the following list you will find all the parts you need to implement this article.


Log in to the RaspberryPi via SSH

To start, you must first log in to the Rasp Pi with Putty via SSH. How to do this is in the article RaspberryPi - Control the RaspberryPi via SSH described.

After entering your username and password you can enter the first commands.

Installing the module

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

Install this on your RaspberryPi. How to install your modules is described in the following article:
MagicMirror - Install 3rd party modules


Configuration of the module

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:
Find the latitude and longitude of any location with GoogleMaps

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
keys required Google api key. See below for help.
lat required Latitude used to center the map. See below for help.

Type: float

length required Longitude used to center the map. See below for help.

Type: float

height Height of the map.

Type: string (pixels)
Default values: 300px

width Width of the map.

Type: string (pixels)
Default values: 300px

zoom Zoom value to display from lat/lng.

Type: integer
Default values: 10

mapTypeId The map type to display (roadmap, satellite, hybrid, terrain).

Type: string
Default values: roadmap

styledMapType Style of the map. See below for help.

Type: string
Possible values: defaultdarknightblack or custom
Default values: default

disableDefaultUI Disable default UI buttons (Zoom and Street View).

Type: boolean
Default values: true

updateInterval How often the module should load the map.

Type: internal in milliseconds
Default values: 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 values: 'rgb(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.


More information

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


Have fun with the project

I hope everything worked as described for you. If not or you have questions or suggestions please let me know in the comments. I will then add this to the article if necessary.
Ideas for new projects are always welcome. 🙂

PS Many of these projects - especially the hardware projects - cost a lot of time and money. Of course I do this because I enjoy it, but if you think it's cool that I share the information with you, I would be happy about a small donation to the coffee fund. 🙂

Buy Me a Coffee at ko-fi.com       

20 comments

  1. Hello. Exactly as you present it here, I would like to have it on my mirror. Unfortunately, I always get an error message that the config is wrong.
    Would you help me a little with that?
    Best regards
    Bodo

    1. Hi Bodo,
      this is often due to incorrect formatting of the config file. The tricky thing here is that all the open parentheses have to be properly closed again.
      You can copy your config file here and see if the error messages help you. 🙂 https://jshint.com/
      Otherwise you can also use the config at https://pastebin.com/ upload and send me the link. Then I can take a look if you want.
      Remember to delete any existing API keys or access data from the config before forwarding them to anyone. 🙂
      Best regards
      Fabian

  2. Hello Fabian,
    Sorry I only saw your reply now. sorry I'll try to send you the code tomorrow if I can. In any case, thank you very much for the offered help. I've been at this for weeks and I'm going in circles.
    You hear from me as soon as possible.
    Best regards
    Bodo

    1. Hi Bodo,
      look here: https://pastebin.com/b0iVmzaV
      That should actually work. There were a few commas and brackets that were in the wrong place. You can debug something like that quite well if you do it, for example, under https://js.do/ eingibt und durch einen Klick auf “Run code” die Fehlermeldung anzeigen lässt und abarbeitet. 🙂
      I hope everything works out.
      Best regards
      Fabian

  3. Hello Fabian,
    First of all, thank you very much for your efforts. But unfortunately it didn't work. When I load your code it doesn't boot and writes directly in the mirror that something is wrong with the config.
    Then I went and reloaded my working one. And it works. Then I put only YOUR maps traffic module in MY running conig and then the same message comes up.
    I then copied only the Google Traffic area from YOUR file and loaded it at js.do.
    {
    Modul : ‘MMM-GoogleMapsTraffic’ ,
    Position : ‘top_left’ ,
    configure : {
    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?

    Best regards
    Bodo

    1. Hi Bodo,
      I just watched it again. 🙂
      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

      I hope I understood you correctly about the double brackets. You mean in the uploaded code (under https://pastebin.com/b0iVmzaV) for example the brackets in line 63 and 64 right? If yes: That is correct. You have to make sure that all previously opened parentheses are closed again. For example, the parenthesis on line 63 closes the parenthesis on line 58. The parenthesis on line 64 closes the parenthesis on line 55. Similarly, the square bracket on line 111 closes the square bracket on line 40. With these curly braces code blocks are always combined. It just gets a bit confusing sometimes. Especially when the blocks span multiple lines.

      Last but not least I have the config from https://pastebin.com/b0iVmzaV just loaded into my magic mirror. It will be displayed there. maybe it can be that the error lies in one of the installed modules? If you want, send me a screenshot of your error message. 🙂
      Best regards
      Fabian

  4. Hello Fabian,
    so,......it's going up now. Madness,......after 2 months annoyed. Until now I had always inserted everything from the script file. And now that I've clicked clone above and copied that file, at least I get a Maps window. Albeit with an error message.
    It remains even if I enter the API code and the other two data.
    Greeting Bodo

    1. hey bodo,
      just tried it again. When I enter my API key, longitude and latitude the map is displayed.
      Are you sure you entered the latitude and longitude in the correct format?
      I have pasted the code of the module for you here. You just have to insert the API key and then you should see the traffic around the Reichstag. 🙂 https://pastebin.com/JsprMVFb
      Best regards
      Fabian

  5. Hello Fabian,
    It gets even better. Now the map can be seen, but with an error message about it.
    This page can't load Google Maps correctly.
    In your module there are also many more numbers for latitude and longitude. I took it from the Goggle Maps web address. eg: 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
    And from that then 52.5186222 and 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?
    Greeting Bodo

    1. hey bodo,
      sounds good. 🙂 I would just try not to restrict the API use any further. It may very well be that the error message is related to this. 🙂
      The extra digits in the latitude and longitude are just a little bit more accurate. But since you only want to mark one region anyway, that shouldn't be too tragic.
      Best regards
      Fabian

  6. Hello Fabian,
    Thanks again. I'll try it and then, probably tomorrow, get back to you.
    Best regards
    Bodo

  7. Fabian,
    have lifted all restrictions. message remains. However, I can confirm it with the mouse. Then it stays away until the next time the mirror starts up. But it comes back every time.
    Greeting Bodo

    1. hey bodo,
      strange. But then it must actually be related to the Google API. I did not see this error message. :/ maybe just create a new API access and try it out?
      Best regards
      Fabian

  8. Hello Fabian,
    So,……….have just generated a new API and entered it in the config. Unfortunately without success. The message stays.
    I'll try to delete everything in the cloud platform and then create it again. Let's see what comes out of it. However, everything looks a little different here than in your instructions.
    Best regards
    Bodo

    1. hey bodo,
      that sounds good. 🙂 I keep my fingers crossed that everything goes on like this. 🙂
      Best regards
      Fabian

  9. Hello Fabian, I would like to ask you something else. Just for understanding. Here 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?
    Best regards
    Bodo

    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.
      Do you mean that? 🙂
      Best regards
      Fabian

Kommentar hinterlassen

Your email address will not be published. Erforderliche Felder sind mit * markiert

This site uses Akismet to reduce spam. Learn how your comment data is processed.