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.
Een van deze programma's is "GIMP". Dit is gratis en je kunt het downloaden via de volgende link.
Installeer GIMP
Nadat je "GIMP" hebt gedownload, moet je het programma eerst 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.
Klik op "Bestand" en "Nieuw".
Er wordt een venster geopend waarin je 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.
Vooral de "afbeeldingsgrootte" in het bovenste rood gemarkeerde gebied is belangrijk. Dit moet passen bij je pxlBlck.
Als u bijvoorbeeld een pictogram wilt voor de pxlBlck_8x8 moet je ook een 8 invoeren 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 je nu de "pendikte" instellen op één pixel.
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 kleur van de pen te veranderen, kun je de "kleurenkiezer" gebruiken om een andere kleur in te stellen.
Klik hiervoor op het gekleurde (in dit geval zwarte) vierkantje in het rood gemarkeerde gebied.
Dit opent de "kleurenkiezer" die links wordt weergegeven.
Selecteer de kleur die je wilt configureren voor het pictogram 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.
Klik weer op "Bestand" en op "Exporteren als...".
In het dialoogvenster dat wordt geopend, moet je eerst controleren of de optie (linksonder) "Bestandstype selecteren (op extensie)" 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, kun je het dialoogvenster sluiten door op "OK" te klikken.
Bevestig in het kleine dialoogvenster dat wordt geopend dat je het bestand in "ASCII"-formaat 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.
Ga vervolgens naar het tabblad "Extra" door op de rood gemarkeerde knop te klikken.
Blader 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 je eerst op de knop "Uploaden" klikken.
Klik in de volgende weergave op de rood gemarkeerde 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 je 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 met succes is geüpload, kunt u nu terugschakelen naar het tabblad "Extra" en ...
... van daaruit overschakelen 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 pictogram en, indien van toepassing, de scrollende tekst worden weergegeven met de ingestelde "toonvertraging". | 1 |
| Direct aan | Het pictogram en eventuele opgegeven tekst worden onmiddellijk weergegeven. | 2 |
| Vlieg van rechts naar binnen | Het pictogram en de scrollende tekst worden vanaf de rechterkant in het weergavegebied ingevoegd. De "vertragingsduur" 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 uitgefade met de ingestelde "uitloopvertraging". | 1 |
| meteen uit | Het pictogram en eventuele opgegeven tekst worden onmiddellijk verborgen. | 2 |
| Vlieg naar links | Het pictogram en de scrollende tekst worden uit het weergavegebied naar links verplaatst. De "uitloopvertraging" 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. Ik laat de datum nu elke 10 seconden lopen. 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 krijgen. Kun je misschien een klein voorbeeld 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