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
- Drawing_Primitives on developer.repebble.com
Core nodes
UiNode
type UiNodeRoot virtual UI node.
WindowNode
type WindowNodeA virtual window identified by a stable id.
LayerNode
type LayerNodeA virtual layer identified by a stable id.
toUiNode
toUiNode : List RenderOp -> UiNodeBuild 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 -> UiNodeBuild a window stack node.
window
window : Int -> List LayerNode -> WindowNodeBuild a window node with a stable id and layers.
canvasLayer
canvasLayer : Int -> List RenderOp -> LayerNodeBuild a canvas layer node with a stable id and draw operations.
Drawing operations
RenderOp
type RenderOpDrawing operations for a canvas layer.
text
text : Font -> TextOptions -> Rect -> String -> RenderOpDraw a string in the given rectangle using a resource font.
textInt
textInt : Font -> Point -> Int -> RenderOpDraw an integer at the given position using a custom resource font.
textLabel
textLabel : Font -> Point -> Label -> RenderOpDraw a predefined label at the given position using a custom resource font.
clear
clear : UiColor.Color -> RenderOpClear the canvas to a color.
fillRect
fillRect : Rect -> UiColor.Color -> RenderOpFill a rectangle with a color.
pixel
pixel : Point -> UiColor.Color -> RenderOpDraw a single pixel with a color.
line
line : Point -> Point -> UiColor.Color -> RenderOpDraw a line with a color.
rect
rect : Rect -> UiColor.Color -> RenderOpDraw a rectangle outline with a color.
circle
circle : Point -> Int -> UiColor.Color -> RenderOpDraw a circle outline with a color.
fillCircle
fillCircle : Point -> Int -> UiColor.Color -> RenderOpDraw a filled circle with a color.
drawBitmapInRect
drawBitmapInRect : StaticBitmap -> Rect -> RenderOpDraw bitmap resource in the provided rectangle.
drawBitmapSequenceAt
drawBitmapSequenceAt : AnimationId -> AnimatedBitmap -> Point -> RenderOpDraw 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 -> RenderOpDraw bitmap resource using width/height, angle and center point.
drawVectorAt
drawVectorAt : StaticVector -> Point -> RenderOpDraw a static Pebble Draw Command vector resource at the given origin.
drawVectorSequenceAt
drawVectorSequenceAt : AnimationId -> AnimatedVector -> Point -> RenderOpDraw 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 -> RenderOpGroup operations under a temporary style context.
pathFilled
pathFilled : Path -> RenderOpDraw a filled path.
pathOutline
pathOutline : Path -> RenderOpDraw a closed path outline.
pathOutlineOpen
pathOutlineOpen : Path -> RenderOpDraw an open path outline.
roundRect
roundRect : Rect -> Int -> UiColor.Color -> RenderOpDraw a rounded rectangle outline.
arc
arc : Rect -> Int -> Int -> RenderOpDraw an arc inside rectangle bounds in Pebble angle units.
fillRadial
fillRadial : Rect -> Int -> Int -> RenderOpDraw a filled radial slice inside rectangle bounds.
AnimationId
type AnimationId
= AnimationId IntOpaque 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
= WaitingForCompanionLocalized 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.StaticBitmapStatic bitmap resource handle from Pebble.Ui.Resources.
AnimatedBitmap
type alias AnimatedBitmap = UiResources.AnimatedBitmapAnimated bitmap (APNG) resource handle from Pebble.Ui.Resources.
StaticVector
type alias StaticVector = UiResources.StaticVectorStatic vector resource handle from Pebble.Ui.Resources.
AnimatedVector
type alias AnimatedVector = UiResources.AnimatedVectorAnimated vector sequence resource handle from Pebble.Ui.Resources.
Font
type alias Font = UiResources.FontFont 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 RotationRotation 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
| AlignRightHorizontal alignment for text drawn inside a rectangle.
TextOverflow
type TextOverflow
= WordWrap
| TrailingEllipsis
| FillOverflow 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 : TextOptionsDefault Pebble text options: centered, word-wrapped text.
alignLeft
alignLeft : TextOptions -> TextOptionsSet text alignment to left.
alignCenter
alignCenter : TextOptions -> TextOptionsSet text alignment to center.
alignRight
alignRight : TextOptions -> TextOptionsSet text alignment to right.
wordWrap
wordWrap : TextOptions -> TextOptionsUse Pebble word wrapping for overflow.
trailingEllipsis
trailingEllipsis : TextOptions -> TextOptionsUse Pebble trailing ellipsis for overflow.
fillOverflow
fillOverflow : TextOptions -> TextOptionsUse Pebble fill overflow behavior.
context
context : List ContextSetting -> List RenderOp -> ContextBuild a drawing context from settings and nested operations.
path
path : List Point -> Point -> Rotation -> PathBuild path data from points, offset and rotation.
rotationFromPebbleAngle
rotationFromPebbleAngle : Int -> RotationCreate a rotation from raw Pebble angle units (0..65535).
rotationFromDegrees
rotationFromDegrees : Float -> RotationCreate a rotation from degrees.
Drawing settings
ContextSetting
type ContextSetting
= StrokeWidth Int
| Antialiased Int
| StrokeColor Int
| FillColor Int
| TextColor Int
| CompositingMode IntDrawing style settings used by context.
strokeWidth
strokeWidth : Int -> ContextSettingSet stroke width for a context.
antialiased
antialiased : Int -> ContextSettingEnable or disable antialiasing (0 or 1).
strokeColor
strokeColor : UiColor.Color -> ContextSettingSet stroke color for a context.
fillColor
fillColor : UiColor.Color -> ContextSettingSet fill color for a context.
textColor
textColor : UiColor.Color -> ContextSettingSet text color for a context.
compositingMode
compositingMode : Int -> ContextSettingSet graphics compositing mode (0..4 Pebble GCompOp).