In the last few years that I've been hacking on microelectronics, one of my favorite types of project has been the humble text scroller. While these devices are usually simple to build, I've found that the process of actually getting the text onto the devices can be anything but simple!

Often, it requires the user perform one or more of the following:

• Connecting the device to a computer and editing/compiling/reinstalling firmware source code
• Connecting the device to your main Wi-Fi network
• Using an custom-built application on your phone, or something like Adafruit's Bluefruit Connect
• Making an account with some sort of IoT service (such as Adafruit IO) and/or use an MQTT server
• Opening the browser and typing a strange URL in the address bar (such as an IP address)

That's a lot of work just to get some text to scroll across a screen! Especially if the text scrolling gadget is intended as a gift for a friend or family member who may not be tech savvy. It's no fun giving a gift to someone who can't figure out how to use it!

Overview

For this text scroller, I decided that I wanted to try a Wi-Fi-based solution. However, I didn't want to have to deal with the hassle of configuring the MiniMarquee to connect to a central Wi-Fi network, such as my home network. So instead, inspired by a feature of WLED, I decided to try making the MiniMarquee itself a Wi-Fi hotspot.

The basic idea is that the user connects to the MiniMarquee Wi-Fi network with their phone or other Wi-Fi-capable device. Once connected, they then use their device's web browser to navigate to the MiniMarquee's "homepage", where they can change the message or edit other settings. This has a nice advantage that the solution is not tied to a specific device or phone. However...it's still really cumbersome! The process of navigating to the settings app and entering the Wi-Fi SSID and password information alone is enough for many people to give up. Previously I had just sort of accepted that I probably wouldn't be able to make the experience much nicer. Then one day when I was playing my Nintendo Switch, I had an idea... 

On the Nintendo Switch, you can download screenshots that you've taken from your games to your phone. The way it works is: the Switch displays a QR code on the screen. When you scan the QR code with your phone's camera app, your phone connects to the Switch using a temporary Wi-Fi hotspot. Then, a second QR code is displayed on the screen. Scanning this code opens the user's browser on their phone to a local web page where the user can download the image. That's a much simpler process!

The 13x9 LED matrix is not capable of displaying QR codes at a useful resolution, but having recently read an article on Hackaday about 3D-printed QR codes, I realized I could probably print 2 small codes and put them directly on the body of the MiniMarquee. Scanning each of these codes in turn should allow one to quickly be taken to the MiniMarquee's configuration page.

While this may not be the most friction-free experience ever, I do think the usability of scanning the QR codes and editing the MiniMarquee configuration in a browser is a more streamlined experience than any other solution I've tried yet. 

In case that wasn't enough, I also wanted to see if I could build a small iPhone app using SwiftUI to interface with the MiniMarquee instead of using the browser. Turns out, I could! With an iPhone, once connected to the MiniMarquee hotspot, you can open the app and use it to connect and configure the MiniMarquee with no further steps needed.

Materials

The following parts are used to build the MiniMarquee:

• QT Py ESP32-S2
• IS31FL3741 13x9 PWM RGB LED Matrix
• 50mm Stemma QT cable
• Black LED acrylic, 2-3 mm thick, cut to 41mm x 29mm
• 4 M2x12 nylon screws and nuts
• Little rubber feet
• Nitto double-sided adhesive tape (or other tape with similar adhesive strength)
• 2 1-ounce wheel weights (optional)

Installing Firmware

The MiniMarquee's firmware is written for Arduino in PlatformIO. There are two ways to install the firmware onto the QT Py ESP32-S2:

1. Drag-and-drop UF2 installation
2. Build source code and install onto device

The UF2 method is recommended, as it is very simple and does not require downloading any additional software or dealing with any code at all. However, if you wish to customize your MiniMarquee's firmware, you'll need to go for option 2 and build it from source.

Option 1: UF2 Drag-and-Drop Installation

