Lijnen, rechthoeken en cirkels

Alleen tekst wordt al snel saai. De GFX-bibliotheek tekent ook vormen, zodat je gegevens kunt omlijsten, meters kunt maken en een echte kleine interface kunt ontwerpen. 🎨

Elke vorm bevindt zich op een raster met coördinaten. Punt (0,0) is de linkerbovenhoek; x loopt naar rechts en y naar beneden, net als bij de tekstcursor die je al hebt gebruikt.

De kleinste markering is één punt. drawPixel krijgt een x, een y en een kleur en laat precies één punt op het scherm oplichten.

drawLine verbindt twee punten. Geef een begin-x en -y, een eind-x en -y en een kleur op om een rechte lijn ertussen te tekenen.

drawRect heeft een x en y voor de linkerbovenhoek nodig, gevolgd door een breedte en hoogte. Alleen de rand wordt getekend, ideaal om een waarde of gedeelte te omlijsten.

Gebruik in plaats daarvan fillRect met dezelfde argumenten om het hele vlak egaal te vullen. Gevulde balken vormen de basis van meters en voortgangsweergaven.

drawCircle krijgt een x en y voor het middelpunt plus een straal. De functie tekent een ring, handig voor wijzerplaten, statuspunten of ronde pictogrammen.

Gebruik fillCircle voor een volle schijf. Een kleine gevulde cirkel vormt een duidelijke aan-uitindicator die je in één oogopslag kunt lezen.

Voor een zachtere uitstraling voegt drawRoundRect na de breedte en hoogte een hoekradius toe. Afgeronde vlakken maken knoppen en kaarten vriendelijker.

De volgorde is belangrijk: later getekende vormen komen bovenop eerdere vormen te liggen. Teken eerst een gevuld vak en druk er daarna tekst overheen voor het effect van een gelabelde badge.

Zoals altijd wordt alle tekeninformatie in de buffer geplaatst. Sluit je tekenwerk af met display.display(), zodat de volledige samengestelde afbeelding in één keer verschijnt.

Je kunt nu pixels, lijnen, rechthoeken en cirkels tekenen en vormen met tekst combineren. Met deze basisprimitieven kun je een echte gebruikersinterface samenstellen.