code.py is the file where the main code of the program resides!

Background

First, the program displays a bitmap graphic as the screen's background.

This background has the title of the program as well as a couple of sub-titles to make the data more readable.

This is a 320 x 240 pixel RGB 16-bit raster graphic in .bmp format.

If you would like to create your own background, awesome! You'll want to save the file with these specifications:

  • 320 x 240 pixels
  • 16-bit RGB color
  • Save file as .bmp format

You can then copy the .bmp file to the root level of the CIRCUITPY drive. Make sure you refer to this new filename in the pyportal constructor line:

default_bg=cwd+ "/on_this_day_bg.bmp"

Change that line to use the new filename name, such as:

default_bg=cwd+"/my_new_background.bmp"

Font

The fonts used here are bitmap fonts made from the Arial Italic typeface. You can learn more about converting type in this guide.

JSON

The neat part is that the text is not coming from a file on the device, but rather it is taken from a website!

The OTD Database

The Adafruit "OTD" repository on Github is where we're storing all this enlightening data. We can grab the JSON directly from Github site and display it on the PyPortal.

  • Head to the site here to see the lovely home of all this data.
  • Click on the "electronics" folder.
  • Now click any of the dates you want to see that data for, and voila there's the data!
  • Now click on the "raw" button.
  • This leads to the direct source of the JSON data, where the data is pulled from.

How to reference JSON data in code.py


The below code is the JSON data for Jan 25.

Download: file
{
    "Day of the year":"January 25",
    "Person":"Robert Boyle",
    "Notable for":"Chemist, Physicist",
    "Year":"1627",
    "Accomplishment":"Chemistry, pV=Nrt",
    "Web Reference":"wikipedia.org/wiki/Robert_Boyle"
}

If we look through the JSON file, we'll see 6 keys called Day of the year, Person, Notable for etc.

Each key has an associated value paired with it.

Our CircuitPython code is able to grab and parse this data using these variables:

Download: file
DAY = ["Day of the year"]
PERSON = ["Person"]
NOTABLE = ["Notable for"]
YEAR = ["Year"]
ACCOMPLISH = ["Accomplishment"]
WEB = ["Web Reference"]

Next, here's our data source from above!

Download: file
BASE_DATA = "https://raw.githubusercontent.com/adafruit/OTD/master/electronics/"

PyPortal Constructor

Then, in the pyportal query we ask for the Day of the yearPersonNotable for etc. from that URL, and then use the text_ arguments to set the font, transform, positioncolorand maxlen of the text when it is displayed.

Download: file
pyportal = PyPortal(url = BASE_DATA, debug=True,
                    json_path = (DAY, PERSON, NOTABLE, YEAR, ACCOMPLISH, WEB),
                    status_neopixel = board.NEOPIXEL,
                    default_bg = cwd + "/on_this_day_bg.bmp",
                    text_font = cwd+"fonts/Arial-ItalicMT-17.bdf",
                    text_transform = [identity]*6,  # we do this so the date doesnt get commas
                    text_position=((10, 70), (10, 100), (10, 130),(60, 160), (105, 190), (10, 220)),
                    text_color=(0xFFFFFF, 0xFFFFFF, 0xFFFFFF, 0xFFFFFF, 0xFFFFFF, 0xFFFFFF),
                    text_maxlen=(50, 50, 50, 50, 50, 50), # cut off characters
                   )

With all of this prepared, during the main loop of while True: the code will:

  • Find out what day it is and insert that date at the end of the data URL.
  • With that new URL, the porgram will query the Adafruit OTD Github page for the JSON data, and display it, along with the QR code for the associated Wikipedia link.
  • Then the program will wait 10 minutes until repeating the process.

And that's the whole program!

This guide was first published on Feb 05, 2020. It was last updated on Feb 05, 2020.

This page (Code Walkthrough - code.py) was last updated on Oct 11, 2020.