Scalable Outlines: New Flexibility for Embedded UX

Delivering a modern user experience on low-cost embedded hardware has been a key focus of the Moddable SDK from the start. The Moddable SDK is regularly updated with new rendering capabilities to expand the kinds of user experiences that can be created. Last year support for animated GIFs arrived and earlier this year it got much easier to add any font to projects. This article is about the latest addition: drawing outlines.

These are some essential facts about outlines:

  • A common way to draw images on the web, on the desktop, and in mobile apps
  • Used to draw lines, simple geometric shapes, charts, graphs, and complex illustrations
  • Can be resized and rotated without any reduction in quality
  • Easy to create thanks to a wide array of free and commercial tools
  • At the core of the ubiquitous TrueType/OpenType font format
  • Part of the SVG (Scalable Vector Graphics) standard used on the web
  • Can be rendered using the path APIs in HTML5 Canvas

Implementing outlines on a resource-constrained embedded systems is challenging. The CPU and memory requirements are generally higher than rendering bitmaps. Adding outline support to the Moddable SDK required finding the right balance of power and performance to deliver results that look great and animate fluidly.

To make it as easy as possible for developers to start using outlines, support for outlines is integrated into the Poco renderer and Piu user interface framework. The Moddable SDK implements the JavaScript APIs from HTML5 Canvas, to build paths dynamically from code, and the SVG path format, to import paths drawn in tools including Illustrator and Figma.

Workflow

Looking at the workflow for bringing an outline shape to an embedded device is a great way to understand the Moddable SDK's support for outlines.

The journey begins in an authoring tool that exports SVG, such as Figma or Illustrator. A designer creates one or more shapes in the tool. Note that only the path created in the tool is used; characteristics like the color, stroke width, and fill are applied when rendering the outline in the Moddable SDK. The outlines are exported to an SVG file for handoff to the developers building the user experience.

A developer extracts the path strings from the SVG file and adds them to the JavaScript source code of the project. They use the Moddable SDK APIs to convert the SVG path to an outline, which is then rendered using Poco or Piu. The results can be previewed using the Moddable SDK simulator on macOS, Windows, and Linux to quickly make any necessary adjustments. Finally, the project is run on the embedded device to verify that it looks and works as expected.

The entire journey, from a blank page in Figma to rendering on a Moddable Two development board, is shown in this short video.

Advantages of Outlines

There are many advantages to using outlines in a project.

  • Any shape. Outlines allow a project to easily incorporate UI objects of any shape. This makes it easy to break out of the common embedded UX trap of everything looking like a box. The Moddable SDK has avoided boxes with carefully designed bitmaps; outlines are another tool for accomplishing that.
  • Looks great. Outlines are always rendered with fully anti-aliased edges ensuring that every shape is pixel perfect.
  • Smooth animations. Outlines are rendered fast enough to be animated thanks to the core rendering code from the popular open source FreeType project.
  • Transparency. Outlines can be drawn at any blend level, making it possible to fade shapes in and out, and to have ghost shapes overlay a user experience.
  • Rotate and resize. Outlines can be efficiently rotated, enlarged, and shrunk. This allows a single outline to be re-used in many different situations.
  • Small size. A typical outline requires a few hundred to a few thousand bytes of storage, usually a small fraction of what the equivalent bitmap would require.
  • Ease of authoring. The Moddable SDK has many different APIs for creating outlines including drawing a path using HTML5 canvas APIs, importing an SVG path, providing the vertices of a polygon, or specifying a round rectangle. These make it quick and easy to create the outline needed often without having to understand the complex math of paths.
  • Leverage web development experience. Some of the same tools and APIs used to work with outlines on the web are now also compatible with the Moddable SDK. This makes it possible to develop workflows that share experience, code, and designs between web development and embedded development.

Naturally, there are some disadvantages to outlines. Outlines require significantly more CPU power to render than a bitmap. As a result, care is required to keep shapes relatively simple and to limit the number of shapes. While outlines typically use less storage space than bitmaps, they require much more RAM to render. As a result of these two resource requirements, outlines are impractical on the most constrained microcontrollers. For example, they work well on an ESP32 but are generally impractical on an ESP8266.

Developing with Outlines

The experience of developing software to use outlines is very much like other UX development in the Moddable SDK. Developers write their code in modern JavaScript. Developers can choose whether to use the Poco renderer to draw outlines directly or the high-level Piu user interface framework. Both support the same outline rendering capabilities, so the best choice depends on the developer's experience and the project's needs.

The Outlines documentation is a comprehensive reference to all the outline APIs in the Moddable SDK. The documentation includes animated images for many of the APIs to illustrate how they work.

The documentation also includes detailed walkthroughs of two new outline examples in the Moddable SDK: drawing a simple oscilloscope image with Poco and drawing an analog clock with Piu.

There are also several other new examples, both for Poco and Piu.

For developers working in TypeScript, type declarations for the outline APIs are also included.

Exploring Outlines in the Moddable SDK

The developer documentation for outlines includes a large collection of animated images to show the different outline APIs. The source code used to create each image is included in the Moddable SDK. Running these examples, stepping through the code, and experimenting with changes to the code is the best way to start to understand the new outline capabilities in the Moddable SDK.

The examples are provided as mods, small JavaScript modules that are run by a host application. To run one of the example mods, first build and run the host application on the Moddable Two simulator:

cd $MODDABLE/examples/piu/outline/figures
mcconfig -d -m -p sim/moddable_two

You may notice that the screen is rotated 90 degrees to run in landscape orientation. Select "90°" from the View menu to unrotate the screen. Next run one of the mods, for example:

cd scale
mcrun -d -m -p sim/moddable_two

To run the examples on the Moddable Two development board, just replace sim/moddable_two with esp32/moddable_two when running mcconfig and mcrun.

This following video shows several of the outline examples in the Moddable SDK running on an ESP32. They include a clock face with a very smooth second hand sweep, the classic Piu balls demo refreshed with shapes from MDN's canvas examples, and several of the documentation figures.

Conclusion

Outlines are a powerful new rendering capability in the Moddable SDK. By extending the existing rendering and UI capabilities of the Moddable SDK, they give developers the freedom to choose the best approach for drawing each screen of their product. By adopting parts of SVG and Canvas, developers coming from the web to the Moddable SDK can leverage their experience with tools and APIs.

Outlines are another important part of Moddable's goal to deliver no-compromise UX to users of products built on low-cost IoT hardware using the Moddable SDK.