HowTo: Magic Mirror – Toon actueel verkeersoverzicht

Geplaatst op door

Een coole en praktische plugin voor de MagicMirror is de plugin “MMM GoogleMapsTraffic“. Hiermee ziet u de status van het huidige wegverkeer in uw omgeving.

Hoe je dit installeert staat beschreven in het volgende artikel

Veiligheidsinstructies

Ik weet dat de volgende opmerkingen altijd een beetje vervelend zijn en onnodig lijken. Helaas hebben veel mensen die "beter" wisten door onvoorzichtigheid ogen, vingers of andere dingen verloren of zichzelf verwond. Gegevensverlies is in vergelijking bijna te verwaarlozen, maar zelfs dit kan erg vervelend zijn. Neem daarom vijf minuten de tijd om de veiligheidsinstructies te lezen. Omdat zelfs het coolste project geen blessure of andere problemen waard is.
https://www.nerdiy.de/sicherheitshinweise/

Affiliate links / reclame links

De hier vermelde links naar online winkels zijn zogenaamde affiliate-links. Als u op zo'n affiliate-link klikt en via deze link een aankoop doet, ontvangt Nerdiy.de een commissie van de betreffende onlineshop of aanbieder. De prijs verandert voor jou niet. Als u via deze links uw aankopen doet, steunt u Nerdiy.de om in de toekomst andere nuttige projecten aan te kunnen bieden. 🙂 

Eisen

Handige artikelen:
Voordat je begint met de installatie, moet je de RaspberryPi hebben voorbereid zodat deze bereikbaar is via het netwerk en bestuurd kan worden via SSH. De MagicMirror-software moet ook zijn ingesteld.

In de volgende artikelen wordt beschreven wat er moet gebeuren om alles voor te bereiden:
RaspberryPi – setup voor nerds!
RaspberryPi – De eerste configuratie!
RaspberryPi – Bedien de RaspberryPi via SSH
MagicMirror - De benodigde software installeren

Vereist gereedschap:
-Nee-

Benodigd materiaal:

In de volgende lijst vindt u alle onderdelen die u nodig heeft om dit artikel te implementeren.

Log in op de RaspberryPi via SSH

Om te beginnen moet je eerst inloggen op de Rasp Pi met Putty via SSH. Hoe je dit doet staat in het artikel RaspberryPi - Bedien de RaspberryPi via SSH beschreven.

Na het invoeren van uw gebruikersnaam en wachtwoord kunt u de eerste opdrachten invoeren.

Het installeren van de module

Om het actuele verkeer in uw regio weer te geven, heeft u de module “MMM-GoogleMapsTraffic” nodig. Je kunt het vinden onder https://github.com/vicmora/MMM-GoogleMapsTraffic

Installeer dit op je RaspberryPi. Hoe u uw modules installeert, wordt beschreven in het volgende artikel:
MagicMirror - Modules van derden installeren

Configuratie van de module

U configureert de module - zoals gebruikelijk met MagicMirror-modules - door de moduleconfiguratie in te voeren in de configuratie van uw MagicMirror-installatie.
Open hiervoor het configuratiebestand van uw MagicMirror-installatie met het volgende commando:

sudo nano ~/MagicMirror/config/config.js

Voordat je echter het volgende configuratiebestand invoert, moet je een paar substituties maken.

{ module: 'MMM-GoogleMapsTraffic', position: 'top_left', config: { sleutel: 'YOUR_KEY', lat: UW_LATITUDE, lng: UW_LONGITUDE, hoogte: '300px', breedte: '300px' styledMapType: "transparant", disableDefaultUI : waar, backgroundColor: 'hsla(0, 0%, 0%, 0)', }, }

Voer de Google Maps API-sleutel in

Om deze module te laten werken, heeft deze toegang nodig tot de GoogleMaps API. Hiervoor is een API-sleutel nodig.
Hoe u een GoogleMaps API-sleutel kunt krijgen, wordt beschreven in het volgende artikel:
Registreer GoogleMaps API-sleutel

Heeft u een Google Maps API-sleutel geregistreerd? Vervang “YOUR_KEY” in de moduleconfiguratie door uw GoogleMaps API-sleutel.

Breedtegraad en lengtegraad invoeren

Naast de API-sleutel heeft de module ook de lengte- en breedtegraad van de gewenste locatie nodig.
Hoe je de lengte- en breedtegraad van een locatie kunt vinden met Google Maps wordt beschreven in het volgende artikel:
Breedtegraad en lengtegraad van een positie bepalen met GoogleMaps

