Layout and touch

The controls line themselves up. You say what you want, in the order you want it, and they are placed and sized for the screen they are on. This page has where they go, their colours, and how they answer hands; Laying out a panel has groups, grids, pages and fitting a phone.

Plates and lines

Controls go on a plate in the order you make them. A label made just before some controls is their heading, row() starts another line, and a piano keyboard goes along the bottom, across the whole scene.

label("Shape")
const points = dial("points", 3, 12, 5, { step: 1 })
const size = dial("size", 20, 160, 100)
row()
label("Colour")
const colour = select("colour", ["gold", "tomato", "skyblue"])

function draw() {
  background("midnightblue")
  star(width / 2, height / 2, size.value, points.value, colour.value)
}

Groups, columns, grids, pages, how a panel wraps and how it fits a phone are all in Laying out a panel.

Where the plates go

layout({ at: "bottom" })

Call layout before the controls it is for. It takes more: wrapping, fitting the width and a panel of a set size.

A control placed by hand

Every control takes x and y, its top left corner, and has place(x, y) to move it later. A control placed by hand is out of the lines.

const zoom = slider("zoom", 1, 10, 2, { x: 20, y: 20, vertical: true })

Colours

theme sets the colours of all the controls, and colour on one control sets its own.

theme({ accent: "deepskyblue", plate: "#20242c" })
const warm = dial("warm", 0, 1, 0.5, { colour: "tomato" })

With your hands

• Drag up or to the right on a dial to turn it up. The drag is the dial's until you let go, wherever the pointer wanders: off the dial, off the picture.
• Hold Shift to turn a tenth as far. On a touch screen, pull your finger well away from the dial for a quarter.
• Tap twice to put a dial or slider back where it started.
• Tap a slider's track and the handle comes to your finger; drag the handle to move it from where it is.
• Each finger on the keyboard holds its own key, and sliding along plays each key in turn.
• The arrows above the keys step an octave, again and again while one is held, and the keys slide there. A finger on the strip between the arrows drags the keys sideways, and they settle on a whole octave.
• A rotary holds at each notch until you have gone most of the way to the next, then clicks over. Tap a name or a notch to go straight to it.
• When there is more than fits, drag a plate's title, or the room between controls, to move the plates. A drag that starts on a dial still turns the dial.
• On a touch screen the controls are made a little bigger, for fingers.

A press on a control is the control's alone

The scene's onMouseDown and onTouchStart are not called for a press on a control, and mouse.down stays false. So a game that fires on a click does not also fire when a dial is turned. A press anywhere else is the scene's, as always.

In JavaScript, over(x, y) says whether a control (or a tab, or the bar beside plates that can be moved) is at a point, for a scene that wants to know before it treats a point as its own:

function draw() {
  background("midnightblue")
  if (!over(mouse.x, mouse.y)) circle(mouse.x, mouse.y, 20, "gold")
}

The computer's keys

A piano keyboard takes the keys A S D F G H J (white), W E T Y U (black), and Z and X (down and up an octave). A scene that wants those keys for itself turns them off: keyboard(lead, { keys: false }) (keys=False). The scene's own keys and onKeyDown go on working either way.

How they are drawn

The controls are drawn on a canvas of their own, laid exactly over the scene's. So they sit on whatever the scene draws, in 2D or 3D, need no call in draw(), and cost the scene nothing: only a control that changed is drawn again. A scene that draws nothing at all is given a dark backdrop. They go when the scene stops.

A scene that has a function of its own called label, row or group keeps its own.

Related

• Every control
• Laying out a panel
• Keyboard, mouse and touch in a pictures.js scene