MiniHat
Description
While I was working on a piece of software for my dissertation project, a need arose to simulate and visualize some LED matrix displays in the browser. I was working with a number of 8×8 LED matrix displays, specifically the Sense HAT, and their state needed to be shown in a web application (which has also been published).
There are existing simulators for the Sense HAT and for other LED matrix displays, but I found it frustrating that none of them looked like glowing LEDs. For the most part they would simply push the display’s RGB values to an enlarged pixel grid. I found that this did not convey the visual impression of these types of displays at all. Consequentially I came up with MiniHat: a browser-based LED matrix display simulator that implements (most of) the Sense HAT LED display’s programming interface and makes an effort to look like a grid of glowing LEDs in the process.
Demo
Privacy notice: all file operations happen locally on your device, your data is not transmitted anywhere.
This demo uses a display background resembling a Raspberry Pi and is based on a real photo of a Sense HAT. Of course you can use MiniHat with any (dark-ish) background that you want.
Functionality
The MiniHat functionality is modeled very closely after the Sense HAT API. It offers the functions flip_h, flip_v, set_pixels, get_pixels, set_pixel, get_pixel, load_image, and clear. There are stubs for show_message and show_letter, but they are not functional (no text font has been implemented). Everything else was out of scope for my needs. The parts that exist cover most of the pixel-based LED display manipulation with the exception of gamma adjustment.
Unlike the Sense HAT, which internally reduces the color channel value range, MiniHat supports the full 8-bit RGB color space. The demo above uses an 8×8 display to match the Sense HAT's resolution, but the library supports arbitrary LED display resolutions and arbitrary canvas pixel depths per LED (limited by the browser’s maximum canvas size). This is a client-side library intended to be used in web projects. It relies heavily on the canvas API. The LED glow is based on a black and white intensity stencil that is created dynamically for the requested pixel depth and used as a value-shifted visibility threshold. It is hand-tuned to result in small glowing dots for low intensity colors, full-size vibrant spots for medium intensity colors, and overglow plus white shift for high intensity colors.