I started with the documentation of the pxlBlcks (which I had been postponed for a too long time) in November 2020 after Hackaday.com had announced the "GoodBye 2020" challenge. (More information here: 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 all down.
Anyone who has read the description of the above-mentioned challenge may have noticed that the challenge fits the range of functions of the pxlBlcks very well. Scrolling texts have been shown on it for a long time. So, for example, a "Good Bye 2020" message can be displayed without any major problems.
Thanks to a tip from one of the first testers of the pxlBlck plug-in, I came up with another idea how to better visualize when 2020 is finally behind you: A kind of loading bar that visualizes how many days of 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 not only display the end of a period but also various scaled (if the value is absolute) or relative values.
For example, the value of the relative humidity can be displayed very well because this value is already relative and corresponds to a percentage. To represent absolute values you have to use a little more "mathematics". Sounds complicated. But it isn't.
How you can show relative values in loading bar optics on the display of your pxlBlcks is described in the following article.
Safety instructions
I know the following hints are always a bit annoying and seem unnecessary. But unfortunately, many people who knew it "better" from carelessness lost their eyes, fingers or other things or hurt themselves. In comparison, a loss of data is almost not worth mentioning, but even these can be really annoying. Therefore, please take five minutes to read the safety instructions. Even the coolest project is worth no injury or other annoyance. https://www.nerdiy.de/en/sicherheitshinweise/
Affiliate links / advertising links
The links to online stores listed here are so-called affiliate links. If you click on such an affiliate link and store via this link, Nerdiy.de receives a commission from the online store or provider concerned. The price doesn't change for you. If you do your purchases via these links, you will support Nerdiy.de in being able to offer further useful projects in the future. 🙂
Requirements
In order to be able to use the information in this article, you should have already set up and programmed your pxlBlck. You can find information about this in the following articles.
- pxlBlck - An IOT/SmartHome information system
- pxlBlck – Install and configure the pxlBlck plugin
- pxlBlck -- Configure watch faces and screensavers
Required tools:
- none -
Required material:
- none -
The command for displaying relative values
The following command is suitable for showing relative or limited absolute values on the display of the pxlBlck. The "direction" of the visualized loading bar can be set on the display. In addition, a "filled" flag can be set for the first of the relative values sent. As a result, the display area is colored in the set color from zero to the desired value. Last but not least, the display color of each individual value can be set.
If you'd rather see examples: scroll a little further. Below I have listed various 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]
Parameters description
parameters name | Description | Permitted range of values |
---|---|---|
display_duration | This parameter defines the display duration of the displayed value. This begins after all values have been shown on the display. | 1-86400000 |
mirrored | With the help of this parameter you can mirror the representation of the value. With the aid of the "display_direction" parameter, the BarGraph can thus be aligned in all directions. | 0-1 |
first_bar_filled | This parameter activates or deactivates the filled display for the first value. If you set the first value to 25 and this parameter is activated, 25% of the matrix will be "filled" with the color you want for this parameter. | 0-1 |
display_direction | This parameter configures whether the value is displayed horizontally (0) or vertically (1). This alignment can also be mirrored using the "mirrored" parameter. | 0-1 |
direct_output | If this option is set (= 1) then the value is shown immediately on the display. The display animation is therefore not displayed. | 0-1 |
bar_graph_value | That is the actual value between 0 and 100 that you want to represent. | 0-100 |
red | This parameter determines the brightness of the red color of the associated value. | 0-255 |
green | This parameter determines the brightness of the green color of the associated value. | 0-255 |
blue | This parameter determines the brightness of the blue color of the associated value. | 0-255 |
examples
More detailed information including pictures and videos of the various representations and how you can display them on your pxlBlck are contained in the following paragraph.
Show more than one value at the same time
If you only want to visualize one value on the display of your pxlBlck, the structure of the command is quite simple. To do this, you can simply use the table above as a guide. A command to display only one value could look like this, for example.
pbbar,10000,1,1,0,0,75,50,00,0,
This command shows the mirrored other filled value 75 with animation in red for 10 seconds (= 10000ms).
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 example given, I have marked the settings for the individual values 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 up to five values to the pxlBlck for display with just one command. But make sure that a maximum of "only" five values can be displayed at the same time.
Example: Use Rules to display a defined duration for a date every hour
For example, if you (as mentioned above) want to show when the current year (2020) is (finally) over, you can use the following rules.
These rules calculate the difference to 01/01/2020 00:00 from the current date or time and convert this difference into a percentage. This percentage is then used to "feed" the "pbbar" command. Since the representation on the pxlBlck_32x8 and the pxlBlck_RingClock differ slightly from each other, you will find two slightly different codes for the rules of your pxlBlck below.
Since the pxlBlck_32x8 can also display scrolling text, the rules example for the pxlBlck_32x8 also includes the automatic output of "goodbye" messages (in different languages). (Why? See "GoodBye 2020" challenge above. :)).
The rules are triggered every minute by the "Clock # Time" event. You can find information on the ESP Easy Rules under the following 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_32x8.

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
Display the remaining time continuously
In the event that you want to display the remaining duration (or any other displayed value) continuously, you only have to set the display duration so high that it is greater than the display update interval.
If you want to show a value on the display every minute and this 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 of how you can send a relative percentage value (ie a value from 0-100) from NodeRed to the pxlBlck and show it on its display can be found in the following NodeCode.

For the example to work, of course, you have to adjust the name of your pxlBlck. You can find information about this below under the examples listed here.
The code for the NodeRed examples described here can be found under the following link.
How you can proceed to import this into your NodeRed installation is described in the following article.
Example: Send non-relative values from NodeRed and display them on the PxlBlck
This example shows how you can send non-relative values to your pxlBlck using NodeRed. In order for this to work, the absolute value is limited to "bottom" and "top" using the range node and scaled to the 0-100 value range of the pxlBlck. This happens in the node with the name "set allowed range for scaling".

For the example to work, of course, you have to adjust the name of your pxlBlck. You can find information about this below under the examples listed here.
The code for the NodeRed examples described here can be found under the following link.
- https://github.com/Nerdiyde/Noi.eeRedSnippets/blob/master/snippets/pxlBlck_pbbar_command_nodeRed_control_example.json
How you can proceed to import this into your NodeRed installation is described in the following article.
Example: Send five relative values from NodeRed and display them simultaneously on the PxlBlck
This example shows how you can send five values to your pxlBlck at the same time using NodeRed. The display options can also be set. For this purpose, the individual values are collected in variables and combined into a command at the push of a button (“send to pxlBlck”) and sent to the pxlBlck.

For the example to work, of course, you have to adjust the name of your pxlBlck. You can find information about this below under the examples listed here.
The code for the NodeRed examples described here can be found under the following link.
How you can proceed to import this into your NodeRed installation is described in the following article.
Information on adapting / configuring the listed NodeRed examples
You should adjust the above examples a little before you can test them successfully.

To do this, you have to enter the appropriate name of your pxlBlck in the MQTT node.
In the example on the left, the name of the pxlBlck I used is
pxlBlck_32x8_ESP32
You should change this part of the topic and of course enter the name of your pxlBlck there.

Here you see the content of the first function node.
You don't have to change anything here. However, it is worth taking a look here if you are 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. If not or you have any other questions or suggestions, please let me know in the comments. Also, ideas for new projects are always welcome. 🙂
P.S. 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 appreciate that I share this information with you, I would be happy about a small donation to the coffee box. 🙂
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. 🙂
Hello, how can you "display"/embed spaces in a text with pbrntxt.
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