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.

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

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.

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

The code for the NodeRed examples described here can be found at the following link.

• https://github.com/Nerdiyde/NodeRedSnippets/blob/master/snippets/pxlBlck_pbbar_command_nodeRed_control_example.json

How to import it into your NodeRed installation is described in the following article.

• NodeRed - import and export node code

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

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.

• NodeRed - import and export node code

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.

The code for the NodeRed examples described here can be found at the following link.

• https://github.com/Nerdiyde/NodeRedSnippets/blob/master/snippets/pxlBlck_pbbar_command_nodeRed_control_example.json

How to import it into your NodeRed installation is described in the following article.

• NodeRed - import and export node code

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