HowTo: Magic Mirror: muestra una descripción general del tráfico actual

Un complemento interesante y práctico para MagicMirror es el complemento "MMM Google Maps Tráfico“. Esto le muestra el estado del tráfico actual en su área.

Cómo instalar esto se describe en el siguiente artículo


Instrucciones de seguridad

Sé que las siguientes notas siempre son un poco molestas y parecen innecesarias. Desafortunadamente, muchas personas que sabían "mejor" han perdido ojos, dedos u otras cosas debido a un descuido o se lesionaron. La pérdida de datos es casi insignificante en comparación, pero incluso estos pueden ser realmente molestos. Por lo tanto, tómese cinco minutos para leer las instrucciones de seguridad. Porque incluso el proyecto más genial no vale la pena lesionarse u otros problemas.
https://www.nerdiy.de/sicherheitshinweise/

Enlaces afiliados / enlaces publicitarios

Los enlaces a las tiendas en línea enumerados aquí son los llamados enlaces de afiliados. Si hace clic en dicho enlace de afiliado y realiza una compra a través de este enlace, Nerdiy.de recibirá una comisión de la tienda en línea o el proveedor correspondiente. El precio no cambia para usted. Si realiza sus compras a través de estos enlaces, ayuda a Nerdiy.de a poder ofrecer otros proyectos útiles en el futuro. 🙂 


Requisitos

Artículos útiles:
Antes de comenzar la instalación, debe haber preparado la RaspberryPi para que se pueda acceder a ella a través de la red y controlarla a través de SSH. Además, se debe configurar el software MagicMirror.

Los siguientes artículos describen lo que hay que hacer para preparar todo:
RaspberryPi: ¡configuración para nerdiys!
RaspberryPi – ¡La primera configuración!
RaspberryPi: controle el RaspberryPi a través de SSH

MagicMirror - Instalación del software necesario

Herramienta requerida:
-No-

Material requerido:

En la siguiente lista encontrará todas las piezas que necesita para implementar este artículo.


Inicie sesión en RaspberryPi a través de SSH

Para comenzar, primero debe iniciar sesión en Rasp Pi con Putty a través de SSH. Cómo hacer esto está en el artículo. RaspberryPi - Controle el RaspberryPi a través de SSH descrito.

Después de ingresar su nombre de usuario y contraseña, puede ingresar los primeros comandos.

Instalación del módulo

Para poder visualizar el tráfico actual en su zona, necesita el módulo "MMM-GoogleMapsTraffic". Puedes encontrarlo debajo https://github.com/vicmora/MMM-GoogleMapsTraffic

Instale esto en su RaspberryPi. Cómo instalar sus módulos se describe en el siguiente artículo:
MagicMirror - Instalar módulos de terceros


Configuración del módulo

Usted configura el módulo, como está acostumbrado desde los módulos MagicMirror, ingresando la configuración del módulo en la configuración de su instalación MagicMirror.
Para ello, abre el archivo de configuración de tu instalación de MagicMirror con el siguiente comando:

sudo nano ~/MagicMirror/config/config.js

Sin embargo, antes de ingresar el siguiente archivo de configuración, debe realizar algunos reemplazos.

{ módulo: 'MMM-GoogleMapsTraffic', posición: 'arriba_izquierda', configuración: { clave: 'TU_CLAVE', lat: TU_LATITUD, longitud: TU_LONGITUD, altura: '300px', ancho: '300px' styledMapType: "transparent", disabledDefaultUI : verdadero, color de fondo: 'hsla (0, 0%, 0%, 0)', }, }

Ingrese la clave API de Google Maps

Para que este módulo funcione, necesita acceso a la API de GoogleMaps. Se requiere una clave API para esto.
En el siguiente artículo se describe cómo obtener una clave API de GoogleMaps:
Registrar la clave API de GoogleMaps

¿Ha registrado una clave API de Google Maps? Reemplace "YOUR_KEY" en la configuración del módulo con su clave API de GoogleMaps.

Introduce la latitud y la longitud

Además de la clave API, el módulo también necesita la latitud y longitud de la ubicación deseada.
En el siguiente artículo se describe cómo averiguar la latitud y la longitud de cualquier ubicación utilizando Google Maps:
Encuentra la latitud y longitud de cualquier ubicación con GoogleMaps

