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.
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.
- pxlBlck - An IOT/SmartHome Information System
- pxlBlck - Install and configure the pxlBlck plugin
- pxlBlck - configure clock faces and screensavers
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 name | Description | Permitted value range |
---|---|---|
display_duration | This parameter defines the display duration of the displayed value. This starts after all values have been shown on the display. | 1-86400000 |
mirrored | Mithilfe 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_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 |
display_direction | Dieser 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_output | If 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_value | This is the actual value between 0 and 100 that you want to display. | 0-100 |
red | This parameter determines the brightness of the red color of the associated value. | 0-255 |
green | This parameter sets the brightness of the green color of the associated value. | 0-255 |
blue | This 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.
- 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
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.

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

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.
- https://github.com/Nerdiyde/Noi.eeRedSnippets/blob/master/snippets/pxlBlck_pbbar_command_nodeRed_control_example.json
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.

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.
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. 🙂
Hi, thank you for your awesome project and great documentation.
Have you released the STL files for the pxlBlck_32x8?
hey sarreck,
thanks 🙂
Not yet, but I'm working on it, sorry. 🙂
Hallo, wie kann man bei pbrntxt Leerzeichen in einem Text “anzeigen”/einbinden.
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