HowTo : Magic Mirror - Afficher l'aperçu du trafic actuel

Publié le 28. February 2019 par Fab

Un plugin cool et pratique pour le MagicMirror est le plugin «MMM Trafic GoogleMaps« . Cela vous montre l'état du trafic routier actuel dans votre région.

Comment l'installer est décrit dans l'article suivant

Consignes de sécurité

Je sais que les notes suivantes sont toujours un peu ennuyeuses et semblent inutiles. Malheureusement, de nombreuses personnes qui savaient "mieux" ont perdu des yeux, des doigts ou d'autres choses à cause d'une négligence ou se sont blessées. La perte de données est presque négligeable en comparaison, mais même celles-ci peuvent être vraiment ennuyeuses. Par conséquent, veuillez prendre cinq minutes pour lire les consignes de sécurité. Parce que même le projet le plus cool ne vaut pas une blessure ou d'autres problèmes.
https://www.nerdiy.de/sicherheitshinweise/

Liens d'affiliation/publicitaires

Les liens vers des boutiques en ligne répertoriés ici sont des liens dits d'affiliation. Si vous cliquez sur un tel lien d'affiliation et effectuez un achat via ce lien, Nerdiy.de recevra une commission de la boutique en ligne ou du fournisseur concerné. Le prix ne change pas pour vous. Si vous effectuez vos achats via ces liens, vous aidez Nerdiy.de à pouvoir proposer d'autres projets utiles à l'avenir. 🙂

Conditions préalables

Articles utiles :
Avant de commencer l'installation, vous devez avoir préparé le RaspberryPi pour qu'il soit accessible via le réseau et contrôlé via SSH. De plus, le logiciel MagicMirror doit être configuré.

Les articles suivants décrivent ce qu'il faut faire pour tout préparer :
RaspberryPi - configuration pour les nerdiys !
RaspberryPi – La première configuration !
RaspberryPi - Contrôlez le RaspberryPi via SSH
MagicMirror - Installation du logiciel requis

Outil requis :
-Non-

Matériel requis :

Dans la liste suivante, vous trouverez toutes les pièces dont vous avez besoin pour mettre en œuvre cet article.

Connectez-vous au RaspberryPi via SSH

Pour commencer, vous devez d'abord vous connecter au Rasp Pi avec Putty via SSH. Comment faire cela est dans l'article RaspberryPi - Contrôlez le RaspberryPi via SSH décrites.

Après avoir entré votre nom d'utilisateur et votre mot de passe, vous pouvez entrer les premières commandes.

Installation du module

Afin que vous puissiez afficher le trafic actuel dans votre région, vous avez besoin du module « MMM-GoogleMapsTraffic ». Vous pouvez le trouver sous https://github.com/vicmora/MMM-GoogleMapsTraffic

Installez-le sur votre RaspberryPi. L'installation de vos modules est décrite dans l'article suivant :
MagicMirror - Installer des modules tiers

Paramétrage du module

Vous configurez le module - comme vous en avez l'habitude avec les modules MagicMirror - en saisissant la configuration du module dans la configuration de votre installation MagicMirror.
Pour cela, ouvrez le fichier de configuration de votre installation MagicMirror avec la commande suivante :

sudo nano ~/MagicMirror/config/config.js

Avant d'entrer dans le fichier de configuration suivant, cependant, vous devez effectuer quelques remplacements.

{ 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)', }, }

Entrez la clé API Google Maps

Pour que ce module fonctionne, il doit avoir accès à l'API GoogleMaps. Une clé API est nécessaire pour cela.
Comment obtenir une clé API GoogleMaps est décrit dans l'article suivant :
Enregistrer la clé API GoogleMaps

Avez-vous enregistré une clé API Google Maps ? Remplacez « VOTRE_CLÉ » dans la configuration du module par votre clé API GoogleMaps.

Entrez la latitude et la longitude

En plus de la clé API, le module a également besoin de la latitude et de la longitude de l'emplacement souhaité.
Comment connaître la latitude et la longitude de n'importe quel endroit à l'aide de Google Maps est décrit dans l'article suivant :
Trouvez la latitude et la longitude de n'importe quel endroit avec GoogleMaps

