Adding a Font

To display text we first need to load a Bitmap Font from our fonts folder:

Download: file
# Set the font and preload letters
font = bitmap_font.load_font("/fonts/Helvetica-Bold-16.bdf")
font.load_glyphs(b'abcdefghjiklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890- ()')

You can have as many fonts as you want so long as you have a Bitmap version of each one.

Next we will preload the most common letters so that we won't have to wait so long for our text to display.

Setting up the text blocks

To display text we will be using Label form the Adafruit Display Text library. This will make it very easy for us to update text in our various groups on the fly.

First we want to set up some standard values like the x an y coordinates for the top left of our text boxes.

Download: file
# Default Label styling:
TABS_X = 5
TABS_Y = 50

Next we will set up each of the text boxes that we will be updating text on in our many Groups.

Here is what that looks like:

Download: file
# Text Label Objects
feed1_label = Label(font, text="Text Window 1", color=0xE39300, max_glyphs=200)
feed1_label.x = TABS_X
feed1_label.y = TABS_Y
view1.append(feed1_label)

feed2_label = Label(font, text="Text Window 2", color=0xFFFFFF, max_glyphs=200)
feed2_label.x = TABS_X
feed2_label.y = TABS_Y
view2.append(feed2_label)

sensors_label = Label(font, text="Data View", color=0x03AD31, max_glyphs=200)
sensors_label.x = TABS_X
sensors_label.y = TABS_Y
view3.append(sensors_label)

sensor_data = Label(font, text="Data View", color=0x03AD31, max_glyphs=100)
sensor_data.x = TABS_X+15
sensor_data.y = 170
view3.append(sensor_data)

Each Label is declared, moved into position and added to their Group. Note that we have two Labels that will be added to the view3 Group. This is because one of the Labels will be updated rapidly with sensor data and we do not want to redraw all of the text for updates.

For more information about Label and Display Text, click the link below.

Word-wrap Function

Unfortunately, Label does not support word wrapping yet but we can use the PyPortal.wrap_nicely() function to reformat a string and add line breaks to wrap text so we can see it all. Now PyPortal.wrap_nicely() will do most of the hard work by breaking our text up into an array of text lines, but we still need to add line breaks at the end of these to make the words wrap and reposition the text so that it is aligned to the top.

Add this function to your code and it will handle updating all of our multiline text.

Download: file
# Used to calculate vertical text height for Top Alignment
text_hight = Label(font, text="M", color=0x03AD31, max_glyphs=10)

# return a string with word wrapping using PyPortal.wrap_nicely
def text_box(target, top, max_chars, string):
    text = pyportal.wrap_nicely(string, max_chars)
    new_text = ""
    test = ""
    for w in text:
        new_text += '\n'+w
        test += 'M\n'
    text_hight.text = test
    glyph_box = text_hight.bounding_box
    print(glyph_box[3])
    target.text = "" # Odd things happen without this
    target.y = round(glyph_box[3]/2)+top
    target.text = new_text

We will go over how to use this function on the Usage section of the guide.

Format Specification Mini-Language

So let's say you want to display a bit of text that has some sensor reading or other data types in the mix. Using .format() gives you a lot of options to assemble your text so here is an example of how that works.

sensor_data.text = 'Touch: {}\nLight: {}\nTemp: {}°F'.format(touch, light, tempF)

This guide was first published on Feb 10, 2020. It was last updated on Feb 10, 2020. This page (Text Box) was last updated on Feb 20, 2020.