Ik ben begonnen met het ontwikkelen van de pxlBlcks omdat ik op zoek was naar een manier om op de hoogte te blijven van gebeurtenissen in het SmartHome. Ondertussen zijn er twee opties geïntegreerd in de pxlBlck plugin.
Naast de mogelijkheid om animaties weer te geven, is er ook de mogelijkheid om voorgedefinieerde pictogrammen op het pxlBlck te laden en ze daar weer te geven.
Deze pictogrammen worden vooraf gemaakt met behulp van een beeldbewerkingsprogramma en overgebracht naar het pxlBlck. Daar kunnen ze dan worden weergegeven door het juiste commando in te voeren.
Hoe je deze pictogrammen maakt, ze overbrengt naar het pxlBlck en ze daar weergeeft, wordt beschreven in het volgende artikel.
Veiligheidsinstructies
Ik weet dat de volgende opmerkingen altijd een beetje vervelend zijn en onnodig lijken. Helaas hebben veel mensen die "beter" wisten door onvoorzichtigheid ogen, vingers of andere dingen verloren of zichzelf verwond. Gegevensverlies is in vergelijking bijna te verwaarlozen, maar zelfs dit kan erg vervelend zijn. Neem daarom vijf minuten de tijd om de veiligheidsinstructies te lezen. Omdat zelfs het coolste project geen blessure of andere problemen waard is.
https://www.nerdiy.de/sicherheitshinweise/
Affiliate links / reclame links
De hier vermelde links naar online winkels zijn zogenaamde affiliate-links. Als u op zo'n affiliate-link klikt en via deze link een aankoop doet, ontvangt Nerdiy.de een commissie van de betreffende onlineshop of aanbieder. De prijs verandert voor jou niet. Als u via deze links uw aankopen doet, steunt u Nerdiy.de om in de toekomst andere nuttige projecten aan te kunnen bieden. 🙂
Eisen
Voordat je pictogrammen op je pxlBlck kunt weergeven, moet je deze al gebouwd en geprogrammeerd hebben. Informatie over de verschillende hardwareplatforms kun je vinden in de volgende categorie
Informatie over het programmeren en configureren van de pxlBlck is beschikbaar in de volgende artikelen
- pxlBlck - Installeer en configureer de pxlBlck-plug-in
- pxlBlck - Opdrachten voor het configureren van de pxlBlck
- pxlBlck - Configureer wijzerplaten en screensavers
Vereist gereedschap:
- Nee -
Benodigd materiaalik:
- Nee -
GIMP downloaden
In principe heb je alleen een beeldbewerkingsprogramma nodig waarmee je .ppm-bestanden kunt maken of bewerken.
Eines dieser Programme ist “GIMP”. Dies ist kostenlos und Ihr könnt es unter folgendem Link herunterladen.
Installeer GIMP
Nach dem Download von “GIMP” müsst Ihr das Programm zunächst installieren.
Open hiervoor het gedownloade bestand en...
... installeert het programma.
Informatie over het installeren van een programma is ook te vinden in het artikel Programma's installeren - een voorbeeld
Nieuw bestand maken
Na de installatie kunt u nu aan de slag. Start hiervoor GIMP.
Standaard start GIMP met een leeg venster. Omdat je nu een pictogram wilt maken, moet je eerst een nieuw bestand maken.
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.
Stel nu alle opties in het dialoogvenster in zoals weergegeven in de afbeelding links.
Besonders ist dabei die “Image size” im oberen rot markierten Bereich. Denn diese muss zu Eurem pxlBlck passen.
Als u bijvoorbeeld een pictogram wilt voor de pxlBlck_8x8 designen so müsst Ihr hier auch Für “Width” und “Height” jeweils eine 8 angeben.
De afmeting van het icoon moet daarom altijd overeenkomen met de afmeting van de gebruikte LED-matrix.
Zoom in op bestandsweergave
Omdat het bestand erg klein is, moet je het afbeeldingsgebied vergroten.
Klik hiervoor op het vergrootglassymbool en activeer de vergrootglasmodus.
Om de afbeelding te vergroten, sleep je gewoon een vierkant over het gebied dat je wilt vergroten.
Afbeelding bewerken en inhoud tekenen
Nu kunt u eindelijk beginnen met het bewerken van het pictogram.
Schakel over naar penmodus om het pictogram te bewerken. Klik hiervoor op het penseelsymbool in de werkbalk en houd de muisknop ingedrukt.
Hierdoor verschijnt een ander menu waarin je het pennensymbool kunt selecteren.
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.
Om dit te doen, verplaatst u de schuifregelaar in het rood gemarkeerde gebied helemaal naar links of stelt u deze handmatig in.
Nu kun je de afbeelding al bewerken.
Um die Stiftfarbe zu wechseln könnt Ihr mithilfe des “Color-Pickers” eine andere Farbe einstellen.
Klik hiervoor op het gekleurde (in dit geval zwarte) vierkantje in het rood gemarkeerde gebied.
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”.
Nu kun je het pictogram naar wens ontwerpen.
In het voorbeeld links heb ik gewoon een kleurrijke balk geschilderd.
Merk op dat zwarte vierkanten op het pxlblck niet oplichten. Het witte gebied daarentegen gloeit wit op.
Exporteer pictogram in het juiste formaat
Als je klaar bent met het bewerken van je pictogram, moet je het exporteren voordat je het kunt kopiëren naar het 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.
Selecteer vervolgens een opslaglocatie en voer een naam naar keuze in als bestandsnaam. Het is echter belangrijk dat de bestandsextensie .ppm leest.
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.
Je pictogrambestand zou nu moeten zijn aangemaakt op de locatie die je hebt geselecteerd.
Onthoud deze locatie, want vanaf daar wordt het pictogrambestand gekopieerd naar je pxlBlck in de volgende paragraaf.
Kopieer pictogrammen naar het pxlBlock
Het gemaakte pictogrambestand moet nu worden overgebracht naar je pxlBlck.
Ga hiervoor terug naar het webmenu van je pxlBlck. Voer hiervoor het IP-adres van de pxlBlck in de adresbalk van je browser in.
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 dit venster zie je alle bestanden die al in het geheugen van de pxlBlck of ESP8266 zijn opgeslagen.
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…
...en selecteer je eerder gemaakte bestand.
Bestätigt dies dann durch einen Klick auf “Öffnen”.
U bevindt zich nu in het vorige venster.
Damit der Upload der ausgewählten Datei startet müsst Ihr nun auf den Button “Upload” klicken.
Afhankelijk van de bestandsgrootte van het pictogrambestand kan het uploaden even duren.
Zodra het proces is voltooid, ziet u het succesbericht rood gemarkeerd.
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.
Het eerder geüploade bestand zou daar nu moeten worden vermeld.
Opdracht om pictogrammen weer te geven op de pxlBlck
Je hebt nu het pictogrambestand overgebracht naar je pxlBlck. Het pictogram wordt echter alleen weergegeven als je een commando naar de pxlBlck stuurt. Verderop in deze paragraaf (Naam: Voorbeelden) staan een paar voorbeelden van hoe je het eerder gemaakte voorbeeldpictogram kunt weergeven.
Hoe je commando's naar een ESPEasy-apparaat stuurt, wordt beschreven in het artikel ESPEasy - Voer opdrachten en acties uit via HTTP, MQTT, UDP en rechtstreeks beschreven.
commando naam
pbicon
commando overzicht
pbicon,[inkomende animatie 0-255], [uitgaande animatie 0-255], [in vertraging 0-255], [toon vertraging 0-255], [uit vertraging 0-255], [helderheid 0-255], [lopende tekst 0-255],[pictogramnaam],[herhaling 0-10],
Parameterbeschrijving
| parameternaam | Beschrijving | Toegestaan bereik van waarden |
|---|---|---|
| inkomende animatie | De ID van de ingangsanimatie | 1-3 |
| uitgaande animatie | De ID van de startanimatie | 1-3 |
| in vertraging | Deze parameter stelt de tijdsduur in die wordt gebruikt voor de invoeranimatie. Dit wordt gegeven in milliseconden. | 0-2000 |
| laat vertraging zien | Met deze parameter kun je de weergaveduur van het pictogram en eventueel de tekst instellen. Deze wordt opgegeven in milliseconden. | 0-10000 |
| uit vertraging | Deze parameter stelt de duur in die wordt gebruikt voor de uitvoeranimatie. Hij wordt gegeven in milliseconden. | 0-2000 |
| helderheid | Met deze parameter kun je de maximale helderheid voor je pictogram en, indien van toepassing, tekst instellen. Houd er rekening mee dat een hoge helderheid ook meer stroom vereist en dat de aangesloten LED-matrix dienovereenkomstig moet worden ontworpen. | 0-100 |
| lopende tekst | Met behulp van deze parameter kun je een tekst opgeven die samen met het pictogram wordt weergegeven. Als je geen tekst wilt, kun je deze parameter gewoon leeg laten. | tekst |
| pictogram naam | Deze parameter komt overeen met de bestandsnaam van het pictogram dat is geüpload in de SPIFFS van de pxlBlck | tekst |
| herhaling | Je kunt deze parameter gebruiken om de weergave van het pictogram te herhalen. Op deze manier kun je bijvoorbeeld ook knipperende pictogrammen realiseren. | 0-10 |
De volgende tabellen bevatten een overzicht van de beschikbare animaties voor het tonen en verbergen van de pictogrammen.
Fade-in animaties
| Achternaam | Beschrijving | ID kaart |
|---|---|---|
| vervagen | Das Icon und ggf. der Lauftext werden mit der eingestellten “show delay”-Zeit eingeblendet. | 1 |
| Direct aan | Het pictogram en eventuele opgegeven tekst worden onmiddellijk weergegeven. | 2 |
| Vlieg van rechts naar binnen | 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 animaties
| Achternaam | Beschrijving | ID kaart |
|---|---|---|
| vervagen | Das Icon und ggf. der Lauftext werden mit der eingestellten “out delay”-Zeit ausgeblendet. | 1 |
| meteen uit | Het pictogram en eventuele opgegeven tekst worden onmiddellijk verborgen. | 2 |
| Vlieg naar links | 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 |
voorbeelden
Er zijn verschillende manieren om commando's uit te voeren op je pxlBlck. Een van deze manieren is via het webmenu.
Wechselt dazu in den Tab “Tools”.
Daar kun je de opdracht invoeren in het rood gemarkeerde tekstveld aan de linkerkant.
Durch einen klick auf “Submit” wird der Befehl an den pxlBlck gesendet und ausgeführt.
Wanneer het pictogram is gevonden, wordt het gemarkeerde bericht weergegeven.
Het pictogram wordt direct met de ingestelde parameters op het pxlBlck-display weergegeven.
Als u een onjuiste bestandsnaam hebt ingevoerd voor het pictogrambestand en de bestandsnaam niet kan worden gevonden, wordt de gemarkeerde foutmelding weergegeven.
Daarnaast knippert de hele LED-matrix van de pxlBlck vijf keer rood.
De weergave van het eerder gemaakte icoon wordt als voorbeeld beschreven (inclusief de gebruikte commando's) in de volgende paragraaf.
Info:
- Entree animatie: 1
- Animatie afsluiten: 1
- Ingangsvertraging: 1000ms
- Weergavetijd: 10000ms
- Uitgangsvertraging: 1000ms
- Maximale helderheid: 50%
- Tekst: - (er wordt geen tekst weergegeven)
- Pictogram naam: Test.ppm
- Herhalingen: geen
Commando:
pbicon,1,1,1000,10000,1000,50,-,Test.ppm,
Info:
- Entree animatie: 1
- Animatie afsluiten: 1
- Ingangsvertraging: 100ms
- Weergavetijd: 100 ms
- Vertraging uitgang: 100ms
- Maximale helderheid: 50%
- Tekst: - (er wordt geen tekst weergegeven)
- Pictogram naam: Test.ppm
- Vertegenwoordigers: 3
Commando:
pbicon,1,1,100,100,100,50,-,Test.ppm,3,
Info:
- Entree animatie: 3
- Animatie afsluiten: 3
- Ingangsvertraging: 100ms
- Weergavetijd: 1000 ms
- Vertraging uitgang: 100ms
- Maximale helderheid: 50%
- Tekst: - (er wordt geen tekst weergegeven)
- Pictogram naam: Test.ppm
- Vertegenwoordigers: 2
Commando:
pbicon,3,3,100,1000,100,50,-,Test.ppm,2,
Info:
- Entree animatie: 3
- Animatie afsluiten: 3
- Ingangsvertraging: 1000ms
- Weergavetijd: 1000 ms
- Vertraging uitgang: 500ms
- Maximale helderheid: 50%
- Tekst: Test bericht
- Pictogram naam: Test.ppm
- Herhalingen: geen
Commando:
pbicon,3,3,1000,1000,500,50,Testbericht,Test.ppm,
Info:
- Entree animatie: 2
- Animatie afsluiten: 3
- Ingangsvertraging: 1000ms
- Weergavetijd: 1000 ms
- Vertraging uitgang: 500ms
- Maximale helderheid: 50%
- Tekst: Test bericht
- Pictogram naam: Test.ppm
- Herhalingen: geen
Commando:
pbicon,2,3,1000,1000,500,50,Testbericht,Test.ppm,
Info:
- Entree animatie: 1
- Animatie afsluiten: 3
- Ingangsvertraging: 2000ms
- Weergavetijd: 1000 ms
- Vertraging uitgang: 500ms
- Maximale helderheid: 50%
- Tekst: Test bericht
- Pictogram naam: Test.ppm
- Herhalingen: geen
Commando:
pbicon,1,3,2000,1000,500,50,Testbericht,Test.ppm,
Info:
- Entree animatie: 3
- Animatie afsluiten: 1
- Ingangsvertraging: 1000ms
- Weergavetijd: 1000 ms
- Vertraging uitgang: 500ms
- Maximale helderheid: 50%
- Tekst: - (er wordt geen tekst weergegeven)
- Pictogram naam: Test.ppm
- Herhalingen: geen
Commando:
pbicon,3,1,1000,1000,500,50,-,Test.ppm,
Geprepareerde iconen downloaden
Het voorbeeldpictogram dat hier is gemaakt en een paar andere voorbereide pictogrammen zijn ook te vinden op de volgende link in de Nerdiy git: https://github.com/Nerdiyde/pxlBlck/tree/main/icons
Veel plezier met het project
Ik hoop dat alles werkte zoals beschreven. Zo niet, of als je vragen of suggesties hebt, laat het me weten in de commentaren. Ik zal dit dan zo nodig aan het artikel toevoegen.
Ideeën voor nieuwe projecten zijn altijd welkom. 🙂
PS Veel van deze projecten - vooral de hardwareprojecten - kosten veel tijd en geld. Natuurlijk doe ik dit omdat ik het leuk vind, maar als je het cool vindt dat ik de informatie met je deel, dan zou ik blij zijn met een kleine donatie aan het koffiefonds. 🙂
Nederlands 
Deutsch 
English 
Français 
Español
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?
Hé Stefan,
dus je wilt een tekst permanent weergeven, toch?
Dit kan niet zo eenvoudig. Maar ik zal het opschrijven en deze functie binnenkort toevoegen. 🙂
Hartelijke groeten
Fabian