Coordinates and Overlapping Text

To use the ePaper module, it is important to understand its coordinate system.  Most computer graphics, displays, and terminals follow a similar convention; the top-left corner is the origin.

Look carefully at the graphic below.  The display in the graphic shows a single black pixel in each corner of the screen.  The grey text closest to each pixel represents that pixel’s coordinates.  The top-left pixel is in row zero and column zero. You could also say that its x/y position is (0,0).  Since the display is 128 pixels wide, and the first pixel is zero, the rightmost pixel is in column 127.

ePaper corner coordinates image.

When we refer to the coordinates of a pixel, we use the notation (x,y), where x is how far across from left to right, and y is how far down from top to bottom.

The cursor is the point where the ePaper module begins printing text or numbers.  If you set the cursor to (0,0), it will print text beginning at the top-left corner.  If you set the cursor to (2,2), it will begin printing text 2 pixels left and 2 pixels down from the top-left corner:

A graphic showing how to use coordinates to position text on an ePaper module.

 

ePaper Coordinates Test Program

This test program prints the Hello World message three times, using different starting coordinates each time.

  • Log into BlocklyProp and make a new project for your board.
  • Build and save the program shown below:

ePaper coordinates test program Blockly program.

  • Click the Run once button. The ePaper should display:

 ePaper module displaying an overlapping Hello World! text.

 

How it Works

The program prints Hello World! three times, starting at different coordinates. Since the second and third prints' coordinates were close to the first, the three printings are overlapping and look like they blend together.

 

Did You Know?

What happens when different combinations of font and background color are written close to each other?  — It depends!

  • If both the background and font is set to black, the text background will overlap and look like it blends together.
  • If both the font and the background are set to white, the text will not be visible on the screen, even if it’s over a shape.
  • If the font is set to black and the background to white, the text written last will cover the previous text.
  • If the font is set to white and the background is set to black, the text written last will also cover the previous text.