HowTo: pxlBlck – ontwerp pictogrammen, breng ze over naar de pxlBlck en geef ze weer

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.

In deze video zie je de weergave van verschillende SocialMedia-pictogrammen inclusief bericht op de pxlBlck_32x8.

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

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

parameternaamBeschrijvingToegestaan bereik van waarden
inkomende animatieDe ID van de ingangsanimatie1-3
uitgaande animatieDe ID van de startanimatie1-3
in vertragingDeze parameter stelt de tijdsduur in die wordt gebruikt voor de invoeranimatie. Dit wordt gegeven in milliseconden.0-2000
laat vertraging zienMet deze parameter kun je de weergaveduur van het pictogram en eventueel de tekst instellen. Deze wordt opgegeven in milliseconden.0-10000
uit vertragingDeze parameter stelt de duur in die wordt gebruikt voor de uitvoeranimatie. Hij wordt gegeven in milliseconden.0-2000
helderheidMet 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 tekstMet 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 naamDeze parameter komt overeen met de bestandsnaam van het pictogram dat is geüpload in de SPIFFS van de pxlBlcktekst
herhalingJe 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
AchternaamBeschrijvingID kaart
vervagenHet pictogram en, indien van toepassing, de scrollende tekst worden weergegeven met de ingestelde "toonvertraging".1
Direct aanHet pictogram en eventuele opgegeven tekst worden onmiddellijk weergegeven.2
Vlieg van rechts naar binnenHet 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
AchternaamBeschrijvingID kaart
vervagenHet pictogram en, indien van toepassing, de scrollende tekst worden uitgefade met de ingestelde "uitloopvertraging".1
meteen uitHet pictogram en eventuele opgegeven tekst worden onmiddellijk verborgen.2
Vlieg naar linksHet 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. 🙂

Koop Me a Coffee op ko-fi.com       

2 comments

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

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

Kommentar hinterlassen

Het e-mailadres wordt niet gepubliceerd. Erforderliche Felder sind mit * markiert

Deze site gebruikt Akismet om spam te verminderen. Lees hoe uw commentaargegevens worden verwerkt.