Copyright 2021 Moddable Tech, Inc.
Revised: November 4, 2021
These examples demonstrate how to use features of the Piu user interface framework. Piu is an object-based framework that makes it easier to create complex, responsive layouts.
Most of the examples are designed for a QVGA (320x240) screen, but many feature responsive layouts that work on a variety of screen sizes. All of the examples in this folder run on the desktop simulator with the exception of the backlight, epaper-travel-time, one-line, and one-line-keyboard examples.
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:
images,balls,neon-light - Text:
text,cards,localization - Animation:
easing-equations,transitions,timeline - Touch input:
drag,keyboard,map-puzzle - Scrolling content:
scroller,list - Networking:
wifi-config,weatherandmini-weather,one-lineandone-line-keyboard
The backlight example allows you to adjust the backlight brightness on Moddable Two.
For more information about the backlight, see the Backlight section of the Moddable Two documentation.
The balls example shows a full frame rate animation of bouncing balls on the screen. It is not designed for a specific screen size so it is useful for testing displays.
The bars example renders black and white images and uses the Piu Port object to draw bars. It also shows how to use the Timeline and Transition objects, which are two distinct ways of creating animations.
The cards example uses the Piu Timeline object to animate Moddable employees' business cards.
The color-picker example provides a simple user interface for selecting a color. Drag the picker around the colored image to select a color. The selected color is displayed in the header bar.
For more information about the color picker implementation, see our blog post A Color Picker for Microcontrollers.
The countdown example counts down to a date specified in the code. The numbers and text subtly fade between different colors.
The drag and drag-color examples are great for testing touch on displays. You can move the objects by touching them and dragging across the screen. Multitouch is supported.
The easing-equations example demonstrates the use of the easing equations built into the Moddable SDK along with the Piu Timeline object for creating animations. Easing equations are useful for creating smooth, natural-looking animations.
The epaper-flashcards example shows a sequence of flash cards. The answer is displayed when tapped. A swipe left or swipe right moves to the previous or next card.
For more information about this example and ePaper displays, see our blog post Getting the Most from ePaper Displays.
The epaper-photos example displays a slideshow of photographs.
For more information about this example and ePaper displays, see our blog post Getting the Most from ePaper Displays.
The epaper-epaper-travel-time example displays the travel time between your home and work. It uses the Google Maps Web API to determine the current travel time.
For more information about this example and ePaper displays, see our blog post Getting the Most from ePaper Displays.
The hardware-rotation example rotates the image and text on the display every three seconds. This example is only compatible with display controllers that support hardware rotation.
For more information about hardware rotation, see our blog post Run-time Display Rotation.
The heartrate example generates a random number each second and displays it as part of a sample UI for a heartrate monitor.
The horizontal-expanding-keyboard example demonstrates the use of the expanding keyboard module to create an on-screen keyboard for a touch screen. The horizontal expanding keyboard is designed to make touch input easier on 320x240 displays..
See also the keyboard and vertical-expanding-keyboard examples.
For more information about the expanding keyboard, see our blog post Introducing an Expanding Keyboard for Small Screens.
The images example demonstrates how to render GIFs, JPEGs, and PNGs.
The keyboard example demonstrates the use of the keyboard module to create an on-screen keyboard for a touch screen. The keyboard module may be used on many screen sizes.
See also the horizontal-expanding-keyboard and vertical-expanding-keyboard examples.
The list example uses a Piu Port object to create a scrolling list of items that may be tapped.
The localization example translates text on the screen to the language selected. You can read more about how localization is implemented in the Moddable SDK here.
The love-e-ink example is designed for the 128x296 Crystalfontz ePaper display. It updates small portions of the screen at a time and displays the message "Moddable ♥ Eink."
The love-js example is designed for a 128x128 pixel screen. It plays an animation of three different images to display the message "Moddable ♥ JavaScript."
The map-puzzle example implements a simple puzzle for a touch screen. Move pieces of the puzzle by touching them while dragging across the screen.
The neon-light example displays English and Japanese text over a colorful, animated background.
The one-line and one-line-keyboard examples are designed to work together. The one-line example opens a WebSocket server and displays its IP address on screen. The one-line-keyboard example opens a WebSocket client that connects to the one-line server and sends user-inputted text for it to display.
The outline/clock example renders an analog clock using Canvas outlines.
The outline/figures example contains mods to draw all of the figures from the Outline documentation.
The outline/shapes example renders four different outline shapes in a manner similar to the balls example.
The preferences example demonstrates how to set preferences that are saved across boot. Tap a color to change the background color and set a background color preference. When the device is rebooted, the background color will be the last color selected.
The scroller example shows how to create vertical and horizontal scrolling content. Tap the title bar to toggle between the two directions.
The sound example demonstrates how to use the Piu Sound object. Tap the play button to play a sound. Tap the volume buttons to adjust the volume.
The spinner example implements a simple spinning animation, useful for loading screens.
The spiral example uses a Piu Port object to draw spirals of random sizes on the screen.
The text example uses the Piu Text object to render a variety of text styles with different sizes, colors, and alignments.
The timeline example demonstrates the use of the to, from, and on functions of the Piu Timeline object. Tap an option to see an animation that uses the corresponding function.
The `transitions example demonstrates the use of the Piu comb and wipe transitions. These are useful for creating full screen transitions.
The vertical-expanding-keyboard example demonstrates the use of the expanding keyboard module to create an on-screen keyboard for a touch screen. The vertical expanding keyboard is designed to make touch input easier on 240x320 displays.
See also the keyboard and horizontal-expanding-keyboard examples.
For more information about the expanding keyboard, see our blog post Introducing an Expanding Keyboard for Small Screens.
The weather and mini-weather examples display the weather forecast for five different cities. Forecasts are retrieved by sending HTTP requests to a cloud service.
The wifi-config example allows the user to configure the Wi-Fi network by selecting from a list of available networks. The on-screen keyboard is used to enter the password for secure networks.