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

J'ai commencé à documenter les pxlBlcks (qui avaient été reportés depuis longtemps) en novembre 2020 après que Hackaday.com a annoncé le défi « GoodBye 2020 ». (Plus d'informations ici : 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.

Quiconque a lu la description du défi mentionnée ci-dessus aura peut-être remarqué que le défi correspond très bien à l'éventail de fonctions des pxlBlcks. Des textes défilants y sont affichés depuis longtemps. Ainsi, par exemple, un message « Good Bye 2020 » peut être affiché sans problème majeur.

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.

Par exemple, la valeur de l'humidité relative peut très bien être affichée car cette valeur est déjà relative et correspond à une valeur en pourcentage. Pour représenter des valeurs absolues il faut utiliser un peu plus de « mathématiques ». Cela semble compliqué. Mais ce n'est pas.

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

Au revoir 2020 🙂

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.

Outil requis :
- Non -

Matériel requis :
- Non -


La commande pour tracer les valeurs relatives

La commande suivante convient pour afficher des valeurs absolues relatives ou limitées sur l'écran du pxlBlck. La « direction » de la barre de chargement visualisée sur l’écran peut être définie. De plus, un indicateur « rempli » peut être défini pour la première des valeurs relatives envoyées. Cela signifie que la zone d'affichage est colorée dans la couleur définie de zéro à la valeur souhaitée. Enfin et surtout, la couleur d'affichage de chaque valeur individuelle peut être ajustée.

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ètreDescriptionPlage de valeurs autorisée
display_durationCe 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 miroirVous pouvez utiliser ce paramètre pour refléter la représentation de la valeur. En utilisant le paramètre "direction_affichage" Le BarGraph peut être aligné dans toutes les directions. 0-1
first_bar_filledCe paramètre active ou désactive l'apparence remplie pour la première valeur. Ainsi si vous fixez la première valeur à 25 et que ce paramètre est activé, 25% de la matrice sera « rempli » de la couleur souhaitée pour ce paramètre. 0-1
direction_affichageCe paramètre configure si la valeur est affichée horizontalement (0) ou verticalement (1). En utilisant le paramètre "en miroir» Cette orientation peut aussi se refléter.0-1
sortie_directeSi 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_valueIl s'agit de la valeur réelle entre 0 et 100 que vous souhaitez représenter.0-100
rougeCe paramètre détermine la luminosité de la couleur rouge de la valeur associée.0-255
vertCe paramètre détermine la luminosité de la couleur verte de la valeur associée.0-255
bleuCe 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.

Ces règles calculent la différence entre le 1er janvier 2020 à minuit et la date ou l'heure actuelle et convertissent cette différence en pourcentage. Ce pourcentage est ensuite utilisé pour « alimenter » la commande « pbbar ». Comme l'affichage sur le pxlBlck_32x8 et le pxlBlck_RingClock diffère légèrement l'un de l'autre, vous trouverez ci-dessous deux codes légèrement différents pour les règles de votre pxlBlck.

Puisque le pxlBlck_32x8 peut également afficher du texte défilant, l'exemple de règles pour le pxlBlck_32x8 inclut également la sortie automatique de messages « au revoir » (dans différentes langues). (Pourquoi ? Voir le défi « GoodBye 2020 » ci-dessus. 🙂 ).

Les règles sont déclenchées toutes les minutes par l'événement « Clock#Time ». Vous pouvez trouver des informations sur les règles ESP Easy, entre autres, sous les liens suivants.

Visualisation des règles listées ci-dessous Sur les afficheurs du plBlck_32x8, pxlBlck_8x8 et du pxlBlck_RingClock.

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.

Ici vous pouvez voir la vue de l'exemple dans l'éditeur NodeRed.
Pour que l'exemple fonctionne, vous devez bien sûr changer le nom de votre pxlBlck. Des informations à ce sujet peuvent être trouvées ci-dessous sous les exemples énumérés ici.

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

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

Voir sur l'écran si vous utilisez l'exemple NodeRed donné ci-dessus.

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

Cet exemple montre comment vous pouvez également envoyer des valeurs non relatives à votre pxlBlck à l'aide de NodeRed. Pour que cela fonctionne, les valeurs absolues sont limitées « vers le bas » et « vers le haut » à l'aide du nœud de plage et mises à l'échelle sur la plage de valeurs 0-100 du pxlBlck. Cela se produit dans le nœud appelé « définir la plage autorisée pour la mise à l'échelle ».

Ici vous pouvez voir la vue de l'exemple dans l'éditeur NodeRed.
Pour que l'exemple fonctionne, vous devez bien sûr changer le nom de votre pxlBlck. Des informations à ce sujet peuvent être trouvées ci-dessous sous les exemples énumérés ici.

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

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


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

Cet exemple montre comment vous pouvez envoyer cinq valeurs à votre pxlBlck en même temps à l'aide de NodeRed. De plus, les options d'affichage peuvent également être définies. Les valeurs individuelles sont collectées dans des variables et combinées en une commande sur simple pression d'un bouton (« envoyer à pxlBlck ») et envoyées au pxlBlck.

Ici vous pouvez voir la vue de l'exemple dans l'éditeur NodeRed.
Pour que l'exemple fonctionne, vous devez bien sûr changer le nom de votre pxlBlck. Des informations à ce sujet peuvent être trouvées ci-dessous sous les exemples énumérés ici.

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

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

Voir sur l'affichage du pxlBlck_32x8 si vous utilisez l'exemple NodeRed ci-dessus. La première valeur affichée (verte) a d'abord la valeur 25, puis 50 et enfin 0.

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.

Pour ce faire, vous devez entrer le nom approprié de votre pxlBlck dans le nœud MQTT.

Dans l'exemple de gauche, le nom de celui que j'utilise est pxlBlcks

pxlBlck_32x8_ESP32

Vous devez modifier cette partie du sujet et bien sûr y entrer le nom de votre pxlBlck.

Ici, vous voyez le contenu du premier nœud de fonction.

Vous n'avez rien à changer ici. Cependant, cela vaut la peine de jeter un coup d'œil ici si vous êtes intéressé par la composition de la commande et d'où proviennent les données. 🙂


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

Achetez-moi un café sur ko-fi.com       

4 commentaires

  1. Bonjour, merci pour votre projet génial et votre excellente documentation.

    Avez-vous publié les fichiers STL pour le pxlBlck_32x8 ?

    1. Bonjour Rony,
      cela devrait effectivement fonctionner. Je l'ai testé avec la commande suivante et les espaces qu'elle contenait étaient également affichés.
      pbrntxt,0,255,0,0,0,0,50,8,Message de test,
      Si cela ne fonctionne pas pour vous, veuillez m'envoyer la commande que vous avez envoyée au pxlBlck. 🙂
      Cordialement
      Fabien

Kommentar hinterlassen

Votre adresse e-mail ne sera pas publiée. Erforderliche Felder sind mit * markiert

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.