Cómo: pxlBlck: diseñe íconos, transfiéralos a pxlBlck y muéstrelos

Empecé a desarrollar pxlBlcks porque estaba buscando una manera de mantenerme informado sobre los eventos en SmartHome. Ahora hay dos opciones integradas en el complemento pxlBlck para hacer esto.

Además de poder mostrar animaciones, también existe la opción de cargar iconos predefinidos en el pxlBlck y mostrarlos allí.

Estos iconos se crean previamente con un programa de edición de imágenes y se transfieren al pxlBlck. Luego puede aparecer allí escribiendo el comando correcto.

En este video, puede ver la reproducción de varios íconos de redes sociales, incluido un mensaje en el pxlBlck_32x8.

El siguiente artículo describe cómo crear estos íconos, transferirlos al pxlBlck y luego mostrarlos allí.


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

Antes de que pueda mostrar iconos en su pxlBlck, ya debería haberlo configurado y programado. La información sobre las diversas plataformas de hardware se puede encontrar en la siguiente categoría

La información sobre la programación y configuración del pxlBlck está disponible en los siguientes artículos

Herramienta requerida:
- No -

Material requeridoyo:
- No -


Descargar GIMP

En principio, solo necesitas un programa de edición de imágenes con el que puedas crear o editar archivos .ppm.

Uno de estos programas es "GIMP". Este es gratuito y lo puedes descargar desde el siguiente enlace.


Instalar GIMP

Después de descargar “GIMP”, primero debes instalar el programa.

Abra el archivo descargado y...

... instala el programa.

La información sobre la instalación de un programa también se puede encontrar en el artículo Instalar programas: un ejemplo


Crear nuevo archivo

Después de la instalación, puede comenzar ahora. Para hacer esto, inicie GIMP.

GIMP comienza con una ventana en blanco por defecto. Dado que ahora desea crear un icono, primero debe crear un nuevo archivo.

Para hacer esto, haga clic en “Archivo” y “Nuevo”.

Se abrirá entonces una ventana en la que ahora debes abrir las “Opciones avanzadas” haciendo clic en el signo más en el área marcada en rojo.

Ahora configure todas las opciones en la ventana de diálogo como se muestra en la imagen de la izquierda.

Lo especial es el “Tamaño de imagen” en la zona superior marcado en rojo. Porque tiene que adaptarse a tu pxlBlck.

Por ejemplo, ¿quiere un icono para el pxlBlck_8x8 Por lo tanto, debe especificar un 8 para "Ancho" y "Alto".

Por lo tanto, la dimensión del icono siempre debe coincidir con la dimensión de la matriz LED utilizada.


Ampliar la vista de archivo

Dado que el archivo es muy pequeño, debe ampliar el área de la imagen.

Para ello pulsa sobre el símbolo de la lupa y activa el modo lupa.

Luego, para ampliar la imagen, todo lo que tienes que hacer es arrastrar un cuadrado sobre el área que deseas ampliar.


Editar imagen y dibujar contenido

Ahora finalmente puede comenzar a editar el ícono.

Cambia al modo lápiz para editar el icono. Para hacer esto, haga clic en el símbolo del pincel en la barra de herramientas y mantenga presionado el botón del mouse.

Esto abrirá otro menú donde puede seleccionar el icono del lápiz.

Para que puedas editar el ícono píxel por píxel, ahora debes establecer el “grosor del lápiz” en un píxel.

Para hacer esto, mueva el control deslizante en el área marcada en rojo completamente hacia la izquierda o ajústelo a uno manualmente.

Ahora ya puedes editar la imagen.

Para cambiar el color del lápiz, puede establecer un color diferente usando el "selector de color".

Para ello, haga clic en el cuadrado de color (en este caso negro) en el área marcada en rojo.

Esto abre el "selector de color" que se muestra a la izquierda.

Seleccione el color que desea configurar para el icono y confírmelo haciendo clic en “Aceptar”.

Ahora puedes diseñar el icono según tus deseos.

En el ejemplo de la izquierda, simplemente pinté una barra de colores.

Tenga en cuenta que los cuadrados negros no brillan en el pxlBlck. el área blanca, por otro lado, brilla en color blanco.


Icono de exportación en el formato correcto

Tan pronto como haya terminado de editar su ícono, ahora debe exportarlo antes de poder copiarlo en el archivo pxlBlck.

Para hacer esto, haga clic en “Archivo” y “Exportar como…” nuevamente.

En la ventana de diálogo que ahora se abre, primero debes verificar que la opción (abajo a la izquierda) “Seleccionar tipo de archivo (por extensión)” esté activada.

Luego elige una ubicación de almacenamiento e ingresa un nombre de su elección como nombre de archivo. Sin embargo, es importante que la extensión del archivo .ppm lee

Tan pronto como todo esté configurado correctamente, puede cerrar el cuadro de diálogo haciendo clic en "Aceptar".

En la pequeña ventana de diálogo que se abre, confirme que desea guardar el archivo en formato "ASCII".