The MiniMarquee firmware can be easily installed onto the QT Py using UF2 drag-and-drop installation. There is a small catch though: the LED matrix used by the MiniMarquee comes in six possible color order configurations. To account for this, I've compiled six UF2 firmware files, one for each configuration. In order for your display to show the correct colors, it might take a little trial-and-error to make sure you've installed the correct one. Of the handful of displays I have, most of them are either BGR or RBG color order, so those might be the ones to start with. Follow the steps below to install a UF2 file onto the QT Py:

1. Plug your LED matrix into the QT Py using the Stemma QT cable
2. Plug the QT Py into your computer
3. Press the BOOT button on the QT Py, wait a quick beat, and press it again. It can be a little tricky to get the timing right, but if done correctly, you should now see the Neopixel on the QT Py glowing green, and a drive named QTPYS2BOOT should now be mounted on your computer.
4. Download the firmware file you want to install from the following list based on the color order:
   • MARQUEE_BGR.uf2
   • MARQUEE_BRG.uf2
   • MARQUEE_GBR.uf2
   • MARQUEE_GRB.uf2
   • MARQUEE_RBG.uf2
   • MARQUEE_RGB.uf2
5. Drag and drop the downloaded firmware file into the root of the QTPYS2BOOT drive.
6. When the file has finished copying, the QT Py should reboot. After booting, the screen will flash a sequence of red, then green, then blue for about a second each, before the text scrolling begins. If you see the colors in a different order, then you need to repeat these steps with the other firmware files until you find the correct one.

Option 2: Compile from source and install with VSCode/PlatformIO

The MiniMarquee firmware source code can be found on my github. You'll need to download and install Visual Studio Code, and then install the PlatformIO IDE plugin. When building the source, there is a build environment for each of the 6 possible color orders of the LEDs used by the matrix. Select the appropriate environment (for example, the BGR environment if the color order of your display is BGR). Plug the matrix into your QT Py using the Stemma QT cable, and plug your QT Py into your computer. Compile and install the firmware onto your QT Py. When the QT Py boots, the matrix display should flash a color sequence of red, then green, then blue, for about a second each. If the colors do not appear in that order, you will need to choose a different environment until you find the correct color order.

For the handful of displays I have, most of them seem to be either BGR or RBG color order, so those might be the ones to start with.

3D Printing

The files needed to print the required parts for the MiniMarquee can be found on my Printables page. Below is a list of all the parts and any special instructions needed to print each one.

1. mini-marquee-box.stl: The main body of the enclosure. Print this part face-down with no supports required.
2. mini-marquee-cover.stl: The front face of the enclosure. Print this part face-down with no supports required.
3. mini-marquee-tray.stl: The mounting geometry for the QT Py. I printed this part with the flat side down, and enabled organic/tree supports "on build plate only" (in Prusa Slicer) to give the upper lip of the USB interface some support.
4. mini-marquee-wifi-code.stl: WiFi QR code. Start print with white filament, then change to black for the last 2 layers.
5. mini-marquee-url-code.stl: URL QR code. Start print with white filament, then change to black for the last 2 layers.

Assembly & Wiring

Follow the steps below to assemble and wire the MiniMarquee. Before you begin, make sure you've disconnected the LED matrix and the QT Py. It will be easier to assemble without them connected, and we can reconnect them right before we finish assembling the case.

Step 1: Assemble LED matrix panel

Press-fit the black LED acrylic piece into the frame on the inside of the panel. It should be a snug fit.

Insert the screws into the front of the panel and through each of the mounting holes on the LED matrix and lightly tighten the nuts, as shown below. Be careful not to over-tighten the screws and nuts. They should be just tight enough to hold the matrix in place without it moving around, but not so tight that it causes the matrix PCB to bend. Ideally, all of the LEDs will be lightly pressed up against the acrylic diffuser.

Step 2: Mount the QT Py

Snap-fit the QT Py into the mounting tray as shown below. You'll need to insert the front end with the USB port into the mount first, and then apply gentle pressure on the back end to snap into place. Be careful not to damage the QT Py's Stemma QT port! You may want to use the head of some needlenose pliers to gently apply downward pressure to the back corners of the PCB.

Step 3: Connect the electronics

Plug one end of the Stemma QT cable into one of the Stemma QT ports on the LED matrix, and plug the other end into the mounted QT Py.

