HowTo: pxlBlck - Relatieve waarden weergeven als staafdiagram

Ik begon met het documenteren van de pxlBlcks (die al lang uitgesteld waren) in november 2020 nadat Hackaday.com de ‘GoodBye 2020’-uitdaging had aangekondigd. (Meer informatie hier: https://hackaday.io/contest/175608-goodbye-2020/details)

Ik gebruikte de pxlBlcks toen al heel lang, maar zoals zo vaak vond ik nooit de tijd/motivatie om het allemaal op te schrijven.

Iedereen die de hierboven genoemde beschrijving van de uitdaging heeft gelezen, heeft misschien gemerkt dat de uitdaging heel goed aansluit bij het scala aan functies van de pxlBlcks. Er worden al heel lang scrollende teksten op weergegeven. Zo kan bijvoorbeeld zonder grote problemen een bericht “Good Bye 2020” worden weergegeven.

Dankzij een tip van een van de eerste testers van de pxlBlck plugin kwam ik op een ander idee hoe je nog beter kunt visualiseren wanneer het jaar 2020 eindelijk achter de rug is: Een soort laadbalk die visualiseert hoeveel dagen van het jaar 2020 zijn al weg en blijven dienovereenkomstig.

Hiervoor heb ik een nieuw commando geïmplementeerd in de pxlBlck plugin waarmee maximaal vijf relatieve (procentuele) waarden op het display getoond kunnen worden. U kunt niet alleen het einde van een periode weergeven, maar ook verschillende geschaalde (als de waarde absoluut is) of relatieve waarden.

Zo kan de waarde van de relatieve luchtvochtigheid heel goed worden weergegeven omdat deze waarde al relatief is en overeenkomt met een procentuele waarde. Om absolute waarden weer te geven moet je wat meer “wiskunde” gebruiken. Klinkt ingewikkeld. Maar het is niet.

In het volgende artikel wordt beschreven hoe je relatieve waarden in een laadbalk kunt weergeven op het display van je pxlBlck.

---

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

Om de informatie in dit artikel te kunnen gebruiken, moet u uw pxlBlck al hebben ingesteld en geprogrammeerd. Informatie hierover vindt u in de volgende artikelen.

• pxlBlck - Een IOT/SmartHome-informatiesysteem
• pxlBlck - Installeer en configureer de pxlBlck-plug-in
• pxlBlck - Configureer wijzerplaten en screensavers

Vereist gereedschap:
- Nee -

Benodigd materiaal:
- Nee -

---

De opdracht voor het plotten van relatieve waarden

Het volgende commando is geschikt voor het weergeven van relatieve of beperkte absolute waarden op het display van de pxlBlck. De “richting” van de gevisualiseerde laadbalk op het display kan worden ingesteld. Bovendien kan een “gevulde” vlag worden ingesteld voor de eerste van de verzonden relatieve waarden. Dit betekent dat het weergavegebied in de ingestelde kleur van nul tot de gewenste waarde wordt gekleurd. Last but not least kan de weergavekleur van elke afzonderlijke waarde worden aangepast.

Zie je liever voorbeelden: scrol dan even verder. Hieronder heb ik verschillende voorbeelden opgesomd inclusief de gebruikte commando's.

commando naam

pbbar

commando overzicht

pbbar,[weergave_duur1-86400000],[gespiegeld 0-1],[eerste_balk_gevuld 0-1],[weergave_richting 0-1],[bar_graph_value 0-100],[rood 0-255],[groente 0-255],[blauw 0-500],[maximaal vier aanvullende waardegroepen]

Parameterbeschrijving

parameternaam	Beschrijving	Toegestaan bereik van waarden
weergave_duur	Deze parameter definieert de weergavetijd van de weergegeven waarde. Dit begint nadat alle waarden op het display zijn weergegeven.	1-86400000
gespiegeld	U kunt deze parameter gebruiken om de weergave van de waarde te spiegelen. Met behulp van de parameter “weergave_richting”de BarGraph kan in alle richtingen worden uitgelijnd.	0-1
eerste_balk_gevuld	Met deze parameter wordt de gevulde weergave voor de eerste waarde in- of uitgeschakeld. Dus als u de eerste waarde instelt op 25 en deze parameter is geactiveerd, wordt 25% van de matrix “gevuld” met de gewenste kleur voor deze parameter.	0-1
weergave_richting	Deze parameter configureert of de waarde horizontaal (0) of verticaal (1) wordt weergegeven. Met behulp van de parameter “gespiegeldDeze oriëntatie kan ook worden weerspiegeld.	0-1
directe_uitvoer	Staat deze optie ingesteld (=1) dan wordt de waarde direct op het display getoond. De weergaveanimatie wordt dus niet weergegeven.	0-1
bar_graph_value	Dit is de werkelijke waarde tussen 0 en 100 die u wilt vertegenwoordigen.	0-100
rood	Deze parameter bepaalt de helderheid van de rode kleur van de bijbehorende waarde.	0-255
groente	Deze parameter bepaalt de helderheid van de groene kleur van de bijbehorende waarde.	0-255
blauw	Deze parameter bepaalt de helderheid van de blauwe kleur van de bijbehorende waarde.	0-255

Voorbeeld

Meer gedetailleerde informatie, inclusief afbeeldingen en video's van de verschillende weergaven en hoe u deze op uw pxlBlck kunt weergeven, vindt u in de volgende paragraaf.

---

Geef meer dan één waarde tegelijk weer

Als u slechts één waarde op het display van uw pxlBlck wilt visualiseren, is de structuur van het commando vrij eenvoudig. U kunt bovenstaande tabel als richtlijn gebruiken. Een opdracht om slechts één waarde weer te geven, kan er bijvoorbeeld zo uitzien.

• pbbar,10000,1,1,0,0,75,50,00,0,

Deze opdracht toont voor 10 seconden (=10000ms) de gespiegeld en gevuld Waarde 75 met animatie in de rode kleur bij.

Als u nu (zo maximaal mogelijke) vijf waarden wilt weergeven, zou het commando er als volgt uit kunnen zien.

• pbbar,10000,1,1,0,0,10,255,0,0,25,0,255,0,50,0,0,255,75,0,255,255,100,255,0,255,

In het gegeven voorbeeld heb ik de instellingen voor de afzonderlijke waarden in kleur gemarkeerd. De eerste waarde en de bijbehorende kleurinstellingen zijn rood gemarkeerd, de tweede in oranje, de derde in groen, de vierde in blauw en de vijfde in roze.

Je kunt dus met slechts één commando meerdere waarden naar de pxlBlck sturen voor weergave. Zorg er echter voor dat er maximaal vijf waarden tegelijk kunnen worden weergegeven.

---

Voorbeeld: gebruik regels om elk uur een gedefinieerde duur voor een datum weer te geven

Als u bijvoorbeeld wilt laten zien (zoals hierboven vermeld) wanneer het huidige jaar (2020) (eindelijk) eindigt, kunt u de volgende regels gebruiken.

Deze regels berekenen het verschil tot 1 januari 2020 00:00 uur vanaf de huidige datum of tijd en zetten dit verschil om in een percentage. Dit percentage wordt vervolgens gebruikt om de opdracht “pbbar” te “voeden”. Omdat de weergave op de pxlBlck_32x8 en de pxlBlck_RingClock enigszins van elkaar verschillen, vindt u hieronder twee enigszins verschillende codes voor de regels van uw pxlBlck.

Omdat de pxlBlck_32x8 ook scrollende tekst kan weergeven, omvat het regelvoorbeeld voor de pxlBlck_32x8 ook de automatische uitvoer van “tot ziens”-berichten (in verschillende talen). (Waarom? Zie de ‘GoodBye 2020’-uitdaging hierboven. 🙂).

De regels worden elke minuut geactiveerd door de gebeurtenis “Clock#Time”. Informatie over de ESP Easy Rules vindt u onder andere via de volgende links.

• https://www.letscontrolit.com/wiki/index.php/Tutorial_Rules
• https://www.letscontrolit.com/wiki/index.php/ESPEasy_System_Variables
• https://www.letscontrolit.com/wiki/index.php/EasyFormula

---

Voor pxlBlck_RingClock

Hier het regelvoorbeeld voor de pxlBlck_RingClock.

on Clock#Time=All,**:** do //1577833200=unixtime op "1.1.2020 @ 00:00" let,1,%unixtime%-1577833200 //berekening van seconden verstreken sinds 1.1.2020 @ 00:00 let,1, %v1%/60 //omrekenen naar minuten verstreken sinds 1.1.2020 om 00:00 let,1,%v1%/60 //omrekenen naar verstreken uren sinds 1.1.2020 om 00:00 let,1,%v1%/24 //omrekenen naar dagen geslaagd sinds 1.1.2020 @ 00:00 let,2,%v1%/365 // relatieve waarde berekenen van "hoeveel dagen van het jaar 2020 zijn verstreken" let,2,%v2%*100 // relatieve (float) waarde omzetten in percentage pbbar,10000,1,1,0,%v2%,50,00,0, endon

---

Voor pxlBlck_32x8

Hier het regelvoorbeeld voor de pxlBlck_RingClock.

on Clock#Time=All,**:** do //1577833200=unixtime op "1.1.2020 @ 00:00" let,1,%unixtime%-1577833200 //berekening van seconden verstreken sinds 1.1.2020 @ 00:00 let,1, %v1%/60 //omrekenen naar minuten verstreken sinds 1.1.2020 om 00:00 let,1,%v1%/60 //omrekenen naar verstreken uren sinds 1.1.2020 om 00:00 let,1,%v1%/24 //omrekenen naar dagen geslaagd sinds 1.1.2020 @ 00:00 let,2,%v1%/365 // relatieve waarde berekenen van "hoeveel dagen van het jaar 2020 zijn verstreken" let,2,%v2%*100 // relatieve (float) waarde omzetten in percentage pbbar,2000,0,1,1,%v2%,0,10,0, Delay 2000 // om wat tijd te geven voor de weergave van de balkinstelling pbrntxt,10,10,10,0,0,0,25,8 ,Au Revoir - Adios - Vaarwel - Do Svidaniya - Güle güle - Aloha - Selamat tinggal - DaH jImej - Sayonara - Ik ben groot., endon

---

continu de resterende tijd weergeven

In het geval dat u de resterende tijd (of een andere weergegeven waarde) continu wilt weergeven, hoeft u alleen de weergavetijd zo hoog in te stellen dat deze groter is dan het update-interval van de weergave.

Dus als u elke minuut een waarde op het display wilt weergeven en deze permanent of tot de volgende update moet worden weergegeven, moet u de waarde voor weergave_duur ingesteld op (minstens) 60000 (ms).

---

Voorbeeld: Stuur relatieve (percentage) waarde van NodeRed en geef deze weer op de pxlBlck

Een voorbeeld van hoe u een relatieve procentuele waarde (d.w.z. een waarde van 0-100) van NodeRed naar de pxlBlck kunt sturen en op het display kunt weergeven, vindt u in de volgende NodeCode.

U vindt de code voor de hier beschreven NodeRed-voorbeelden onder de volgende link.

• https://github.com/Nerdiyde/NodeRedSnippets/blob/master/snippets/pxlBlck_pbbar_command_nodeRed_control_example.json

Hoe u verder kunt gaan om dit in uw NodeRed-installatie te importeren, wordt beschreven in het volgende artikel.

• NodeRed - importeer en exporteer knooppuntcode

---

Voorbeeld: stuur niet-relatieve waarden vanuit NodeRed en geef ze weer op de PxlBlck

Dit voorbeeld laat zien hoe je met NodeRed ook niet-relatieve waarden naar je pxlBlck kunt sturen. Om dit te laten werken, worden de absolute waarden “omlaag” en “omhoog” beperkt met behulp van het bereikknooppunt en geschaald naar het waardebereik 0-100 van de pxlBlck. Dit gebeurt in het knooppunt genaamd "set toegestaan bereik voor schaling".

U vindt de code voor de hier beschreven NodeRed-voorbeelden onder de volgende link.

• https://github.com/Nerdiyde/Nod.w.zeRedSnippets/blob/master/snippets/pxlBlck_pbbar_command_nodeRed_control_example.json

Hoe u verder kunt gaan om dit in uw NodeRed-installatie te importeren, wordt beschreven in het volgende artikel.

• NodeRed - importeer en exporteer knooppuntcode

---

Voorbeeld: Stuur vanuit NodeRed vijf relatieve waarden en toon ze tegelijkertijd op de PxlBlck

Dit voorbeeld laat zien hoe je met NodeRed vijf waarden tegelijkertijd naar je pxlBlck kunt sturen. Daarnaast kunnen ook de weergaveopties worden ingesteld. De individuele waarden worden verzameld in variabelen en met een druk op de knop gecombineerd tot een commando (“send to pxlBlck”) en naar de pxlBlck gestuurd.

U vindt de code voor de hier beschreven NodeRed-voorbeelden onder de volgende link.

• https://github.com/Nerdiyde/NodeRedSnippets/blob/master/snippets/pxlBlck_pbbar_command_nodeRed_control_example.json

Hoe u verder kunt gaan om dit in uw NodeRed-installatie te importeren, wordt beschreven in het volgende artikel.

• NodeRed - importeer en exporteer knooppuntcode

---

Informatie over de aanpassing/configuratie van de vermelde NodeRed-voorbeelden

U moet de bovenstaande voorbeelden een beetje aanpassen voordat u ze met succes kunt testen.

---

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