ludic/examples/library/ui_inputs.ludic
Orkuncakilkaya 9f59000f5b feat(ui): number and key fields, notes, anchored popovers, text-shadow, and pictures as painted
- <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>
2026-09-24 19:55:20 +03:00

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}`)
}
}