HowTo: pxlBlck – Display relative values as a BarGraph

Posted on by

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.

Goodbye 2020 🙂

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.

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 nameDescriptionPermitted range of values
display_durationThis parameter defines the display duration of the displayed value. This begins after all values have been shown on the display.1-86400000
mirroredWith 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_filledThis 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_directionThis 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_outputIf 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_valueThat is the actual value between 0 and 100 that you want to represent.0-100
redThis parameter determines the brightness of the red color of the associated value.0-255
greenThis parameter determines the brightness of the green color of the associated value.0-255
blueThis 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.

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

Here you can see the example in the editor of NodeRed.
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.

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

Here you can see the example in the editor of NodeRed.
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 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.

Here you can see the example in the editor of NodeRed.
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.

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

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

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