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

Pebble.UnobstructedArea

Observe Timeline Quick View unobstructed-area changes on round watches.

Use currentBounds during startup to sync the initial layout, then subscribe to onWillChange, onChanging, and onDidChange to animate layout transitions.

import Pebble.UnobstructedArea as UnobstructedArea
import Pebble.Ui as Ui

type Msg
    = GotBounds Ui.Rect
    | WillChange Ui.Rect
    | Changing Int
    | DidChange

init _ =
    ( model, UnobstructedArea.currentBounds GotBounds )

subscriptions _ =
    Sub.batch
        [ UnobstructedArea.onWillChange WillChange
        , UnobstructedArea.onChanging Changing
        , UnobstructedArea.onDidChange DidChange
        ]

For a runnable example, use the watch-demo-unobstructed project template in the IDE.

Native Pebble C API

UnobstructedArea on developer.repebble.com

Commands

currentBounds

currentBounds : (Rect -> msg) -> Cmd msg

Read the current unobstructed bounds once.

Subscriptions

onWillChange

onWillChange : (Rect -> msg) -> Sub msg

Receive the final unobstructed bounds before a Timeline peek transition.

onChanging

onChanging : (Int -> msg) -> Sub msg

Receive animation progress while the unobstructed area is changing.

Progress ranges from 0 to 255, matching Pebble's AnimationProgress.

onDidChange

onDidChange : msg -> Sub msg

Receive notification after the unobstructed area finished changing.