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 plug-in.
In addition to being able to display animations, there is also the possibility of loading predefined icons onto the pxlBlck and displaying them there.
These icons are created beforehand with the help of an image program and transferred to the pxlBlck. There they can be displayed by entering the correct command.
How you create these icons, transfer them to the pxlBlck and then display them there is described in the following article.
Inhalte
- 1 Safety instructions
- 2 Affiliate links / advertising links
- 3 Requirements
- 4 Download “GIMP”
- 5 Install “GIMP”
- 6 Create new file
- 7 Zoom in on file view
- 8 Edit picture and draw content
- 9 Export the icon in the correct format
- 10 Copy the Icon to the pxlBlock
- 11 Command to display icons on the pxlBlck
- 12 Download prepared icons
- 13 Have fun with the project
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 shops listed here are so-called affiliate links. If you click on such an affiliate link and shop via this link, Nerdiy.de receives a commission from the online shop 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
Before you can display icons on your pxlBlck you should have already set up and programmed it. You can find information about the various hardware platforms 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 to configure the pxlBlck
- pxlBlck – Configure clock faces and screensavers
Required tools:
– none –
Required material:
– none –
Download “GIMP”
In principle you only need an image processing 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 have to install the program first.
Open the downloaded file and …
… install the program.
Information on installing a program can also be found in the article Installing programs – an example
Create new file
After the installation you can start now. To do this, start GIMP.
By default, GIMP starts with a blank window. Since you now want to create an icon, you must first create a new file.
To do this, click on “File” and “New”.
A window then opens in which you now have to open the “Advanced Options” by clicking on the plus in the area marked in red.
Now set all options in the dialog window as shown in the picture on the left.
The “Image size” in the upper area marked in red is special. Because this has to match your pxlBlck.
For example, if you want to design an icon for the pxlBlck_8x8, you have to 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 on 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.
In order to enlarge the picture you only have to draw a square over the area that you want to enlarge.
Edit picture 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 symbol in the toolbar and hold the mouse button down.
This brings up another menu in which you can then select the pencil symbol.
So that you can edit the icon pixel by pixel, you now have to set the “pen thickness” to one pixel.
To do this, slide the slider in the red marked area all the way to the left or manually set it to one.
You can now edit the picture.
To change the pen color, you can use the “color picker” to set 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 with a click on “OK”.
Now you can design the icon according to your wishes.
In the example on the left, I just painted a colorful bar.
Note that black squares do not light up on the pxlBlck. the white surface, on the other hand, glows in white color.
Export the icon in the correct format
As soon as you have finished editing your icon, you have to export it before you can copy it to the pxlBlck.
To do this, click on “File” again and on “Export As …”.
In the dialog window that now opens you must first check that the option (bottom left) “Select File Type (By Extension)” is activated.
Then you choose a storage location and enter a name of your choice as the file name. But it is important that the file extension is .ppm.
As soon as everything is configured correctly you can close the dialog box by clicking on “OK”.
In the small dialog window that opens, you confirm that you want to save the file in “ASCII” format.
Your icon file should now have been created in the location you have chosen.
Make a note of this location, because from there the icon file will be copied to your pxlBlck in the next paragraph.
Copy the Icon to the pxlBlock
The created icon file has to be transferred to your pxlBlck now.
To do this, switch back to the web menu of your pxlBlcks. To do this, you have to enter the IP address of the pxlBlck in the address field of your browser.
Then switch to the “Tools” tab by clicking on the button marked in red.
Scroll in the “Tools” tab to the bottom of the configuration page.
There click on the button “File browser”.
In this window you can see all files that are already saved in the memory of the pxlBlck/ESP8266.
In order to load the new icon file into this memory, you must first click on the “Upload” button.
In the next view you click on the red marked “Browse” button …
… and select your previously created file.
Then confirm this by clicking on “Open”.
You will now land in the previous window.
So that the upload of the selected file starts, you must now click on the “Upload” button.
Depending on the size of the icon file, the upload may take a while.
As soon as the process is completed, you will see the success message marked in red.
To check that the file was uploaded successfully, you can switch to the “Tools” tab again and …
… from there switch to the “File browser”.
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. The icon is only displayed if you send a command to the pxlBlck. Further down in this paragraph (Section: Examples) there are a few examples for displaying the previously created example icon.
How your commands are sent to an ESPEasy device is described in the article ESPEasy – Execute commands and actions via HTTP, MQTT, UDP and directly.
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],[repitition 0-10],
Parameter description
| Parameter name | description | Permitted range of values |
|---|---|---|
| incoming animation | The ID of the entrance animation | 1-3 |
| outgoing animation | The ID of the exit animation | 1-3 |
| in delay | This parameter sets the length of time that is used for the entrance animation. It is given in milliseconds. | 0-2000 |
| show delay | With this parameter you can set the duration of the icon and, if necessary, the text. It is given in milliseconds. | 0-10000 |
| out delay | This parameter sets the length of time that is used for the exit animation. It is given in milliseconds. | 0-2000 |
| brightness | With this parameter you can set the maximum brightness for your icon and possibly text. Please consider that a high brightness also requires more power and the connected LED matrix must be designed accordingly. | 0-100 |
| running text | With the help of this parameter you can enter a text which is 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 |
| repitition | With the help of this parameter you can repeat the display of the icon. For example, flashing icons can also be implemented. | 0-10 |
The following tables contain an overview of the animations available for showing and hiding the icons.
Fade in animations
| Name | 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 text that has been specified are displayed immediately. | 2 |
| Fly in from right | The icon and the scrolling text that may have been set are inserted from the right into the display area. The “show delay” time defines how long this process takes. | 3 |
Fade out animations
| Name | description | ID |
|---|---|---|
| Fade out | The icon and, if applicable, the scrolling text are faded out with the set “out delay” time. | 1 |
| Instant off | The icon and any text that has been specified are immediately hidden. | 2 |
| Fly out to left | The icon and the scrolling text that may have been set are moved to the left of the display area. The “out delay” time defines how long this process takes. | 3 |
Example
There are different ways to execute commands on your pxlBlck. One of these ways works through the web menu.
To do this, switch to the “Tools” tab.
There you can enter the command in the text field marked in red on the left.
By clicking on “Submit” the command is sent to the pxlBlck and executed.
When the icon is found, the highlighted message is displayed.
The icon is shown directly on the display of the pxlBlck with the set parameters.
If you have given a wrong file name for the icon file and the file name cannot be found, the highlighted error message will be displayed.
In addition, the entire LED matrix of the pxlBlck flashes five times in red.
The following paragraph describes the display of the previously created icon as an example (including commands used).
Infos:
- Entrance animation: 1
- Exit animation: 1
- Entrance delay: 1000ms
- Display time: 10000ms
- Exit delay: 1000ms
- Max. Brightness: 50
- Text: – (nothing will be displayed)
- Icon name: Test.ppm
- Repetitions: none (Icon is shown once only)
Command:
pbicon,1,1,1000,10000,1000,50,-,Test.ppm,
Infos:
- Entrance animation: 1
- Exit animation: 1
- Entrance delay: 100ms
- Display time: 100ms
- Exit delay: 100ms
- Max. Brightness: 50
- Text: – (nothing will be displayed)
- Icon name: Test.ppm
- Repetitions: 3
Command:
pbicon,1,1,100,100,100,50,-,Test.ppm,3,
Infos:
- Entrance animation: 3
- Exit animation: 3
- Entrance delay: 100ms
- Display time: 1000ms
- Exit delay: 100ms
- Max. Brightness: 50
- Text: – (nothing will be displayed)
- Icon name: Test.ppm
- Repetitions: 2
Command:
pbicon,3,3,100,1000,100,50,-,Test.ppm,2,
Infos:
- Entrance animation: 3
- Exit animation: 3
- Entrance delay: 1000ms
- Display time: 1000ms
- Exit delay: 500ms
- Max. Brightness:
- Text: TestMessage
- Icon name: Test.ppm
- Repetitions: none (Icon is shown once only)
Command:
pbicon,3,3,1000,1000,500,50,TestMessage,Test.ppm,
Infos:
- Entrance animation: 2
- Exit animation: 3
- Entrance delay: 1000ms
- Display time: 1000ms
- Exit delay: 500ms
- Max. Brightness: 50
- Text: TestMessage
- Icon name: Test.ppm
- Repetitions: none (Icon is shown once only)
Command:
pbicon,2,3,1000,1000,500,50,TestMessage,Test.ppm,
Infos:
- Entrance animation: 1
- Exit animation: 3
- Entrance delay: 2000ms
- Display time: 1000ms
- Exit delay: 500ms
- Max. Brightness: 50
- Text: TestMessage
- Icon name: Test.ppm
- Repetitions: none (Icon is shown once only)
Command:
pbicon,1,3,2000,1000,500,50,TestMessage,Test.ppm,
Infos:
- Entrance animation: 3
- Exit animation: 1
- Entrance delay: 1000
- Display time: 1000ms
- Exit delay: 1000ms
- Max. Brightness: 500ms
- Text: – (nothing will be displayed)
- Icon name: Test.ppm
- Repetitions: none (Icon is shown once only)
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. 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 it that I share these information with you, I would be happy about a small donation to the coffee box. 🙂
Hallo! Ich habe mal eine weitere Frage. Ich lasse das Datum im Moment alle 10 Sekunden durchlaufen. Jetzt wollte ich die Temperatur oder eben auch das Datum (%sysday_0%.%sysmonth_0%.%sysyears% ) als “Standbild” anzeigen lassen. Irgendwie bekomme ich es nicht hin. Kannst du dazu vielleicht mal eine kleines Beispiel zeigen?
Hey Stefan,
du möchtest also einen Text dauerhaft anzeigen, richtig?
So ohne weiteres lässt sich das gar nicht realisieren. Aber ich schreibe mir das auf und werde diese Funktion demnächst nachrüsten. 🙂
Beste Grüße
Fabian