HowTo: pxlBlck – Relative Werte als BarGraph darstellen

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)

Genutzt hatte ich die pxlBlcks damals schon lange, nur wie so oft hatte ich nie die Zeit/Motivation gefunden das ganze aufzuschreiben.

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.

Dank eines Tipps, von einem der ersten Tester des pxlBlck-Plugins kam ich aber noch auf eine andere Idee wie man noch besser visualisieren kann wann man das Jahr 2020 endlich hinter sich hat: Eine Art Ladebalken der visualisiert wieviele Tage des Jahres 2020 schon weg sind und dementsprechend noch verbleiben.

Dazu habe ich in das pxlBlck-Plugin einen neuen Befehl implementiert mit dem sich bis zu fünf relative (Prozent)-Werte auf dem Display darstellen lassen. So kann man sich nicht nur das Ende eines Zeitraums sondern zusätzlich auch diverse skalierte (wenn der Wert absolut ist) oder relative Werte anzeigen lassen.

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.

Wie Ihr auf dem Display eures pxlBlcks relative Werte in Ladebalken-Optik darstellen könnt, ist in dem nachfolgenden Artikel beschrieben.

Sicherheitshinweise

Ich weiß die folgenden Hinweise sind immer irgendwie lästig und wirken unnötig. Aber leider haben schon viele Menschen die es "besser" wussten aus Leichtsinnigkeit Augen, Finger oder anderes verloren bzw. sich verletzt. Im Vergleich dazu ist ein Datenverlust fast nicht der Rede Wert, aber auch diese können echt ärgerlich sein. Deswegen nehmt Euch bitte fünf Minuten Zeit um die Sicherheitshinweise zu lesen. Denn auch das coolste Projekt ist keine Verletzung oder anderen Ärger wert.
https://www.nerdiy.de/sicherheitshinweise/

Affiliatelinks/Werbelinks

Die hier in aufgeführten Links zu Online-Shops sind sogenannte Affiliate-Links. Wenn Du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekommt Nerdiy.de von dem betreffenden Online-Shop oder Anbieter eine Provision. Für Dich verändert sich der Preis nicht. Falls Du Deine Einkäufe über diese Links tätigst unterstützt Du Nerdiy.de dabei auch in Zukunft weitere nützliche Projekte anbieten zu können. 🙂 

Voraussetzungen

Um die Infos in diesem Artikel nutzen zu können, solltet Ihr Euren pxlBlck bereits aufgebaut und programmiert haben. Infos dazu findet Ihr in den folgenden Artikeln.

• pxlBlck – Ein IOT/SmartHome Informations-System
• pxlBlck – Das pxlBlck-Plugin installieren und konfigurieren
• pxlBlck – Ziffernblätter und Bildschirmschoner konfigurieren

Benötigtes Werkzeug:
– keins –

Benötigtes Material:
– keins –

Der Befehl zur Darstellung relativer Werte

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.

Falls Ihr lieber Beispiele sehen wollt: Scrollt etwas weiter. Unten habe ich diverse Beispiele inklusive der genutzten Befehle aufgelistet.

Befehlsname

pbbar

Befehlsübersicht

pbbar,[display_duration1-86400000],[mirrored 0-1],[first_bar_filled 0-1],[display_direction 0-1],[bar_graph_value 0-100],[red 0-255],[green 0-255],[blue 0-500],[up to four additional value groups]

Parameter-Beschreibung

Beispiel

Detailliertere Informationen inkl. Bilder und Videos der verschiedenen Darstellungen und wie Ihr diese auf Eurem pxlBlck anzeigen könnt sind im folgendem Absatz enthalten.

Mehr als einen Wert gleichzeitig darstellen

Wenn Ihr nur einen Wert auf dem Display Eures pxlBlcks visualisieren wollt, ist der Aufbau des Befehls recht einfach. Dazu könnt Ihr Euch nämlich einfach an der oben stehenden Tabelle orientieren. Ein Befehl zur Anzeige nur eines Wertes könnte zum Beispiel folgendermaßen aussehen.

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

Dieser Befehl zeigt für 10 Sekunden (=10000ms) den gespiegelten und gefüllten Wert 75 mit Animation in der Farbe Rot an.

Wenn Ihr nun (die maximal möglichen) fünf Werte darstellen wollt, könnte der Befehl so aussehen.

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

In dem angegebenen Beispiel habe ich die Einstellungen für die einzelnen Werte jeweils farbig markiert. Der erste Wert und dessen Farbeinstellungen sind rot, der zweite orange, der dritte grün, der vierte blau und der fünfte pink markiert.

So könnt Ihr also mehrere Werte mit nur einem Befehl zur Darstellung an den pxlBlck senden. Achtete aber darauf, dass maximal fünf Werte gleichzeitig dargestellt werden können.

Beispiel: Mithilfe von Rules jede Stunde eine definierte Dauer zu einem Datum anzeigen lassen

Wenn Ihr zum Beispiel (wie oben schon erwähnt) darstellen wollt wann das aktuelle Jahr (2020) (endlich) zu Ende ist, könnt Ihr folgende Rules nutzen.

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

Für pxlBlck_RingClock

Hier das Rules Beispiel für die pxlBlck_RingClock.

