controlsKit.skins — the looks any stick or button can wear.
A skin is a palette plus a few style switches (pixel blocks, sci-fi
brackets, cartoon outline and drop shadow). Every on-screen control draws
through the primitives here, so changing the skin changes every control
at once and a new skin is one table.
Drawing goes into a list of canvas paint commands (the builtin canvas
widget's `circle`, `rect`, `line` and `text` kinds), in logical points.
alpha(color: string, aa: string) → string
`color` with its alpha replaced by `aa` (two hex digits). Works on #RGB,
#RRGGBB and #RRGGBBAA, so a skin may give any colour an alpha of its own.
| arg | type | description |
|---|
| color | string | |
| aa | string | |
get(name: string) → Skin
The skin table for a name; errors listing the skins on a typo.
| arg | type | description |
|---|
| name | string | |
register(name: string, skin: { [string]: any }) → void
Register a look of your own. Fields left out are taken from `minimal`.
| arg | type | description |
|---|
| name | string | |
| skin | { [string]: any } | |
pixelStep(r: number) → number
| arg | type | description |
|---|
| r | number | |
blockDisc(cmds: { any }, x: number, y: number, r: number, color: string, p: number) → void
A filled disc made of square blocks, for the pixel look.
| arg | type | description |
|---|
| cmds | { any } | |
| x | number | |
| y | number | |
| r | number | |
| color | string | |
| p | number | |
disc(cmds: { any }, sk: Skin, x: number, y: number, r: number, fill: string, stroke: string?, width: number?) → void
A filled disc with an optional stroke, in the skin's style.
| arg | type | description |
|---|
| cmds | { any } | |
| sk | Skin | |
| x | number | |
| y | number | |
| r | number | |
| fill | string | |
| stroke | string? | |
| width | number? | |
ring(cmds: { any }, sk: Skin, x: number, y: number, r: number, color: string, width: number?) → void
An unfilled ring.
| arg | type | description |
|---|
| cmds | { any } | |
| sk | Skin | |
| x | number | |
| y | number | |
| r | number | |
| color | string | |
| width | number? | |
box(cmds: { any }, sk: Skin, x0: number, y0: number, x1: number, y1: number, fill: string?, stroke: string?, width: number?) → void
A box (rounded unless the skin is pixel).
| arg | type | description |
|---|
| cmds | { any } | |
| sk | Skin | |
| x0 | number | |
| y0 | number | |
| x1 | number | |
| y1 | number | |
| fill | string? | |
| stroke | string? | |
| width | number? | |
line(cmds: { any }, x0: number, y0: number, x1: number, y1: number, color: string, width: number) → void
| arg | type | description |
|---|
| cmds | { any } | |
| x0 | number | |
| y0 | number | |
| x1 | number | |
| y1 | number | |
| color | string | |
| width | number | |
text(cmds: { any }, sk: Skin, x: number, y: number, s: string, size: number, color: string?) → void
Centred text in the skin's font.
| arg | type | description |
|---|
| cmds | { any } | |
| sk | Skin | |
| x | number | |
| y | number | |
| s | string | |
| size | number | |
| color | string? | |
arrow(cmds: { any }, sk: Skin, x: number, y: number, angle: number, size: number, color: string) → void
A filled triangle pointing at `angle` (radians, 0 = right, screen y down).
| arg | type | description |
|---|
| cmds | { any } | |
| sk | Skin | |
| x | number | |
| y | number | |
| angle | number | |
| size | number | |
| color | string | |
arc(cmds: { any }, sk: Skin, x: number, y: number, r: number, t: number, color: string, width: number) → void
An arc from the top, clockwise, covering share `t` (0..1) of a full turn.
| arg | type | description |
|---|
| cmds | { any } | |
| sk | Skin | |
| x | number | |
| y | number | |
| r | number | |
| t | number | |
| color | string | |
| width | number | |
brackets(cmds: { any }, x: number, y: number, r: number, color: string, w: number) → void
Corner brackets around a circle, for the sci-fi look.
| arg | type | description |
|---|
| cmds | { any } | |
| x | number | |
| y | number | |
| r | number | |
| color | string | |
| w | number | |
button(cmds: { any }, sk: Skin, x: number, y: number, r: number, label: string?, pressed: boolean, accent: string?) → void
A round touch button: drop shadow, body, outline, label.
| arg | type | description |
|---|
| cmds | { any } | |
| sk | Skin | |
| x | number | |
| y | number | |
| r | number | |
| label | string? | |
| pressed | boolean | |
| accent | string? | Optional accent colour (diamond and radial buttons use one each). |
stickBase(cmds: { any }, sk: Skin, x: number, y: number, r: number, active: boolean) → void
The ring a stick moves inside.
| arg | type | description |
|---|
| cmds | { any } | |
| sk | Skin | |
| x | number | |
| y | number | |
| r | number | |
| active | boolean | |
thumb(cmds: { any }, sk: Skin, x: number, y: number, r: number, active: boolean) → void
The knob a thumb pushes.
| arg | type | description |
|---|
| cmds | { any } | |
| sk | Skin | |
| x | number | |
| y | number | |
| r | number | |
| active | boolean | |