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.
Eines dieser Programme ist „GIMP“. Dies ist kostenlos und Ihr könnt es unter folgendem Link herunterladen.
Install GIMP
Nach dem Download von „GIMP“ müsst Ihr das Programm zunächst installieren.
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.
Klickt dazu auf „File“ und und „New“.
Daraufhin öffnet sich ein Fenster indem Ihr nun noch die „Advanced Options“ öffnen müsst indem Ihr in dem rot markierten Bereich auf das Plus klickt.
Now set all the options in the dialog box as shown in the image on the left.
Besonders ist dabei die „Image size“ im oberen rot markierten Bereich. Denn diese muss zu Eurem pxlBlck passen.
For example, if you want an icon for the pxlBlck_8x8 designen so müsst Ihr hier auch Für „Width“ und „Height“ jeweils eine 8 angeben.
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.
Damit Ihr das Icon nun auch Pixel für Pixel bearbeiten könnt müsst Ihr nun noch die „Stift-Dicke“ auf ein Pixel einstellen.
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.
Um die Stiftfarbe zu wechseln könnt Ihr mithilfe des „Color-Pickers“ eine andere Farbe einstellen.
To do this, click on the colored (in this case black) square in the area marked in red.
Dadurch öffnet sich der links dargestellte „Color-Picker“.
Wählt dort die Farbe die Ihr für das Icon konfigurieren wollt und bestätigt dies mit einem Klick auf „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.
Klickt dazu wieder auf „File“ und auf „Export As…“.
In dem sich nun öffnenden Dialogfenster müsst Ihr als erstes Prüfen, dass die Option (unten links) „Select File Type (By Extension)“ aktiviert ist.
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.
Sobald alles korrekt konfiguriert ist könnt Ihr die Dialogbox mit einem Klick auf „OK“ schließen.
In dem sich öffnenden kleinen Dialogfenster bestätigt Ihr, dass Ihr die Datei im „ASCII“-Format speichern wollt.
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.
Wechselt dann in den Tab „Tools“ indem Ihr auf den rot markierten Button klickt.
Scrollt in dem „Tools“-Tab bis zum unteren Ende der Konfigurationsseite.
Klickt dort auf den Button „File browser“.
In this window you can see all the files that are already stored in the memory of the pxlBlck or ESP8266.
Um nun die neue Icon-Datei in diesen Speicher zu laden müsst Ihr zunächst auf den „Upload“-Button klicken.
In der nächsten Ansicht klickt Ihr auf den rot markierten „Durchsuchen“-Button…
...and select your previously created file.
Bestätigt dies dann durch einen Klick auf „Öffnen“.
You will now land in the previous window.
Damit der Upload der ausgewählten Datei startet müsst Ihr nun auf den Button „Upload“ klicken.
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.
Um zu Überprüfen, dass die Datei erfolgreich hochgeladen wurde, könnt Ihr nun nochmal zum „Tools“-Tab wechseln und …
… von dort aus in den „File browser“ wechseln.
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 | Das Icon und ggf. der Lauftext werden mit der eingestellten „show delay“-Zeit eingeblendet. | 1 |
| Instant on | The icon and any defined text are displayed immediately. | 2 |
| Fly in from right | Das Icon und der ggf. festgelegte Lauftext werden von der rechten Seite in den Display-Bereich eingeschoben. Dabei definiert die „show delay“-Zeit wie lang dieser Vorgang dauert. | 3 |
Fade-out animations
| Surname | Description | ID |
|---|---|---|
| fade out | Das Icon und ggf. der Lauftext werden mit der eingestellten „out delay“-Zeit ausgeblendet. | 1 |
| instant off | The icon and any defined text are immediately hidden. | 2 |
| Fly out to left | Das Icon und der ggf. festgelegte Lauftext werden zur Linken Seite aus dem Display-Bereich geschoben. Dabei definiert die „out delay“-Zeit wie lang dieser Vorgang dauert. | 3 |
Examples
There are various ways to execute commands on your pxlBlck. One of these ways is via the web menu.
Wechselt dazu in den Tab „Tools“.
There you can enter the command in the text field highlighted in red on the left.
Durch einen klick auf „Submit“ wird der Befehl an den pxlBlck gesendet und ausgeführt.
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'm running the date every 10 seconds at the moment. Now I wanted to display the temperature or the date (%sysday_0%.%sysmonth_0%.%sysyears% ) as a "freeze frame". Somehow I can't get it. Can you maybe 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