Numbers, text and choices
More controls for any program: a number box, a line of text, a readout, a checkbox, choices, a dropdown, a pad for two numbers, a colour picker, a progress bar, a light and a fader.
They are made and laid out like the first controls, are numbers or words in your code in the same way, and take the same options: x, y, colour, size and onChange (on_change in Python).
number, textBox and readout
const lives = number("lives", 0, 9, 3) // − and +, or tap the number and type
const name = textBox("name", "Ada") // tap it and type
let score = 0
readout("score", () => score, { size: "large" })
function draw() {
background("midnightblue")
text(name.value + " has " + lives.value + " lives", 20, 120, "white", 20)
}| JavaScript | Python | What it is |
|---|---|---|
number(label, min, max, start) | number(label, min, max, start) | A number box. Tap − or + to step, hold one to keep stepping (faster and faster), drag up or down on the number, or tap the number and type it. It counts in ones (in tenths over a small range) unless step says otherwise. number(label, target, "setting") ties it to a setting. stepper is the same |
textBox(label, text) | text_box(label, text) | One line of text. Tap it and type: Enter keeps what you typed, Escape puts back what was there. name.value is the text. textBox(label, target, "setting") ties it to a setting |
readout(label, () => value) | readout(label, lambda: value) | Shows a value or a message, and takes no hand. Give it a function (asked every frame), a target and a setting, or nothing: then score.value = 12 says what it shows |
The options of a text box:
| Option | What it does |
|---|---|
placeholder | Pale words shown while the box is empty |
max | The most letters it takes |
width | How wide it is |
onChange (on_change) | A function called with the text as each letter is typed. Python hears it a frame later |
onEnter (on_enter) | A function called with the text when Enter is pressed |
The options of a readout:
| Option | What it does |
|---|---|
unit | Words after the number |
digits | How many digits after the point are shown |
size | "large" for a score |
format | "clock" shows 65 as 1:05. A function makes the words itself |
checkbox, choose, radio and dropdown
const sound = checkbox("sound", true) // sound.on
const mode = choose("mode", ["easy", "medium", "hard"]) // mode.value, mode.index
const planet = dropdown("planet", ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn"], "Earth")| Call | What it is |
|---|---|
checkbox(label, on) | A box that is ticked, with its label beside it. sound.on is true or false, as a toggle's is. checkbox(label, target, "setting") ties it to a setting |
choose(label, choices, start) | One of a few, all in sight side by side: tap one, or slide a finger across them. mode.value is the choice and mode.index its place. Where they do not fit on one line they take two. choose(label, target, "setting") takes the choices from the target |
radio(label, choices, start) | The same, one under another with a round mark each |
dropdown(label, choices, start) | One of a long list. A tap opens the whole list over the controls; a long one is moved with a finger or the wheel; it closes on a pick or a touch outside it |
Which to use: a toggle or a checkbox for yes or no, choose or radio for a few choices that should all be in sight, a select or a rotary where room is short, and a dropdown for a long list.
xyPad, colourPicker, progress and the rest
const lead = makeSynth("lead")
const pad = xyPad("filter", lead, "cutoff", "resonance") // one finger, two settings
const ink = colourPicker("ink", "tomato")
const price = rangeSlider("price", 0, 100, [20, 80])
const bar = progress("loading")
let t = 0
function update(dt) {
t += dt
bar.value = t / 10 // from 0 to 1
}
function draw() {
background("midnightblue")
circle(width / 2, height / 2, 60, ink.value) // a colour, as you would write one
}| JavaScript | Python | What it is |
|---|---|---|
xyPad(label, target, "across", "up") | xy_pad(…) | A square where one finger sets two numbers at once: across is the first and up is the second. pad.x and pad.y are the numbers, and pad.value is both. xyPad(label, [0, 100], [0, 50]) is two plain ranges, starting in the middle (a third number in a range says where). The dot comes to your finger; Shift moves it a tenth as far; two taps put it back. Options: spring (true: it goes back when you let go), size, onChange(x, y) |
colourPicker(label, colour) | colour_picker(…) | A patch of the colour. A tap opens a picker: drag in the square for how strong and how bright, along the strip for the hue, or tap one of sixteen named colours. ink.value is the colour as you would write it ("tomato", "#3a7bd5"), ready for a drawing call. Options: colours (your own named colours, or false for none), onChange(colour). colorPicker (color_picker) is the same |
progress(label, value) | progress(label, value) | A bar that fills, from 0 to 1 (or min to max). Set bar.value, or give it a function. percent: false leaves the number out (percent=False) |
light(label, on) | light(label, on) | A light. ready.on = true; a number from 0 to 1 is how bright; a colour (lamp.value = "red") shines that colour. light("signal", lead) is as bright as a target is loud, and a function is asked every frame |
busy(label) | busy(label) | A ring that goes round while something is happening; wait.on = false stops it |
rangeSlider(label, min, max, [low, high]) | range_slider(…) | A slider with two handles. price.low and price.high are the numbers. The handle nearer your finger moves, and neither passes the other. rangeSlider(label, target, "start", "end") is two settings. onChange(low, high) |
fader(…) | fader(…) | A slider that stands upright with the look of a mixing desk's. It is a slider in every other way: fader("volume", lead, "volume") |
A light and a progress bar that ask a function:
let heat = 20, done = 0
light("hot", () => heat > 90)
progress("loading", () => done / 10)
const wait = busy("working")
function update(dt) {
heat += 10 * dt
done = Math.min(10, done + dt)
if (done >= 10) wait.on = false
}Typing
A canvas cannot be typed into, so while you type a real box for text lies over the control: your device's own keyboard, caret, selection and paste all work. On a phone or tablet the keyboard comes up when your finger lifts, and a number asks for the number keys. What you type goes to the box and not to the scene's keys.
It works the same when the picture is drawn smaller or larger, when the page is scrolled, and when the scene is shut inside a frame, as a preview's is.
Keys
The control you touched last takes the arrow keys.
- On a number box the arrows step it. Shift steps ten at a time, Home and End go to the ends, and Enter types.
- Space ticks a checkbox, and the arrows move among choices.
- On a dropdown Enter opens the list, the arrows move through it, Enter picks and Escape closes.
- The arrows move an XY pad's dot, and the handle of a two-handled slider that was touched last.
- Tab goes to the next control that takes keys.