Working Backend and Frontend for CLUE Screen

[andreamah]

Description:

Before I scare anyone off with this PR, please know that ~25 000 of the added lines of code are from the *.bdf (bitmap defined font) file of the default text typeface (which doesn't need to be reviewed)!

This initial CLUE PR allows for the following:

• Backend Python CLUE library support for:
  • adafruit_clue (only for pixel and display text): https://circuitpython.readthedocs.io/projects/clue/en/latest/api.html
  • adafruit_display_text (used by adafruit_clue, but can be used independently also): https://github.com/adafruit/Adafruit_CircuitPython_Display_Text
  • adafruit_bitmap_font (used by adafruit_clue, but can be used independently also):
    https://github.com/adafruit/Adafruit_CircuitPython_Bitmap_Font
  • adafruit_display_shapes: https://github.com/adafruit/Adafruit_CircuitPython_Display_Shapes/
  • adafruit_fancyled (for CPX and CLUE): https://github.com/adafruit/Adafruit_CircuitPython_FancyLED
  • neopixel (for CPX and CLUE): https://github.com/adafruit/Adafruit_CircuitPython_NeoPixel

NOTE 1: adafruit_display_text is present within a tar.gz of the latest release on GitHub, since they seemed to have manually disabled deployment to PyPI. Coincidentally, adafruit_display_text also required a few fixes for off-by-one errors, so that it incorporated in the tar.gz

NOTE 2: adafruit_clue is not downloaded via PyPI, but is a local revised version that is pre-downloaded.

Neopixel (excluding neopixel_write), adafruit_fancyled, adafruit_bitmap_font, and adafruit_display_shapes are all downloaded directly from PyPI upon setup. They are installed as dependencies.

Directory structure for new folders:

• clue/
  • the manual adafruit_clue driver and additional tests for some of the libraries above that can work on the clue.
• base_circuitpython/
  • Python implementation of certain Circuitpython (https://circuitpython.readthedocs.io/en/5.0.x/README.html) components. Instead of interacting with hardware, ours interacts with our simulator.

Frontend-backend communication:

• Currently, the backend for CLUE only emits to the frontend (no listener on backend yet). Image state is stored in a PIL (Python Imaging Library) Image object and is encoded to base64+sent to frontend whenever is it supposed to update. Work is currently being done to try to make this process more efficient on the backend side.

Frontend Info:

• Currently, the frontend just contains a stripped-down microbit SVG with a png image for a screen. This will later be updated to contain an actual CLUE SVG.

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)

Limitations:

Please describe limitations of this PR

Testing:

Here are some tests that I ran & verified that it looks the same on the device:

• For adafruit_clue (and indirectly, adafruit_display_text)

from adafruit_bitmap_font import bitmap_font

from adafruit_clue import clue

clue_data = clue.simple_text_display(title="CLUE Sensor Data!", title_scale=2,) //tested with different scaling

while True:
    clue_data[0].text = "Accelerometer:"
    clue_data[1].text = "Gyro:"
    clue_data[2].text = "Magnetic:"
    clue_data[3].text = "Pressure: {:.3f} hPa".format(100)
    clue_data[4].text = "Altitude: {:.1f} m".format(100)
    clue_data[5].text = "Temperature: {:.1f} C".format(100)
    clue_data[6].text = "Humidity: {:.1f} %".format(100)
    clue_data[7].text = "Proximity: {}".format(100)
    clue_data[8].text = "Gesture: {}".format("flip")
    clue_data[9].text = "Color: R: {} G: {} B: {} C: {}".format(100, 100, 100, 100)
    clue_data[10].text = "Button A: {}".format(False)
    clue_data[11].text = "Button B: {}".format(False)
    clue_data[12].text = "Touch 0: {}".format(False)
    clue_data[13].text = "Touch 1: {}".format(False)
    clue_data[14].text = "Touch 2: {}".format(False)
    clue_data.show()

and

from adafruit_clue import clue
while True:
    clue_data.pixel.fill((0, 3, 4))

NOTE: it is known that it bugs out if you switch between clue_data.pixel.fill() and clue_data.show(). This is because the pixel is not implemented on the frontend.

• For adafruit_display_shapes
  https://github.com/adafruit/Adafruit_CircuitPython_Display_Shapes/blob/master/examples/display_shapes_simpletest.py
• For adafruit_fancyled and neopixel (for CPX and CLUE, diff num_leds for different device tests)

import board
import neopixel
import adafruit_fancyled.adafruit_fancyled as fancy

num_leds = 1 // would be 10 for CPX
# Declare a 6-element RGB rainbow palette
palette = [
    fancy.CRGB(1.0, 0.0, 0.5),  # Pink
    fancy.CRGB(0.0, 1.0, 0.0),  # Green
    fancy.CRGB(0.0, 0.0, 1.0),
]  # Blue

pixels = neopixel.NeoPixel(board.NEOPIXEL, num_leds, brightness=1.0, auto_write=False)

offset = 0  # Positional offset into color palette to get it to 'spin'

while True:
    for i in range(num_leds):
        # Load each pixel's color from the palette using an offset, run it
        # through the gamma function, pack RGB value and assign to pixel.
        color = fancy.palette_lookup(palette, offset + i / num_leds)
        color = fancy.gamma_adjust(color, brightness=0.25)
        pixels[i] = color.pack()
    pixels.show()

    offset += 0.02  # Bigger number = faster spin

Checklist:

• My code follows the style guidelines of this project
• My code has been formatted with npm run format and passes the checks in npm run check
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules

[vandyliu]

Can't believe I just read all of that but it was worth it! Excellent job!!!!!!!!!!!!!!!!!!!!!!! 👯 💃 👯‍♂ 🕺

[vandyliu]

Looks good!!! :D
Excited to merge it.

[isadorasophia]

Super cool! Really nice job on the documentation too 😁