Drawing graphics

What this example shows

Draw filled and outlined rectangles, circles and triangles, text and a bitmap logo in several colors, then show them with one refresh. The logo comes from logoImg.h, which sits in the example folder next to the sketch.

Example code

Select Board

Inkplate7SPECTRA_Simple.ino

#include "Inkplate.h"
#include "logoImg.h"

Inkplate display;

void setup()
{
    display.begin();
    display.clearDisplay();
    display.display();

    display.fillScreen(INKPLATE_WHITE);

    // Draw many rectangles
    display.fillRect(0, 0, 50, 50, INKPLATE_BLACK);
    display.fillRect(0, 50, 50, 50, INKPLATE_WHITE);
    display.fillRect(0, 100, 50, 50, INKPLATE_GREEN-1);
    display.fillRect(0, 150, 50, 50, INKPLATE_BLUE-1);
    display.fillRect(0, 200, 50, 50, INKPLATE_RED);
    display.fillRect(0, 250, 50, 50, INKPLATE_YELLOW);

    display.drawRect(55, 0, 50, 50, INKPLATE_BLACK);
    display.drawRect(55, 50, 50, 50, INKPLATE_WHITE);
    display.drawRect(55, 100, 50, 50, INKPLATE_GREEN-1);
    display.drawRect(55, 150, 50, 50, INKPLATE_BLUE-1);
    display.drawRect(55, 200, 50, 50, INKPLATE_RED);
    display.drawRect(55, 250, 50, 50, INKPLATE_YELLOW);

    // Draw many circles
    display.fillCircle(135, 25, 24, INKPLATE_BLACK);
    display.fillCircle(135, 75, 24, INKPLATE_WHITE);
    display.fillCircle(135, 125, 24, INKPLATE_GREEN-1);
    display.fillCircle(135, 175, 24, INKPLATE_BLUE-1);
    display.fillCircle(135, 225, 24, INKPLATE_RED);
    display.fillCircle(135, 275, 24, INKPLATE_YELLOW);

    display.drawCircle(190, 25, 24, INKPLATE_BLACK);
    display.drawCircle(190, 75, 24, INKPLATE_WHITE);
    display.drawCircle(190, 125, 24, INKPLATE_GREEN-1);
    display.drawCircle(190, 175, 24, INKPLATE_BLUE-1);
    display.drawCircle(190, 225, 24, INKPLATE_RED);
    display.drawCircle(190, 275, 24, INKPLATE_YELLOW);;

    // Draw many triangles
    display.fillTriangle(210, 50, 260, 50, 235, 0, INKPLATE_BLACK);
    display.fillTriangle(210, 100, 260, 100, 235, 50, INKPLATE_WHITE);
    display.fillTriangle(210, 150, 260, 150, 235, 100, INKPLATE_GREEN-1);
    display.fillTriangle(210, 200, 260, 200, 235, 150, INKPLATE_BLUE-1);
    display.fillTriangle(210, 250, 260, 250, 235, 200, INKPLATE_RED);
    display.fillTriangle(210, 300, 260, 300, 235, 250, INKPLATE_YELLOW);

    display.drawTriangle(210, 50, 260, 50, 235, 0, INKPLATE_BLACK);
    display.drawTriangle(210, 100, 260, 100, 235, 50, INKPLATE_WHITE);
    display.drawTriangle(210, 150, 260, 150, 235, 100, INKPLATE_GREEN-1);
    display.drawTriangle(210, 200, 260, 200, 235, 150, INKPLATE_BLUE-1);
    display.drawTriangle(210, 250, 260, 250, 235, 200, INKPLATE_RED);
    display.drawTriangle(210, 300, 260, 300, 235, 250, INKPLATE_YELLOW);

    // Show some pretty text
    display.setTextColor(INKPLATE_BLACK);
    display.setCursor(265, 0);
    display.setTextSize(1);
    display.print("Welcome to Inkplate 7SPECTRA!");

    display.setTextColor(INKPLATE_WHITE);
    display.setCursor(265, 50);
    display.setTextSize(1);
    display.print("Welcome to Inkplate 7SPECTRA!");

    display.setTextColor(INKPLATE_GREEN-1);
    display.setCursor(265, 100);
    display.setTextSize(1);
    display.print("Welcome to Inkplate 7SPECTRA!");

    display.setTextColor(INKPLATE_BLUE-1);
    display.setCursor(265, 150);
    display.setTextSize(1);
    display.print("Welcome to Inkplate 7SPECTRA!");

    display.setTextColor(INKPLATE_RED);
    display.setCursor(265, 200);
    display.setTextSize(1);
    display.print("Welcome to Inkplate 7SPECTRA!");

    display.setTextColor(INKPLATE_YELLOW);
    display.setCursor(265, 250);
    display.setTextSize(1);
    display.print("Welcome to Inkplate 7SPECTRA!");

    // Draw logo
    display.drawBitmap(0, 350, logo, logo_w, logo_h, INKPLATE_BLACK);
    display.drawBitmap(100, 350, logo, logo_w, logo_h, INKPLATE_GREEN-1);
    display.drawBitmap(200, 350, logo, logo_w, logo_h, INKPLATE_BLUE-1);
    display.drawBitmap(300, 350, logo, logo_w, logo_h, INKPLATE_RED);
    display.drawBitmap(400, 350, logo, logo_w, logo_h, INKPLATE_YELLOW);

    display.display();
}