Una vez que haya determinado la latitud y longitud de su ubicación deseada, reemplace "YOUR_LATITUDE" con la latitud de su ubicación deseada y "YOUR_LONGITUDE" con la longitud de su ubicación deseada.

Mas opciones

Además de las opciones enumeradas anteriormente, existen otras opciones ajustables que afectan en gran medida la apariencia del módulo.

Una lista de posibles opciones:

Citando del módulo GitHub: https://github.com/vicmora/MMM-GoogleMapsTraffic

Opciones de configuración

opción Descripción
llaves requerido Clave API de Google. Consulte a continuación para obtener ayuda.
lat requerido Latitud utilizada para centrar el mapa. Consulte a continuación para obtener ayuda.

Tipo: flotar

longitud requerido Longitud utilizada para centrar el mapa. Consulte a continuación para obtener ayuda.

Tipo: flotar

altura Altura del mapa.

Tipo: cadena (píxeles)
Valores predeterminados: 300px

ancho Ancho del mapa.

Tipo: cadena (píxeles)
Valores predeterminados: 300px

zoom Valor de zoom para mostrar desde latitud/longitud.

Tipo: entero
Valores predeterminados: 10

mapTypeId El tipo de mapa a mostrar (hoja de ruta, satélite, híbrido, terreno).

Tipo: cadena
Valores predeterminados: mapa vial

estiloMapType Estilo del mapa. Consulte a continuación para obtener ayuda.

Tipo: cadena
Valores posibles: por defectooscuronochenegro o costumbre
Valores predeterminados: por defecto

deshabilitar la interfaz de usuario predeterminada Deshabilite los botones predeterminados de la interfaz de usuario (Zoom y Street View).

Tipo: booleano
Valores predeterminados: verdadero

intervalo de actualización Con qué frecuencia el módulo debe cargar el mapa.

Tipo: interno en milisegundos
Valores predeterminados: 900000 (15 minutos)

marcadores Marcadores adicionales en el mapa como una matriz. Ver ejemplo.
color de fondo Fondo detrás del mapa. Se puede establecer en transparente ('hsla(0, 0%, 0%, 0)') o dejado en negro (predeterminado).

Tipo: cadena
Valores predeterminados: 'rgb(0, 0, 0, 0)'

La configuración de estas opciones no es necesaria para una primera prueba. Si no los ingresa, el módulo utiliza los valores predeterminados de las respectivas opciones.


resultado

Si ingresó la configuración correctamente, MagicMirrors debería recibirlo con la siguiente pantalla la próxima vez que lo cargue.


Más información

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


Diviértete con el proyecto.

Espero que todo te haya funcionado como se describe. Si no es así, o si tiene alguna pregunta o sugerencia, hágamelo saber en los comentarios. Si es necesario, lo añadiré al artículo.
Las ideas para nuevos proyectos siempre son bienvenidas. 🙂

PS Muchos de estos proyectos, especialmente los proyectos de hardware, cuestan mucho tiempo y dinero. Por supuesto que hago esto porque lo disfruto, pero si crees que es genial que comparta la información contigo, me encantaría hacer una pequeña donación al fondo del café. 🙂

Cómprame un café en ko-fi.com       