Nadat u de breedte- en lengtegraad van uw gewenste locatie heeft bepaald, vervangt u “YOUR_LATITUDE” door de breedtegraad van uw gewenste locatie en “YOUR_LONGITUDE” door de lengtegraad van uw gewenste locatie.

Meer opties

Naast de bovenstaande opties zijn er nog andere instelbare opties, waarvan de meeste het uiterlijk van de module beïnvloeden.

Een lijst met mogelijke opties:

Citaat uit de module GitHub: https://github.com/vicmora/MMM-GoogleMapsTraffic

Configuratie opties

keuze Beschrijving
sleutels vereist Google api-sleutel. Zie hieronder voor hulp.
lat vereist De breedtegraad werd gebruikt om de kaart te centreren. Zie hieronder voor hulp.

Type: vlot
lengte vereist Lengtegraad gebruikt om de kaart te centreren. Zie hieronder voor hulp.

Type: vlot
hoogte Hoogte van de kaart.

Type: snaar (pixels)
Standaard waarden: 300px
breedte Breedte van de kaart.

Type: snaar (pixels)
Standaard waarden: 300px
zoom Zoomwaarde om weer te geven vanaf lat/lng.

Type: geheel getal
Standaard waarden: 10
mapTypeId Het weer te geven kaarttype (wegenkaart, satelliet, hybride, terrein).

Type: snaar
Standaard waarden: stappenplan
styledMapType Stijl van de kaart. Zie hieronder voor hulp.

Type: snaar
Mogelijke waarden: standaard, donker, nacht, zwart of aangepast
Standaard waarden: standaard
defaultUI uitschakelen Schakel standaard UI-knoppen uit (Zoom en Street View).

Type: booleaans
Standaard waarden: WAAR
Bijwerkingsonderbreking Hoe vaak de module de kaart moet laden.

Type: intern in milliseconden
Standaard waarden: 900000 (15 min)
markeringen Extra markeringen op de kaart als een array. Zie voorbeeld.
Achtergrond kleur Achtergrondkleur achter de kaart.Kan worden ingesteld op transparant ('hsla(0, 0%, 0%, 0)') of links op zwart (standaard).

Type: snaar
Standaard waarden: 'rgb(0, 0, 0, 0)'

De configuratie van deze opties is niet nodig voor een eerste test. Als je ze niet invoert, gebruikt de module de standaardwaarden van de respectieve opties.

resultaat

Als u de configuratie correct hebt ingevoerd, wordt u begroet door het volgende scherm wanneer u de MagicMirror de volgende keer laadt.

Verdere informatie

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

Veel plezier met het project

Ik hoop dat alles werkte zoals beschreven. Zo niet, of als je vragen of suggesties hebt, laat het me weten in de commentaren. Ik zal dit dan zo nodig aan het artikel toevoegen.
Ideeën voor nieuwe projecten zijn altijd welkom. 🙂

PS Veel van deze projecten - vooral de hardwareprojecten - kosten veel tijd en geld. Natuurlijk doe ik dit omdat ik het leuk vind, maar als je het cool vindt dat ik de informatie met je deel, dan zou ik blij zijn met een kleine donatie aan het koffiefonds. 🙂

Koop Me a Coffee op ko-fi.com       

