This project will use the Weblate API to fetch the current translated percent for the CircuitPython project into different languages and display it along with a progress bar illustration.
Custom Font
This project script uses two custom bdf font files.
To use with CircuitPython, you need to first install a few libraries, into the lib folder on your CIRCUITPY drive. Then you need to update code.py with the example script.
Thankfully, we can do this in one go. In the example below, click the Download Project Bundle button below to download the necessary libraries and the code.py file in a zip file. Extract the contents of the zip file, open the directory MagTag_Progress_Displays/weblate_translated_percent/ and then click on the directory that matches the version of CircuitPython you're using and copy the contents of that directory to your CIRCUITPY drive.
Your CIRCUITPY drive should now look similar to the following image:

# SPDX-FileCopyrightText: 2020 Tim C, written for Adafruit Industries # # SPDX-License-Identifier: Unlicense """ Pull the current translated percent of CircuitPython from Weblate and show it on the screen with text and a progress bar. Copy leaguespartan18.bdf and leaguespartan11.bdf into fonts/ on your CIRCUITPY drive. """ from adafruit_magtag.magtag import MagTag from adafruit_progressbar.progressbar import ProgressBar # Set up where we'll be fetching data from DATA_SOURCE = "https://hosted.weblate.org/api/projects/circuitpython/statistics/" NAME_LOCATION = ["name"] PERCENT_LOCATION = ["translated_percent"] URL_LOCATION = ["url"] magtag = MagTag( url=DATA_SOURCE, json_path=(NAME_LOCATION, PERCENT_LOCATION, URL_LOCATION), ) magtag.network.connect() # name magtag.add_text( text_font="fonts/leaguespartan18.bdf", text_position=( (magtag.graphics.display.width // 2) - 1, 20, ), text_anchor_point=(0.5, 0.5), ) # percentage def textpercent_transform(val): return "Translated: {}%".format(val) magtag.add_text( text_font="fonts/leaguespartan18.bdf", text_position=( (magtag.graphics.display.width // 2) - 1, 45, ), text_transform=textpercent_transform, text_anchor_point=(0.5, 0.5), ) # URL def texturl_transform(val): return val.replace("https://", "") # remove known prefix! magtag.add_text( text_font="fonts/leaguespartan11.bdf", text_position=( (magtag.graphics.display.width // 2) - 1, (magtag.graphics.display.height) - 8, ), text_transform=texturl_transform, text_anchor_point=(0.5, 1.0), ) # set progress bar width and height relative to board's display BAR_WIDTH = magtag.graphics.display.width - 80 BAR_HEIGHT = 30 BAR_X = magtag.graphics.display.width // 2 - BAR_WIDTH // 2 BAR_Y = 66 # Create a new progress_bar object at (x, y) progress_bar = ProgressBar( BAR_X, BAR_Y, BAR_WIDTH, BAR_HEIGHT, 1.0, bar_color=0x999999, outline_color=0x000000 ) magtag.graphics.splash.append(progress_bar) timestamp = None try: value = magtag.fetch() print("Response is", value) progress_bar.progress = value[1] / 100.0 magtag.refresh() magtag.exit_and_deep_sleep(24 * 60 * 60) # one day except (ValueError, RuntimeError, ConnectionError, OSError) as e: print("Some error occurred, retrying! -", e) magtag.exit_and_deep_sleep(60) # one minute
Code Overview
The MagTag library handles the text once it is up. Initialize it with the Weblate API url and data path to the translated percent value. The API returns back JSON data like this:
{ "total": 14688, "total_words": 79509, "last_change": "2020-11-26T23:24:10.488034Z", "recent_changes": 142, "translated": 9141, "translated_words": 48720, "translated_percent": 62.2, "translated_words_percent": 61.2, "translated_chars": 286810, "translated_chars_percent": 61.3, "total_chars": 467279, "fuzzy": 82, "fuzzy_percent": 0.5, "failing": 99, "failing_percent": 0.6, "name": "CircuitPython", "url": "https://hosted.weblate.org/projects/circuitpython/" }
The program gets the translated_percent
, url
, and name
values. Inside the main loop magtag.fetch()
will return these values. It captures the results into a variable and then uses it to update the progress bar. The display must be refreshed after updating the progress.
The code uses the adafruit_magtag library to fetch the data from Weblate, and to show the text output on the display. The library creates its own displayio.Group
internally that is shown on the display. Add a progress bar to that Group like this: magtag.graphics.splash.append(progress_bar)
.