HowTo: pxlBlck - Display relative values as BarGraph

I started documenting the pxlBlcks (which I had been putting off for a long time) in November 2020 after Hackaday.com 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 down.

If you have read the description of the challenge mentioned above, you may have noticed that the challenge fits in very well with the range of functions of the pxlBlcks. It has long been possible to display scrolling texts on it. So, for example, a "Good Bye 2020" message can also be displayed without any 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 relative humidity value 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 little more "math". 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.

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

The following command is suitable for displaying relative or limited absolute values on the display of the pxlBlck. The "direction" of the visualized loading bar on the display can be set. In addition, a "filled" flag can be set for the first of the relative values sent. As a result, the display area from zero to the desired value is also colored in the set 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 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
mirroredYou can use this parameter to mirror the display of the value. With the help of the parameter "display_direction", the BarGraph can be aligned in all directions. 0-1
first_bar_filledThis parameter activates or deactivates the filled display for the first value. So if you set the first value to 25 and this parameter is activated, 25% of the matrix will be "filled" with the desired color for this parameter. 0-1
display_directionThis parameter configures whether the value is displayed horizontally (0) or vertically (1). With the help of the parameter "mirrored", this alignment can also be reflected.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.

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. As 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 on the ESP Easy Rules can be found under the following 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.

This example shows how you can also send non-relative values to your pxlBlck using NodeRed. For this to work, the absolute values are limited "downwards" and "upwards" using the range node and scaled to the 0-100 value range of the pxlBlck. This is done in the node with the name "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

This example shows how you can send five values simultaneously to your pxlBlck using NodeRed. The display options can also be set. 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.

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?

    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

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.