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.

Good Bye 2020 🙂

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.

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

ParameternameBeschreibungErlaubter Wertebereich
display_durationDieser Parameter legt die Anzeigedauer des dargestellten Wertes fest. Diese beginnt, nachdem alle Werte auf dem Display dargestellt wurden.1-86400000
mirroredMithilfe dieses Parameters könnt Ihr die Darstellung des Wertes spiegeln. Mithilfe des Parameters “display_direction” lässt sich der BarGraph so also in alle Richtungen ausrichten. 0-1
first_bar_filledDieser 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
display_directionDieser Parameter konfiguriert, ob der Wert waagerecht (0) oder senkrecht (1) dargestellt wird. Mithilfe des Parameters “mirrored” lässt sich diese Ausrichtung zusätzlich spiegeln.0-1
direct_outputWenn diese Option gesetzt (=1) ist dann wird der Wert sofort auf dem Display dargestellt. Die Anzeigeanimation wird also nicht angezeigt.0-1
bar_graph_valueDas ist der eigentliche Wert zwischen 0 und 100 den Ihr darstellen wollt.0-100
redDieser Parameter bestimmt die Helligkeit der Roten Farbe des zugehörigen Wertes.0-255
greenDieser Parameter bestimmt die Helligkeit der Grünen Farbe des zugehörigen Wertes.0-255
blueDieser Parameter bestimmt die Helligkeit der Blauen Farbe des zugehörigen Wertes.0-255
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.

Ansicht der unten aufgeführten Rules Auf den Displays des plBlck_32x8, pxlBlck_8x8 und der pxlBlck_RingClock.

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.

Hier seht Ihr die Ansicht des Beispiels im Editor von NodeRed.
Damit das Beispiel funktioniert müsst Ihr natürlich noch den Namen Eures pxlBlcks anpassen. Infos dazu findet Ihr weiter unten unter den hier aufgeführten Beispielen.

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

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

Ansicht auf dem Display, wenn Ihr das oben angegebene Beispiel für NodeRed nutzt.

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

Hier seht Ihr die Ansicht des Beispiels im Editor von NodeRed.
Damit das Beispiel funktioniert müsst Ihr natürlich noch den Namen Eures pxlBlcks anpassen. Infos dazu findet Ihr weiter unten unter den hier aufgeführten Beispielen.

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

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


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.

Hier seht Ihr die Ansicht des Beispiels im Editor von NodeRed.
Damit das Beispiel funktioniert müsst Ihr natürlich noch den Namen Eures pxlBlcks anpassen. Infos dazu findet Ihr weiter unten unter den hier aufgeführten Beispielen.

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

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

Ansicht auf dem Display, des pxlBlck_32x8 wenn Ihr das oben angegebene Beispiel für NodeRed nutzt. Der erste dargestellte Wert (grün) hat dabei erst den Wert 25, dann 50 und dann 0.

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

Buy Me a Coffee at ko-fi.com       

4 Kommentare

    1. Hallo Ronny,
      das sollte eigentlich funktionieren. Ich habe es mit folgendem Befehl getestet und die darin enthaltenen Leerzeichen wurden auch dargestellt.
      pbrntxt,0,255,0,0,0,0,50,8,T e s t M e s s a g e,
      Falls es bei Dir nicht funktioniert, schicke mir mal bitte den Befehl den du an den pxlBlck gesendet hast. 🙂
      Beste Grüße
      Fabian

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.