Mit der Entwicklung der pxlBlcks habe ich begonnen, weil ich auf der Suche nach einer Möglichkeit war über Ereignisse im SmartHome informiert zu bleiben. Mittlerweile gibt es dazu zwei in das pxlBlck-Plugin integrierte Optionen.
Neben der Möglichkeit Animationen anzeigen zu können gibt es dazu auch die Möglichkeit vordefinierte Icons auf den pxlBlck zu laden und dort anzuzeigen.
Diese Icons werden vorher mithilfe eines Bildbearbeitungsprogramms erstellt und auf den pxlBlck übertragen. Dort können Sie dann durch Eingabe des korrekten Befehls angezeigt.
Wie Ihr diese Icons erstellt, auf den pxlBlck übertragt und dann dort anzeigt ist im folgenden Artikel beschrieben.
Sicherheitshinweise
Ich weiß die folgenden Hinweise sind immer irgendwie lästig und wirken unnötig. Aber leider haben schon viele Menschen die es "besser" wussten aus Leichtsinnigkeit Augen, Finger oder anderes verloren bzw. sich verletzt. Im Vergleich dazu ist ein Datenverlust fast nicht der Rede Wert, aber auch diese können echt ärgerlich sein. Deswegen nehmt Euch bitte fünf Minuten Zeit um die Sicherheitshinweise zu lesen. Denn auch das coolste Projekt ist keine Verletzung oder anderen Ärger wert.
https://www.nerdiy.de/sicherheitshinweise/
Affiliatelinks/Werbelinks
Die hier in aufgeführten Links zu Online-Shops sind sogenannte Affiliate-Links. Wenn Du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekommt Nerdiy.de von dem betreffenden Online-Shop oder Anbieter eine Provision. Für Dich verändert sich der Preis nicht. Falls Du Deine Einkäufe über diese Links tätigst unterstützt Du Nerdiy.de dabei auch in Zukunft weitere nützliche Projekte anbieten zu können. 🙂
Voraussetzungen
Bevor Ihr auf Eurem pxlBlck Icons anzeigen könnt solltet Ihr diesen bereits aufgebaut und programmiert haben. Infos zu den verschiedenen Hardware-Plattfomen findet Ihr in der folgenden Kategorie
Infos zum programmieren und Konfigurieren des pxlBlcks gibt es in den folgenden Artikeln
- pxlBlck – Das pxlBlck-Plugin installieren und konfigurieren
- pxlBlck – Befehle zur Konfiguration des pxlBlck
- pxlBlck – Ziffernblätter und Bildschirmschoner konfigurieren
Benötigtes Werkzeug:
– keins –
Benötigtes Material:
– keins –
GIMP downloaden
Im Prinzip benötigt Ihr lediglich ein Bildbearbeitungsprogramm mit dem man .ppm Dateien erstellen bzw. bearbeiten kann.
Eines dieser Programme ist “GIMP”. Dies ist kostenlos und Ihr könnt es unter folgendem Link herunterladen.
GIMP installieren
Nach dem Download von “GIMP” müsst Ihr das Programm zunächst installieren.
Öffnet dazu die heruntergeladene Datei und…
… installiert das Programm.
Infos zur Installation eines Programms findet Ihr auch im Artikel Programme installieren – ein Beispiel
Neue Datei erstellen
Nach der Installation kann es nun losgehen. Startet dazu GIMP.
GIMP startet Standardmäßig mit einem leeren Fenster. Da Ihr nun ein Icon erstellen wollt, müsst Ihr zunächst eine neue Datei erstellen.
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.
Stellt in dem Dialogfenster nun alle Optionen wie im linken Bild dargestellt ein.
Besonders ist dabei die “Image size” im oberen rot markierten Bereich. Denn diese muss zu Eurem pxlBlck passen.
Wollt Ihr zum Beispiel ein Icon für den pxlBlck_8x8 designen so müsst Ihr hier auch Für “Width” und “Height” jeweils eine 8 angeben.
Die Dimension des Icons muss also immer zu der Dimension der genutzten LED-Matrix passen.
Dateiansicht heranzoomen
Da die Datei sehr klein ist solltet Ihr die Bildfläche noch vergrößern.
Klickt dazu auf das Lupensymbol und aktiviert den Lupenmodus.
Um dann das Bild zu vergrößern müsst Ihr lediglich ein Quadrat über den Bereich ziehen, den Ihr vergrößern wollt.
Bild bearbeiten und Inhalte zeichnen
Nun kann es mit der Bearbeitung des Icons endlich losgehen.
Wechselt zur Bearbeitung des Icons in den Stiftmodus. Klickt dazu auf das Pinsel-Symbol in der Werkzeugleiste und haltet die Maustaste gedrückt.
Dadurch erscheint ein weiteres Menü in dem Ihr dann das Stiftsymbol auswählen könnt.
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.
Schiebt dazu den Slider in dem rot markierten Bereich ganz nach links oder stellt ihn manuell auf eins.
Nun könnt Ihr das Bild bereits bearbeiten.
Um die Stiftfarbe zu wechseln könnt Ihr mithilfe des “Color-Pickers” eine andere Farbe einstellen.
Klickt dazu auf das farbige (in diesem Fall schwarze) Quadrat im rot markierten Bereich.
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”.
Nun könnt Ihr das Icon nach Euren wünschen designen.
In dem Beispiel links habe ich einfach einen bunten Balken gemalt.
Beachtet, dass schwarze Quadrate auf dem pxlBlck nicht leuchten. die Weiße Fläche leuchtet dagegen in Weißer Farbe.
Icon in das korrekte Format exportieren
Sobald Ihr mit der Bearbeitung Eures Icons fertig seid müsst Ihr es nun noch exportieren bevor Ihr es auf den pxlBlck kopieren könnt.
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.
Dann wählt Ihr einen Speicherort und tragt als Dateiname einen Namen Eurer Wahl ein. Wichtig ist dabei aber, dass die Dateiendung .ppm lautet.
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.
An dem von Euch gewählten Speicherort sollte nun Eure Icon-Datei erstellt worden sein.
Merkt Euch diesen Speicherort, denn von dort aus wird die Icon-Datei im nächsten Absatz auf Euren pxlBlck kopiert.
Icons auf den pxlBlock kopieren
Die erstellte Icon-Datei muss nun noch auf Euren pxlBlck übertragen werden.
Wechselt dazu wieder auf das Webmenü Eures pxlBlcks. Dazu müsst Ihr die IP Adresse des pxlBlcks in die Adresszeile Eures Browsers eingeben.
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 diesem Fenster seht Ihr alle Dateien die bereits in dem Speicher des pxlBlck bzw. ESP8266 gespeichert sind.
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…
…und wählt Eure zuvor erstellte Datei aus.
Bestätigt dies dann durch einen Klick auf “Öffnen”.
Ihr landet nun in dem vorherigen Fenster.
Damit der Upload der ausgewählten Datei startet müsst Ihr nun auf den Button “Upload” klicken.
Je nach Dateigröße der Icon-Datei dauert der Upload eine Weile.
Sobald der Vorgang abgeschlossen ist wird Euch die rot markierte Erfolgsnachricht angezeigt.
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.
Dort sollte die zuvor hochgeladene Datei nun aufgelistet werden.
Befehl um Icons auf dem pxlBlck anzuzeigen
Ihr habt die Icon-Datei nun auf Euren pxlBlck übertragen. Die Anzeige des Icons findet aber nur statt, wenn Ihr dazu einen Befehl an den pxlBlck sendet. Weiter unten in diesem Absatz (Name: Beispiele) sind dazu ein paar Beispiele zur Anzeige des zuvor erstellten Beispiel-Icons aufgelistet.
Wie Ihr Befehle an ein ESPEasy-Gerät sendet ist in dem Artikel ESPEasy – Befehle und Aktionen per HTTP, MQTT, UDP und direkt ausführen beschrieben.
Befehlsname
pbicon
Befehlsübersicht
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-Beschreibung
| Parametername | Beschreibung | Erlaubter Wertebereich |
|---|---|---|
| incoming animation | Die ID der Eingangsanimation | 1-3 |
| outgoing animation | Die ID der Ausgangsanimation | 1-3 |
| in delay | Dieser Parameter stellt die Zeitdauer ein, welche für die Eingangsanimation genutzt wird. Er wird in Millisekunden angegeben. | 0-2000 |
| show delay | Mit diesem Parameter könnt Ihr die Anzeigedauer des Icons und ggf. Text einstellen. Er wird in Millisekunden angegeben. | 0-10000 |
| out delay | Dieser Parameter stellt die Zeitdauer ein, welche für die Ausgangsanimation genutzt wird. Er wird in Millisekunden angegeben. | 0-2000 |
| brightness | Mit diesem Parameter könnt Ihr die maximale Helligkeit für Euer Icon und ggf. Text einstellen. Bedenkt bitte, dass eine hohe Helligkeit auch mehr Strom erfordert und die angeschlossene LED-Matrix entsprechend ausgelegt sein muss. | 0-100 |
| running text | Mithilfe dieses Parameters könnt Ihr einen Text angeben, welcher zusammen mit dem Icon angezeigt wird. Falls kein Text gewünscht ist, könnt Ihr diesen Parameter einfach freilassen. | Text |
| icon name | Dieser Parameter entspricht dem Dateinamen des in den SPIFFS des pxlBlck hochgeladenen Icons | Text |
| repitition | Mithilfe dieses Parameters könnt Ihr die Anzeige des Icons wiederholen lassen. So lassen sich zum Beispiel auch blinkende Icons realisieren. | 0-10 |
Die folgenden Tabellen enthalten eine Übersicht über die verfügbaren Animationen zum Ein- und Ausblenden der Icons.
Einblend-Animationen
| Name | Beschreibung | ID |
|---|---|---|
| Fade in | Das Icon und ggf. der Lauftext werden mit der eingestellten “show delay”-Zeit eingeblendet. | 1 |
| Instant on | Das Icon und der ggf. festgelegte Text werden sofort angezeigt. | 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 |
Ausblend-Animationen
| Name | Beschreibung | ID |
|---|---|---|
| Fade out | Das Icon und ggf. der Lauftext werden mit der eingestellten “out delay”-Zeit ausgeblendet. | 1 |
| Instant off | Das Icon und der ggf. festgelegte Text werden sofort ausgeblendet. | 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 |
Beispiele
Es gibt verschiedene Möglichkeiten Befehle auf Euren pxlBlck auszuführen. Einer dieser Wege funktioniert über das Webmenü.
Wechselt dazu in den Tab “Tools”.
Dort könnt Ihr den Befehl in das linke rot markierte Textfeld eingeben.
Durch einen klick auf “Submit” wird der Befehl an den pxlBlck gesendet und ausgeführt.
Wenn das Icon gefunden wurde, wird die markierte Meldung angezeigt.
Das Icon wird direkt mit den eingestellten Parametern auf dem Display des pxlBlck wiedergegeben.
Falls Ihr einen falschen Dateinamen für die Icon-Datei angegeben habt und der Dateiname nicht gefunden werden könnt wird die markierte Fehlermeldung angezeigt.
Außerdem blinkt die gesamte LED-Matrix des pxlBlcks fünf mal in roter Farbe.
Im folgenden Absatz wird die Anzeige des zuvor erstellten Icons als Beispiel (inkl. genutzte Befehle) beschrieben.
Infos:
- Eingangsanimation: 1
- Ausgangsanimation: 1
- Eingangsverzögerung: 1000ms
- Anzeigedauer: 10000ms
- Ausgangsverzögerung: 1000ms
- Max. Helligkeit: 50%
- Text: – (es wird kein Text angezeigt)
- Icon-Name: Test.ppm
- Wiederholungen: keine
Befehl:
pbicon,1,1,1000,10000,1000,50,-,Test.ppm,
Infos:
- Eingangsanimation: 1
- Ausgangsanimation: 1
- Eingangsverzögerung: 100ms
- Anzeigedauer: 100ms
- Ausgangsverzögerung: 100ms
- Max. Helligkeit: 50%
- Text: – (es wird kein Text angezeigt)
- Icon-Name: Test.ppm
- Wiederholungen: 3
Befehl:
pbicon,1,1,100,100,100,50,-,Test.ppm,3,
Infos:
- Eingangsanimation: 3
- Ausgangsanimation: 3
- Eingangsverzögerung: 100ms
- Anzeigedauer: 1000ms
- Ausgangsverzögerung: 100ms
- Max. Helligkeit: 50%
- Text: – (es wird kein Text angezeigt)
- Icon-Name: Test.ppm
- Wiederholungen: 2
Befehl:
pbicon,3,3,100,1000,100,50,-,Test.ppm,2,
Infos:
- Eingangsanimation: 3
- Ausgangsanimation: 3
- Eingangsverzögerung: 1000ms
- Anzeigedauer: 1000ms
- Ausgangsverzögerung: 500ms
- Max. Helligkeit: 50%
- Text: TestMessage
- Icon-Name: Test.ppm
- Wiederholungen: keine
Befehl:
pbicon,3,3,1000,1000,500,50,TestMessage,Test.ppm,
Infos:
- Eingangsanimation: 2
- Ausgangsanimation: 3
- Eingangsverzögerung: 1000ms
- Anzeigedauer: 1000ms
- Ausgangsverzögerung: 500ms
- Max. Helligkeit: 50%
- Text: TestMessage
- Icon-Name: Test.ppm
- Wiederholungen: keine
Befehl:
pbicon,2,3,1000,1000,500,50,TestMessage,Test.ppm,
Infos:
- Eingangsanimation: 1
- Ausgangsanimation: 3
- Eingangsverzögerung: 2000ms
- Anzeigedauer: 1000ms
- Ausgangsverzögerung: 500ms
- Max. Helligkeit: 50%
- Text: TestMessage
- Icon-Name: Test.ppm
- Wiederholungen: keine
Befehl:
pbicon,1,3,2000,1000,500,50,TestMessage,Test.ppm,
Infos:
- Eingangsanimation: 3
- Ausgangsanimation: 1
- Eingangsverzögerung: 1000ms
- Anzeigedauer: 1000ms
- Ausgangsverzögerung: 500ms
- Max. Helligkeit: 50%
- Text: – (es wird kein Text angezeigt)
- Icon-Name: Test.ppm
- Wiederholungen: keine
Befehl:
pbicon,3,1,1000,1000,500,50,-,Test.ppm,
Vorbereitete Icons downloaden
Das hier erstellte Beispiel-Icon und ein paar andere vorbereitete Icons könnt Ihr auch unter folgendem Link im Nerdiy-Git finden: https://github.com/Nerdiyde/pxlBlck/tree/main/icons
Viel Spaß mit dem Projekt
Ich hoffe bei euch hat alles wie beschrieben funktioniert. Falls nicht oder ihr Fragen oder Anregungen habt lasst es mich in den Kommentaren bitte wissen. Ich trage dies dann ggf. in den Artikel nach.
Auch Ideen für neue Projekte sind immer gerne willkommen. 🙂
P.S. Viele dieser Projekte - besonders die Hardwareprojekte - kosten viel Zeit und Geld. Natürlich mache ich das weil ich Spaß daran habe, aber wenn Du es cool findest, dass ich die Infos dazu mit Euch teile, würde ich mich über eine kleine Spende an die Kaffeekasse freuen. 🙂
Deutsch 
English 
Français 
Español 
Nederlands
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