void loop()
{
}

The sketch passes INKPLATE_GREEN-1 and INKPLATE_BLUE-1 as colors. The color constants are indexes 0 to 5, so INKPLATE_GREEN-1 is index 4 (blue) and INKPLATE_BLUE-1 is index 3 (red). Use the constants on their own when you want green and blue.

Functions used

Inkplate()returns None

Creates the Inkplate object. Inkplate 7SPECTRA has a single six-color mode, so the constructor takes no mode argument.

ReturnsConstructor; no return value.

display.begin()returns void

Initializes the library, the peripherals and the frame buffer. Call it once in setup(); later calls are ignored.

ReturnsNothing.

display.clearDisplay()returns void

Fills the frame buffer with white. It does not change the panel; call display() afterwards for that.

ReturnsNothing.

display.display(bool _leaveOn = 0)returns void

Sends the whole frame buffer to the panel and refreshes it. The sketch calls it once at the start to clear the panel and once at the end to show the shapes.

ReturnsNothing.

display.fillScreen(uint16_t color)returns void

Fills the whole frame buffer with one color.

ReturnsNothing.

display.fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color)returns void

Draws a filled rectangle with its top-left corner at (x, y).

ReturnsNothing.

display.drawRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color)returns void

Draws a rectangle outline with its top-left corner at (x, y).

ReturnsNothing.

display.fillCircle(int16_t x0, int16_t y0, int16_t r, uint16_t color)returns void

Draws a filled circle with its center at (x0, y0) and radius r.

ReturnsNothing.

display.drawCircle(int16_t x0, int16_t y0, int16_t r, uint16_t color)returns void

Draws a circle outline with its center at (x0, y0) and radius r.

ReturnsNothing.

display.fillTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color)returns void

Draws a filled triangle through the three corner points.

ReturnsNothing.

display.drawTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color)returns void

Draws a triangle outline through the three corner points.

ReturnsNothing.

display.setTextColor(uint16_t c)returns void

Sets the text color for the following print() calls.

ReturnsNothing.

display.setCursor(int16_t x, int16_t y)returns void

Sets where the next printed text starts, in pixels from the top-left corner.

ReturnsNothing.

display.setTextSize(uint8_t s)returns void

Sets the text magnification; 1 is the base 5×7 pixel font.

ReturnsNothing.

display.print(value)returns size_t

Prints text at the cursor into the frame buffer, like Serial.print().

ReturnsNumber of bytes printed.

display.drawBitmap(int16_t x, int16_t y, const uint8_t bitmap[], int16_t w, int16_t h, uint16_t color)returns void

Draws a 1-bit bitmap with its top-left corner at (x, y): set bits take the color, clear bits are left as they are.

ReturnsNothing.

Parameters

Type	Name	Description
`int16_t`	`x`, `y`	Top-left corner in pixels.
`const uint8_t[]`	`bitmap`	The bitmap array, here `logo` from `logoImg.h`.
`int16_t`	`w`, `h`	Bitmap width and height, here `logo_w` and `logo_h`.
`uint16_t`	`color`	Color for the set bits.

All drawing functions come from the Adafruit GFX class the library builds on. Their color argument is one of the six color constants.

What to expect

The panel refreshes to white first. After the second refresh, the left part of the screen shows six rows of shapes, the line "Welcome to Inkplate 7SPECTRA!" next to each row, and five copies of the logo below them. From the top, the rows are black, white, blue, red, red and yellow, because of the -1 color values explained above. The white row is invisible on the white background. The sketch prints nothing to the Serial Monitor.

🔗Open the complete example

examples/Inkplate7SPECTRA/Basic/Inkplate7SPECTRA_Simple

→

What this example shows​

Example code​

Functions used​

What to expect​

What this example shows

Example code

Functions used

What to expect