DOCUMENTATION PIU Expanding Keyboard
Overview
Getting Started
BASE
Reference
Worker
Setup modules
COMMODETTO
Reference
Poco Renderer
Outlines
Creating Fonts
Crypt
Data
DEVICES
Moddable One
Moddable Two
Moddable Three
Moddable Four
Moddable Six
ESP32
ESP8266
nRF52
nRF52 Low Power Notes
Raspberry Pi Pico
M5Core Ink
M5Paper
Wasm
SiLabs Gecko
QCA4020
Moddable Zero
Moddable Display Developer Guide
DISPLAYS
Overview
Adafruit 1.8" ST7735
Adafruit OLED Display
BuyDisplay 2.8" CTP - ESP8266
Crystalfontz ePaper
DotStar
Generic 1.44"
Generic 2.4" & 2.8" (Resistive Touch) - ESP32
Generic 2.4" & 2.8" (Resistive Touch) - ESP8266
Generic 2.4" & 2.8" (Resistive Touch) - Pico
Sharp Memory
Sharp Memory Screen 1.3"
SparkFun TeensyView
Switch Science Reflective LCD
DRIVERS
DESTM32S display
DotStar display
ILI9341 display
LPM013M126A display
LS013B4DN04 display
MCP230XX GPIO expander
NeoStrand
SSD1306 display
SSD1351 display
ST7735 display
Files
IO
TC53 IO
Firmata
NETWORK
Reference
TLS (SecureSocket)
BLE
Ethernet
Web Things
PINS
Reference
Audio Output
PIU
Reference
Localization
Keyboard
Expanding Keyboard
Die Cut
Using After Effects Motion Data
TOOLS
Reference
Manifest
Defines in Manifests
Testing
XS
Handle
JavaScript language considerations on embedded devices using the XS engine
Mods – User Installed Extensions
ROM Colors
Using XS Preload to Optimize Applications
XS Conformance
XS Marshalling
XS Platforms
XS in C
XS linker warnings
xsbug
xst
XS Compartment
XS Profiler
XS Scopes

Expanding Keyboard Reference

Copyright 2019 Moddable Tech, Inc.
Revised: July 2, 2019

The vertical and horizontal expanding keyboard modules implement touch screen keyboards for use with Piu on Moddable One and Moddable Two products. The keys automatically expand when tapped, eliminating the need for a stylus. Both keyboards implement the same API.

The keyboards are designed to fit a 240 x 320 screen. The vertical keyboard height is 185 pixels. The horizontal keyboard height is 164 pixels and designed to run in a landscape orientation. Both orientations fill the application screen width.

Key presses trigger events that can be captured in the application's behavior. The style (font and weight) of the keyboard's text are defined by a Style object supplied by the caller. This allows the use of Style templates.

A KeyboardField container and associated behavior are additionally provided to facilitate integrating the keyboard into apps. This container displays the keys pressed along with a blinking I-beam cursor. The KeyboardField height should be tall enough to fit the I-beam cursor, which is outset from the field text.

Keyboard Module Exports

Export Type Description
VerticalExpandingKeyboard constructor Constructor used to create vertical expanding keyboard instances.
HorizontalExpandingKeyboard constructor Constructor used to create horizontal expanding keyboard instances.
import {VerticalExpandingKeyboard} from "keyboard";
import {HorizontalExpandingKeyboard} from "keyboard";

KeyboardField Module Exports

Export Type Description
KeyboardField constructor Constructor used to create keyboard field instances.
import {KeyboardField} from "common/keyboard";

Keyboard Objects

Constructor Description

VerticalExpandingKeyboard(behaviorData, dictionary)

HorizontalExpandingKeyboard(behaviorData, dictionary)

Argument Type Description
behaviorData * A parameter that is passed into the onCreate function of the keyboard's behavior. This may be any type of object, including null or a dictionary with arbitrary parameters.
dictionary object An object with properties to configure the resulting keyboard. Only parameters specified in the Dictionary section below will have an effect; other parameters will be ignored.

Returns a VerticalExpandingKeyboard or HorizontalExpandingKeyboard Container instance.

const KeyboardStyle = Style.template({ font:"18px Roboto", color:"black" });
let keyboard = new VerticalExpandingKeyboard(null, { Style:KeyboardStyle, target:this.data["FIELD"] });

Dictionary

Parameter Type Default Value Description
Style style n/a Required. A Piu Style object that will be used for the text on keys.
target object n/a Required. A Piu Container object that will receive the onKeyUp event.
doTransition boolean false Whether or not to transition in the keyboard when it is first displayed and transition out when dismissed.

Triggered Events

onKeyboardOK(container, text)

Argument Type Description
container object The behavior's Container object
text string The complete string entered into the field

The keyboard bubbles this event when the OK button is pressed.

onKeyboardRowsContracted(container)

Argument Type Description
container object The behavior's Container object

The keyboard bubbles this event when it is done horizontally contracting the keyboard rows back to the unzoomed view.

onKeyboardRowsExpanded(container)

Argument Type Description
container object The behavior's Container object

The keyboard bubbles this event when it is done horizontally expanding the keyboard rows to the zoomed view.

onKeyboardTransitionFinished(container, out)

Argument Type Description
container object The behavior's Container object
out boolean Set true when the keyboard transitions out of view, false when the keyboard transitions into view

The keyboard bubbles this event when it is done transitioning on and off the screen. The onKeyboardTransitionFinished function will usually be implemented and triggered in the calling application's behavior.

onKeyUp(container, key)

Argument Type Description
container object The behavior's Container object
key string The string value of the key that was pressed (e.g., 'a', '3', '$'). It can also be \b for backspace or \r for the submit button.

The keyboard bubbles the onKeyUp event when a key is released. The onKeyUp function will usually be implemented and triggered in the calling application's behavior.


KeyboardField Object

Constructor Description

KeyboardField(behaviorData, dictionary)

Argument Type Description
behaviorData * A parameter that is passed into the onCreate function of the keyboard field's behavior. This may be any type of object, including null or a dictionary with arbitrary parameters.
dictionary object An object with properties to configure the resulting keyboard field. Only parameters specified in the Dictionary section below will have an effect; other parameters will be ignored.

Returns a KeyboardField Container instance.

const FieldStyle = Style.template({ font: "20px Open Sans", color: "black", horizontal:"left", vertical:"middle" });
let keyboardField = new KeyboardField(null, { Style:FieldStyle });

Dictionary

Parameter Type Default Value Description
Style style n/a Required. A Piu Style object that will be used for the keyboard entry text.
password boolean false Set true to enable password mode. The password mode hides each character displayed after a short delay.

Triggered Events

onKeyboardOK(container, text)

Argument Type Description
container object The behavior's Container object
text string The complete string entered into the field

The keyboard bubbles this event when the OK button is pressed.