Home/Packages/elm-pebble/elm-watch/Pebble.Ui

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 here and emit them through your app's render bridge to keep view logic in pure Elm.

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

Core nodes

Drawing operations

Resources, labels and path/context helpers

Drawing settings

Union Types

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.

RenderOp

type RenderOp

Drawing operations for a canvas layer.

Label

type Label

type Label
    = WaitingForCompanion

Localized labels produced in Elm and rendered on watch.

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.

ContextSetting

type ContextSetting

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

Drawing style settings used by `context`.

Type Aliases

Context

type alias Context = ( List ContextSetting, List RenderOp )

Nested drawing context containing style settings and commands.

Bitmap

type alias Bitmap = UiResources.Bitmap

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

Values

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.

text

text : Font -> 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 : Bitmap -> Rect -> RenderOp

Draw bitmap resource in the provided rectangle.

drawRotatedBitmap

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

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

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.

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.

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`).