custom scrolling quote board matrix display...2021/01/20  · black led diffusion acrylic panel 12"...

41
Custom Scrolling Quote Board Matrix Display Created by John Park Last updated on 2021-03-17 01:12:55 PM EDT

Upload: others

Post on 02-Feb-2021

1 views

Category:

Documents


0 download

TRANSCRIPT

  • Custom Scrolling Quote Board Matrix DisplayCreated by John Park

    Last updated on 2021-03-17 01:12:55 PM EDT

  • 2337999

    111111121314151618181820202122232525252525272727282929313132323333343535353839

    Guide Contents

    Guide ContentsOverview

    PartsUsing M4 AirliftInstall CircuitPython

    Set up CircuitPython Quick Start!Further Information

    Build the Quote Board Matrix DisplayAssemblyShields UpPower ConnectionsData CableJumperWall Adapter

    Using MatrixPortalInstall CircuitPython

    Set up CircuitPython Quick Start!Further Information

    Prep the MatrixPortalPower PrepPower TerminalsPanel PowerBoard Connection

    Code the Quote BoardLibrariesConnect to the InternetText EditorCodeAdafruit IO SetupProblems Getting QuotesAdafruit IO Group, Feeds, DashboardGroup CreationFeed CreationDashboard CreationCreate QuotesWhat the Code DoesFeed VariablesUpdate DataMain LoopDisplay the QuoteUpdate Time

    LED Matrix DiffuserLED Diffusion AcrylicMeasure and Cut the PlasticUglu DashesStand

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 2 of 41

  • OverviewQuotes! Who doesn't love good quotes? But who's to decide which quotes are "good"? Well, you are, of

    course!

    Now, you can create your own quote board and supply the quotes for it yourself! No need to rely on a

    website and some other person's curatorial tastes.

    With this project, you'll create a custom quote feed right on Adafruit IO, then code your CircuitPython-

    powered WiFi RGB LED matrix to display your quotes in random order.

    PartsYour browser does not support the video tag.

    Adafruit Matrix Portal - CircuitPython Powered Internet Display

    Folks love our wide selection of RGB matrices and accessories, for making custom colorful LED displays...

    and our RGB Matrix Shields...

    Out of Stock

    Adafruit Metro M4 Express AirLift (WiFi) - Lite

    Give your next project a lift with AirLift - our witty name for the ESP32 co-processor that graces this Metro

    M4. You already know about the Adafruit Metro...

    $34.95

    In Stock

    Your browser does not support the video tag.

    Out ofStock

    Add to Cart

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 3 of 41

    https://www.adafruit.com/product/4745https://www.adafruit.com/product/4745https://www.adafruit.com/product/4745https://www.adafruit.com/product/4000https://www.adafruit.com/product/4000https://www.adafruit.com/product/4000https://www.adafruit.com/product/2278https://www.adafruit.com/product/2601https://www.adafruit.com/product/4594https://www.adafruit.com/product/1995https://www.adafruit.com/product/592https://www.adafruit.com/product/4000https://www.adafruit.com/product/2601https://www.adafruit.com/product/2278https://www.adafruit.com/product/4745https://www.adafruit.com/product/2278https://www.adafruit.com/product/4474

  • 64x32 RGB LED Matrix - 4mm pitch

    Bring a little bit of Times Square into your home with this sweet 64 x 32 square RGB LED matrix panel.

    These panels are normally used to make video walls, here in New York we see them...

    Out of Stock

    Adafruit RGB Matrix Shield for Arduino

    Our RGB matricies are dazzling, with their hundreds or even thousands of individual RGB LEDs.

    Compared to NeoPixels, they've got great density, power usage and the...

    $5.95

    In Stock

    Your browser does not support the video tag.

    Black LED Diffusion Acrylic Panel 12" x 12" - 0.1" / 2.6mm thick

    A nice whoppin' slab of some lovely black acrylic to add some extra diffusion to your LED Matrix project.

    This material is 2.6mm (0.1") thick and is made of special cast...

    $9.95

    In Stock

    Out ofStock

    Add to Cart

    Add to Cart

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 4 of 41

    https://www.adafruit.com/product/2278https://www.adafruit.com/product/2278https://www.adafruit.com/product/2601https://www.adafruit.com/product/2601https://www.adafruit.com/product/4594https://www.adafruit.com/product/4594

  • 5V 2.5A Switching Power Supply with 20AWG MicroUSB Cable

    Our all-in-one 5V 2.5 Amp + MicroUSB cable power adapter is the perfect choice for powering single-

    board computers like Raspberry Pi, BeagleBone or anything else that's power...

    $7.50

    In Stock

    Add to Cart

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 5 of 41

    https://www.adafruit.com/product/1995https://www.adafruit.com/product/1995

  • USB cable - USB A to Micro-B

    This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your

    Metro, Feather, Raspberry Pi or other dev-board or...

    $2.95

    In Stock

    Add to Cart

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 6 of 41

    https://www.adafruit.com/product/592https://www.adafruit.com/product/592

  • Using M4 AirliftIf you have a Metro M4 AirLift, you can build this project easily - you just need an RGB Matrix shield to

    help connect!

    You will need a Metro M4 Airlift, matrix shield and matrix

    Adafruit Metro M4 Express AirLift (WiFi) - Lite

    Give your next project a lift with AirLift - our witty name for the ESP32 co-processor that graces this Metro

    M4. You already know about the Adafruit Metro...

    $34.95

    In Stock

    Add to Cart

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 7 of 41

    https://www.adafruit.com/product/4000https://www.adafruit.com/product/4000

  • Adafruit RGB Matrix Shield for Arduino

    Our RGB matricies are dazzling, with their hundreds or even thousands of individual RGB LEDs.

    Compared to NeoPixels, they've got great density, power usage and the...

    $5.95

    In Stock

    Your browser does not support the video tag.

    64x32 RGB LED Matrix - 4mm pitch

    Bring a little bit of Times Square into your home with this sweet 64 x 32 square RGB LED matrix panel.

    These panels are normally used to make video walls, here in New York we see them...

    Out of Stock

    Add to Cart

    Out ofStock

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 8 of 41

    https://www.adafruit.com/product/2601https://www.adafruit.com/product/2601https://www.adafruit.com/product/2278https://www.adafruit.com/product/2278

  • Install CircuitPythonCircuitPython (https://adafru.it/tB7) is a derivative of MicroPython (https://adafru.it/BeZ) designed to

    simplify experimentation and education on low-cost microcontrollers. It makes it easier than ever to get

    prototyping by requiring no upfront desktop software downloads. Simply copy and edit files on the

    CIRCUITPY drive to iterate.

    Set up CircuitPython Quick Start!Follow this quick step-by-step for super-fast Python power :)

    https://adafru.it/EDA

    Further InformationFor more detailed info on installing CircuitPython, check out Installing

    CircuitPython (https://adafru.it/Amd).

    Click the link above and download the latest UF2 file.

    Download and save it to your desktop (or wherever is handy).

    Plug your Metro M4 into your computer using a known-good

    USB cable.

    A lot of people end up using charge-only USB cables and it

    is very frustrating! So make sure you have a USB cable you

    know is good for data sync.

    Double-click the Reset button next to the USB connector on

    your board, and you will see the NeoPixel RGB LED

    (indicated by the arrow) turn green. If it turns red, check the

    USB cable, try another USB port, etc.

    If double-clicking doesn't work the first time, try again.

    Sometimes it can take a few tries to get the rhythm right!

    https://adafru.it/EDA

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 9 of 41

    https://github.com/adafruit/circuitpythonhttps://micropython.orghttps://circuitpython.org/board/metro_m4_airlift_lite/https://learn.adafruit.com/welcome-to-circuitpython/installing-circuitpythonhttps://learn.adafruit.com//assets/74832

  • You will see a new disk drive appear called

    METROM4BOOT.

    Drag the adafruit_circuitpython_etc.uf2 file to

    METROM4BOOT.

    The LED will flash. Then, the METROM4BOOT drive will

    disappear and a new disk drive called CIRCUITPY will

    appear.

    That's it, you're done! :)

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 10 of 41

    https://learn.adafruit.com//assets/74949https://learn.adafruit.com//assets/74950https://learn.adafruit.com//assets/74951

  • Build the Quote Board Matrix DisplayAssemblyTalking to an LED matrix display can be tricky! The 64 x 32 LED used here has a whopping 2,048 pixels,

    and each can display RGB colors, which makes for a whole lot of data to sling around. Thankfully, our

    RGB Matrix shield paired with the Metro M4 Airlift does most of the heavy lifting.

    Let's assemble the boards and the display so we can get things running!

    Shields UpFirst, add the male headers, screw terminal block, and the

    8x2-pin socket to the Matrix shield, by following this

    guide (https://adafru.it/FBU). Be careful to match the socket

    polarity to the silkscreen image on the board.

    Be sure to also perform the clock pin mod as shown

    here (https://adafru.it/FBU).

    Then plug the shield into the Metro M4 Airlift.

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 11 of 41

    https://learn.adafruit.com//assets/94014https://learn.adafruit.com/32x16-32x32-rgb-led-matrix/connecting-using-rgb-matrix-shieldhttps://learn.adafruit.com/32x16-32x32-rgb-led-matrix/connecting-using-rgb-matrix-shield#metro-m4-usage-2991520-5

  • Power ConnectionsTo provide power, we'll screw the wiring harness connectors

    to the screw terminal blocks of the shield. Be sure to match

    the black wire to GND and the red wire to +5Vout.

    Now, simply plug the other end into the panel's power

    header. It can only go in one way.

    Data CablePlug in the two ends of the ribbon cable, note that the

    connectors are keyed to only fit in the correct orientation.

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 12 of 41

    https://learn.adafruit.com//assets/94023https://learn.adafruit.com//assets/94024https://learn.adafruit.com//assets/94025https://learn.adafruit.com//assets/94026

  • JumperTo create the mode jumper, simply solder a three position

    female header to the GND, D13, D12 pins of the shield.

    A pack of these (https://adafru.it/Gcv) is good to have around,

    just use some diagonal cutters to clip off three positions (cut

    along the fourth sacrificial position).

    We won't use pin D13, but this makes for a more stable

    header row vs. two individual ones.

    Then, trim the insulation from the ends of a small bit of solid

    core hook-up wire and ground D12 to GND for imperial, or

    pull the jumper for metric.

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 13 of 41

    https://learn.adafruit.com//assets/94558https://learn.adafruit.com//assets/94559https://www.adafruit.com/product/598

  • Wall AdapterWe'll power the Metro M4 from the 5V 2.5 (or a 4A) DC wall

    adapter plugged into the barrel jack. Even though USB can

    provide power to the board, the current isn't adequate for

    lighting up hundreds and thousands of LEDs!

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 14 of 41

    https://learn.adafruit.com//assets/94028https://learn.adafruit.com//assets/94029

  • Using MatrixPortalYou can build this project with an all-in-one Matrix Portal board, its definitely the easiest and least-

    expensive way to go about it.

    You will need a matrix portal, matrix, and USB C power/data cable

    Your browser does not support the video tag.

    Adafruit Matrix Portal - CircuitPython Powered Internet Display

    Folks love our wide selection of RGB matrices and accessories, for making custom colorful LED displays...

    and our RGB Matrix Shields...

    Out of Stock

    Your browser does not support the video tag.

    64x32 RGB LED Matrix - 4mm pitch

    Bring a little bit of Times Square into your home with this sweet 64 x 32 square RGB LED matrix panel.

    These panels are normally used to make video walls, here in New York we see them...

    Out of Stock

    USB Type A to Type C Cable - approx 1 meter / 3 ft long

    As technology changes and adapts, so does Adafruit. This USB Type A to Type C cable will help you with

    the transition to USB C, even if you're still...

    Out of Stock

    Out ofStock

    Out ofStock

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 15 of 41

    https://www.adafruit.com/product/4745https://www.adafruit.com/product/4745https://www.adafruit.com/product/2278https://www.adafruit.com/product/2278https://www.adafruit.com/product/4474

  • Out ofStock

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 16 of 41

    https://www.adafruit.com/product/4474

  • Install CircuitPythonCircuitPython (https://adafru.it/tB7) is a derivative of MicroPython (https://adafru.it/BeZ) designed to

    simplify experimentation and education on low-cost microcontrollers. It makes it easier than ever to get

    prototyping by requiring no upfront desktop software downloads. Simply copy and edit files on the

    CIRCUITPY drive to iterate.

    Set up CircuitPython Quick Start!Follow this quick step-by-step for super-fast Python power :)

    https://adafru.it/Nte

    Further InformationFor more detailed info on installing CircuitPython, check out Installing

    CircuitPython (https://adafru.it/Amd).

    Click the link above and download the latest UF2 file.

    Download and save it to your desktop (or wherever is handy).

    Plug your MatrixPortal M4 into your computer using a known-

    good USB cable.

    A lot of people end up using charge-only USB cables and it

    is very frustrating! So make sure you have a USB cable you

    know is good for data sync.

    Double-click the Reset button (indicated by the green arrow)

    on your board, and you will see the NeoPixel RGB LED

    (indicated by the magenta arrow) turn green. If it turns red,

    check the USB cable, try another USB port, etc.

    If double-clicking doesn't work the first time, try again.

    Sometimes it can take a few tries to get the rhythm right!

    https://adafru.it/Nte

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 17 of 41

    https://github.com/adafruit/circuitpythonhttps://micropython.orghttps://circuitpython.org/board/matrixportal_m4/https://learn.adafruit.com/welcome-to-circuitpython/installing-circuitpythonhttps://learn.adafruit.com//assets/95075https://learn.adafruit.com//assets/95069

  • You will see a new disk drive appear called MATRIXBOOT.

    Drag the adafruit_circuitpython_etc.uf2 file to

    MATRIXBOOT.

    The LED will flash. Then, the MATRIXBOOT drive will

    disappear and a new disk drive called CIRCUITPY will

    appear.

    That's it, you're done! :)

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 18 of 41

    https://learn.adafruit.com//assets/95074https://learn.adafruit.com//assets/95073https://learn.adafruit.com//assets/95072

  • Prep the MatrixPortal

    Power PrepThe MatrixPortal supplies power to the matrix display panel

    via two standoffs. These come with protective tape applied

    (part of our manufacturing process) which MUST BE

    REMOVED!

    Use some tweezers or a fingernail to remove the two amber

    circles.

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 19 of 41

    https://learn.adafruit.com//assets/94902https://learn.adafruit.com//assets/94903

  • Power TerminalsNext, screw in the spade connectors to the corresponding

    standoff.

    red wire goes to +5V

    black wire goes to GND

    Panel PowerPlug either one of the four-conductor power plugs into the

    power connector pins on the panel. The plug can only go in

    one way, and that way is marked on the board's silkscreen.

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 20 of 41

    https://learn.adafruit.com//assets/94907https://learn.adafruit.com//assets/94908https://learn.adafruit.com//assets/94910https://learn.adafruit.com//assets/94911

  • Board ConnectionNow, plug the board into the left side shrouded 8x2

    connector as shown. The orientation matters, so take a

    moment to confirm that the white indicator arrow on the

    matrix panel is oriented pointing up and right as seen here

    and the MatrixPortal overhangs the edge of the panel when

    connected. This allows you to use the edge buttons from the

    front side.

    Check nothing is impeding the board from plugging in firmly.

    If there's a plastic nub on the matrix that's keeping the Portal

    from sitting flat, cut it off with diagonal cutters

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 21 of 41

    https://learn.adafruit.com//assets/94912https://learn.adafruit.com//assets/94913

  • � For info on adding LED diffusion acrylic, see the page LED Matrix Diffuser.

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 22 of 41

  • Code the Quote BoardLibrariesWe'll need to make sure we have these libraries installed.

    (Check out this link (https://adafru.it/ABU) on installing

    libraries if needed.)

    adafruit_bitmap_font

    adafruit_bus_device

    adafruit_display_text

    adafruit_esp32spi

    adafruit_io

    adafruit_matrixportal

    adafruit_requests.mpy

    neopixel.mpy

    Connect to the InternetOnce you have CircuitPython setup and libraries installed we can get your board connected to the

    Internet. The process for connecting can be found here (https://adafru.it/NFK).

    Text EditorAdafruit recommends using the Mu editor for editing your CircuitPython code. You can get more info in

    this guide (https://adafru.it/ANO).

    Alternatively, you can use any text editor that saves simple text files.

    CodeClick the Download: Zip File link below in the code window to get a zip file with all the files needed for the

    project. Copy matrix_quote_board.py from the zip file and place on the CIRCUITPY drive, then rename it

    to code.py.

    # Quote board matrix display# uses AdafruitIO to serve up a quote text feed and color feed# random quotes are displayed, updates periodically to look for new quotes# avoids repeating the same quote twice in a row

    import timeimport randomimport boardimport terminaliofrom adafruit_matrixportal.matrixportal import MatrixPortal

    # --- Display setup ---matrixportal = MatrixPortal(status_neopixel=board.NEOPIXEL, debug=True)

    # Create a new label with the color and text selectedmatrixportal.add_text( text_font=terminalio.FONT, text_position=(0, (matrixportal.graphics.display.height // 2) - 1), scrolling=True,)

    # Static 'Connecting' Textmatrixportal.add_text( text_font=terminalio.FONT,

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 23 of 41

    https://learn.adafruit.com//assets/94678https://learn.adafruit.com/welcome-to-circuitpython/circuitpython-librarieshttps://learn.adafruit.com/adafruit-matrixportal-m4/internet-connecthttps://learn.adafruit.com/welcome-to-circuitpython/installing-mu-editor

  • text_font=terminalio.FONT, text_position=(2, (matrixportal.graphics.display.height // 2) - 1),)

    QUOTES_FEED = "sign-quotes.signtext"COLORS_FEED = "sign-quotes.signcolor"SCROLL_DELAY = 0.02UPDATE_DELAY = 600

    quotes = []colors = []last_color = Nonelast_quote = None

    def update_data(): print("Updating data from Adafruit IO") matrixportal.set_text("Connecting", 1)

    try: quotes_data = matrixportal.get_io_data(QUOTES_FEED) quotes.clear() for json_data in quotes_data: quotes.append(matrixportal.network.json_traverse(json_data, ["value"])) print(quotes) # pylint: disable=broad-except except Exception as error: print(error)

    try: color_data = matrixportal.get_io_data(COLORS_FEED) colors.clear() for json_data in color_data: colors.append(matrixportal.network.json_traverse(json_data, ["value"])) print(colors) # pylint: disable=broad-except except Exception as error: print(error)

    if not quotes or not colors: raise "Please add at least one quote and color to your feeds" matrixportal.set_text(" ", 1)

    update_data()last_update = time.monotonic()matrixportal.set_text(" ", 1)quote_index = Nonecolor_index = None

    while True: # Choose a random quote from quotes if len(quotes) > 1 and last_quote is not None: while quote_index == last_quote: quote_index = random.randrange(0, len(quotes)) else: quote_index = random.randrange(0, len(quotes)) last_quote = quote_index

    # Choose a random color from colors if len(colors) > 1 and last_color is not None: while color_index == last_color: color_index = random.randrange(0, len(colors)) else:

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 24 of 41

  • else: color_index = random.randrange(0, len(colors)) last_color = color_index

    # Set the quote text matrixportal.set_text(quotes[quote_index])

    # Set the text color matrixportal.set_text_color(colors[color_index])

    # Scroll it matrixportal.scroll_text(SCROLL_DELAY)

    if time.monotonic() > last_update + UPDATE_DELAY: update_data() last_update = time.monotonic()

    Adafruit IO SetupOur project will use Adafruit IO to serve up a feed of quotes and colors. Adafruit IO is absolutely free to

    use, but you'll need to log in with your Adafruit account to use it. If you don't already have an Adafruit

    login, create one here (https://adafru.it/dAQ).

    If you haven't used Adafruit IO before, check out this guide for more info (https://adafru.it/Ef8).

    Once you have logged into your account, there are two pieces of information you'll need to place in your

    secrets.py file: Adafruit IO username, and Adafruit IO key. Head to io.adafruit.com (https://adafru.it/fsU)

    and simply click the View AIO Key link on the left hand side of the Adafruit IO page to get this

    information.

    Then, add them to the secrets.py file like this:

    secrets = { 'ssid' : 'your_wifi_ssid', 'password' : 'your_wifi_password', 'aio_username' : '_your_aio_username_', 'aio_key' : '_your_big_huge_super_long_aio_key_'}

    Problems Getting QuotesIf you have any problems getting the data to display correctly, check that the secrets.py file has the

    information noted above.

    Adafruit IO Group, Feeds, DashboardNext, we'll create the necessary Adafruit IO Group, Feeds, and Dashboard to host our quotes and colors.

    First, if you're new to Adafruit IO, take a look at this excellent guide on getting

    started (https://adafru.it/BRB).

    Next, we'll create a Group that will contain our two Feeds.

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 25 of 41

    https://accounts.adafruit.com/users/sign_uphttps://learn.adafruit.com/welcome-to-adafruit-io/getting-started-with-adafruit-iohttps://io.adafruit.com/https://learn.adafruit.com/welcome-to-adafruit-io

  • Group CreationIn the Feeds screen click on the Actions menu and then pick

    Create a New Group from the dropdown menu.

    Name the Group as Sign Quotes, then click Create.

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 26 of 41

    https://learn.adafruit.com//assets/94679https://learn.adafruit.com//assets/94680https://learn.adafruit.com//assets/94681

  • Feed CreationIn the Feeds screen click on the Actions menu and then pick

    Create a New Feed from the dropdown menu.

    Name this feed signcolor, and select Sign Quotes from the

    Add to groups field, then click Create.

    Repeat this process a second time to make a new Feed

    called signtext.

    Dashboard CreationNow that we have the two feeds we need, let's create a

    Dashboard with a couple of UI block elements that will make

    it easy to add data points to our two feeds.

    From the Dashboards page, click the Actions dropdown

    menu and select Create a New Dashboard.

    Name the Dashboard as Quotes and then click Create.

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 27 of 41

    https://learn.adafruit.com//assets/94682https://learn.adafruit.com//assets/94683https://learn.adafruit.com//assets/94684

  • Click on the create a new block + sign in the Dashboard

    page, this will present you with a number of UI element block

    options.

    Pick the Text block.

    From the Chose feed pop-up window that appears, chose the

    signtext feed, then click Next step.

    In the Block settings popup window, give the block the title

    Text quote, then click Update block.

    Repeat this process to create a Color picker block, assigning

    it to the signcolor feed.

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 28 of 41

    https://learn.adafruit.com//assets/94685https://learn.adafruit.com//assets/94686https://learn.adafruit.com//assets/94688https://learn.adafruit.com//assets/94689

  • Create QuotesNow, you can pick a few different colors with the color picker

    to add to your arsenal of sign text colors.

    Type in text in the text block to add quotes to your feed.

    If you ever decide you don't want one of the colors or quotes,

    simply head to the relevant feed and click the red 'x' to

    remove a data point!

    What the Code DoesHere's a look at how the code works.

    First, it loads a few libraries:

    import timeimport randomimport boardimport terminaliofrom adafruit_matrixportal.matrixportal import MatrixPortal

    Next, the Display is set up using the matrixportal object. We also create text label objects:

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 29 of 41

    https://learn.adafruit.com//assets/94690https://learn.adafruit.com//assets/94691

  • # --- Display setup ---matrixportal = MatrixPortal(status_neopixel=board.NEOPIXEL, debug=True)

    # Create a new label with the color and text selectedmatrixportal.add_text( text_font=terminalio.FONT, text_position=(0, (matrixportal.graphics.display.height // 2) - 1), scrolling=True,)

    # Static 'Connecting' Textmatrixportal.add_text( text_font=terminalio.FONT, text_position=(2, (matrixportal.graphics.display.height // 2) - 1),)

    Feed VariablesIn order to use the feed data, we need a couple of variables to help traverse the AIO json data.

    We also create variables for the scroll speed and update time.

    QUOTES_FEED = "sign-quotes.signtext"COLORS_FEED = "sign-quotes.signcolor"SCROLL_DELAY = 0.02UPDATE_DELAY = 600

    quotes = []colors = []last_color = Nonelast_quote = None

    Update DataThe update_data() function is created to handle the quote feed and color feed data queries. This will bethe key function that is run each time the code checks for new quotes and colors.

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 30 of 41

  • def update_data(): print("Updating data from Adafruit IO") matrixportal.set_text("Connecting", 1)

    try: quotes_data = matrixportal.get_io_data(QUOTES_FEED) quotes.clear() for json_data in quotes_data: quotes.append(matrixportal.network.json_traverse(json_data, ["value"])) print(quotes) # pylint: disable=broad-except except Exception as error: print(error)

    try: color_data = matrixportal.get_io_data(COLORS_FEED) colors.clear() for json_data in color_data: colors.append(matrixportal.network.json_traverse(json_data, ["value"])) print(colors) # pylint: disable=broad-except except Exception as error: print(error)

    if not quotes or not colors: raise "Please add at least one quote and color to your feeds" matrixportal.set_text(" ", 1)

    This is run as soon as the function has been defined, so that we now have a list of quotes and colors to

    work with.

    Main LoopIn the main loop of the code, a random quote is selected from the list that has been returned by the

    update_data() function. This includes a while loop that ensures we don't get the same quote or colortwice in a row!

    # Choose a random quote from quotes if len(quotes) > 1 and last_quote is not None: while quote_index == last_quote: quote_index = random.randrange(0, len(quotes)) else: quote_index = random.randrange(0, len(quotes)) last_quote = quote_index

    # Choose a random color from colors if len(colors) > 1 and last_color is not None: while color_index == last_color: color_index = random.randrange(0, len(colors)) else: color_index = random.randrange(0, len(colors)) last_color = color_index

    Display the QuoteNow, the randomly selected quote is displayed using the matrixportal.set_text() andmatrixportal.set_text_color() commands, and the text is scrolled using matrixportal.scroll_text() .

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 31 of 41

  • # Set the quote text matrixportal.set_text(quotes[quote_index])

    # Set the text color matrixportal.set_text_color(colors[color_index])

    # Scroll it matrixportal.scroll_text(SCROLL_DELAY)

    Update TimeAfter ten minutes, the code will go and fetch the quotes and colors from the AIO feeds anew, in case

    anything has changed.

    if time.monotonic() > last_update + UPDATE_DELAY: update_data() last_update = time.monotonic()

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 32 of 41

  • LED Matrix Diffuser

    LED Diffusion AcrylicYou can add an LED diffusion acrylic

    faceplate (https://adafru.it/MEF) to the your LED matrix

    display. (Pictured here with the ON AIR

    project (https://adafru.it/MPE))

    This can help protect the LEDs as well as enhance the look of

    the sign both indoors and out by reducing glare and specular

    highlights of the plastic matrix grid.

    Measure and Cut the PlasticYou can use the sign to measure and mark cut lines on the

    paper backing of the acrylic sheet.

    Then, use a tablesaw or bandsaw with a fine toothed blade

    and a guide or sled to make the cuts.

    Note: it is possible to score and snap acrylic, but it can be

    very tricky to get an even snap without proper clamping.

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 33 of 41

    https://learn.adafruit.com//assets/93987https://www.adafruit.com/product/4594https://learn.adafruit.com/rgb-matrix-automatic-youtube-on-air-signhttps://learn.adafruit.com//assets/93988https://learn.adafruit.com//assets/93989

  • © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 34 of 41

    https://learn.adafruit.com//assets/93991https://learn.adafruit.com//assets/93992

  • Peel away the paper backing from both sides and set the

    acrylic onto your matrix display.

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 35 of 41

    https://learn.adafruit.com//assets/93999

  • Uglu DashesThe best method we've found for adhering acrylic to the

    matrix display is to use Uglu Dashes clear adhesive

    rectangles from Pro Tapes (https://adafru.it/NcP). They are

    incredibly strong (although can be removed if necessary),

    easy to apply, and are invisible once attached.

    Use one at each corner and one each at the halfway point of

    the long edges, then press the acrylic and matrix panel

    together for about 20 seconds.

    Here you can see the impact of using the diffusion acrylic. (Pictured here with the ON AIR sign project)

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 36 of 41

    https://learn.adafruit.com//assets/94842https://learn.adafruit.com//assets/94843https://learn.adafruit.com//assets/94844https://www.protapes.com/products/uglu-600-dashes-sheets

  • StandA very simple and attractive way to display your matrix is with

    the adjustable bent-wire stand (https://adafru.it/MPF).

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 37 of 41

    https://learn.adafruit.com//assets/94032https://learn.adafruit.com//assets/94033https://www.adafruit.com/product/1679

  • Alternately, you can use a frame, 3D printed brackets (https://adafru.it/MZf), tape, glue, or even large

    binder clips to secure the acrylic to the sign and then mount it on on a wall, shelf, or display cabinet.

    These mini-magnet feet (https://adafru.it/MZA) can be used to stick the sign to a ferrous surface.

    © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 38 of 41

    https://learn.adafruit.com//assets/94034https://learn.adafruit.com//assets/94035https://learn.adafruit.com/led-protest-sign/build-the-sign#step-3065326https://www.adafruit.com/product/4631

  • © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 39 of 41

  • © Adafruit Industries https://learn.adafruit.com/aio-quote-board-matrix-display Page 40 of 41

  • © Adafruit Industries Last Updated: 2021-03-17 01:12:55 PM EDT Page 41 of 41

    Guide ContentsOverviewParts

    Using M4 AirliftInstall CircuitPythonSet up CircuitPython Quick Start!Further Information

    Build the Quote Board Matrix DisplayAssemblyShields UpPower ConnectionsData CableJumperWall Adapter

    Using MatrixPortalInstall CircuitPythonSet up CircuitPython Quick Start!Further Information

    Prep the MatrixPortalPower PrepPower TerminalsPanel PowerBoard Connection

    Code the Quote BoardLibrariesConnect to the InternetText EditorCodeAdafruit IO SetupProblems Getting QuotesAdafruit IO Group, Feeds, DashboardGroup CreationFeed CreationDashboard CreationCreate QuotesWhat the Code DoesFeed VariablesUpdate DataMain LoopDisplay the QuoteUpdate Time

    LED Matrix DiffuserLED Diffusion AcrylicMeasure and Cut the PlasticUglu DashesStand