I started developing the pxlBlcks because I was looking for a way to stay informed about events in the SmartHome. There are now two options integrated into the pxlBlck plugin.
In addition to the option of displaying animations, there is also the option of loading predefined icons onto the pxlBlck and displaying them there.
These icons are created beforehand using an image editing program and transferred to the pxlBlck. They can then be displayed by entering the correct command.
How to create these icons, transfer them to the pxlBlck and then display them there 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
Before you can display icons on your pxlBlck, you should have already set it up and programmed it. Information on the various hardware platforms can be found in the following category
Information on programming and configuring the pxlBlck can be found in the following articles
- pxlBlck - Install and configure the pxlBlck plugin
- pxlBlck - Commands for configuring the pxlBlck
- pxlBlck - configure clock faces and screensavers
Required tool:
- none -
Material requiredl:
- none -
Download GIMP
In principle, all you need is an image editing program with which you can create or edit .ppm files.
One of these programs is "GIMP". This is free and you can download it from the following link.
Install GIMP
After downloading "GIMP", you must first install the program.
To do this, open the downloaded file and...
... installs the program.
You can also find information on installing a program in the article Install programs - an example
Create new file
After installation, you can now get started. To do this, start GIMP.
GIMP starts with an empty window by default. As you now want to create an icon, you must first create a new file.
To do this, click on "File" and "New".
A window will then open in which you have to open the "Advanced Options" by clicking on the plus in the area marked in red.
Now set all the options in the dialog box as shown in the image on the left.
The "Image size" in the upper red marked area is particularly important. This must match your pxlBlck.
For example, if you want an icon for the pxlBlck_8x8 design, you must also enter an 8 for "Width" and "Height".
The dimension of the icon must therefore always match the dimension of the LED matrix used.
Zoom in file view
Since the file is very small, you should enlarge the image area.
To do this, click on the magnifying glass symbol and activate the magnifying glass mode.
To enlarge the image, simply drag a square over the area you want to enlarge.
Edit image and draw content
Now you can finally start editing the icon.
Switch to pen mode to edit the icon. To do this, click on the brush icon in the toolbar and hold down the mouse button.
Another menu will then appear in which you can select the pen symbol.
So that you can now edit the icon pixel by pixel, you must now set the "pen thickness" to one pixel.
To do this, move the slider in the area marked in red all the way to the left or set it to one manually.
You can now edit the image.
To change the pen color, you can use the "color picker" to select a different color.
To do this, click on the colored (in this case black) square in the area marked in red.
This opens the "Color picker" shown on the left.
Select the color you want to configure for the icon and confirm this by clicking on "OK".
Now you can design the icon according to your wishes.
In the example on the left, I have simply painted a colorful bar.
Note that black squares on the pxlBlck do not light up. the white area, on the other hand, lights up in white.
Export icon to the correct format
As soon as you have finished editing your icon, you must export it before you can copy it to the pxlBlck.
To do this, click on "File" again and on "Export As...".
In the dialog box that now opens, you must first check that the option (bottom left) "Select File Type (By Extension)" is activated.
Then select a storage location and enter a name of your choice as the file name. However, it is important that the file extension .ppm reads.
As soon as everything is configured correctly, you can close the dialog box by clicking on "OK".
In the small dialog box that opens, confirm that you want to save the file in "ASCII" format.
Your icon file should now have been created in the location you selected.
Make a note of this location, as the icon file will be copied from there to your pxlBlck in the next paragraph.
Copy icons to the pxlBlock
The created icon file must now be transferred to your pxlBlck.
To do this, switch back to the web menu of your pxlBlck. To do this, you must enter the IP address of the pxlBlck in the address bar of your browser.
Then switch to the "Tools" tab by clicking on the button marked in red.
Scroll to the bottom of the configuration page in the "Tools" tab.
Click on the "File browser" button there.
In this window you can see all the files that are already stored in the memory of the pxlBlck or ESP8266.
To load the new icon file into this memory, you must first click on the "Upload" button.
In the next view, click on the "Browse" button marked in red...
...and select your previously created file.
Then confirm this by clicking on "Open".
You will now land in the previous window.
To start the upload of the selected file, you must now click on the "Upload" button.
Depending on the file size of the icon file, the upload may take a while.
As soon as the process is complete, you will see the success message highlighted in red.
To check that the file has been successfully uploaded, you can now switch back to the "Tools" tab and ...
... switch to the "File browser" from there.
The previously uploaded file should now be listed there.
Command to display icons on the pxlBlck
You have now transferred the icon file to your pxlBlck. However, the icon will only be displayed if you send a command to the pxlBlck. Below in this paragraph (Name: Examples) you will find a few examples of how to display the previously created example icon.
How to send commands to an ESPEasy device is described in the article ESPEasy - Execute commands and actions via HTTP, MQTT, UDP and directly described.
Command name
pbicon
Command overview
pbicon,[incoming animation 0-255], [outgoing animation 0-255], [in delay 0-255], [show delay 0-255], [out delay 0-255], [brightness 0-255], [running text 0-255],[icon name],[repetition 0-10],
Parameter description
| Parameter name | Description | Permitted value range |
|---|---|---|
| incoming animation | The ID of the input animation | 1-3 |
| outgoing animation | The ID of the output animation | 1-3 |
| in delay | This parameter sets the duration used for the input animation. It is specified in milliseconds. | 0-2000 |
| show delay | You can use this parameter to set the display duration of the icon and any text. It is specified in milliseconds. | 0-10000 |
| out delay | This parameter sets the duration used for the output animation. It is specified in milliseconds. | 0-2000 |
| brightness | You can use this parameter to set the maximum brightness for your icon and any text. Please note that a high brightness also requires more power and the connected LED matrix must be designed accordingly. | 0-100 |
| runningtext | You can use this parameter to specify a text that will be displayed together with the icon. If no text is required, you can simply leave this parameter blank. | text |
| icon name | This parameter corresponds to the file name of the icon uploaded to the SPIFFS of the pxlBlck | text |
| repetition | You can use this parameter to repeat the icon display. For example, you can also create flashing icons. | 0-10 |
The following tables contain an overview of the available animations for showing and hiding the icons.
Fade-in animations
| Surname | Description | ID |
|---|---|---|
| fade in | The icon and, if applicable, the scrolling text are displayed with the set "show delay" time. | 1 |
| Instant on | The icon and any defined text are displayed immediately. | 2 |
| Fly in from right | The icon and any defined scrolling text are inserted into the display area from the right-hand side. The "show delay" time defines how long this process takes. | 3 |
Fade-out animations
| Surname | Description | ID |
|---|---|---|
| fade out | The icon and, if applicable, the scrolling text are hidden with the set "out delay" time. | 1 |
| instant off | The icon and any defined text are immediately hidden. | 2 |
| Fly out to left | The icon and any defined scrolling text are moved to the left-hand side of the display area. The "out delay" time defines how long this process takes. | 3 |
Examples
There are various ways to execute commands on your pxlBlck. One of these ways is via the web menu.
To do this, switch to the "Tools" tab.
There you can enter the command in the text field highlighted in red on the left.
By clicking on "Submit", the command is sent to the pxlBlck and executed.
If the icon is found, the highlighted message is displayed.
The icon is shown directly with the set parameters on the display of the pxlBlck.
If you have entered an incorrect file name for the icon file and the file name cannot be found, the highlighted error message is displayed.
In addition, the entire LED matrix of the pxlBlck flashes five times in red.
The following section describes the display of the previously created icon as an example (including the commands used).
Info:
- Input animation: 1
- Output animation: 1
- Input delay: 1000ms
- Display duration: 10000ms
- Output delay: 1000ms
- Max. Brightness: 50%
- Text: - (no text is displayed)
- Icon name: Test.ppm
- Repetitions: none
Command:
pbicon,1,1,1000,10000,1000,50,-,Test.ppm,
Info:
- Input animation: 1
- Output animation: 1
- Input delay: 100ms
- Display duration: 100ms
- Output delay: 100ms
- Max. Brightness: 50%
- Text: - (no text is displayed)
- Icon name: Test.ppm
- Repetitions: 3
Command:
pbicon,1,1,100,100,100,50,-,Test.ppm,3,
Info:
- Input animation: 3
- Output animation: 3
- Input delay: 100ms
- Display duration: 1000ms
- Output delay: 100ms
- Max. Brightness: 50%
- Text: - (no text is displayed)
- Icon name: Test.ppm
- Repetitions: 2
Command:
pbicon,3,3,100,1000,100,50,-,Test.ppm,2,
Info:
- Input animation: 3
- Output animation: 3
- Input delay: 1000ms
- Display duration: 1000ms
- Output delay: 500ms
- Max. Brightness: 50%
- Text: TestMessage
- Icon name: Test.ppm
- Repetitions: none
Command:
pbicon,3,3,1000,1000,500,50,TestMessage,Test.ppm,
Info:
- Input animation: 2
- Output animation: 3
- Input delay: 1000ms
- Display duration: 1000ms
- Output delay: 500ms
- Max. Brightness: 50%
- Text: TestMessage
- Icon name: Test.ppm
- Repetitions: none
Command:
pbicon,2,3,1000,1000,500,50,TestMessage,Test.ppm,
Info:
- Input animation: 1
- Output animation: 3
- Input delay: 2000ms
- Display duration: 1000ms
- Output delay: 500ms
- Max. Brightness: 50%
- Text: TestMessage
- Icon name: Test.ppm
- Repetitions: none
Command:
pbicon,1,3,2000,1000,500,50,TestMessage,Test.ppm,
Info:
- Input animation: 3
- Output animation: 1
- Input delay: 1000ms
- Display duration: 1000ms
- Output delay: 500ms
- Max. Brightness: 50%
- Text: - (no text is displayed)
- Icon name: Test.ppm
- Repetitions: none
Command:
pbicon,3,1,1000,1000,500,50,-,Test.ppm,
Download prepared icons
The example icon created here and a few other prepared icons can also be found under the following link in the Nerdiy-Git: https://github.com/Nerdiyde/pxlBlck/tree/main/icons
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
Hello, I have another question. I am currently running the date every 10 seconds. Now I wanted to display the temperature or the date (%sysday_0%.%sysmonth_0%.%sysyears% ) as a "still image". Somehow I can't get it to work. Can you perhaps show a small example?
Hey Stefan,
so you want to display a text permanently, right?
This cannot be done so easily. But I'll write it down and will add this function soon. 🙂
Best regards
Fabian