Step 4 (Optional): Install weights

The MiniMarquee is very light! If you want to add a little heft to it, you can add 2 1-ounce wheel weights to the bottom of the enclosure. Cut out the weights from the sheet, remove the adhesive backing from each, and affix them to the bottom of the inside of the case.

Step 5: Attach panel to body

Slide the QT Py mounting "tray" into the grooves on the inside of the case body, until the front face of the tray slides into the cutout on the back of the body. Then, gently snap-fit the panel onto the case body, taking care not to pinch the Stemma QT cable.

Step 6: Attach QR Codes

Cut two small pieces of nitto tape or other strong double-sided adhesive, and apply them to the back of each QR code.

Remove the adhesive backing from the QR code labeled 1 - WIFI, and adhere to the back of the MiniMarquee as shown below.

Remove the adhesive backing from the QR code labeled 2 - URL, and affix to the bottom of the case body as shown below. Then, apply each of the adhesive rubber feat as tightly as possible around the code.

That's it! Connect the MiniMarquee to a power source using a USB cable, and follow the usage directions below!

Usage

There are two main ways to connect with and configure the MiniMarquee:

1. Scan the QR codes to connect to MiniMarquee's WiFi hotspot and launch the browser on the MiniMarquee configuration page
2. Manually enter the WiFi login information into the settings app, and manually enter the MiniMarquee configuration page URL into the browser's address bar

Connect using QR Codes

1. Open the camera app on your phone
2. Scan the QR code labeled 1 - WIFI 
3. A small button should appear prompting you to join a WiFi network. Tap it.
4. If prompted, choose to connect to the WiFi network
5. Wait a few seconds
6. Using your phone's camera app, scan the second code, labeled 2 - URL. This should launch your phone's browser to the MiniMarquee's configuration page.
7. If the web page does not load, double check to make sure that your phone connected to the MiniMarquee hotspot.
8. Once loaded, edit the message or any other settings you wish, and press the Update! button to send the changes to the MiniMarquee.
9. Don't forget to change your WiFi back to your usual one after you finish! Also, once you've connected at least once, your phone should remember the MiniMarquee network, so in the future you can also select it from your phone's settings to connect.

Connect manually through the Settings app

1. When the MiniMarquee first boots, the message that is initially displayed contains 3 pieces of information: The WiFi network SSID, the password, and the URL to use to edit the settings in your phone's browser. If no custom modifications have been made to the firmware, these should be:
   • SSID: MiniMarquee
   • password: ingrEss65
   • URL: http://192.168.4.1
2. In your phone's settings app, connect to the MiniMarquee WiFi network using the SSID and password.
3. Once connected, open your phone's browser, enter the URL into the address bar, and navigate to it.
4. Once loaded, edit the message or any other settings you wish, and press the Update! button to send the changes to the MiniMarquee.
5. Don't forget to change your WiFi back to your usual one after you finish! Also, once you've connected at least once, your phone should remember the MiniMarquee network, so in the future you should not have to enter the login information again to connect.

Bonus: MiniMarqueeConnect iPhone app

If you have a Mac with Xcode installed, I've shared the source code on my github to a small app I made using SwiftUI to interface with the MiniMarquee. You can build and install the app directly to your iPhone or use the Simulator on your Mac using the following steps:

1. If you want to install to your device, you'll need to update the bundle identifier in the target settings to be unique (namely, you'll need to swap out the aaronpendley part with your own name or company name).
2. Select the device you want to install to, either your actual phone, or one of the iPhone simulators
3. Build and run the app in Xcode
4. If using your phone, connect to the MiniMarquee's WiFi hotspot using either the QR code method or manually in the settings app. If using the Simulator, connect your Mac's WiFi to the MiniMarquee's WiFi hotspot
5.  Navigate back to the MiniMarquee app on your phone or the Simulator
6. Tap the button on the main screen to go to the MiniMarquee settings page
7. Edit the message or other settings
8. Press the Update button to send the changes to the MiniMarquee
9. Don't forget to change your WiFi back to your usual one after you finish!