Une fois que vous avez déterminé la latitude et la longitude de votre emplacement souhaité, remplacez « VOTRE_LATITUDE » par la latitude de votre emplacement souhaité et « VOTRE_LONGITUDE » par la longitude de votre emplacement souhaité.

Plus d'options

En plus des options répertoriées ci-dessus, il existe d'autres options ajustables qui affectent largement l'apparence du module.

Une liste d'options possibles :

Citant le module GitHub : https://github.com/vicmora/MMM-GoogleMapsTraffic

Possibilités de configuration

option Description

clés requis Clé API Google. Voir ci-dessous pour obtenir de l'aide.

lat requis Latitude utilisée pour centrer la carte. Voir ci-dessous pour obtenir de l'aide.

Taper: flotter

longueur requis Longitude utilisée pour centrer la carte. Voir ci-dessous pour obtenir de l'aide.

Taper: flotter

hauteur Hauteur de la carte.

Taper: chaîne (pixels)
Les valeurs par défaut: 300px

largeur Largeur de la carte.

Taper: chaîne (pixels)
Les valeurs par défaut: 300px

Zoom Valeur de zoom à afficher à partir de lat/lng.

Taper: entier
Les valeurs par défaut: 10

mapTypeId Le type de carte à afficher (feuille de route, satellite, hybride, terrain).

Taper: chaîne
Les valeurs par défaut: feuille de route

styledMapType Style de la carte. Voir ci-dessous pour obtenir de l'aide.

Taper: chaîne
Valeurs possibles: défaut, sombre, nuit, noir ou coutume
Les valeurs par défaut: défaut

désactiver l'interface utilisateur par défaut Désactivez les boutons d'interface utilisateur par défaut (Zoom et Street View).

Taper: booléen
Les valeurs par défaut: vrai

intervalle de mise à jour La fréquence à laquelle le module doit charger la carte.

Taper: interne en millisecondes
Les valeurs par défaut: 900000 (15 minutes)

Marqueurs Marqueurs supplémentaires dans la carte sous forme de tableau. Voir exemple.

Couleur de l'arrière plan Arrière-plan derrière la carte.Peut être défini sur transparent ('hsla(0, 0%, 0%, 0)') ou à gauche en noir (par défaut).

Taper: chaîne
Les valeurs par défaut: 'rgb(0, 0, 0, 0)'

option	Description
`clés`	requis Clé API Google. Voir ci-dessous pour obtenir de l'aide.
`lat`	requis Latitude utilisée pour centrer la carte. Voir ci-dessous pour obtenir de l'aide. Taper: `flotter`
`longueur`	requis Longitude utilisée pour centrer la carte. Voir ci-dessous pour obtenir de l'aide. Taper: `flotter`
`hauteur`	Hauteur de la carte. Taper: `chaîne` (pixels) Les valeurs par défaut: `300px`
`largeur`	Largeur de la carte. Taper: `chaîne` (pixels) Les valeurs par défaut: `300px`
`Zoom`	Valeur de zoom à afficher à partir de lat/lng. Taper: `entier` Les valeurs par défaut: `10`
`mapTypeId`	Le type de carte à afficher (feuille de route, satellite, hybride, terrain). Taper: `chaîne` Les valeurs par défaut: `feuille de route`
`styledMapType`	Style de la carte. Voir ci-dessous pour obtenir de l'aide. Taper: `chaîne` Valeurs possibles: `défaut`, `sombre`, `nuit`, `noir` ou coutume Les valeurs par défaut: `défaut`
`désactiver l'interface utilisateur par défaut`	Désactivez les boutons d'interface utilisateur par défaut (Zoom et Street View). Taper: `booléen` Les valeurs par défaut: `vrai`
`intervalle de mise à jour`	La fréquence à laquelle le module doit charger la carte. Taper: `interne` en millisecondes Les valeurs par défaut: `900000 (15 minutes)`
`Marqueurs`	Marqueurs supplémentaires dans la carte sous forme de tableau. Voir exemple.
`Couleur de l'arrière plan`	Arrière-plan derrière la carte.Peut être défini sur transparent (`'hsla(0, 0%, 0%, 0)'`) ou à gauche en noir (par défaut). Taper: `chaîne` Les valeurs par défaut: `'rgb(0, 0, 0, 0)'`

