Pebble.Ui

Retained virtual UI model for Pebble rendering.

Pebble.Ui provides a declarative scene graph for watch windows, layers, and drawing operations. Build values in view and return them as your program's UI root — the runtime diffs and renders them each frame.

import Pebble.Ui as Ui
import Pebble.Ui.Color as Color
import Pebble.Ui.Resources as Resources

view model =
    Ui.toUiNode
        [ Ui.clear Color.white
        , Ui.text Resources.DefaultFont Ui.defaultTextOptions
            { x = 4, y = 8, w = 136, h = 20 }
            (String.fromInt model.score)
        ]

Lower-level window/layer composition is also available:

mainWindow : Ui.WindowNode
mainWindow =
    Ui.window 1
        [ Ui.canvasLayer 2
            [ Ui.fillRect { x = 0, y = 0, w = 144, h = 168 } Color.black
            ]
        ]

For every draw primitive, see the watch-demo-drawing-showcase project template.

Native Pebble C API

Core nodes

UiNode

type UiNode

Root virtual UI node.

WindowNode

type WindowNode

A virtual window identified by a stable id.

LayerNode

type LayerNode

A virtual layer identified by a stable id.

toUiNode

toUiNode : List RenderOp -> UiNode

Build a complete single-window UI from drawing operations.

This is a convenience for watchfaces and apps whose view is just one canvas. It is equivalent to:

windowStack
    [ window 1
        [ canvasLayer 1 ops ]
    ]

windowStack

windowStack : List WindowNode -> UiNode

Build a window stack node.

window

window : Int -> List LayerNode -> WindowNode

Build a window node with a stable id and layers.

canvasLayer

canvasLayer : Int -> List RenderOp -> LayerNode

Build a canvas layer node with a stable id and draw operations.

Drawing operations

RenderOp

type RenderOp

Drawing operations for a canvas layer.

text

text : Font -> TextOptions -> Rect -> String -> RenderOp

Draw a string in the given rectangle using a resource font.

textInt

textInt : Font -> Point -> Int -> RenderOp

Draw an integer at the given position using a custom resource font.

textLabel

textLabel : Font -> Point -> Label -> RenderOp

Draw a predefined label at the given position using a custom resource font.

clear

clear : UiColor.Color -> RenderOp

Clear the canvas to a color.

fillRect

fillRect : Rect -> UiColor.Color -> RenderOp

Fill a rectangle with a color.

pixel

pixel : Point -> UiColor.Color -> RenderOp

Draw a single pixel with a color.

line

line : Point -> Point -> UiColor.Color -> RenderOp

Draw a line with a color.

rect

rect : Rect -> UiColor.Color -> RenderOp

Draw a rectangle outline with a color.

circle

circle : Point -> Int -> UiColor.Color -> RenderOp

Draw a circle outline with a color.

fillCircle

fillCircle : Point -> Int -> UiColor.Color -> RenderOp

Draw a filled circle with a color.

drawBitmapInRect

drawBitmapInRect : StaticBitmap -> Rect -> RenderOp

Draw bitmap resource in the provided rectangle.

drawBitmapSequenceAt

drawBitmapSequenceAt : AnimationId -> AnimatedBitmap -> Point -> RenderOp

Draw an animated bitmap (APNG) sequence at the given origin.

Use a fresh AnimationId for each play. Keep the same id in view while the clip should continue; the runtime dispatches Pebble.Events.onAnimationFinished when that id completes.

drawRotatedBitmap

drawRotatedBitmap : StaticBitmap -> Rect -> Rotation -> Point -> RenderOp

Draw bitmap resource using width/height, angle and center point.

drawVectorAt

drawVectorAt : StaticVector -> Point -> RenderOp

Draw a static Pebble Draw Command vector resource at the given origin.

drawVectorSequenceAt

drawVectorSequenceAt : AnimationId -> AnimatedVector -> Point -> RenderOp

Draw an animated Pebble Draw Command sequence at the given origin.

Use a fresh AnimationId for each play. Keep the same id in view while the clip should continue; the runtime dispatches Pebble.Events.onAnimationFinished when that id completes.

group

group : Context -> RenderOp

Group operations under a temporary style context.

pathFilled

pathFilled : Path -> RenderOp

Draw a filled path.

pathOutline

pathOutline : Path -> RenderOp

Draw a closed path outline.

pathOutlineOpen

pathOutlineOpen : Path -> RenderOp

Draw an open path outline.

roundRect

roundRect : Rect -> Int -> UiColor.Color -> RenderOp

