Example 2: GFX Graphics demo

In the previous example we learned how to initialise the ePaper screen and write “Hello World!” on it. Now let’s try some more complicated features! In this chapter we will learn how to change the size and the position of the text and how to change the text font. Afterwards we will see how easy it is to draw some graphic elements on the display. The last section contains the sketch for an executable demo to try out by yourself.

Characters and Text

The Adafruit GFX Graphics library provides many easy to use functions to write characters and text on the screen. Typical functions are: drawChar(), setCursor(), setTextColor(), setTextSize(), setFont(), setTextWrap(). A good starting point for more detailed syntax and information is this learning site.

Graphics

For drawing graphics like circles, rectangles or triangles, the GFX library provides this typical functions: drawPixel(), drawLine(), drawRect(), fillRect(), drawCircle(), fillCircle(), drawRoundRect(), fillRoundRect(), drawTriangle(), drawfillTriangle(). Again, please head over to Adafruits learning site for more information.

Demo

Sketch

The following sketch starts with a loop which draws a sequence of ASCII characters on the screen using the function drawChar(). The next section shows how to set the font size based on the function setTextSize(). Inverting of the screen content can be done with invert(). The last part of the sketch shows how to draw some rectangles, filled rectangles and circles.

#include "Adafruit_GFX.h"
#include "PL_microEPD.h"

#define EPD_RST     A0
#define EPD_BUSY    A1
#define EPD_CS      A2

PL_microEPD display(EPD_CS, EPD_RST, EPD_BUSY); 
int i=0;

void setup() {
    SPI.begin();                            // SPI initialisation
    SPI.setBitOrder(MSBFIRST);                 
    SPI.setDataMode(SPI_MODE0); 
    SPI.setClockDivider(SPI_CLOCK_DIV4);

    display.begin();                        // Paperino ePaper initialisation and refresh screen 
    for (int y=0; y < 6; y++) {
        for (int x=0; x < 26; x++) {
            i=i+1;                          // Draw some ASCII characters
            display.drawChar(1+x*7,1+y*11,i,0,3,1);
        }   
    }
    display.update();                       // Trigger a full image update
    delay(5000);

    display.clear();                        // Clear the image buffer
    display.setCursor(1,1);                 // Set Cursor start position 
    display.println("Size1");
    display.setTextSize(2);                 // Change text size
    display.println("Size2");
    display.setTextSize(3);
    display.println("Size3");
    display.setCursor(100,5);
    display.setTextSize(9);
    display.println("9");
    display.update();                       // Trigger a full image update
    delay(5000);

    display.invert();                       // Invert the display content
    display.update();
    delay(5000);

    display.clear();
    display.drawRect(5, 5, 50, 50, EPD_BLACK);          // Draw a rectangle
    display.fillRect(40,40,25,25, EPD_BLACK);        // Draw a filled rectangle 
    display.drawCircle(100, 35, 30, EPD_BLACK);        // Draw a circle
    display.drawCircle(100, 35, 15, EPD_BLACK);
    display.drawCircle(100, 35, 8, EPD_BLACK);
    display.drawCircle(100, 35, 4, EPD_BLACK);
    display.update();
    delay(5000);

    display.clear();
    display.setTextSize(2);
    display.setCursor(5, 20);
    display.println("Hello");
    display.setCursor(5, 36);
    display.println("World!");
    display.drawCircle(170, 36, 40, EPD_BLACK);
    display.drawCircle(170, 36, 45, EPD_BLACK);
    display.drawCircle(170, 36, 50, EPD_BLACK);
    display.drawCircle(170, 36, 55, EPD_BLACK);
    display.drawCircle(170, 36, 70, EPD_BLACK);
    display.drawCircle(170, 36, 75, EPD_BLACK);
    display.drawCircle(0, 36, 135, EPD_BLACK);
    display.drawCircle(0, 36, 120, EPD_BLACK);
    display.drawCircle(0, 36, 75, EPD_BLACK);
    display.invert();
    display.update();
}

void loop() {
}

So far we used black as primary color for drawing the graphic elements. The next example will show you how to change the color and how to add the intermediate colours lightgray and darkgray. Interested? Then let’s proceed here.