Using the 5x5 NeoPixel Grid BFF with Arduino involves plugging the breakout into your Arduino-compatible QT Py or Xiao form factor board, installing the Adafruit-GFX-Library, Adafruit_NeoPixel and Adafruit_NeoMatrix libraries, and running the provided example code.

Wiring

Plug a 5x5 NeoPixel Grid BFF into your QT Py or Xiao form factor board exactly as shown below. Here's an example of connecting a QT Py RP2040 to the BFF.

Connect the QT Py RP2040 with plug headers into the 5x5 NeoPixel Grid BFF with socket headers. They should be plugged in with the backs of the boards facing each other.

For more information on soldering socket headers, check out this Learn Guide.

Library Installation

You can install the Adafruit NeoPixel, Adafruit NeoMatrix and Adafruit GFX libraries for Arduino using the Library Manager in the Arduino IDE.

Click the Manage Libraries ... menu item, search for Adafruit NeoPixel and select the Adafruit NeoPixel library:

Then, search for Adafruit NeoMatrix and select the Adafruit NeoMatrix library:

Finally, search for Adafruit GFX, and select the Adafruit GFX library:

If asked about dependencies for any of the libraries, click "Install all".

If the "Dependencies" window does not come up, then you already have the dependencies installed. 

If the dependencies are already installed, you must make sure you update them through the Arduino Library Manager before loading the example!

Example Code

// SPDX-FileCopyrightText: 2022 Phil B. for Adafruit Industries
//
// SPDX-License-Identifier: MIT

// Example for 5x5 NeoBFF - scrolls a message across the LED matrix.
// Requires Adafruit_GFX, Adafruit_NeoPixel and Adafruit_NeoMatrix libraries.

#include <Adafruit_GFX.h>       // Graphics library
#include <Adafruit_NeoPixel.h>  // NeoPixel library
#include <Adafruit_NeoMatrix.h> // Bridges GFX and NeoPixel
#include <Fonts/TomThumb.h>     // A tiny 3x5 font incl. w/GFX

#define PIN A3

// NeoMatrix declaration for BFF with the power and
// Neo pins at the top (same edge as QT Py USB port):
Adafruit_NeoMatrix matrix(5, 5, PIN,
  NEO_MATRIX_TOP  + NEO_MATRIX_RIGHT +
  NEO_MATRIX_ROWS + NEO_MATRIX_PROGRESSIVE,
  NEO_GRB         + NEO_KHZ800);

// Message to display, and a set of colors to cycle through. Because
// the matrix is only 5 pixels tall, characters with descenders (e.g.
// lowercase p or y) are best avoided. There are even smaller fonts
// but these get progressively less legible. ALL CAPS helps!
const char message[] = "HELLO BFF";
const uint16_t colors[] = {
  matrix.Color(255, 0, 0), matrix.Color(0, 255, 0), matrix.Color(0, 0, 255) };
uint16_t message_width; // Computed in setup() below

void setup() {
  matrix.begin();
  matrix.setBrightness(40);       // Turn down brightness to about 15%
  matrix.setFont(&TomThumb);      // Use custom font
  matrix.setTextWrap(false);      // Allows text to scroll off edges
  matrix.setTextColor(colors[0]); // Start with first color in list
  // To determine when the message has fully scrolled off the left side,
  // get the bounding rectangle of the text. As we only need the width
  // value, a couple of throwaway variables are passed to the bounds
  // function for the other values:
  int16_t  d1;
  uint16_t d2;
  matrix.getTextBounds(message, 0, 0, &d1, &d1, &message_width, &d2);
}

int x = matrix.width();  // Start with message off right edge
int y = matrix.height(); // With custom fonts, y is the baseline, not top
int pass = 0;            // Counts through the colors[] array

void loop() {
  matrix.fillScreen(0);       // Erase message in old position.
  matrix.setCursor(x, y);     // Set new cursor position,
  matrix.print(message);      // draw the message
  matrix.show();              // and update the matrix.
  if(--x < -message_width) {  // Move 1 pixel left. Then, if scrolled off left...
    x = matrix.width();       // reset position off right edge and
    if(++pass >= 3) pass = 0; // increment color in list, rolling over if needed.
    matrix.setTextColor(colors[pass]);
  }
  delay(100); // 1/10 sec pause
}

Upload the sketch to your board. You'll see the 5x5 NeoPixel grid scroll the text "HELLO BFF". The text will loop through being red, green and blue.

If you'd like to change the text being scrolled, you can edit the message[] constant at the top of the code.

// Message to display, and a set of colors to cycle through. Because
// the matrix is only 5 pixels tall, characters with descenders (e.g.
// lowercase p or y) are best avoided. There are even smaller fonts
// but these get progressively less legible. ALL CAPS helps!
const char message[] = "HELLO BFF";

This guide was first published on Nov 29, 2022. It was last updated on Jun 18, 2024.

This page (Arduino) was last updated on Jun 18, 2024.

Text editor powered by tinymce.