HowTo: pxlBlck - Display relative values as BarGraph

Posted on by

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)

I had used the pxlBlcks for a long time, but as so often I never found the time/motivation to write it down.

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.

Thanks to a tip from one of the first testers of the pxlBlck plugin, I came up with another idea how to visualize even better when the year 2020 is finally behind you: A kind of loading bar that visualizes how many days of the year 2020 are already gone and accordingly still remain.

For this purpose I have implemented a new command in the pxlBlck plugin with which up to five relative (percent) values can be shown on the display. So you can display not only the end of a period but also various scaled (if the value is absolute) or relative values.

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.

How you can show relative values on the display of your pxlBlck in loading bar optics is described in the following article.

Goodbye 2020 🙂

Safety instructions

I know the following notes are always kind of annoying and seem unnecessary. Unfortunately, many people who knew "better" have lost eyes, fingers or other things due to carelessness or injured themselves. Data loss is almost negligible in comparison, but even these can be really annoying. Therefore, please take five minutes to read the safety instructions. Because even the coolest project is not worth injury or other trouble.
https://www.nerdiy.de/sicherheitshinweise/

Affiliate links/advertising links

The links to online shops listed here are so-called affiliate links. If you click on such an affiliate link and make a purchase via this link, Nerdiy.de will receive a commission from the relevant online shop or provider. The price does not change for you. If you make your purchases via these links, you support Nerdiy.de in being able to offer other useful projects in the future. 🙂 

Requirements

To be able to use the information in this article, you should have already built and programmed your pxlBlck. You can find more information in the following articles.

Required tool:
- none -

Required material:
- none -

The command for displaying relative values

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.

If you prefer to see examples: Scroll a little further. Below I have listed several examples including the commands used.

Command name

pbbar

Command overview

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 description

Parameter nameDescriptionPermitted value range
display_durationThis parameter defines the display duration of the displayed value. This starts after all values have been shown on the display.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_outputIf this option is set (=1) then the value is immediately shown on the display. The display animation is therefore not shown.0-1
bar_graph_valueThis is the actual value between 0 and 100 that you want to display.0-100
redThis parameter determines the brightness of the red color of the associated value.0-255
greenThis parameter sets the brightness of the green color of the associated value.0-255
blueThis parameter sets the brightness of the blue color of the associated value.0-255
Example

More detailed information including pictures and videos of the different representations and how you can display them on your pxlBlck are included in the following paragraph.

Display more than one value at the same time

If you want to visualize only one value on the display of your pxlBlck, the structure of the command is quite simple. You can simply use the table above as a guide. For example, a command to display only one value could look like this.

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

This command shows for 10 seconds (=10000ms) the mirrored and filled Value 75 With animation in the Color red an.

If you now want to display (the maximum possible) five values, the command could look like this.

  • 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 the given example I have marked the settings for each value in color. The first value and its color settings are marked red, the second orange, the third green, the fourth blue and the fifth pink.

So you can send several values with only one command to the pxlBlck for display. But make sure that a maximum of five values can be displayed at the same time.

Example: Using rules to display a defined duration for a date every hour

For example, if you want to show (as mentioned above) when the current year (2020) is (finally) over, you can use the following rules.

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.

View of the rules listed below On the displays of the plBlck_32x8, pxlBlck_8x8 and the pxlBlck_RingClock.

For pxlBlck_RingClock

Here is the Rules example for the 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 minutes 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 many 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

For pxlBlck_32x8

Here is the Rules example for the 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 minutes 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 many 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 - Goodbye - Do Svidaniya - Güle güle - Aloha - Selamat tinggal - DaH jImej - Sayonara - I am groot., endon

Allow remaining duration to be displayed continuously

In case you want to display the remaining duration (or any other displayed value) continuously, you just need to set the display duration to be longer than the display refresh interval.

So if you want to show a value on the display every minute and this value should be shown permanently or until the next update, you have to set the value for display_duration to (at least) 60000(ms).

Example: Send relative (percent) value from NodeRed and display it on the pxlBlck

An example how to send a relative percentage value (i.e. a value from 0-100) from NodeRed to the pxlBlck and show it on its display can be found in the following NodeCode.

Here you can see the view of the example in the editor of NodeRed.
To make the example work you have to change the name of your pxlBlck. You can find more information about this below the examples listed here.

The code for the NodeRed examples described here can be found at the following link.

How to import it into your NodeRed installation is described in the following article.

View on the display if you use the above example for NodeRed.

Example: Send non-relative values from NodeRed and display them on the 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”.

Here you can see the view of the example in the editor of NodeRed.
To make the example work you have to change the name of your pxlBlck. You can find more information about this below the examples listed here.

The code for the NodeRed examples described here can be found at the following link.

How to import it into your NodeRed installation is described in the following article.

Example: Send five relative values from NodeRed and display them on the PxlBlck at the same time

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.

Here you can see the view of the example in the editor of NodeRed.
To make the example work you have to change the name of your pxlBlck. You can find more information about this below the examples listed here.

The code for the NodeRed examples described here can be found at the following link.

How to import it into your NodeRed installation is described in the following article.

View on the display of the pxlBlck_32x8 if you use the above example for NodeRed. The first displayed value (green) has first the value 25, then 50 and then 0.

Info about customization/configuration of the listed NodeRed examples.

You should adjust the above examples a bit before you can test them successfully.

For this you have to enter the appropriate name of your pxlBlck in the MQTT node.

In the example visible on the left, the name of my used pxlBlck is

pxlBlck_32x8_ESP32

You should change this part of the topic and of course enter the name of your pxlBlck there.

Here you can see the content of the first function node.

You don't have to change anything here. However, it's worth a look here if you're interested in how the command is composed and where the data is obtained from. 🙂

Have fun with the project

I hope everything worked as described for you. If not or you have questions or suggestions please let me know in the comments. I will then add this to the article if necessary.
Ideas for new projects are always welcome. 🙂

PS Many of these projects - especially the hardware projects - cost a lot of time and money. Of course I do this because I enjoy it, but if you think it's cool that I share the information with you, I would be happy about a small donation to the coffee fund. 🙂

Buy Me a Coffee at ko-fi.com       

4 comments

  1. Hi, thank you for your awesome project and great documentation.

    Have you released the STL files for the pxlBlck_32x8?

    Reply

    1. Hello Ronny,
      that should actually work. I tested it with the following command and the spaces in it were also displayed.
      pbrntxt,0,255,0,0,0,0,50,8,T est M essage,
      If it doesn't work for you, please send me the command you sent to the pxlBlck. 🙂
      Best regards
      Fabian

      Reply

Kommentar hinterlassen

Your email address will not be published. Erforderliche Felder sind mit * markiert

This site uses Akismet to reduce spam. Learn how your comment data is processed.