Advanced Graphics on an Energy Budget

Sept 15, 2023 | Peter Hoddie, Principal

We believe a great product should be both energy efficient and easy to use. Moddable Four has a display to make it easier to use. Most other ultra-low energy boards don't have a screen to help save energy.

We designed Moddable Four's hardware and software so the screen doesn't use much energy. We started with a memory display from Sharp, a component known for its energy efficiency. Maintaining the image on the screen uses just 0.1 µA and your project's software can disconnect the screen from power when it isn't needed, reducing its energy use to zero.

The quality of the user experience a display delivers depends, in no small part, on the capabilities of the graphics library used to create the user experience. A brilliant UX design that can't be implemented doesn't help the customer.

Developers use the Moddable SDK's fast Poco graphics engine and powerful Piu user interface framework to code their user experience. These familiar, robust modules have powered the UX of countless projects over the years. Now they are available and optimized for Moddable Four.

Synthesizing Gray

The display only has black and white pixels: there's no gray. For some user experiences, that works well. But, when grayscale images are needed, our display driver can simulate gray by dithering. This delivers beautiful results with the small, high-contrast pixels on Moddable Four's display.

Your project can enable dithering for the parts of your app that need it and disable it otherwise to reduce energy further. Turning dithering on and off is easy, screen.dither = true and screen.dither = false. Dithering is enabled by default for compatibility with existing code that uses Poco and Piu.

Infinite Fonts

Perhaps nothing is more essential to achieving a professional looking user experience than text. Unfortunately, the fonts available for black and white displays too often look like they were designed in the 1970s and only support English.

Fortunately, developers creating projects for Moddable Four can use any OpenType or TrueType font, at any point size, and with the Unicode characters for any language they need. The Moddable SDK can optimize fonts for black and white displays when building projects for Moddable Four. The crisp text gives your project a distinctive look.

Extended Graphics

Extensions to Poco and Piu deliver specialized graphics capabilities optimized for the unique needs of your user experience.

• Outlines / SVG - Outlines are a great way to incorporate high quality, scalable images. Outlines may be generated dynamically by scripts for data visualizations like graphs. Outlines may also be generated offline in industry standard SVG using tools including Illustrator and Figma, and then rendered on Moddable Four.
• QR Code - QR Codes let users easily navigate from Moddable Four to a web page using their phone's camera. This extension generates QR Codes in real-time, so you can include dynamic data in the QR Code.
• Animated GIF - When you have an existing animation, you can convert it to an animated GIF to play on Moddable Four. This is great for company logos and instructional animations. It even works for short videos.
• Static - This whimsical extension fills an area with random static.

Unlimited Possibilities

At first the small black and white display in Moddable Four may seem limited in its ability to deliver a modern user experience. By taking advantage of the many graphics capabilities, your project can deliver a compelling user experience. Check out the Moddable Four first run demo app for an example that incorporates many of the capabilities introduced in this article. You may be surprised at just how much is possible.