La configuration de ces options n'est pas nécessaire pour un premier test. Si vous ne les saisissez pas, le module utilise les valeurs par défaut des options respectives.

résultat

Si vous avez entré la configuration correctement, les MagicMirrors devraient vous accueillir avec l'affichage suivant la prochaine fois que vous le chargez.

Plus d'informations

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

Amusez-vous avec le projet

J'espère que tout a fonctionné comme décrit. Si ce n'est pas le cas ou si vous avez des questions ou des suggestions, faites-le moi savoir dans les commentaires. Je les ajouterai à l'article si nécessaire.
Les idées de nouveaux projets sont toujours les bienvenues. 🙂

PS Beaucoup de ces projets - en particulier les projets matériels - coûtent beaucoup de temps et d'argent. Bien sûr, je le fais parce que j'aime ça, mais si vous pensez que c'est cool que je partage l'information avec vous, je serais heureux d'un petit don au fonds du café. 🙂

Messages similaires

20 commentaires

Bodo dit :

6. March 2021 à 10:36

Bonjour. Exactement comme vous le présentez ici, je voudrais l'avoir sur mon miroir. Malheureusement, je reçois toujours un message d'erreur indiquant que la configuration est incorrecte.
Pourriez-vous m'aider un peu avec ça?
Cordialement
Bodo

Répondre
1. Fab dit :
  
  6. March 2021 à 21:10
  
  Salut Bodo,
  cela est souvent dû à un formatage incorrect du fichier de configuration. La difficulté ici est que toutes les parenthèses ouvertes doivent être correctement refermées.
  Vous pouvez copier votre fichier de configuration ici et voir si les messages d'erreur vous aident. 🙂 https://jshint.com/
  Sinon, vous pouvez également utiliser la configuration à https://pastebin.com/ téléchargez et envoyez-moi le lien. Ensuite, je peux jeter un œil si vous voulez.
  N'oubliez pas de supprimer toutes les clés d'API existantes ou d'accéder aux données de la configuration avant de les transmettre à qui que ce soit. 🙂
  Cordialement
  Fabien
  
  Répondre
Bodo dit :

11. March 2021 à 19:41

Bonjour Fabien,
Désolé, je ne vois votre réponse que maintenant. Désolé J'essaierai de vous envoyer le code demain si je peux. En tout cas merci beaucoup pour l'aide proposée. J'y suis depuis des semaines et je tourne en rond.
Vous avez de mes nouvelles dès que possible.
Cordialement
Bodo

Répondre
Bodo dit :

12. March 2021 à 11:40

Bonjour Fabien,
si je l'ai bien fait tu devrais être là https://pastebin.com/KiYNnauD voir le contenu de la config.
Le code de Google Cloud était là en tant qu'API. De même la longitude et la latitude.

Cordialement
Bodo

Répondre
1. Fab dit :
  
  12. March 2021 à 17:43
  
  Salut Bodo,
  regarde ici: https://pastebin.com/b0iVmzaV
  Cela devrait effectivement fonctionner. Il y avait quelques virgules et crochets qui n'étaient pas au bon endroit. Vous pouvez très bien déboguer quelque chose comme ça si vous le faites, par exemple, sous https://js.do/ saisir, afficher et traiter le message d'erreur en cliquant sur « Exécuter le code ». 🙂
  J'espère que tout fonctionne.
  Cordialement
  Fabien
  
  Répondre
Bodo dit :

14. March 2021 à 9:56

Bonjour Fabien,
Tout d'abord, merci beaucoup pour vos efforts. Mais malheureusement ça n'a pas marché. Lorsque je charge votre code, il ne démarre pas et écrit directement dans le miroir que quelque chose ne va pas avec la configuration.
Ensuite, je suis allé recharger celui qui fonctionnait. Et il fonctionne. Ensuite, je ne mets que VOTRE module de trafic de cartes dans MON conig en cours d'exécution, puis le même message apparaît.
J'ai ensuite copié uniquement la zone Google Traffic de VOTRE fichier et l'ai chargée sur js.do.
{
Module : 'MMM-GoogleMapsTraffic' ,
Position : 'top_left' ,
configurer : {
Clé : 'VOTRE_CLÉ',
latitude : 'VOTRE_LATITUDE' ,
lng : 'VOTRE_LONGITUDE' ,
hauteur : '300px' ,
largeur : '300px' ,
styledMapType : "transparent" ,
disableDefaultUI : vrai ,
Couleur d'arrière-plan : 'hsla (0, 0%, 0%, 0)'
}}
} ,

