Canvas

When the built-in components aren't enough, draw your own: gauges, games, clocks, maps or visualizers. Coordinates are points from the canvas's top-left corner. Give the canvas an id and each click sends {"x", "y"}.

Shapes

Shape	Fields
`rect`	`x y w h radius fill stroke width`
`circle`	`x y r fill stroke width`
`line`	`points: [[x,y], …] color width closed`
`polygon`	`points fill` (convex)
`arc`	`x y r start end color width`. Degrees, clockwise from 12 o'clock.
`text`	`x y text size color anchor bold`. `anchor` is `start`, `center` or `end`.
`icon`	`x y icon size color fill`

A gauge

json

{ "type": "canvas", "width": 104, "height": 104, "id": "gauge", "shapes": [
  { "type": "arc", "x": 52, "y": 56, "r": 40, "start": -120, "end": 120, "color": "faint", "width": 6 },
  { "type": "arc", "x": 52, "y": 56, "r": 40, "start": -120, "end": 30,  "color": "accent", "width": 6 },
  { "type": "text", "x": 52, "y": 56, "text": "62", "size": 24, "anchor": "center", "bold": true } ] }

Animation

To animate, send a new tree each frame from a live plugin. About 30 updates a second works well for a tile.

When nothing is moving, send nothing. Nook uses no CPU while idle, and your plugin shouldn't either. The analog clock example redraws once a second, on the second.