Heads up display

Background

I have a collection of microcontrollers and sensors that I am working through, and creating small projects. I had a small Heads Up Display (HUD) sitting around and I decided to see what I could do with it.

The Project

Here's a short project demo video:

Here are the components:

The project uses an M5Stack Core2 AWS model, but I could have used any of the other M5Stack microcontrollers as the project does not need an integrated screen. However, the project will fall back to using an integrated screen if it can't find an external screen. Having that capability was useful early on in the project for verification purposes.

The HUD is connected to the Core2 through a Grove interface (cable included). Almost all M5Stack microcontrollers, sensors and external units use the Grove interface. I like this because you can only plug the Grove cables in one way.

Here's a closer look at the HUD:

Here's the other side:

Most of the marketing and promotion material I have seen for this device show the back. I assume this is because it's colorful. The origin of the screen (coordinate 0, 0), however, is at the top left of the picture I labelled front.

You'll notice there are two connectors on the back of the HUD. The microcontroller can be connected from either side. The spare connector can be used to daisy chain a second HUD.

Here are the components the project outputs to the HUD:

The project displays one of 4 wire frame shapes - a square, triangle, pentagon and hexagon. The shapes are rotated to form a pattern.

There is a progress bar at the top to show how far the shape is through the rotation sequence.

An angle is output to show the current rotation angle. I thought this was a good mixture of graphics components and text.

The screen dimensions are 128 x 64 pixels:

Only 56 of the 64 pixels on the Y axis are transparent. Although this may seem like a small viewing area, you can output a lot of information. The HUD is monochrome, so pixels are either on or off - there is no grayscale.

The project uses a full screen sprite to reduce flicker when the screen is updated:

A sprite is just an off screen buffer that can be updated with text and graphics. The project sprite happens to be 128 x 64 pixels which is the entire size of the HUD. Updates in the sprite will use X and Y coordinates similar to the full screen. The top left of the sprite is 0, 0 and the bottom right 127, 63. Once the sprite has been updated with new graphics and text, it can be pushed to the HUD. The really cuts down on flicker you can get if you update individual areas of the HUD. This technique also works for microcontrollers with integrated displays.

Here's a picture showing the transparency of the HUD:

You can clearly see the microcontroller through the HUD. The HUD does quite well as you get closer to a natural light source:

The HUD does not do so well in direct light:

The HUD is pretty capable and I could easily see this displaying environmental information e.g. temperature, or the time, or a stock ticker.