I started documenting the pxlBlcks (which I had put off for a long time) in November 2020 after Hackaday.com announced the "GoodBye 2020" challenge. (More info about it 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 down.
If you have read the description of the challenge mentioned above, you might have noticed that the challenge fits very well to the functionality of the pxlBlcks. Scrolling texts could be displayed on it for a long time. So, for example, a "Good Bye 2020" message can be displayed without major problems.
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.
For example, the value of relative humidity can be displayed very well, because this value is already relative and corresponds to a percentage value. To display absolute values you have to use a bit more "mathematics". Sounds complicated. But it is not.
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
The following command is suitable to show relative or limited absolute values on the display of the pxlBlck. The "direction" of the visualized loading bar on the display can be set. Additionally a "filled"-flag can be set for the first of the sent relative values. This has the consequence that the display area is colored from zero up to the desired value also in the adjusted color. Last but not least, the display color of each individual value can be set.
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 | You can use this parameter to mirror the display of the value. With the help of the parameter "display_direction"This means that the BarGraph can be aligned in all directions. | 0-1 |
| first_bar_filled | This parameter enables or disables the filled representation for the first value. So if you set the first value to 25 and this parameter is enabled, 25% of the matrix will be "filled" with the color desired for this parameter. | 0-1 |
| display_direction | This parameter configures whether the value is displayed horizontally (0) or vertically (1). With the help of the parameter "mirrored", this alignment can be additionally mirrored. | 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.
These rules calculate the difference to 1.1.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 display on the pxlBlck_32x8 and the pxlBlck_RingClock differ slightly, you will find two slightly different codes for the rules of your pxlBlck below.
Since the pxlBlck_32x8 can also display a scrolling text, the rules example for the pxlBlck_32x8 also includes the automatic output of "Goodbye" messages (in different languages). (Why? See the "GoodBye 2020" challenge above. 🙂 ).
The rules are triggered every minute by the "Clock#Time" event. Information about the ESP-Easy-Rules can be found 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_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.
This example shows how you can send non-relative values to your pxlBlck using NodeRed. For this to work, the absolute value is limited to "down" and "up" using the range-node and scaled to the 0-100 value range of the pxlBlck. This happens in the node named "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
This example shows how you can send five values at the same time to your pxlBlck using NodeRed. Additionally you can set the display options. The single values will be collected in variables and on push of a button ("send to pxlBlck") assembled to a command and sent to the pxlBlck.
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. 🙂
English 
Deutsch 
Français 
Español 
Nederlands
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