HowTo : pxlBlck - Afficher les valeurs relatives sous forme de BarGraph

Mit der (lange vor mir hergeschobenen Dokumentation der pxlBlcks) habe ich im November 2020 begonnen nachdem Hackaday.com die “GoodBye 2020”-Challenge ausgerufen hatte. (Mehr Infos dazu hier: https://hackaday.io/contest/175608-goodbye-2020/details)

J'utilisais les pxlBlcks depuis longtemps à l'époque, mais comme si souvent je n'avais jamais trouvé le temps/la motivation pour tout écrire.

Wer die Beschreibung der oben erwähnten Challenge gelesen hat, hat vielleicht auch gemerkt, dass die Challenge sehr gut zu dem Funktionsumfang der pxlBlcks passt. Lauftexte ließen sich schon lange darauf darstellen. Also lässt sich so zum Beispiel auch ohne große Probleme eine “Good Bye 2020”-Nachricht einblenden.

Grâce à une astuce d'un des premiers testeurs du plugin pxlBlck, j'ai trouvé une autre idée pour visualiser encore mieux quand l'année 2020 est enfin derrière soi : Une sorte de barre de chargement qui visualise combien de jours de l'année 2020 sont déjà partis et restent donc.

Pour cela, j'ai implémenté une nouvelle commande dans le plugin pxlBlck avec laquelle jusqu'à cinq valeurs relatives (pourcentage) peuvent être affichées à l'écran. Vous pouvez afficher non seulement la fin d'une période mais également diverses valeurs mises à l'échelle (si la valeur est absolue) ou relatives.

So lässt sich zum Beispiel sehr gut der Wert der relativen Luftfeuchtigkeit anzeigen, weil dieser Wert bereits relativ ist und einem Prozentwert entspricht. Um Absolutwerte darzustellen muss man etwas mehr “Mathematik” nutzen. Klingt kompliziert. Ist es aber nicht.

L'article suivant décrit comment afficher des valeurs relatives dans une barre de chargement sur l'écran de votre pxlBlck.

---

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

Afin de pouvoir utiliser les informations de cet article, vous devez déjà avoir configuré et programmé votre pxlBlck. Vous trouverez des informations à ce sujet dans les articles suivants.

• pxlBlck - Un système d'information IOT/SmartHome
• pxlBlck - Installer et configurer le plugin pxlBlck
• pxlBlck - Configurer les cadrans d'horloge et les économiseurs d'écran

Outil requis :
- Non -

Matériel requis :
- Non -

---

La commande pour tracer les valeurs relatives

Der nachfolgende Befehl eignet sich um relative oder eingegrenzte absolute werte auf dem Display des pxlBlck darstellen zu können. Dabei kann die “Richtung” des visualisierten Ladebalkens auf dem Display eingestellt werden. Zusätzlich lässt sich für den ersten der gesendeten relativen Werte ein “filled”-flag setzen. Dies hat zur Folge, dass die Displayfläche von Null bis zu dem gewünschten Wert auch in der eingestellt Farbe eingefärbt wird. Zu guter Letzt lässt sich die Anzeigefarbe jedes einzelnen Wertes einstellen.

Si vous préférez voir des exemples : faites défiler un peu plus loin. Ci-dessous, j'ai énuméré divers exemples, y compris les commandes utilisées.

nom de la commande

pbbar

aperçu des commandes

pbbar,[display_duration1-86400000],[en miroir 0-1],[first_bar_filled 0-1],[direction_affichage 0-1],[bar_graph_value 0-100],[rouge 0-255],[vert 0-255],[bleu 0-500],[jusqu'à quatre groupes de valeurs supplémentaires]

Paramètre Description

le nom du paramètre	Description	Plage de valeurs autorisée
display_duration	Ce paramètre définit le temps d'affichage de la valeur affichée. Cela commence après que toutes les valeurs ont été affichées à l'écran.	1-86400000
en miroir	Mithilfe dieses Parameters könnt Ihr die Darstellung des Wertes spiegeln. Mithilfe des Parameters “direction_affichage” lässt sich der BarGraph so also in alle Richtungen ausrichten.	0-1
first_bar_filled	Dieser Parameter aktiviert oder deaktiviert die ausgefüllte Darstellung für den ersten Wert. Wenn Ihr also den ersten Wert auf 25 einstellt und dieser Parameter aktiviert ist, werden 25% der Matrix mit der für diesen Parameter gewünschten Farbe “gefüllt”.	0-1
direction_affichage	Dieser Parameter konfiguriert, ob der Wert waagerecht (0) oder senkrecht (1) dargestellt wird. Mithilfe des Parameters “en miroir” lässt sich diese Ausrichtung zusätzlich spiegeln.	0-1
sortie_directe	Si cette option est définie (=1), la valeur s'affiche immédiatement à l'écran. L'animation d'affichage n'est donc pas affichée.	0-1
bar_graph_value	Il s'agit de la valeur réelle entre 0 et 100 que vous souhaitez représenter.	0-100
rouge	Ce paramètre détermine la luminosité de la couleur rouge de la valeur associée.	0-255
vert	Ce paramètre détermine la luminosité de la couleur verte de la valeur associée.	0-255
bleu	Ce paramètre détermine la luminosité de la couleur bleue de la valeur associée.	0-255

Exemple

Des informations plus détaillées, y compris des images et des vidéos des différentes représentations et comment vous pouvez les afficher sur votre pxlBlck sont contenues dans le paragraphe suivant.

---

Afficher plusieurs valeurs à la fois

Si vous ne souhaitez visualiser qu'une seule valeur sur l'affichage de votre pxlBlck, la structure de la commande est assez simple. Vous pouvez utiliser le tableau ci-dessus comme guide. Par exemple, une commande pour afficher une seule valeur pourrait ressembler à ceci.

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

Cette commande affiche pour 10 secondes (=10000ms) le en miroir et rempli Valeur 75 avec animations dans le couleur rouge à.

Si vous souhaitez maintenant afficher (le maximum possible) cinq valeurs, la commande pourrait ressembler à ceci.

• 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,

Dans l'exemple donné, j'ai marqué les paramètres des valeurs individuelles en couleur. La première valeur et ses paramètres de couleur sont marqués en rouge, la seconde en orange, la troisième en vert, la quatrième en bleu et la cinquième en rose.

Vous pouvez donc envoyer plusieurs valeurs au pxlBlck pour affichage avec une seule commande. Mais assurez-vous qu'un maximum de cinq valeurs peuvent être affichées en même temps.

---

Exemple : Utiliser des règles pour afficher une durée définie pour une date toutes les heures

Par exemple, si vous voulez montrer (comme mentionné ci-dessus) quand l'année en cours (2020) se termine (enfin), vous pouvez utiliser les règles suivantes.

Diese Rules berechnen aus dem aktuellen Datum bzw. Zeitpunkt die Differenz zum 1.1.2020 00:00 und konvertieren diese Differenz in eine Prozentzahl. Diese Prozentzahl wird dann genutzt um damit den “pbbar” Befehl zu “füttern”. Da die Darstellung auf dem pxlBlck_32x8 und der pxlBlck_RingClock etwas voneinander abweichen findet Ihr im folgenden zwei leicht unterschiedliche Codes für die Rules Eures pxlBlcks.

Da der pxlBlck_32x8 auch einen Lauftext darstellen kann ist in dem Rules-Beispiel für den pxlBlck_32x8 auch die automatische Ausgabe von “Auf Wiedersehen”-Nachrichten (in verschiedenen Sprachen) enthalten. (Warum? Siehe oben angegebene “GoodBye 2020”-Challenge. 🙂 ).

Die Rules werden jede Minute durch das “Clock#Time”-Event ausgelöst. Informationen zu den ESP-Easy-Rules findet Ihr unter anderem unter folgenden Links.

• 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

---

Pour pxlBlck_RingClock

Voici l'exemple de règles pour le pxlBlck_RingClock.

on Clock#Time=All,**:** do //1577833200=unixtime at "1.1.2020 @ 00:00" let,1,%unixtime%-1577833200 //calcul des secondes écoulées depuis le 1.1.2020 @ 00:00 let,1, %v1%/60 //conversion en minutes écoulées depuis le 1.1.2020 @ 00:00 let,1,%v1%/60 //conversion en heures écoulées depuis le 1.1.2020 @ 00:00 let,1,%v1%/24 //conversion en jours passé depuis le 1.1.2020 @ 00:00 let,2,%v1%/365 //calcul de la valeur relative de "combien de jours de l'année 2020 sont passés" let,2,%v2%*100 //conversion de la valeur relative (float) en pourcentage pbbar,10000,1,1,0,%v2%,50,00,0, endon

---

Pour pxlBlck_32x8

Voici l'exemple de règles pour le pxlBlck_RingClock.

on Clock#Time=All,**:** do //1577833200=unixtime at "1.1.2020 @ 00:00" let,1,%unixtime%-1577833200 //calcul des secondes écoulées depuis le 1.1.2020 @ 00:00 let,1, %v1%/60 //conversion en minutes écoulées depuis le 1.1.2020 @ 00:00 let,1,%v1%/60 //conversion en heures écoulées depuis le 1.1.2020 @ 00:00 let,1,%v1%/24 //conversion en jours passé depuis le 1.1.2020 @ 00:00 let,2,%v1%/365 //calcul de la valeur relative de "combien de jours de l'année 2020 sont passés" let,2,%v2%*100 //conversion de la valeur relative (float) en pourcentage pbbar,2000,0,1,1,%v2%,0,10,0, Delay 2000 // pour donner un peu de temps pour l'affichage du réglage de la barre pbrntxt,10,10,10,0,0,0,25,8 ,Au Revoir - Adios - Au revoir - Do Svidaniya - Güle güle - Aloha - Selamat tinggal - DaH jImej - Sayonara - Je suis groot., endon

---

afficher le temps restant en continu

Dans le cas où vous souhaitez afficher le temps restant (ou toute autre valeur affichée) en continu, il vous suffit de régler le temps d'affichage suffisamment haut pour qu'il soit supérieur à l'intervalle de mise à jour de l'affichage.

Ainsi, si vous souhaitez afficher une valeur à l'écran toutes les minutes et que celle-ci doit être affichée en permanence ou jusqu'à la prochaine mise à jour, vous devez définir la valeur pour display_duration réglé sur (au moins) 60000(ms).

---

Exemple : envoyer une valeur relative (pourcentage) à partir de NodeRed et l'afficher sur le pxlBlck

Un exemple de la façon dont vous pouvez envoyer une valeur de pourcentage relative (c'est-à-dire une valeur de 0 à 100) de NodeRed au pxlBlck et l'afficher sur son écran peut être trouvé dans le NodeCode suivant.

Vous pouvez trouver le code des exemples NodeRed décrits ici sous le lien suivant.

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

La manière dont vous pouvez procéder pour l'importer dans votre installation NodeRed est décrite dans l'article suivant.

• NodeRed - importer et exporter le code du nœud

---

Exemple : envoyer des valeurs non relatives depuis NodeRed et les afficher sur le PxlBlck

Dieses Beispiel zeigt wie Ihr auch nicht-relative Werte mithilfe von NodeRed an Euren pxlBlck senden könnt. Damit dies funktioniert wird der absolute Werte mithilfe der range-node nach “unten” und “oben” limitiert und auf den 0-100 Wertebereich des pxlBlcks skaliert. Dies passiert in der Node mit dem Namen “set allowed range for scaling”.

Vous pouvez trouver le code des exemples NodeRed décrits ici sous le lien suivant.

• https://github.com/Nerdiyde/Noc'est à direeRedSnippets/blob/master/snippets/pxlBlck_pbbar_command_nodeRed_control_example.json

La manière dont vous pouvez procéder pour l'importer dans votre installation NodeRed est décrite dans l'article suivant.

• NodeRed - importer et exporter le code du nœud

---

Exemple : Envoyer cinq valeurs relatives depuis NodeRed et les afficher sur le PxlBlck en même temps

Dieses Beispiel zeigt wie Ihr fünf Werte gleichzeitig mithilfe von NodeRed an Euren pxlBlck senden könnt. Zusätzlich können auch die Anzeige-Optionen eingestellt werden. Die einzelnen Werte werdend dazu in Variablen gesammelt und auf Knopfdruck (“send to pxlBlck”) zu einem Befehl zusammengesetzt und an den pxlBlck gesendet.

Vous pouvez trouver le code des exemples NodeRed décrits ici sous le lien suivant.

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

La manière dont vous pouvez procéder pour l'importer dans votre installation NodeRed est décrite dans l'article suivant.

• NodeRed - importer et exporter le code du nœud

---

Informations sur la personnalisation/configuration des exemples NodeRed listés

Vous devez adapter un peu les exemples donnés ci-dessus avant de pouvoir les tester avec succès.

---

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