HowTo: pxlBlck - Mostrar valores relativos como un BarGraph

Comencé a documentar los pxlBlcks (que se habían pospuesto durante mucho tiempo) en noviembre de 2020 después de que La-Tecnologia.com anunciara el desafío “GoodBye 2020”. (Más información aquí: https://hackaday.io/contest/175608-goodbye-2020/details)

Había estado usando pxlBlcks durante mucho tiempo en ese entonces, pero como siempre, nunca encontré el tiempo o la motivación para escribirlo todo.

Cualquiera que haya leído la descripción del desafío mencionado anteriormente habrá notado que el desafío encaja muy bien con la gama de funciones de pxlBlcks. En él se muestran textos en desplazamiento desde hace mucho tiempo. Así, por ejemplo, se puede mostrar un mensaje de “Adiós 2020” sin mayores problemas.

Gracias a un consejo de uno de los primeros probadores del complemento pxlBlck, se me ocurrió otra idea sobre cómo visualizar aún mejor cuando el año 2020 finalmente haya pasado: una especie de barra de carga que visualiza cuántos días del año 2020 ya se han ido y en consecuencia permanecen.

Para ello he implementado un nuevo comando en el plugin pxlBlck con el que se pueden mostrar en el display hasta cinco valores relativos (porcentajes). Puede mostrar no solo el final de un período, sino también varios valores escalados (si el valor es absoluto) o relativos.

Por ejemplo, el valor de la humedad relativa se puede visualizar muy bien porque este valor ya es relativo y corresponde a un valor porcentual. Para representar valores absolutos hay que utilizar un poco más de “matemáticas”. Suena complicado. Pero no lo es.

El siguiente artículo describe cómo puede mostrar valores relativos en una barra de carga en la pantalla de su pxlBlck.

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

Para poder utilizar la información de este artículo, ya debe haber configurado y programado su pxlBlck. Puede encontrar información al respecto en los siguientes artículos.

• pxlBlck - Un sistema de información IOT/SmartHome
• pxlBlck - Instalar y configurar el complemento pxlBlck
• pxlBlck - Configurar carátulas de reloj y protectores de pantalla

Herramienta requerida:
- No -

Material requerido:
- No -

El comando para trazar valores relativos

El siguiente comando es adecuado para mostrar valores absolutos relativos o limitados en la pantalla del pxlBlck. Se puede configurar la "dirección" de la barra de carga visualizada en la pantalla. Además, se puede establecer un indicador "relleno" para el primero de los valores relativos enviados. Esto significa que el área de visualización se colorea con el color establecido desde cero hasta el valor deseado. Por último, pero no menos importante, se puede ajustar el color de visualización de cada valor individual.

Si prefiere ver ejemplos: desplácese un poco más. A continuación, he enumerado varios ejemplos, incluidos los comandos utilizados.

nombre de comando

pbbar

Resumen de comandos

pbbar,[visualización_duración1-86400000],[reflejado 0-1],[primera_barra_llenada 0-1],[dirección_de_visualización 0-1],[bar_graph_value 0-100],[rojo 0-255],[verde 0-255],[azul 0-500],[hasta cuatro grupos de valores adicionales]

Descripción de parámetros

Ejemplo

En el siguiente párrafo se incluye información más detallada, incluidas imágenes y videos de las diferentes representaciones y cómo puede mostrarlas en su pxlBlck.

Mostrar más de un valor a la vez

Si solo desea visualizar un valor en la pantalla de su pxlBlck, la estructura del comando es bastante simple. Puede utilizar la tabla anterior como guía. Por ejemplo, un comando para mostrar solo un valor podría tener este aspecto.

• pbbar,10000,1,1,0,0,75,50,00,0,

Este comando muestra para 10 segundos (=10000ms) el reflejado y completado Valor 75 con animación en el color rojo en.

Si ahora desea mostrar (el máximo posible) cinco valores, el comando podría verse así.

• pbbar,10000,1,1,0,0,10,255,0,0,25,0,255,0,50,0,0,255,75,0,255,255,100,255,0,255,

En el ejemplo dado, he marcado la configuración de los valores individuales en color. El primer valor y su configuración de color están marcados en rojo, el segundo en naranja, el tercero en verde, el cuarto en azul y el quinto en rosa.

Por lo tanto, puede enviar múltiples valores al pxlBlck para mostrarlos con solo un comando. Pero asegúrese de que se puedan mostrar un máximo de cinco valores al mismo tiempo.

Ejemplo: usar reglas para mostrar una duración definida para una fecha cada hora

Por ejemplo, si desea mostrar (como se mencionó anteriormente) cuándo finaliza (finalmente) el año actual (2020), puede usar las siguientes reglas.

Estas reglas calculan la diferencia hasta el 1 de enero de 2020 a las 00:00 desde la fecha u hora actual y convierten esta diferencia en un porcentaje. Este porcentaje se utiliza luego para "alimentar" el comando "pbbar". Dado que la visualización en pxlBlck_32x8 y pxlBlck_RingClock difiere ligeramente entre sí, encontrará dos códigos ligeramente diferentes para las reglas de su pxlBlck a continuación.

Dado que pxlBlck_32x8 también puede mostrar texto en desplazamiento, el ejemplo de reglas para pxlBlck_32x8 también incluye la salida automática de mensajes de "adiós" (en diferentes idiomas). (¿Por qué? Vea el desafío “Adiós 2020” arriba. 🙂).

Las reglas se activan cada minuto por el evento "Clock#Time". Puede encontrar información sobre las ESP Easy Rules en los siguientes enlaces, entre otros.

• https://www.letscontrolit.com/wiki/index.php/Tutorial_Rules
• https://www.letscontrolit.com/wiki/index.php/ESPEasy_System_Variables
• https://www.letscontrolit.com/wiki/index.php/EasyFormula

Para pxlBlck_RingClock

Aquí el ejemplo de Reglas para pxlBlck_RingClock.

on Clock#Time=All,**:** do //1577833200=unixtime a las "1.1.2020 a las 00:00" let,1,%unixtime%-1577833200 //calculando los segundos transcurridos desde el 1.1.2020 a las 00:00 let,1, %v1%/60 //conversión a minutos transcurridos desde el 1.1.2020 @ 00:00 let,1,%v1%/60 //conversión a horas pasadas desde el 1.1.2020 @ 00:00 let,1,%v1%/24 //conversión a días pasado desde el 1.1.2020 a las 00:00 let,2,%v1%/365 //calculando el valor relativo de "cuántos días del año 2020 han pasado" let,2,%v2%*100 //convirtiendo el valor relativo (flotante) en porcentaje pbbar,10000,1,1,0,%v2%,50,00,0, endón

Para pxlBlck_32x8

Aquí el ejemplo de Reglas para pxlBlck_RingClock.

on Clock#Time=All,**:** do //1577833200=unixtime a las "1.1.2020 a las 00:00" let,1,%unixtime%-1577833200 //calculando los segundos transcurridos desde el 1.1.2020 a las 00:00 let,1, %v1%/60 //conversión a minutos transcurridos desde el 1.1.2020 @ 00:00 let,1,%v1%/60 //conversión a horas pasadas desde el 1.1.2020 @ 00:00 let,1,%v1%/24 //conversión a días pasado desde el 1.1.2020 a las 00:00 let,2,%v1%/365 //calculando el valor relativo de "cuántos días del año 2020 han pasado" let,2,%v2%*100 //convirtiendo el valor relativo (flotante) en porcentaje pbbar,2000,0,1,1,%v2%,0,10,0, Delay 2000 // para dar tiempo a la visualización de la configuración de la barra pbrntxt,10,10,10,0,0,0,25,8 ,Au Revoir - Adios - Adiós - Do Svidaniya - Güle güle - Aloha - Selamat tinggal - DaH jImej - Sayonara - Soy groot., endon

mostrar el tiempo restante de forma continua

En el caso de que desee visualizar el tiempo restante (o cualquier otro valor visualizado) de forma continua, sólo tiene que configurar el tiempo de visualización tan alto que sea mayor que el intervalo de actualización de la visualización.

Entonces, si desea mostrar un valor en la pantalla cada minuto y esto debería mostrarse permanentemente o hasta la próxima actualización, debe establecer el valor para visualización_duración establecido en (al menos) 60000 (ms).

Ejemplo: envíe un valor relativo (porcentaje) desde NodeRed y muéstrelo en pxlBlck

Puede encontrar un ejemplo de cómo puede enviar un valor de porcentaje relativo (es decir, un valor de 0 a 100) desde NodeRed a pxlBlck y mostrarlo en su pantalla en el siguiente NodeCode.

Puede encontrar el código para los ejemplos de NodeRed descritos aquí en el siguiente enlace.

• https://github.com/Nerdiyde/NodeRedSnippets/blob/master/snippets/pxlBlck_pbbar_command_nodeRed_control_example.json

En el siguiente artículo se describe cómo puede proceder para importar esto a su instalación de NodeRed.

• NodeRed - código de nodo de importación y exportación

Ejemplo: enviar valores no relativos desde NodeRed y mostrarlos en PxlBlck

Este ejemplo muestra cómo también puedes enviar valores no relativos a tu pxlBlck usando NodeRed. Para que esto funcione, los valores absolutos se limitan “abajo” y “arriba” usando el nodo de rango y se escalan al rango de valores 0-100 del pxlBlck. Esto sucede en el nodo llamado "establecer rango permitido para escalar".

Puede encontrar el código para los ejemplos de NodeRed descritos aquí en el siguiente enlace.

• https://github.com/Nerdiyde/Noes decireRedSnippets/blob/master/snippets/pxlBlck_pbbar_command_nodeRed_control_example.json

En el siguiente artículo se describe cómo puede proceder para importar esto a su instalación de NodeRed.

• NodeRed - código de nodo de importación y exportación

Ejemplo: enviar cinco valores relativos desde NodeRed y mostrarlos en PxlBlck al mismo tiempo

Este ejemplo muestra cómo puedes enviar cinco valores a tu pxlBlck al mismo tiempo usando NodeRed. Además, también se pueden configurar las opciones de visualización. Los valores individuales se recopilan en variables y se combinan en un comando con solo presionar un botón (“enviar a pxlBlck”) y se envían al pxlBlck.

Puede encontrar el código para los ejemplos de NodeRed descritos aquí en el siguiente enlace.

• https://github.com/Nerdiyde/NodeRedSnippets/blob/master/snippets/pxlBlck_pbbar_command_nodeRed_control_example.json

En el siguiente artículo se describe cómo puede proceder para importar esto a su instalación de NodeRed.

• NodeRed - código de nodo de importación y exportación

Información sobre la personalización/configuración de los ejemplos de NodeRed enumerados

Debe adaptar un poco los ejemplos anteriores antes de poder probarlos con éxito.

Para hacer esto, debe ingresar el nombre apropiado de su pxlBlck en el nodo MQTT.

En el ejemplo de la izquierda, el nombre del que estoy usando es pxlBlcks

pxlBlck_32x8_ESP32

Debe cambiar esta parte del tema y, por supuesto, ingresar el nombre de su pxlBlck allí.

Aquí se ve el contenido del primer nodo de función.

No tienes que cambiar nada aquí. Sin embargo, vale la pena echar un vistazo aquí si está interesado en cómo se compone el comando y de dónde se obtienen los datos. 🙂

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é. 🙂