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.
Eén van deze programma's is "GIMP". Deze is gratis en kunt u downloaden via de volgende link.
Installeer GIMP
Na het downloaden van “GIMP” moet u eerst het programma installeren.
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.
Om dit te doen, klikt u op “Bestand” en “Nieuw”.
Er wordt dan een venster geopend waarin u nu de “Geavanceerde Opties” moet openen door op het plusje in het rood gemarkeerde gebied te klikken.
Stel nu alle opties in het dialoogvenster in zoals weergegeven in de afbeelding links.
Bijzonder is de “Beeldgrootte” in het bovenste gedeelte, rood gemarkeerd. Omdat het moet passen bij je pxlBlck.
Als u bijvoorbeeld een pictogram wilt voor de pxlBlck_8x8 Je moet dus een 8 opgeven voor “Breedte” en “Hoogte”.
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.
Om het pictogram pixel voor pixel te kunnen bewerken, moet u nu de “pendikte” op één pixel instellen.
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.
Om de penkleur te wijzigen, kunt u een andere kleur instellen met behulp van de “kleurkiezer”.
Klik hiervoor op het gekleurde (in dit geval zwarte) vierkantje in het rood gemarkeerde gebied.
Hierdoor wordt de “kleurenkiezer” aan de linkerkant geopend.
Selecteer de kleur die u voor het pictogram wilt configureren en bevestig dit door op “OK” te klikken.
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.
Om dit te doen, klikt u opnieuw op "Bestand" en "Exporteren als...".
In het dialoogvenster dat nu opent, moet je eerst controleren of de optie (linksonder) “Select File Type (By Extension)” is geactiveerd.
Selecteer vervolgens een opslaglocatie en voer een naam naar keuze in als bestandsnaam. Het is echter belangrijk dat de bestandsextensie .ppm leest.
Zodra alles correct is geconfigureerd, kunt u het dialoogvenster sluiten door op “OK” te klikken.
In het kleine dialoogvenster dat wordt geopend, bevestigt u dat u het bestand in “ASCII”-indeling wilt opslaan.
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.
Schakel vervolgens over naar het tabblad “Extra” door op de rode knop te klikken.
Scroll op het tabblad “Extra” naar de onderkant van de configuratiepagina.
Klik daar op de knop "Bestandsbrowser".
In dit venster zie je alle bestanden die al in het geheugen van de pxlBlck of ESP8266 zijn opgeslagen.
Om het nieuwe pictogrambestand in dit geheugen te laden, moet u eerst op de knop “Uploaden” klikken.
Klik in de volgende weergave op de rode knop “Bladeren”…
...en selecteer je eerder gemaakte bestand.
Bevestig dit vervolgens door op “Openen” te klikken.
U bevindt zich nu in het vorige venster.
Om het uploaden van het geselecteerde bestand te starten, moet u nu op de knop “Uploaden” klikken.
Afhankelijk van de bestandsgrootte van het pictogrambestand kan het uploaden even duren.
Zodra het proces is voltooid, ziet u het succesbericht rood gemarkeerd.
Om te controleren of het bestand succesvol is geüpload, kunt u nu opnieuw naar het tabblad “Extra” schakelen en...
... schakel vanaf daar over naar de “Bestandsbrowser”.
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 | Het icoontje en eventueel de scrollende tekst worden weergegeven met de ingestelde “show delay” tijd. | 1 |
| Direct aan | Het pictogram en eventuele opgegeven tekst worden onmiddellijk weergegeven. | 2 |
| Vlieg van rechts naar binnen | Het pictogram en eventuele opgegeven scrolltekst worden vanaf de rechterkant in het weergavegebied ingevoegd. De “show delay”-tijd bepaalt hoe lang dit proces duurt. | 3 |
Fade-out animaties
| Achternaam | Beschrijving | ID kaart |
|---|---|---|
| vervagen | Het pictogram en, indien van toepassing, de scrollende tekst worden verborgen met de ingestelde “uitvertraging”-tijd. | 1 |
| meteen uit | Het pictogram en eventuele opgegeven tekst worden onmiddellijk verborgen. | 2 |
| Vlieg naar links | Het pictogram en eventuele ingestelde scrolltekst worden naar de linkerkant van het weergavegebied verplaatst. De “uitvertragingstijd” bepaalt hoe lang dit proces duurt. | 3 |
voorbeelden
Er zijn verschillende manieren om commando's uit te voeren op je pxlBlck. Een van deze manieren is via het webmenu.
Ga hiervoor naar het tabblad ‘Extra’.
Daar kun je de opdracht invoeren in het rood gemarkeerde tekstveld aan de linkerkant.
Door op “Submit” te klikken wordt het commando naar de pxlBlck gestuurd en uitgevoerd.
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! Ik heb nog een vraag. Momenteel voer ik de datum elke 10 seconden uit. Nu wilde ik de temperatuur of de datum (%sysday_0%.%sysmonth_0%.%sysyears%) weergeven als een “stilstaand beeld”. Op de een of andere manier kan ik het niet bevatten. Kun je hier misschien een klein voorbeeld van laten zien?
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