Su archivo de icono ahora debería haberse creado en la ubicación que seleccionó.

Recuerde esta ubicación, porque desde allí el archivo del icono se copiará en su pxlBlck en el siguiente párrafo.


Copie iconos al pxlBlock

El archivo de icono creado ahora debe transferirse a su pxlBlck.

Para hacer esto, vuelva al menú web de su pxlBlck. Para ello, debe introducir la dirección IP del pxlBlck en la barra de direcciones de su navegador.

Luego cambie a la pestaña "Herramientas" haciendo clic en el botón rojo.

En la pestaña "Herramientas", desplácese hasta la parte inferior de la página de configuración.

Haga clic en el botón "Explorador de archivos" allí.

En esta ventana puede ver todos los archivos que ya están almacenados en la memoria del pxlBlck o ESP8266.

Para poder cargar el nuevo archivo de icono en esta memoria, primero debes hacer clic en el botón “Subir”.

En la siguiente vista, haga clic en el botón rojo "Examinar"...

... y seleccione su archivo creado anteriormente.

Luego confirme esto haciendo clic en “Abrir”.

Ahora se encuentra en la ventana anterior.

Para que se inicie la carga del archivo seleccionado, ahora debes hacer clic en el botón “Subir”.

Según el tamaño del archivo del icono, la carga puede tardar un poco.

Tan pronto como se complete el proceso, verá el mensaje de éxito resaltado en rojo.

Para comprobar que el archivo se ha cargado correctamente, ahora puede cambiar a la pestaña "Herramientas" nuevamente y...

... desde allí cambie al “Explorador de archivos”.

El archivo cargado anteriormente ahora debería aparecer allí.


Comando para mostrar iconos en el pxlBlck

Ahora ha transferido el archivo del icono a su pxlBlck. Sin embargo, el ícono solo se muestra si envía un comando al pxlBlck. A continuación, en este párrafo (Nombre: Ejemplos), hay algunos ejemplos para mostrar el icono de ejemplo creado anteriormente.

Cómo enviar comandos a un dispositivo ESPEasy está en el artículo ESPEasy: ejecuta comandos y acciones a través de HTTP, MQTT, UDP y directamente descrito.

nombre de comando

pbicón

Resumen de comandos

pbicon,[animación entrante 0-255], [animación saliente 0-255], [en retraso 0-255], [mostrar retraso 0-255], [retraso de salida 0-255], [brillo 0-255], [texto en ejecución 0-255], [nombre del icono], [repetición 0-10],

Descripción de parámetros

nombre del parámetroDescripciónRango de valores permitido
animación entranteEl ID de la animación de entrada.1-3
animación salienteEl ID de la animación inicial.1-3
retrasadoEste parámetro establece la cantidad de tiempo utilizado para la animación de entrada. Se especifica en milisegundos.0-2000
mostrar retrasoCon este parámetro puede establecer el tiempo de visualización del icono y, si es necesario, del texto. Se especifica en milisegundos.0-10000
retrasoEste parámetro establece la cantidad de tiempo utilizado para la animación de salida. Se especifica en milisegundos.0-2000
brilloCon este parámetro puede establecer el brillo máximo para su icono y texto. Tenga en cuenta que un alto brillo también requiere más potencia y la matriz LED conectada debe diseñarse en consecuencia.0-100
texto en ejecuciónPuede utilizar este parámetro para especificar un texto que se muestra con el icono. Si no desea texto, simplemente puede dejar este parámetro en blanco.texto
nombre icónicoEste parámetro corresponde al nombre de archivo del icono subido en los SPIFFS del pxlBlcktexto
repeticiónPuede utilizar este parámetro para repetir la visualización del icono. Por ejemplo, también se pueden implementar iconos intermitentes.0-10

Las siguientes tablas contienen una descripción general de las animaciones disponibles para mostrar y ocultar los iconos.

Animaciones de aparición gradual
ApellidoDescripciónIDENTIFICACIÓN
fundirseEl icono y, si corresponde, el texto desplazable se muestran con el tiempo de “retraso de presentación” configurado.1
InstantáneoEl icono y cualquier texto especificado se muestran inmediatamente.2
Volar desde la derechaEl icono y cualquier texto de desplazamiento que se haya especificado se insertan en el área de visualización desde el lado derecho. El tiempo de “retraso de presentación” define cuánto tiempo lleva este proceso.3
Animaciones de desvanecimiento
ApellidoDescripciónIDENTIFICACIÓN
desaparecerEl icono y, si corresponde, el texto desplazable se ocultan con el tiempo de “retardo de salida” configurado.1
apagado instantáneoEl icono y cualquier texto especificado se ocultan inmediatamente.2
Vuela hacia la izquierdaEl icono y cualquier texto de desplazamiento que se haya configurado se mueven al lado izquierdo del área de visualización. El tiempo de “retraso de salida” define cuánto tiempo lleva este proceso.3