20 comments

  1. Hallo. Precies zoals je het hier presenteert, zou ik het graag op mijn spiegel willen hebben. Helaas krijg ik altijd een foutmelding dat de configuratie niet klopt.
    Help je me daar een beetje mee?
    Hartelijke groeten
    Bodo

    Beantwoorden

    1. hallo bodo,
      dit komt vaak door een onjuiste opmaak van het configuratiebestand. Het lastige hierbij is dat alle geopende haakjes weer goed gesloten moeten worden.
      U kunt uw configuratiebestand hier kopiëren en kijken of de foutmeldingen u helpen. 🙂 https://jshint.com/
      Anders kunt u ook de configuratie gebruiken op https://pastebin.com/ upload en stuur me de link. Dan kan ik even kijken als je wilt.
      Vergeet niet om bestaande API-sleutels of toegangsgegevens uit de configuratie te verwijderen voordat u ze naar iemand doorstuurt. 🙂
      Hartelijke groeten
      Fabian

      Beantwoorden

  2. Hallo Fabian,
    Sorry dat ik je antwoord nu pas zie. Sorry Ik zal proberen je morgen de code te sturen als ik kan. In ieder geval heel erg bedankt voor de aangeboden hulp. Ik ben hier al weken mee bezig en ik ga in cirkels.
    Je hoort zo snel mogelijk van me.
    Hartelijke groeten
    Bodo

    Beantwoorden

    1. hallo bodo,
      kijk hier: https://pastebin.com/b0iVmzaV
      Dat zou eigenlijk moeten werken. Er stonden een paar komma's en haakjes op de verkeerde plaats. Je kunt zoiets heel goed debuggen als je het bijvoorbeeld onder doet https://js.do/ voer de foutmelding in en toon deze en verwerk deze door op “Run code” te klikken. 🙂
      Ik hoop dat alles goed komt.
      Hartelijke groeten
      Fabian

      Beantwoorden

  4. Hallo Fabian,
    Allereerst heel erg bedankt voor je moeite. Maar helaas werkte het niet. Wanneer ik je code laad, start hij niet op en schrijft hij direct in de spiegel dat er iets mis is met de configuratie.
    Toen ging ik en herlaadde mijn werkende. En het werkt. Vervolgens plaats ik alleen UW kaarten-verkeersmodule in MIJN lopende conig en dan verschijnt hetzelfde bericht.
    Ik heb toen alleen het Google Traffic-gebied uit UW bestand gekopieerd en op js.do geladen.
    {
    Module: 'MMM-GoogleMapsTraffic' ,
    Positie : 'top_left' ,
    configureren: {
    Sleutel: 'YOUR_KEY',
    lat: 'UW_LATITUDE',
    lng : 'YOUR_LONGITUDE' ,
    hoogte: '300px',
    breedte: '300px',
    styledMapType : “transparant” ,
    disableDefaultUI: waar,
    achtergrondkleur: 'hsla (0, 0%, 0%, 0)'
    }}
    } ,

    En dan krijg ik de volgende foutmelding: JavaScript-fout: Niet-opgevangen syntaxisfout: Onverwacht token ':' op regel 4

    Kunnen jullie dit alsjeblieft nog eens bekijken? Ik heb ook gemerkt dat er aan het einde van elke module in uw bestand een “dubbel haakje” staat. Is het op die manier juist?

    Hartelijke groeten
    Bodo

    Beantwoorden

    1. hallo bodo,
      Ik heb het net weer bekeken. 🙂
      Heb je de pure configuratiecode aan js.do toegevoegd? Als ik dat doe, krijg ik geen foutmelding. :/ Je kunt hier ook de “onbewerkte” code uit de pastebin bekijken: https://pastebin.com/raw/b0iVmzaV

      Het is begrijpelijk dat er een foutmelding verschijnt als u slechts één module in js.do invoegt. Het gehele configuratiebestand bestaat in principe uit een “keyed collection” (informatie kunt u hier bijvoorbeeld vinden: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Keyed_collections)
      Dit betekent dat als u alleen het hierboven gemarkeerde gedeelte invoegt, de javascript-interpreter niet weet wat voor soort constructie het is en dienovereenkomstig een foutmelding zal genereren. Als u bijvoorbeeld het “declaratiegedeelte” voor de module plaatst, zou het weer moeten werken. Ik heb hier een voorbeeld geüpload: https://pastebin.com/inKvNBh3

      Ik hoop dat ik je goed begrepen heb over de dubbele haakjes. Je bedoelt in de geüploade code (under https://pastebin.com/b0iVmzaV) bijvoorbeeld de haakjes in regel 63 en 64 toch? Zo ja: Dat is juist. Je moet ervoor zorgen dat alle eerder geopende haakjes weer gesloten zijn. Het haakje op regel 63 sluit bijvoorbeeld het haakje op regel 58. Het haakje op regel 64 sluit het haakje op regel 55. Evenzo sluit het vierkante haakje op regel 111 het vierkante haakje op regel 40. Met deze accolades worden codeblokken altijd gecombineerd. Het wordt soms gewoon een beetje verwarrend. Vooral wanneer de blokken meerdere regels overspannen.

      Last but not least heb ik de config van https://pastebin.com/b0iVmzaV net geladen in mijn magische spiegel. Daar wordt het weergegeven. misschien kan het kan het zijn dat de fout in een van de geïnstalleerde modules ligt? Als je wilt, stuur me dan een screenshot van je foutmelding. 🙂
      Hartelijke groeten
      Fabian

      Beantwoorden

  5. Hallo Fabian,
    dus,......het gaat nu omhoog. Waanzin,......na 2 maanden geïrriteerd. Tot nu toe had ik altijd alles uit het scriptbestand ingevoegd. En nu ik hierboven op kloon heb geklikt en dat bestand heb gekopieerd, krijg ik tenminste een Maps-venster. Wel met een foutmelding.
    Het blijft staan, zelfs als ik de API-code en de andere twee gegevens invoer.
    Groet Bodo

    Beantwoorden

    1. hoi bodo,
      heb het net nog eens geprobeerd. Wanneer ik mijn API-sleutel, lengtegraad en breedtegraad invoer, wordt de kaart weergegeven.
      Weet je zeker dat je de lengte- en breedtegraad in het juiste formaat hebt ingevoerd?
      Ik heb de code van de module hier voor je geplakt. U hoeft alleen de API-sleutel in te voeren en dan zou u het verkeer rond de Reichstag moeten zien. 🙂 https://pastebin.com/JsprMVFb
      Hartelijke groeten
      Fabian

      Beantwoorden

  6. Hallo Fabian,
    Het wordt nog beter. Nu is de kaart te zien, maar met een foutmelding erover.
    Deze pagina kan Google Maps niet correct laden.
    In je module staan ook nog veel meer getallen voor lengte- en breedtegraad. Ik heb het van het Goggle Maps-webadres gehaald. bijv.: 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
    En daaruit dan 52.5186222 en 13.3741289
    Maar dat heeft niets met de foutmelding te maken. Misschien heb ik iets verkeerd gedaan op het Maps-platform. Daar heb ik de API-code beperkt tot “Maps Java Script API” en “Maps Static API”. Zou dat de fout kunnen zijn?
    Groet Bodo

    Beantwoorden

    1. hoi bodo,
      klinkt goed. 🙂 Ik zou gewoon proberen het API-gebruik niet verder te beperken. Het kan heel goed zijn dat de foutmelding hiermee te maken heeft. 🙂
      De extra cijfers in de lengte- en breedtegraad zijn net iets nauwkeuriger. Maar aangezien je toch maar één regio wilt markeren, zou dat niet al te tragisch moeten zijn.
      Hartelijke groeten
      Fabian

      Beantwoorden

  7. Hallo Fabian,
    Nogmaals bedankt. Ik zal het proberen en dan, waarschijnlijk morgen, kom ik bij je terug.
    Hartelijke groeten
    Bodo

    Beantwoorden

  8. fabian,
    hebben alle beperkingen opgeheven. bericht blijft. Ik kan het echter bevestigen met de muis. Dan blijft het weg tot de volgende keer dat de spiegel opstart. Maar het komt elke keer weer terug.
    Groet Bodo

    Beantwoorden

    1. hoi bodo,
      vreemd. Maar dan moet het wel degelijk gerelateerd zijn aan de Google API. Ik heb deze foutmelding niet gezien. :/ misschien gewoon een nieuwe API-toegang maken en uitproberen?
      Hartelijke groeten
      Fabian

      Beantwoorden

  9. Hallo Fabian,
    Dus, ………….heb zojuist een nieuwe API gegenereerd en ingevoerd in de configuratie. Helaas zonder succes. Het bericht blijft.
    Ik zal proberen alles in het cloudplatform te verwijderen en het vervolgens opnieuw te maken. Laten we eens kijken wat eruit komt. Alles ziet er hier echter een beetje anders uit dan in uw instructies.
    Hartelijke groeten
    Bodo

    Beantwoorden

  12. Hallo Fabian, ik wil je nog iets vragen. Gewoon voor begrip. Hier https://pastebin.com/b0iVmzaV in regel 53 (in Java Script) zie je dit “dubbele haakje”. Onderaan het RAW bestand zit alleen een haakje op dezelfde plek dat gesloten is. Wat is hier het verschil?
    Hartelijke groeten
    Bodo

    Beantwoorden

    1. hallo bodo,
      Ik weet niet precies wat je bedoelt. Volgens mij staat er een accolade in regel 53 en één in regel 54. De haak in regel 53 sluit het blok af dat werd geopend met de haak in regel 44 “config: {”. De beugel in regel 54 sluit het blok af dat in regel 41 werd geopend.
      Bedoel je dat? 🙂
      Hartelijke groeten
      Fabian

      Beantwoorden

Kommentar hinterlassen

Het e-mailadres wordt niet gepubliceerd. Erforderliche Felder sind mit * markiert

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.