Busy StatusBar: Assembling and Launching the Prototype

Busy StatusBar — is a desktop LED display that beautifully communicates to others things that matters to you. Show that you're busy, activate a Pomodoro timer, or display inside jokes to your friends.

In this article, I present an overview of Busy StatusBar prototype assembly, innovative use of automotive tint film, and the coding that brings the device to life.

I covered device design process and choosing components in articles [1], [2], [3].

Assembling the Working Prototype

I was in a hurry to build the first prototype. I ordered parts for several prototypes from China. Printing the boards correctly on the first try didn't work out.

LED «legs» fused

Some scroll wheels (aka encoders) were misaligned. And some LEDs had neighbouring "legs" fused together.

I wasn't discouraged and removed stuck LED “legs” manually using a soldering wick.

Precise casing printing

Casing parts were printed using stereolithography (SLA) printing. With SLA, I printed all the latches so precisely that we assembled the prototype almost as it will be in mass production.

Automotive tint film for display

The casing and small buttons were immediately painted black. Only front and back covers left transparent. So I tinted them with automotive tint film.

I tried films with different shading and settled on 25% of light transmittance. Since the film was glossy and the casing was matte, I also applied a matte film over the tinting.

If you're already reaching to write that we did everything wrong, please do. We're looking for a technology to produce transparent but tinted panels in a single copy. I would be grateful for your help.

Assembly process

Assembling the device takes 5–10 minutes. Boards are screwed to the chassis and display. The display and rear cover are held in the casing by latches.

Initially, it was hard to fit the chassis into the casing, as we had to jam buttons in. The more complex the assembly — the more expensive it goes.

Therefore, we changed the design to simplify the assembly process: placed the buttons on a separate board with microswitches.

Breathing Life into Busy StatusBar

Okay, we have all the parts to build a prototype. To get all the components up and running, we assembled a test stand from ready boards without casing.

For software development, we use ESP-IDF framework, which is the standard library set for our ESP 32 processor.

The code is needed to run almost all the device's components: the LED display, charging module, encoder, buttons, light sensor, rear display, and speaker.

How to craft a bright and vibrant display

What do you imagine a typical LED board to look like? Something like this: few colours, only two states of a diode (on and off).

We want to make Busy StatusBar display to be bright and beautiful.

So, we had to learn how to control the color and brightness of each diode separately. Now, several MBI 5253 drivers control the diodes on the LED panel. Such drivers are used in large LED panels for full control of RGB diodes.

But to control the diode drivers, our chip — ESP32 uses the standard SPI. However, the MBI 5253 drivers do not have that type of interface. Therefore, our developers learned how to use the SPI interface in a non-standard mode.

Mapping the UX Prototype

Here's the map of the first UX prototype with the status display function and Bluetooth on/off.

In accordance with the UX map, we designed the screens and uploaded them to the device. To render graphics, we use custom written code. We only took a standard font from U8G2 library. U8G2 is commonly used to create graphics for monochrome displays.

Simplifying Bluetooth Pairing

We made a draft Android application and enabled phone and device communication via Bluetooth.

I want to make pairing with the phone as simple as possible — without entering codes or connecting like a hotspot. So that the user can press the Bluetooth button on the Busy StatusBar, and the device is visible in the app for a couple of minutes, then the devices pair.

The panel remembers the phone and maintains a connection with it as long as the phone is within range.

After pairing, the app provides the ability to manage Wi-Fi connections. So, user will be able to connect the lamp to Wi-Fi with a few clicks.

We tested the connection to Wi-Fi points and confirmed that Bluetooth and Wi-Fi can work simultaneously.

Animations

Now we're uploading animations to the device as a sequence of PNG files. We've achieved around 90 fps animations without flickering.

What we like most as a team is seeing how the device comes to life with new animation. Check out interesting animated statuses we've already prepared.

Suggest your animations and we will bring them to live in the next articles.

What’s Next

From a hardware perspective, the device is almost ready. We only have to figure out a few details and see live the updated design of the next prototype.

As for software, we have an exciting journey ahead:

1. Building the mobile application. App users would be able to upload more applications and control the Busy StatusBar remotely.
2. Enhancing Firmware Code for Future Scalability. We recognise the need to rebuild the code architecture to avoid future limitations.
3. Integrating External Services. The Busy StatusBar would be able to change the status according to Slack statuses and Zoom calls.

Previously, we announced the source code would be open. We'll post it on Github later, it's a bit raw at the moment.

Got Interested in Busy StatusBar?

We plan to crowdfund the production of Busy StatusBar on Kickstarter. We hope to ship finished devices six months after the campaign finish.

If you're interested buying the device, leave your email. You'll be among the first to be informed when we will launch the campaign.

More use cases and scenarios on TikTok | Twitter | Instagram