These examples demonstrate how to use features of Commodetto, a bitmap graphics library that provides a 2D graphics API. Commodetto includes the lightweight Poco rendering engine, a display list renderer able to efficiently render a single scanline at a time, saving considerable memory by eliminating the need for a frame buffer.
Most of the examples are designed for a QVGA (320x240) screen, but many work on a variety of screen sizes. All of the examples in this folder run on the desktop simulator with the exception of the mini-drag example.
This document provides a brief description of each example and a preview of each app running on the desktop simulator. If you are looking for an example that demonstrates how to use a specific feature, see the list below. Keep in mind that this list provides only a few recommendations and is not a complete list of examples that use each feature.
- Images:
image-frames,docs,rotated,sprite - Text:
text,text-ticker,cfe8x8,cfeNFNT - Animation:
docs,progress,text-ticker - Touch input:
mini-drag - Networking:
jpeghttp,jpegstream
The cfe8x8 example demonstrates how to use a simple embedded 8 x 8 bitmap font. This is the simplest example of implementing a new Commodetto Font Engine.
The cfeNFNT example renders text using an NFNT font resource, the bitmap font format of the original Macintosh. Includes an Commodetto Font Engine. for NFNT.
The clip example shows how to use the drawing clip. The clip stack is maintained by the Poco rendering engine.
The clock example shows a simple on screen clock with a blinking colon. It demonstrates how to center text to build an application that works on any screen size.
The docs example includes all of the examples in the Poco documentation.
The image-frames example shows an animated flag. It demonstrates how to render a gif.
The jpeghttp and jpegstream examples fetch images from moddable.com and display them on screen. These examples run on the ESP8266, which doesn't have enough memory to hold the compressed JPEG images. Async/await is used to decode and render the JPEG images as they arrive, allowing the application to overcome the RAM limits.
The mini-drag example is great for testing touch on displays. You can move the object by touching it and dragging across the screen.
The origin example demonstrates the use of the Poco drawing origin stack.
The progress example displays high frame rate animations of progress bars and a spinner, all of which are useful for loading screens.
The rotated example demonstrates how to define the rotation of the screen. This example rotates 90 degrees; 0, 180, and 270 degree rotation is also supported.
The sprite example displays a simple spinning animation, useful for loading screens. It demonstrates how to cycle through different portions of a single image to create an animated sprite.
The text-ticker example displays the message "Greetings from Moddable..." animated in a loop.
The text example demonstrates different truncation and alignment options for rendering text.