Linien, Rechtecke und Kreise

Text alone gets dull. The GFX library also draws shapes, so you can frame data, build meters, and design a real little interface. 🎨

Every shape lives on a coordinate grid. Point (0,0) is top-left; x runs right and y runs down, just like the text cursor you already used.

The smallest mark is one dot. drawPixel takes an x, a y, and a color, lighting exactly one point on the screen.

drawLine connects two points. Give a start x and y, an end x and y, and a color to stroke a straight line between them.

drawRect needs a top-left x and y, then a width and height. It strokes just the border, perfect for framing a value or a section.

Swap to fillRect with the same arguments to paint the whole box solid. Filled bars are the heart of meters and progress displays.

drawCircle takes a center x and y plus a radius. It strokes a ring, handy for dials, status dots, or rounded icons.

Use fillCircle for a solid disc. A small filled circle makes a clear on/off indicator that is easy to read at a glance.

For a softer look, drawRoundRect adds a corner radius after width and height. Rounded boxes make buttons and cards feel friendlier.

Order matters: shapes drawn later sit on top. Draw a filled box first, then print text over it for a labeled badge effect.

As always, all drawing fills the buffer. End your shape work with display.display() so the whole composed image appears at once.

You want a solid bar to show how full a tank is.

You can now draw pixels, lines, rectangles, and circles, and layer shapes with text. These primitives are all you need to compose a real UI.