HowTo: pxlBlck – Icons designen, auf den pxlBlck übertragen und anzeigen

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.

In diesem Video könnt Ihr die Wiedergabe verschiedener SocialMedia Icons inkl. Nachricht auf dem pxlBlck_32x8 sehen.

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

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

ParameternameBeschreibungErlaubter Wertebereich
incoming animationDie ID der Eingangsanimation1-3
outgoing animationDie ID der Ausgangsanimation1-3
in delayDieser Parameter stellt die Zeitdauer ein, welche für die Eingangsanimation genutzt wird. Er wird in Millisekunden angegeben.0-2000
show delayMit diesem Parameter könnt Ihr die Anzeigedauer des Icons und ggf. Text einstellen. Er wird in Millisekunden angegeben.0-10000
out delayDieser Parameter stellt die Zeitdauer ein, welche für die Ausgangsanimation genutzt wird. Er wird in Millisekunden angegeben.0-2000
brightnessMit 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 textMithilfe 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 nameDieser Parameter entspricht dem Dateinamen des in den SPIFFS des pxlBlck hochgeladenen IconsText
repititionMithilfe 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
NameBeschreibungID
Fade inDas Icon und ggf. der Lauftext werden mit der eingestellten „show delay“-Zeit eingeblendet.1
Instant onDas Icon und der ggf. festgelegte Text werden sofort angezeigt.2
Fly in from rightDas 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
NameBeschreibungID
Fade outDas Icon und ggf. der Lauftext werden mit der eingestellten „out delay“-Zeit ausgeblendet.1
Instant offDas Icon und der ggf. festgelegte Text werden sofort ausgeblendet.2
Fly out to leftDas 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


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

Fab

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

Buy Me a Coffee at ko-fi.com

2 Kommentare

  1. 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?

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

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.