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.
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
- pxlBlck - Instalar y configurar el complemento pxlBlck
- pxlBlck - Comandos para configurar el pxlBlck
- pxlBlck - Configurar carátulas de reloj y protectores de pantalla
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ámetro | Descripción | Rango de valores permitido |
|---|---|---|
| animación entrante | El ID de la animación de entrada. | 1-3 |
| animación saliente | El ID de la animación inicial. | 1-3 |
| retrasado | Este parámetro establece la cantidad de tiempo utilizado para la animación de entrada. Se especifica en milisegundos. | 0-2000 |
| mostrar retraso | Con este parámetro puede establecer el tiempo de visualización del icono y, si es necesario, del texto. Se especifica en milisegundos. | 0-10000 |
| retraso | Este parámetro establece la cantidad de tiempo utilizado para la animación de salida. Se especifica en milisegundos. | 0-2000 |
| brillo | Con 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ón | Puede 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ónico | Este parámetro corresponde al nombre de archivo del icono subido en los SPIFFS del pxlBlck | texto |
| repetición | Puede 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
| Apellido | Descripción | IDENTIFICACIÓN |
|---|---|---|
| fundirse | El icono y, si corresponde, el texto desplazable se muestran con el tiempo de “retraso de presentación” configurado. | 1 |
| Instantáneo | El icono y cualquier texto especificado se muestran inmediatamente. | 2 |
| Volar desde la derecha | El 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
| Apellido | Descripción | IDENTIFICACIÓN |
|---|---|---|
| desaparecer | El icono y, si corresponde, el texto desplazable se ocultan con el tiempo de “retardo de salida” configurado. | 1 |
| apagado instantáneo | El icono y cualquier texto especificado se ocultan inmediatamente. | 2 |
| Vuela hacia la izquierda | El 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é. 🙂
Español 
Deutsch 
English 
Français 
Nederlands
¡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?
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