on Clock#Time=All,**:** do

   //1577833200=unixtime at "1.1.2020 @ 00:00"

   let,1,%unixtime%-1577833200	//calculating seconds passed since 1.1.2020 @ 00:00
   let,1,%v1%/60   //converting to minuntes passed since 1.1.2020 @ 00:00
   let,1,%v1%/60   //converting to hours passed since 1.1.2020 @ 00:00
   let,1,%v1%/24   //converting to days passed since 1.1.2020 @ 00:00
   let,2,%v1%/365  //calculating relative value of "how much days of the year 2020 are passed"
   let,2,%v2%*100  //converting relative (float) value to percentage

   pbbar,10000,1,1,0,%v2%,50,00,0,

endon

Für pxlBlck_32x8

Hier das Rules Beispiel für die pxlBlck_RingClock.

on Clock#Time=All,**:** do

   //1577833200=unixtime at "1.1.2020 @ 00:00"

   let,1,%unixtime%-1577833200	//calculating seconds passed since 1.1.2020 @ 00:00
   let,1,%v1%/60   //converting to minuntes passed since 1.1.2020 @ 00:00
   let,1,%v1%/60   //converting to hours passed since 1.1.2020 @ 00:00
   let,1,%v1%/24   //converting to days passed since 1.1.2020 @ 00:00
   let,2,%v1%/365  //calculating relative value of "how much days of the year 2020 are passed"
   let,2,%v2%*100  //converting relative (float) value to percentage

   pbbar,2000,0,1,1,%v2%,0,10,0,

   Delay 2000 // to give some time for the display of the bar setting

   pbrntxt,10,10,10,0,0,0,25,8,Au Revoir - Adios - Auf Wiedersehen - Do Svidaniya - Güle güle - Aloha - Selamat tinggal - DaH jImej - Sayonara - I am groot.,

endon

Restdauer kontinuierlich darstellen lassen

Für den Fall, dass Ihr die Restdauer (oder auch jeden anderen dargestellten Wert) durchgängig darstellen wollt, müsst Ihr lediglich die Anzeigedauer so hoch einstellen, dass sie größer als der Aktualisierungsintervall der Anzeige ist.

Wenn Ihr also jede Minute einen Wert auf dem Display darstellen wollt und dieser dauerhaft bzw. bis zur nächsten Aktualisierung dargestellt werden soll, müsst Ihr den Wert für display_duration auf (mindestens) 60000(ms) stellen.

Beispiel: Relativen (prozent)-Wert aus NodeRed senden und auf dem pxlBlck darstellen

Ein Beispiel wie Ihr einen relativen prozent-Wert (also ein Wert von 0-100) aus NodeRed zum pxlBlck senden und auf dessen Display darstellen könnt, findet Ihr in folgendem NodeCode.

Den Code zu den hier beschriebenen NodeRed-Beispielen findet Ihr unter folgendem Link.

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

Wie Ihr vorgehen könnt um diesen in Eure NodeRed-Installation zu importieren ist in dem folgenden Artikel beschrieben.

• NodeRed – Node-Code importieren und exportieren

Beispiel: Nicht-relative Werte aus NodeRed senden und auf dem PxlBlck darstellen

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“.

Den Code zu den hier beschriebenen NodeRed-Beispielen findet Ihr unter folgendem Link.

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

Wie Ihr vorgehen könnt um diesen in Eure NodeRed-Installation zu importieren ist in dem folgenden Artikel beschrieben.

• NodeRed – Node-Code importieren und exportieren

Beispiel: Fünf relative Werte aus NodeRed senden und gleichzeitig auf dem PxlBlck darstellen

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.

Den Code zu den hier beschriebenen NodeRed-Beispielen findet Ihr unter folgendem Link.

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

Wie Ihr vorgehen könnt um diesen in Eure NodeRed-Installation zu importieren ist in dem folgenden Artikel beschrieben.

• NodeRed – Node-Code importieren und exportieren

Infos zur Anpassung/Konfiguration der aufgeführten NodeRed-Beispiele

Die oben angegebenen Beispiel solltet Ihr noch etwas anpassen bevor Ihr diese erfolgreich testen könnt.

Dazu müsst Ihr jeweils in der MQTT-Node den passenden Namen Eures pxlBlcks eintragen.

In dem links sichtbaren Beispiel lautet der Name meines verwendeten pxlBlcks

pxlBlck_32x8_ESP32

Diesen Teil des Topics solltet Ihr ändern und dort natürlich den Namen Eures pxlBlcks angeben.

Hier sehr Ihr den Inhalt der ersten function-Node.

Ändern müsst Ihr hier nichts. Allerdings lohnt sich ein Blick hier rein, wenn Ihr interessiert seid, wie der Befehl zusammengesetzt wird und woher die Daten bezogen werden. 🙂

Viel Spaß mit dem Projekt

Ich hoffe bei euch hat alles wie beschrieben funktioniert. Falls nicht oder ihr Fragen oder Anregungen habt lasst es mich in den Kommentaren bitte wissen. Ich trage dies dann ggf. in den Artikel nach.
Auch Ideen für neue Projekte sind immer gerne willkommen. 🙂

P.S. Viele dieser Projekte - besonders die Hardwareprojekte - kosten viel Zeit und Geld. Natürlich mache ich das weil ich Spaß daran habe, aber wenn Du es cool findest, dass ich die Infos dazu mit Euch teile, würde ich mich über eine kleine Spende an die Kaffeekasse freuen. 🙂