Et puis j'obtiens l'erreur suivante : Erreur JavaScript : Erreur de syntaxe non détectée : Jeton inattendu ':' à la ligne 4

Pourriez-vous s'il vous plaît revoir ça ? J'ai également remarqué qu'il y a une « double parenthèse » à la fin de chaque module de votre fichier. Est-ce correct ainsi ?

Cordialement
Bodo

Répondre
1. Fab dit :
  
  14. March 2021 à 11:57
  
  Salut Bodo,
  Je viens de le revoir. 🙂
  Avez-vous ajouté le code de configuration pur à js.do ? Lorsque je fais cela, aucun message d'erreur ne m'apparaît. :/ Vous pouvez également afficher le code « brut » depuis le pastebin ici : https://pastebin.com/raw/b0iVmzaV
  
  Il est compréhensible qu'il y ait un message d'erreur si vous n'insérez qu'un seul module dans js.do. L'ensemble du fichier de configuration consiste essentiellement en une « collection de clés » (vous pouvez trouver des informations ici, par exemple : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Keyed_collections)
  Cela signifie que si vous insérez uniquement la partie marquée ci-dessus, l'interpréteur javascript ne saura pas de quel type de construction il s'agit et générera un message d'erreur en conséquence. Par exemple, si vous placez la « partie déclaration » devant le module, cela devrait fonctionner à nouveau. J'ai téléchargé un exemple ici : https://pastebin.com/inKvNBh3
  
  J'espère que j'ai bien compris à propos des doubles parenthèses. Vous voulez dire dans le code téléchargé (sous https://pastebin.com/b0iVmzaV) par exemple les parenthèses aux lignes 63 et 64, n'est-ce pas ? Si oui : C'est exact. Vous devez vous assurer que toutes les parenthèses précédemment ouvertes sont refermées. Par exemple, la parenthèse à la ligne 63 ferme la parenthèse à la ligne 58. La parenthèse à la ligne 64 ferme la parenthèse à la ligne 55. De même, le crochet à la ligne 111 ferme le crochet à la ligne 40. Avec ces accolades, les blocs de code sont toujours combinés. Cela devient juste un peu déroutant parfois. Surtout lorsque les blocs s'étendent sur plusieurs lignes.
  
  Enfin, j'ai la configuration de https://pastebin.com/b0iVmzaV vient d'être chargé dans mon miroir magique. Il y sera affiché. peut-être que ça peut être que l'erreur réside dans l'un des modules installés? Si vous le souhaitez, envoyez-moi une capture d'écran de votre message d'erreur. 🙂
  Cordialement
  Fabien
  
  Répondre
Bodo dit :

14. March 2021 à 13:35

Bonjour Fabien,
donc, ...... ça monte maintenant. Folie, ...... après 2 mois agacé. Jusqu'à présent, j'avais toujours tout inséré à partir du fichier de script. Et maintenant que j'ai cliqué sur cloner ci-dessus et copié ce fichier, au moins j'obtiens une fenêtre Maps. Bien qu'avec un message d'erreur.
Il reste même si j'entre le code API et les deux autres données.
Bonjour Bodo

Répondre
1. Fab dit :
  
  14. March 2021 à 15:01
  
  salut bodo,
  vient de réessayer. Lorsque je saisis ma clé API, ma longitude et ma latitude, la carte s'affiche.
  Êtes-vous sûr d'avoir entré la latitude et la longitude dans le bon format ?
  J'ai collé le code du module pour vous ici. Il vous suffit d'insérer la clé API et vous devriez voir le trafic autour du Reichstag. 🙂 https://pastebin.com/JsprMVFb
  Cordialement
  Fabien
  
  Répondre
Bodo dit :

14. March 2021 à 16:57

Bonjour Fabien,
C'est encore mieux. Maintenant, la carte peut être vue, mais avec un message d'erreur à ce sujet.
Cette page ne peut pas charger Google Maps correctement.
Dans votre module, il y a aussi beaucoup plus de chiffres pour la latitude et la longitude. Je l'ai pris à partir de l'adresse Web de Goggle Maps. par exemple: 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
Et à partir de là, 52,5186222 et 13,3741289
Mais cela n'a rien à voir avec le message d'erreur. J'ai peut-être fait quelque chose de mal sur la plateforme Maps. Là, j'ai limité le code API à « Maps Java Script API » et « Maps Static API ». Est-ce que cela aurait pu être l'erreur ?
Bonjour Bodo

Répondre
1. Fab dit :
  
  14. March 2021 à 17:05
  
  salut bodo,
  ça a l'air bien. 🙂 J'essaierais simplement de ne pas restreindre davantage l'utilisation de l'API. Il se peut très bien que le message d'erreur soit lié à cela. 🙂
  Les chiffres supplémentaires dans la latitude et la longitude sont juste un peu plus précis. Mais puisque vous ne voulez marquer qu'une seule région de toute façon, cela ne devrait pas être trop tragique.
  Cordialement
  Fabien
  
  Répondre
Bodo dit :

14. March 2021 à 19:46

Bonjour Fabien,
Merci encore. Je vais l'essayer et puis, probablement demain, je vous ferai un retour.
Cordialement
Bodo

Répondre
Bodo dit :

14. March 2021 à 19:59

Fabien,
ont levé toutes les restrictions. message demeure. Cependant, je peux le confirmer avec la souris. Ensuite, il reste à l'écart jusqu'au prochain démarrage du miroir. Mais ça revient à chaque fois.
Bonjour Bodo

Répondre
1. Fab dit :
  
  14. March 2021 à 20:28
  
  salut bodo,
  étrange. Mais cela doit en fait être lié à l'API Google. Je n'ai pas vu ce message d'erreur. :/ peut être créez simplement un nouvel accès API et essayez-le ?
  Cordialement
  Fabien
  
  Répondre
Bodo dit :

15. March 2021 à 17:00

Bonjour Fabien,
Donc,……….venez de générer une nouvelle API et de l'entrer dans le fichier config. Malheureusement sans succès. Le message reste.
Je vais essayer de tout supprimer dans la plate-forme cloud, puis de le recréer. Voyons ce qu'il en ressort. Cependant, tout semble un peu différent ici que dans vos instructions.
Cordialement
Bodo

Répondre
Bodo dit :

15. March 2021 à 19:32

Fabien !!!!!!!!!
C'est fait !!!!!!!!!! Merci à ce guide ici https://www.wpgmaps.com/documentation/creating-a-google-maps-api-key/
Je me suis débarrassé du message d'erreur. C'était quelque chose avec les identifiants de connexion et le compte lié sur Google.
Mais d'abord je veux attendre un autre jour et voir si le diable ne revient pas après tout.
D'ici là, merci beaucoup d'avance !!!!!!!!!!!!!!!!
Mais je vous recontacterai.
Cordialement
Bodo

Répondre
1. Fab dit :
  
  16. March 2021 à 17:01
  
  salut bodo,
  Ça a l'air bien. 🙂 Je croise les doigts pour que tout continue comme ça. 🙂
  Cordialement
  Fabien
  
  Répondre
Bodo dit :

17. March 2021 à 18:39

Bonjour Fabien,
tout a l'air vraiment bien. Alors encore mille mercis !!!
Cordialement
Bodo

Répondre
Bodo dit :

20. March 2021 à 14:47

Bonjour Fabian, je voudrais vous demander autre chose. Juste pour comprendre. Ici https://pastebin.com/b0iVmzaV à la ligne 53 (en Java Script) vous pouvez voir cette « double parenthèse ». Au bas du fichier RAW, il n'y a qu'une parenthèse fermée au même endroit. Quelle est la différence ici ?
Cordialement
Bodo

Répondre
1. Fab dit :
  
  20. March 2021 à 19:01
  
  Salut Bodo,
  Je ne suis pas sûr de ce que tu veux dire. À mon avis, il y a une accolade à la ligne 53 et une à la ligne 54. La parenthèse à la ligne 53 ferme le bloc qui a été ouvert avec la parenthèse à la ligne 44 « config: { ». Le crochet à la ligne 54 ferme le bloc qui a été ouvert à la ligne 41.
  Voulez-vous dire cela? 🙂
  Cordialement
  Fabien
  
  Répondre