Draw a rounded rectangle outline.

arc

arc : Rect -> Int -> Int -> RenderOp

Draw an arc inside rectangle bounds in Pebble angle units.

fillRadial

fillRadial : Rect -> Int -> Int -> RenderOp

Draw a filled radial slice inside rectangle bounds.

AnimationId

type AnimationId
    = AnimationId Int

Opaque playback instance for drawVectorSequenceAt.

Assign a fresh id per animation play. The runtime tracks progress per id so the same resource can animate at multiple positions and restarts only when the id changes.

Resources, labels and path/context helpers

Label

type Label
    = WaitingForCompanion

Localized labels produced in Elm and rendered on watch.

Context

type alias Context = ( List ContextSetting, List RenderOp )

Nested drawing context containing style settings and commands.

StaticBitmap

type alias StaticBitmap = UiResources.StaticBitmap

Static bitmap resource handle from Pebble.Ui.Resources.

AnimatedBitmap

type alias AnimatedBitmap = UiResources.AnimatedBitmap

Animated bitmap (APNG) resource handle from Pebble.Ui.Resources.

StaticVector

type alias StaticVector = UiResources.StaticVector

Static vector resource handle from Pebble.Ui.Resources.

AnimatedVector

type alias AnimatedVector = UiResources.AnimatedVector

Animated vector sequence resource handle from Pebble.Ui.Resources.

Font

type alias Font = UiResources.Font

Font resource handle from Pebble.Ui.Resources.

Path

type alias Path = ( List ( Int, Int ), ( Int, Int ), Int )

Path geometry for path draw operations.

Point

type alias Point =
    { x : Int
    , y : Int
    }

2D point for draw positions.

Rect

type alias Rect =
    { x : Int
    , y : Int
    , w : Int
    , h : Int
    }

Rectangle bounds for draw operations.

Rotation

type Rotation

Rotation value for Pebble graphics APIs.

Use rotationFromPebbleAngle when you already have Pebble angle units (TRIG_MAX_ANGLE == 65536) or rotationFromDegrees for degree inputs.

TextAlignment

type TextAlignment
    = AlignLeft
    | AlignCenter
    | AlignRight

Horizontal alignment for text drawn inside a rectangle.

TextOverflow

type TextOverflow
    = WordWrap
    | TrailingEllipsis
    | Fill

Overflow behavior for text that does not fit inside its rectangle.

TextOptions

type alias TextOptions =
    { alignment : TextAlignment
    , overflow : TextOverflow
    }

Options passed to Pebble text layout.

defaultTextOptions

defaultTextOptions : TextOptions

Default Pebble text options: centered, word-wrapped text.

alignLeft

alignLeft : TextOptions -> TextOptions

Set text alignment to left.

alignCenter

alignCenter : TextOptions -> TextOptions

Set text alignment to center.

alignRight

alignRight : TextOptions -> TextOptions

Set text alignment to right.

wordWrap

wordWrap : TextOptions -> TextOptions

Use Pebble word wrapping for overflow.

trailingEllipsis

trailingEllipsis : TextOptions -> TextOptions

Use Pebble trailing ellipsis for overflow.

fillOverflow

fillOverflow : TextOptions -> TextOptions

Use Pebble fill overflow behavior.

context

context : List ContextSetting -> List RenderOp -> Context

Build a drawing context from settings and nested operations.

path

path : List Point -> Point -> Rotation -> Path

Build path data from points, offset and rotation.

rotationFromPebbleAngle

rotationFromPebbleAngle : Int -> Rotation

Create a rotation from raw Pebble angle units (0..65535).

rotationFromDegrees

rotationFromDegrees : Float -> Rotation

Create a rotation from degrees.

Drawing settings

ContextSetting

type ContextSetting
    = StrokeWidth Int
    | Antialiased Int
    | StrokeColor Int
    | FillColor Int
    | TextColor Int
    | CompositingMode Int

Drawing style settings used by context.

strokeWidth

strokeWidth : Int -> ContextSetting

Set stroke width for a context.

antialiased

antialiased : Int -> ContextSetting

Enable or disable antialiasing (0 or 1).

strokeColor

strokeColor : UiColor.Color -> ContextSetting

Set stroke color for a context.

fillColor

fillColor : UiColor.Color -> ContextSetting

Set fill color for a context.

textColor

textColor : UiColor.Color -> ContextSetting

Set text color for a context.

compositingMode

compositingMode : Int -> ContextSetting

Set graphics compositing mode (0..4 Pebble GCompOp).