- <input type="number" min max step>: typed digits replace its value (a minus when min allows one, a point when step has a fraction), Enter or leaving the field commits them held between min and max, the left and right arrows step it. - <input type="key">: Enter or a click starts it listening and the next key is its value, Tab, the arrows and Enter included; Esc stops it listening, Backspace clears it, `shown` names the value, and ui_capturing() tells the host to leave its keys alone (through the frame that ended it). - note="..." under any control's label (.ui-labels > .ui-label + .ui-note); a range's (or number's) value with decimals, format="percent" and a unit. - A popover with `anchor="id"` (the nearest element of that id) or a bare `anchor` (the element before it) sits beside it by `placement` (right, left, bottom, top), its margin the gap, opens to the other side where it would leave the screen, and is kept on it. - A tooltip's title splits into lines at a newline or a written \n. - text-shadow, inherited, drawn sharp under the text. - ui_opacity(): the group opacity a native's draw is at. - border-image is drawn as painted with no background colour, tinted by one, and not at all when that colour is transparent (it drew a white nine-slice). - A picture file is drawn untinted, as a browser draws one; an atlas cell (prefix:name) still takes the color around it, and an <img> with its own color is tinted by it. - The render3d backend loads a picture again when its file changes or appears (a failed load was kept for ever), and at once after ui_image_reload(path); takes a path with a drive letter (C:/...) as a path rather than an atlas; and slices a nine-slice by its texture's own width and height. - ui_inputs.ludic and ui_look.ludic; LANGUAGE.md and the changeset say all of it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
83 lines
3 KiB
Text
83 lines
3 KiB
Text
# ui_inputs.ludic — more of ludic.ui's controls, driven by the keys: a number field takes typed digits
|
|
# (Enter or leaving it commits them, held between min and max) and steps with the arrows; a key field
|
|
# listens for the next key (Tab included), Esc stops it listening and Backspace unbinds it; a range
|
|
# shows its value as a percentage or with decimals and a unit; a label carries a note; an action may
|
|
# call an event named set; and a string prop given a number reads it as text.
|
|
import "ludic.ui"
|
|
import "ui_inputs_parts/Form.ludic"
|
|
import "ui_inputs_parts/Tag.ludic"
|
|
program UiInputs {
|
|
numbers float
|
|
function frame(i: UiInput) -> UiNode {
|
|
ui_input(i)
|
|
ui_show("Form", null, 0.0, 0.0, 400.0, 400.0)
|
|
let root: UiNode = ui_nodes("Form", null)
|
|
ui_place(root, 0.0, 0.0, 400.0, 400.0)
|
|
return root.children[0]
|
|
}
|
|
function keys(tab: bool, shift: bool, enter: bool, left: bool) -> UiInput {
|
|
let i = new UiInput
|
|
i.tab = tab
|
|
i.shift = shift
|
|
i.enter = enter
|
|
i.left = left
|
|
if tab { i.key = Key.Tab }
|
|
if enter { i.key = Key.Enter }
|
|
return i
|
|
}
|
|
function typed(s: string) -> UiInput {
|
|
let i = new UiInput
|
|
i.typed = s
|
|
return i
|
|
}
|
|
function shown_state(page: UiNode) -> string { return page.children[len(page.children) - 1].text }
|
|
function last(n: UiNode) -> string { return n.children[len(n.children) - 1].text }
|
|
entry {
|
|
ui_backend(new UiBackend)
|
|
var page = frame(new UiInput)
|
|
frame(keys(true, false, false, false))
|
|
frame(typed("12"))
|
|
page = frame(keys(false, false, true, false))
|
|
let shown = page.children[0].children[1].children[0].text
|
|
let a = shown_state(page)
|
|
frame(typed("99"))
|
|
page = frame(keys(true, false, false, false))
|
|
let b = shown_state(page)
|
|
frame(keys(true, true, false, false))
|
|
page = frame(keys(false, false, false, true))
|
|
let c = shown_state(page)
|
|
let note = page.children[0].children[0].children[1].text
|
|
frame(keys(true, false, false, false))
|
|
let space = page.children[1].children[1].children[0].text
|
|
frame(keys(false, false, true, false))
|
|
let cap = ui_capturing()
|
|
page = frame(keys(true, false, false, false))
|
|
let d = shown_state(page)
|
|
frame(keys(false, false, true, false))
|
|
let esc = new UiInput
|
|
esc.escape = true
|
|
esc.key = Key.Escape
|
|
page = frame(esc)
|
|
let e = shown_state(page)
|
|
let back = new UiInput
|
|
back.backspace = true
|
|
page = frame(back)
|
|
let f = shown_state(page)
|
|
frame(keys(true, false, false, false))
|
|
let right = new UiInput
|
|
right.right = true
|
|
page = frame(right)
|
|
page = frame(new UiInput)
|
|
let button = page.children[4]
|
|
let click = new UiInput
|
|
click.x = button.x + 2.0
|
|
click.y = button.y + 2.0
|
|
click.down = true
|
|
frame(click)
|
|
let up = new UiInput
|
|
up.x = click.x
|
|
up.y = click.y
|
|
page = frame(up)
|
|
print(`count {shown} {a} | {b} | {c} | {note} | {space} listening {cap} {d} | {e} | {f} | {last(page.children[2])} {last(page.children[3])} | {shown_state(page)} | {page.children[5].text}`)
|
|
}
|
|
}
|