Skip to content
Permalink
public
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time

Moddable SDK - Piu Examples

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.


backlight

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.


balls

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.


bars

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.


cards

The cards example uses the Piu Timeline object to animate Moddable employees' business cards.


color-picker

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.


countdown

The countdown example counts down to a date specified in the code. The numbers and text subtly fade between different colors.


drag and drag-color

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.


easing-equations

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.


epaper-flashcards

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.


epaper-photos

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.


epaper-travel-time

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.


hardware-rotation

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.


heartrate

The heartrate example generates a random number each second and displays it as part of a sample UI for a heartrate monitor.


horizontal-expanding-keyboard

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.


images

The images example demonstrates how to render GIFs, JPEGs, and PNGs.


keyboard

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.


list

The list example uses a Piu Port object to create a scrolling list of items that may be tapped.


localization

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.


love-e-ink

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."


love-js

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."


map-puzzle

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.


neon-light

The neon-light example displays English and Japanese text over a colorful, animated background.


one-line and one-line-keyboard

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.


outline/clock

The outline/clock example renders an analog clock using Canvas outlines.


outline/figures

The outline/figures example contains mods to draw all of the figures from the Outline documentation.


outline/shapes

The outline/shapes example renders four different outline shapes in a manner similar to the balls example.


preferences

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.


scroller

The scroller example shows how to create vertical and horizontal scrolling content. Tap the title bar to toggle between the two directions.


sound

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.


spinner

The spinner example implements a simple spinning animation, useful for loading screens.


spiral

The spiral example uses a Piu Port object to draw spirals of random sizes on the screen.


text

The text example uses the Piu Text object to render a variety of text styles with different sizes, colors, and alignments.


timeline

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.


transitions

The `transitions example demonstrates the use of the Piu comb and wipe transitions. These are useful for creating full screen transitions.


vertical-expanding-keyboard

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.


weather and mini-weather

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.


wifi-config

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.