20s comentarios

  1. Hola. Exactamente como lo presentas aquí, me gustaría tenerlo en mi espejo. Desafortunadamente, siempre recibo un mensaje de error que indica que la configuración es incorrecta.
    ¿Me ayudarías un poco con eso?
    Atentamente
    Bodo

    1. Hola bodo,
      esto a menudo se debe a un formato incorrecto del archivo de configuración. Lo complicado aquí es que todos los paréntesis abiertos deben cerrarse correctamente nuevamente.
      Puede copiar su archivo de configuración aquí y ver si los mensajes de error lo ayudan. 🙂 https://jshint.com/
      De lo contrario, también puede usar la configuración en https://pastebin.com/ subir y enviarme el enlace. Entonces puedo echar un vistazo si quieres.
      Recuerde eliminar cualquier clave API existente o acceder a los datos de la configuración antes de reenviarlos a cualquier persona. 🙂
      Atentamente
      Fabian

  2. Hola Fabián,
    Lo siento, solo vi tu respuesta ahora. Lo siento Intentaré enviarte el código mañana si puedo. En cualquier caso, muchas gracias por la ayuda ofrecida. He estado en esto durante semanas y voy en círculos.
    Tienes noticias mías lo antes posible.
    Atentamente
    Bodo

    1. Hola bodo,
      mira aquí: https://pastebin.com/b0iVmzaV
      Eso debería funcionar. Había algunas comas y corchetes que estaban en el lugar equivocado. Puede depurar algo así bastante bien si lo hace, por ejemplo, bajo https://js.do/ ingrese y muestre y procese el mensaje de error haciendo clic en “Ejecutar código”. 🙂
      Espero que todo salga bien.
      Atentamente
      Fabian

  3. Hola Fabián,
    En primer lugar, muchas gracias por su esfuerzo. Pero desafortunadamente no funcionó. Cuando cargo su código, no arranca y escribe directamente en el espejo que algo anda mal con la configuración.
    Luego fui y recargué mi trabajo. Y funciona. Luego puse solo TU módulo de tráfico de mapas en MI configuración en ejecución y luego aparece el mismo mensaje.
    Luego copié solo el área de tráfico de Google de SU archivo y lo cargué en js.do.
    {
    Módulo: 'MMM-GoogleMapsTraffic',
    Posición: 'arriba_izquierda',
    configurar: {
    Clave: 'TU_LLAVE',
    latitud: 'TU_LATITUDE',
    lng: 'TU_LONGITUD',
    altura: '300px',
    ancho: '300px',
    styledMapType: “transparente”,
    disabledDefaultUI: verdadero,
    Color de fondo: 'hsla (0, 0%, 0%, 0)'
    }}
    } ,

    Y luego aparece el siguiente error: Error de JavaScript: Error de sintaxis no detectado: Token inesperado ':' en la línea 4

    ¿Podrías ver esto de nuevo? También noté que hay un “corchete doble” al final de cada módulo en su archivo. ¿Es correcto así?

    Atentamente
    Bodo

    1. Hola bodo,
      Lo acabo de ver de nuevo. 🙂
      ¿Agregaste el código de configuración puro a js.do? Cuando hago eso no me muestra ningún mensaje de error. :/ También puedes ver el código "sin formato" del Pastebin aquí: https://pastebin.com/raw/b0iVmzaV

      Es comprensible que aparezca un mensaje de error si solo inserta un módulo en js.do. El archivo de configuración completo consiste básicamente en una "colección con clave" (puede encontrar información aquí, por ejemplo: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Keyed_collections)
      Esto significa que si solo inserta la parte marcada arriba, el intérprete de JavaScript no sabrá qué tipo de construcción es y arrojará un mensaje de error en consecuencia. Por ejemplo, si coloca la "parte de declaración" delante del módulo, debería funcionar nuevamente. Subí un ejemplo aquí: https://pastebin.com/inKvNBh3

      Espero haberte entendido bien lo de los corchetes dobles. Quiere decir en el código cargado (bajo https://pastebin.com/b0iVmzaV) por ejemplo, los corchetes en la línea 63 y 64, ¿verdad? Si es así: Eso es correcto. Debe asegurarse de que todos los paréntesis abiertos anteriormente se cierren nuevamente. Por ejemplo, el paréntesis en la línea 63 cierra el paréntesis en la línea 58. El paréntesis en la línea 64 cierra el paréntesis en la línea 55. De manera similar, el corchete en la línea 111 cierra el corchete en la línea 40. Con estas llaves, los bloques de código son siempre combinado. A veces se vuelve un poco confuso. Especialmente cuando los bloques abarcan varias líneas.

      Por último, pero no menos importante, tengo la configuración de https://pastebin.com/b0iVmzaV acaba de cargar en mi espejo mágico. Se mostrará allí. tal vez pueda será que el error radica en uno de los módulos instalados? Si quieres, envíame una captura de pantalla de tu mensaje de error. 🙂
      Atentamente
      Fabian

  4. Hola Fabián,
    así que... está subiendo ahora. Locura,......después de 2 meses molesto. Hasta ahora siempre había insertado todo desde el archivo de script. Y ahora que hice clic en clonar arriba y copié ese archivo, al menos obtengo una ventana de Mapas. Aunque con un mensaje de error.
    Permanece incluso si ingreso el código API y los otros dos datos.
    Saludo Bodo

    1. hola bodo,
      acaba de intentarlo de nuevo. Cuando ingreso mi clave API, longitud y latitud, se muestra el mapa.
      ¿Estás seguro de que ingresaste la latitud y la longitud en el formato correcto?
      He pegado el código del módulo para usted aquí. Solo tiene que insertar la clave API y luego debería ver el tráfico alrededor del Reichstag. 🙂 https://pastebin.com/JsprMVFb
      Atentamente
      Fabian

  5. Hola Fabián,
    Se pone aún mejor. Ahora se puede ver el mapa, pero con un mensaje de error al respecto.
    Esta página no puede cargar Google Maps correctamente.
    En su módulo también hay muchos más números para latitud y longitud. Lo tomé de la dirección web de Goggle Maps. p.ej: 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
    Y de ahí entonces 52.5186222 y 13.3741289
    Pero eso no tiene nada que ver con el mensaje de error. Quizás hice algo mal en la plataforma Maps. Allí limité el código API a “Maps Java Script API” y “Maps Static API”. ¿Podría haber sido ese el error?
    Saludo Bodo

    1. hola bodo,
      suena bien. 🙂 Solo intentaría no restringir más el uso de la API. Es muy posible que el mensaje de error esté relacionado con esto. 🙂
      Los dígitos adicionales de latitud y longitud son un poco más precisos. Pero dado que solo desea marcar una región de todos modos, eso no debería ser demasiado trágico.
      Atentamente
      Fabian

  6. Fabian,
    han levantado todas las restricciones. queda el mensaje. Sin embargo, puedo confirmarlo con el ratón. Luego se mantiene alejado hasta la próxima vez que se inicia el espejo. Pero vuelve cada vez.
    Saludo Bodo

    1. hola bodo,
      extraño. Pero entonces en realidad debe estar relacionado con la API de Google. No vi este mensaje de error. :/ tal vez simplemente crear un nuevo acceso a la API y probarlo?
      Atentamente
      Fabian

  7. Hola Fabián,
    Entonces,……….acabo de generar una nueva API y la ingresé en la configuración. Lamentablemente sin éxito. El mensaje se queda.
    Intentaré eliminar todo en la plataforma en la nube y luego volver a crearlo. Vamos a ver qué sale de eso. Sin embargo, todo se ve un poco diferente aquí que en sus instrucciones.
    Atentamente
    Bodo

  8. Fabian !!!!!!!!!
    Está hecho !!!!!!!!!! Gracias a esta guía aquí https://www.wpgmaps.com/documentation/creating-a-google-maps-api-key/
    Me deshice del mensaje de error. Era algo con las credenciales de inicio de sesión y la cuenta vinculada en Google.
    Pero primero quiero esperar otro día y ver si el diablo no vuelve después de todo.
    Hasta entonces, muchas gracias de antemano!!!!!!!!!!!!!!!!
    Pero me pondré en contacto contigo de nuevo.
    Atentamente
    Bodo

  9. Hola Fabián, me gustaría preguntarte algo más. Solo para entender. Aquí https://pastebin.com/b0iVmzaV en la línea 53 (en Java Script) puedes ver este “doble corchete”. En la parte inferior del archivo RAW solo hay un corchete en el mismo lugar que está cerrado. ¿Cuál es la diferencia aquí?
    Atentamente
    Bodo

    1. Hola bodo,
      No estoy muy seguro de lo que quieres decir. En mi opinión, hay una llave en la línea 53 y otra en la línea 54. La llave en la línea 53 cierra el bloque que se abrió con la llave en la línea 44 “config: {”. El corchete en la línea 54 cierra el bloque que se abrió en la línea 41.
      ¿Quieres decir que? 🙂
      Atentamente
      Fabian

Kommentar hinterlassen

Tu dirección de correo electrónico no será publicada. Erforderliche Felder sind mit * markiert

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.