ejemplos

Hay diferentes formas de ejecutar comandos en su pxlBlck. Una de estas formas funciona a través del menú web.

Para hacer esto, vaya a la pestaña "Herramientas".

Allí puede ingresar el comando en el campo de texto izquierdo marcado en rojo.

Al hacer clic en "Enviar", el comando se envía al pxlBlck y se ejecuta.

Cuando se encuentra el icono, se muestra el mensaje resaltado.

El icono se muestra directamente con los parámetros establecidos en la pantalla pxlBlck.

Si especificó un nombre de archivo incorrecto para el archivo de icono y no se puede encontrar el nombre de archivo, se mostrará el mensaje de error marcado.

Además, toda la matriz LED del pxlBlck parpadea en rojo cinco veces.

La visualización del icono creado anteriormente se describe a modo de ejemplo (incluidos los comandos utilizados) en el siguiente párrafo.

Información:

  • Animación de entrada: 1
  • Animación de salida: 1
  • Retardo de entrada: 1000ms
  • Tiempo de visualización: 10000ms
  • Retardo de salida: 1000ms
  • Brillo máximo: 50%
  • Texto: – (no se muestra texto)
  • Nombre icónico: Prueba.ppm
  • Repeticiones: ninguna

Dominio:

pbicon,1,1,1000,10000,1000,50,-,Prueba.ppm,

Información:

  • Animación de entrada: 1
  • Animación de salida: 1
  • Retardo de entrada: 100ms
  • Tiempo de visualización: 100ms
  • Retardo de salida: 100ms
  • Brillo máximo: 50%
  • Texto: – (no se muestra texto)
  • Nombre icónico: Prueba.ppm
  • repeticiones: 3

Dominio:

pbicon,1,1,100,100,100,50,-,Prueba.ppm,3,

Información:

  • Animación de entrada: 3
  • Animación de salida: 3
  • Retardo de entrada: 100ms
  • Tiempo de visualización: 1000ms
  • Retardo de salida: 100ms
  • Brillo máximo: 50%
  • Texto: – (no se muestra texto)
  • Nombre icónico: Prueba.ppm
  • repeticiones: 2

Dominio:

pbicon,3,3,100,1000,100,50,-,Prueba.ppm,2,

Información:

  • Animación de entrada: 3
  • Animación de salida: 3
  • Retardo de entrada: 1000ms
  • Tiempo de visualización: 1000ms
  • Retardo de salida: 500ms
  • Brillo máximo: 50%
  • Texto: Mensaje de prueba
  • Nombre icónico: Prueba.ppm
  • Repeticiones: ninguna

Dominio:

pbicon,3,3,1000,1000,500,50,Mensaje de prueba,Prueba.ppm,

Información:

  • Animación de entrada: 2
  • Animación de salida: 3
  • Retardo de entrada: 1000ms
  • Tiempo de visualización: 1000ms
  • Retardo de salida: 500ms
  • Brillo máximo: 50%
  • Texto: Mensaje de prueba
  • Nombre icónico: Prueba.ppm
  • Repeticiones: ninguna

Dominio:

pbicon,2,3,1000,1000,500,50,Mensaje de prueba,Prueba.ppm,

Información:

  • Animación de entrada: 1
  • Animación de salida: 3
  • Retardo de entrada: 2000ms
  • Tiempo de visualización: 1000ms
  • Retardo de salida: 500ms
  • Brillo máximo: 50%
  • Texto: Mensaje de prueba
  • Nombre icónico: Prueba.ppm
  • Repeticiones: ninguna

Dominio:

pbicon,1,3,2000,1000,500,50,Mensaje de prueba,Prueba.ppm,

Información:

  • Animación de entrada: 3
  • Animación de salida: 1
  • Retardo de entrada: 1000ms
  • Tiempo de visualización: 1000ms
  • Retardo de salida: 500ms
  • Brillo máximo: 50%
  • Texto: – (no se muestra texto)
  • Nombre icónico: Prueba.ppm
  • Repeticiones: ninguna

Dominio:

pbicon,3,1,1000,1000,500,50,-,prueba.ppm,


Descargar iconos preparados

También puede encontrar el ícono de ejemplo creado aquí y algunos otros íconos preparados en el siguiente enlace en Nerdiy Git: https://github.com/Nerdiyde/pxlBlck/tree/main/icons


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       

2s comentarios

  1. ¡Hola! Tengo otra pregunta. Actualmente estoy ejecutando la fecha cada 10 segundos. Ahora quería mostrar la temperatura o la fecha (%sysday_0%.%sysmonth_0%.%sysyears%) como una "imagen fija". De alguna manera no puedo conseguirlo. ¿Podrías quizás mostrar un pequeño ejemplo de esto?

    1. Hola Stefan,
      por lo que desea mostrar un texto de forma permanente, ¿verdad?
      Esto no se puede hacer tan fácilmente. Pero lo escribiré y agregaré esta función pronto. 🙂
      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.