2952 lines
147 KiB
Text
2952 lines
147 KiB
Text
use mod.prelude.widgets_internal.*
|
|
|
|
// Art deco, black and gold. The window is a cabinet of black lacquer: a
|
|
// polished gold rim runs round its edge and round every pane, a thin gold
|
|
// pinstripe beside each rim makes the double line of the period, and the
|
|
// panes are stepped at their corners like a ziggurat. The panes are dark
|
|
// macassar ebony, a fine straight figure under one broad lacquer sheen, calm
|
|
// under the words. The caption band carries the only large ornament: a
|
|
// stepped crest with mother-of-pearl inlays round the title and a gold
|
|
// sunburst fanning out to either side; the big surfaces carry small
|
|
// sunburst fans, studs and pearl wedges in their corners and on their
|
|
// frames, never under their words.
|
|
// A control is a PLATE of satin metal with rounded corners (antique brass,
|
|
// polished gold, champagne, ivory-cream or copper, dark ink on all of them)
|
|
// or of black lacquer in a polished gold rim (cream ink); or a WELL of black
|
|
// lacquer sunk behind the same rim. Knobs are ivory with fluted skirts under
|
|
// spun gold caps, slider thumbs gold streamline wings, toggles gold balls in
|
|
// black pills, the rocker a gold bat-handle lever, the chosen radio a lit
|
|
// lamp among gold beads, lamps LEDs in gold bezels, screens black glass in
|
|
// gold frames with warm amber figures. The light falls from the upper left;
|
|
// polished gold is a mirror: a hot white-gold highlight where it faces the
|
|
// light, a warm darker band where it turns away.
|
|
|
|
// A ROW OF FIELDS IS ONE HEIGHT. The box metrics are stated once here and
|
|
// handed to each field below, so the search box, the number beside it and
|
|
// the drop-down after it stand at one height.
|
|
let field_height = 28.0
|
|
let field_pad_v = mod.theme.mspace_1.top
|
|
let field_radius = 3.0
|
|
// A hairline, for the few stock fields the faces below do not redraw.
|
|
let field_border = 0.5
|
|
|
|
let field_room = fn(w) {
|
|
w.min_height = field_height
|
|
w.padding.top = field_pad_v
|
|
w.padding.bottom = field_pad_v
|
|
}
|
|
let field_face = fn(d) {
|
|
d.border_radius = field_radius
|
|
d.border_size = field_border
|
|
}
|
|
// A field that lays its own parts out inside a frame: only the height.
|
|
let field_frame = fn(w) {
|
|
w.min_height = field_height
|
|
}
|
|
|
|
field_room(mod.widgets.TextInput)
|
|
field_face(mod.widgets.TextInput.draw_bg)
|
|
field_room(mod.widgets.TextInputFlat)
|
|
field_room(mod.widgets.ComboBox)
|
|
field_face(mod.widgets.ComboBox.draw_bg)
|
|
field_room(mod.widgets.DropDown)
|
|
field_face(mod.widgets.DropDown.draw_bg)
|
|
field_room(mod.widgets.DropDown2)
|
|
field_face(mod.widgets.DropDown2.draw_bg)
|
|
field_room(mod.widgets.FieldWell)
|
|
field_face(mod.widgets.FieldWell.draw_bg)
|
|
field_room(mod.widgets.TagField)
|
|
field_face(mod.widgets.TagField.draw_bg)
|
|
field_frame(mod.widgets.NumberField)
|
|
mod.widgets.NumberField.draw_bg.border_radius = field_radius
|
|
field_frame(mod.widgets.ValueInput)
|
|
field_frame(mod.widgets.DateField)
|
|
field_frame(mod.widgets.TimeField)
|
|
field_frame(mod.widgets.DatePicker)
|
|
field_frame(mod.widgets.DateRangePicker)
|
|
mod.widgets.WellInput.min_height = 0.0
|
|
mod.widgets.Window.pass.clear_color = #1f1810
|
|
|
|
// Plain views stop clipping, so a shadow or a lip may fall into the gap
|
|
// beside its control. Scroll views keep their own clip.
|
|
mod.widgets.View.clip_x = false
|
|
mod.widgets.View.clip_y = false
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// SHARED PARTS. Distances in points, negative inside, y down; `px` is one
|
|
// device pixel in points.
|
|
|
|
let g3 = fn(v: float) -> vec3 {
|
|
return vec3(v, v, v)
|
|
}
|
|
|
|
// The palette.
|
|
let ad_cream = fn() -> vec3 {
|
|
return vec3(0.929, 0.886, 0.776)
|
|
}
|
|
let ad_black = fn() -> vec3 {
|
|
return vec3(0.034, 0.031, 0.028)
|
|
}
|
|
let ad_ebony_c = fn() -> vec3 {
|
|
return vec3(0.120, 0.095, 0.060)
|
|
}
|
|
let ad_gold_dk = fn() -> vec3 {
|
|
return vec3(0.270, 0.190, 0.085)
|
|
}
|
|
let ad_gold_md = fn() -> vec3 {
|
|
return vec3(0.640, 0.520, 0.310)
|
|
}
|
|
let ad_gold_lt = fn() -> vec3 {
|
|
return vec3(0.910, 0.830, 0.640)
|
|
}
|
|
let ad_gold_hi = fn() -> vec3 {
|
|
return vec3(1.000, 0.970, 0.880)
|
|
}
|
|
let ad_line_c = fn() -> vec3 {
|
|
return vec3(0.780, 0.670, 0.450)
|
|
}
|
|
let ad_gold_base = fn() -> vec3 {
|
|
return vec3(0.790, 0.660, 0.420)
|
|
}
|
|
let ad_champ = fn() -> vec3 {
|
|
return vec3(0.850, 0.785, 0.640)
|
|
}
|
|
let ad_ivory = fn() -> vec3 {
|
|
return vec3(0.925, 0.890, 0.790)
|
|
}
|
|
let ad_ivory_dk = fn() -> vec3 {
|
|
return vec3(0.640, 0.580, 0.455)
|
|
}
|
|
let ad_brass = fn() -> vec3 {
|
|
return vec3(0.660, 0.555, 0.370)
|
|
}
|
|
let ad_copper = fn() -> vec3 {
|
|
return vec3(0.700, 0.480, 0.330)
|
|
}
|
|
let ad_bronze = fn() -> vec3 {
|
|
return vec3(0.215, 0.140, 0.062)
|
|
}
|
|
|
|
// A rounded box, true radius.
|
|
let md_rbox = fn(p: vec2, c: vec2, h: vec2, r: float) -> float {
|
|
let rr = clamp(r, 0.0, min(h.x, h.y))
|
|
let q = abs(p - c) - h + vec2(rr, rr)
|
|
return min(max(q.x, q.y), 0.0) + length(max(q, vec2(0.0, 0.0))) - rr
|
|
}
|
|
|
|
// A rounded box with a radius per corner (tl, tr, br, bl).
|
|
let md_r4 = fn(p: vec2, c: vec2, h: vec2, r4: vec4) -> float {
|
|
let q0 = p - c
|
|
let rt = mix(r4.y, r4.x, step(q0.x, 0.0))
|
|
let rb = mix(r4.z, r4.w, step(q0.x, 0.0))
|
|
return clamp(mix(rb, rt, step(q0.y, 0.0)), 0.0, min(h.x, h.y))
|
|
}
|
|
let md_rbox4 = fn(p: vec2, c: vec2, h: vec2, r4: vec4) -> float {
|
|
return md_rbox(p, c, h, md_r4(p, c, h, r4))
|
|
}
|
|
|
|
// The outward normal of a rounded box at `p`.
|
|
let ad_nrm = fn(p: vec2, c: vec2, h: vec2, r: float) -> vec2 {
|
|
let q0 = p - c
|
|
let sx = mix(-1.0, 1.0, step(0.0, q0.x))
|
|
let sy = mix(-1.0, 1.0, step(0.0, q0.y))
|
|
let rr = clamp(r, 0.0, min(h.x, h.y))
|
|
let q = abs(q0) - h + vec2(rr, rr)
|
|
var n = vec2(0.0, 1.0)
|
|
if q.x > 0.0 && q.y > 0.0 {
|
|
n = q / max(length(q), 0.0001)
|
|
} else {
|
|
if q.x > q.y {
|
|
n = vec2(1.0, 0.0)
|
|
}
|
|
}
|
|
return vec2(n.x * sx, n.y * sy)
|
|
}
|
|
|
|
// A plate's outline: a box with a radius per corner (tl, tr, br, bl; 0
|
|
// leaves it square), and its outward normal.
|
|
let ad_cut = fn(p: vec2, c: vec2, h: vec2, k4: vec4) -> float {
|
|
return md_rbox4(p, c, h, k4)
|
|
}
|
|
let ad_cut_n = fn(p: vec2, c: vec2, h: vec2, k4: vec4) -> vec2 {
|
|
let e = 0.3
|
|
let gx = md_rbox4(p + vec2(e, 0.0), c, h, k4) - md_rbox4(p - vec2(e, 0.0), c, h, k4)
|
|
let gy = md_rbox4(p + vec2(0.0, e), c, h, k4) - md_rbox4(p - vec2(0.0, e), c, h, k4)
|
|
let g = vec2(gx, gy)
|
|
let l = length(g)
|
|
if l < 0.0001 {
|
|
return vec2(0.0, 1.0)
|
|
}
|
|
return g / l
|
|
}
|
|
|
|
// A box STEPPED at its corners like a ziggurat: two steps of `s` points.
|
|
let ad_step = fn(p: vec2, c: vec2, h: vec2, s: float) -> float {
|
|
let s1 = min(s, min(h.x, h.y) * 0.25)
|
|
let a = md_rbox(p, c, h - vec2(0.0, 2.0 * s1), 0.0)
|
|
let b = md_rbox(p, c, h - vec2(s1, s1), 0.0)
|
|
let e = md_rbox(p, c, h - vec2(2.0 * s1, 0.0), 0.0)
|
|
return min(a, min(b, e))
|
|
}
|
|
let ad_step_n = fn(p: vec2, c: vec2, h: vec2, s: float) -> vec2 {
|
|
let e = 0.3
|
|
let gx = ad_step(p + vec2(e, 0.0), c, h, s) - ad_step(p - vec2(e, 0.0), c, h, s)
|
|
let gy = ad_step(p + vec2(0.0, e), c, h, s) - ad_step(p - vec2(0.0, e), c, h, s)
|
|
let g = vec2(gx, gy)
|
|
let l = length(g)
|
|
if l < 0.0001 {
|
|
return vec2(0.0, 1.0)
|
|
}
|
|
return g / l
|
|
}
|
|
|
|
// The corners a button group asks for: a corner written as 0 is a square
|
|
// join, any other the family's cut.
|
|
let md_corners = fn(tl: float, tr: float, br: float, bl: float, r: float) -> vec4 {
|
|
return vec4(mix(r, step(0.5, tl) * r, step(0.0, tl)), mix(r, step(0.5, tr) * r, step(0.0, tr)), mix(r, step(0.5, br) * r, step(0.0, br)), mix(r, step(0.5, bl) * r, step(0.0, bl)))
|
|
}
|
|
|
|
let md_seg = fn(p: vec2, a: vec2, b: vec2) -> float {
|
|
let pa = p - a
|
|
let ba = b - a
|
|
let k = clamp(dot(pa, ba) / max(dot(ba, ba), 0.0001), 0.0, 1.0)
|
|
return length(pa - ba * k)
|
|
}
|
|
|
|
// A stroke tapering from `r0` at `a` to `r1` at `b`: .x its distance, .y the
|
|
// way along it.
|
|
let ad_taper = fn(p: vec2, a: vec2, b: vec2, r0: float, r1: float) -> vec2 {
|
|
let pa = p - a
|
|
let ba = b - a
|
|
let t = clamp(dot(pa, ba) / max(dot(ba, ba), 0.0001), 0.0, 1.0)
|
|
return vec2(length(pa - ba * t) - mix(r0, r1, t), t)
|
|
}
|
|
|
|
let md_grow = fn(rp: vec2, rs: vec2, m: float) -> vec4 {
|
|
return vec4(rp.x - m, rp.y - m, rs.x + 2.0 * m, rs.y + 2.0 * m)
|
|
}
|
|
|
|
// THE EBONY at a point `w` (points): macassar, its figure running straight
|
|
// down the panel in streaks of a few points to a few tens, wandering a
|
|
// little sideways as a real board does; fine dark pores a device pixel or
|
|
// two wide; a grain of one device pixel. Low in contrast, so a word reads
|
|
// the same on any streak.
|
|
let ad_ebony = fn(w: vec2, px: float) -> vec3 {
|
|
let wx = w.x + (Finish.noise(vec2(w.x * 0.0035, w.y * 0.0021)) - 0.5) * 32.0 + (Finish.noise(vec2(w.x * 0.02, w.y * 0.008) + vec2(3.0, 1.0)) - 0.5) * 5.0
|
|
let s1 = Finish.noise(vec2(wx * 0.055, w.y * 0.0018 + 7.0))
|
|
let s2 = Finish.noise(vec2(wx * 0.21, w.y * 0.006 + 2.0))
|
|
let fig = s1 * 0.65 + s2 * 0.35
|
|
var col = mix(vec3(0.086, 0.068, 0.042), vec3(0.168, 0.122, 0.078), smoothstep(0.38, 0.86, fig))
|
|
let pore = Finish.noise(vec2(wx * 1.1, w.y * 0.03 + 11.0))
|
|
col = col * (1.0 - 0.22 * smoothstep(0.72, 0.9, pore))
|
|
let lift = Finish.noise(vec2(wx * 0.75 + 4.0, w.y * 0.02))
|
|
col = col * (1.0 + 0.10 * smoothstep(0.75, 0.92, lift))
|
|
return col + g3(Finish.grain(w / px, 0.004))
|
|
}
|
|
|
|
// MOTHER-OF-PEARL: a cool white with soft swirling bands of rose and of
|
|
// green-blue, as the nacre turns.
|
|
let ad_pearl = fn(p: vec2) -> vec3 {
|
|
let n1 = Finish.noise(p * 0.16 + vec2(3.0, 7.0))
|
|
let n2 = Finish.noise(p * 0.45 + vec2(11.0, 2.0))
|
|
let sw = sin((p.x * 0.55 + p.y * 0.9) * 0.8 + n1 * 6.0)
|
|
var col = vec3(0.860, 0.850, 0.820)
|
|
col = mix(col, vec3(0.950, 0.860, 0.880), smoothstep(0.2, 0.9, sw) * 0.5)
|
|
col = mix(col, vec3(0.790, 0.900, 0.880), smoothstep(0.3, 0.9, 0.0 - sw) * 0.4)
|
|
return col * (0.86 + 0.18 * n2)
|
|
}
|
|
|
|
// A POLISHED GOLD RIM `w` points wide just inside an edge: `d` the edge's
|
|
// distance (negative inside), `n` its outward normal. Rounded over and lit
|
|
// from the upper left as a mirror: the half that faces the light carries a
|
|
// hot white-gold highlight, the turn away a warm darker band, the far side
|
|
// the deep gold of the floor's reflection; a dark hairline at both of its
|
|
// edges keeps it crisp on black. Premultiplied.
|
|
let ad_rim = fn(d: float, n: vec2, w: float, px: float, glint: float) -> vec4 {
|
|
let u = clamp(0.0 - d / max(w, 0.01), 0.0, 1.0)
|
|
let k = 1.0 - 2.0 * u
|
|
let bulge = sqrt(max(1.0 - k * k, 0.0))
|
|
let facing = dot(n * k, vec2(-0.45, -0.89))
|
|
let t = clamp(0.5 + 0.55 * facing + 0.15 * bulge, 0.0, 1.0)
|
|
var col = mix(ad_gold_dk(), ad_gold_md(), smoothstep(0.0, 0.45, t))
|
|
col = mix(col, ad_gold_lt(), smoothstep(0.45, 0.78, t))
|
|
col = mix(col, ad_gold_hi(), smoothstep(0.80, 1.0, t) * clamp(glint, 0.0, 1.5))
|
|
col = col * (1.0 - 0.30 * exp(0.0 - (facing + 0.1) * (facing + 0.1) / 0.03) * bulge)
|
|
let e = Finish.band(d, 0.0, px, px) + Finish.band(d, w - px, w, px)
|
|
col = mix(col, ad_gold_dk() * 0.5, clamp(e, 0.0, 1.0) * 0.5)
|
|
let a = Finish.band(d, 0.0, w, px)
|
|
return vec4(col * a, a)
|
|
}
|
|
|
|
// A thin gold pinstripe `lw` wide at `at` points inside an edge.
|
|
let ad_pin = fn(d: float, at: float, lw: float, px: float, amt: float) -> vec4 {
|
|
let a = Finish.band(d, at, at + lw, px) * amt
|
|
return vec4(ad_line_c() * a, a)
|
|
}
|
|
|
|
// The shadow a raised part throws on the ground, straight down: tight, gone
|
|
// within half the gap to a neighbour. Premultiplied black.
|
|
let ad_drop = fn(p: vec2, c: vec2, h: vec2, r: float, amt: float) -> vec4 {
|
|
let t = Finish.drop(p, c, h, r, vec2(0.0, 0.8), 0.6) * 0.55 * amt
|
|
let s = Finish.drop(p, c, h, r, vec2(0.0, 1.6), 1.2) * 0.40 * amt
|
|
let a = t + s * (1.0 - t)
|
|
return vec4(0.0, 0.0, 0.0, a)
|
|
}
|
|
|
|
// Focus: a warm white-gold ring of a device pixel and a half, a point and a
|
|
// half outside.
|
|
let ad_focus = fn(d: float, px: float, focus: float) -> vec4 {
|
|
let f = Finish.ring_out(d, 1.5, 1.5 + 1.5 * px, px) * 0.95 * focus
|
|
let c = vec3(1.0, 0.86, 0.52)
|
|
return vec4(c * f, f)
|
|
}
|
|
|
|
// BLACK LACQUER over the box `lo`..`hi`: a mirror. A soft band of the room's
|
|
// light across its upper part, the face darkening toward its foot, and a
|
|
// warm glow of its own gold rim reflected along the foot. `k` scales the
|
|
// sheen (a tall surface takes less, so no band crosses its words).
|
|
let ad_lacq = fn(p: vec2, lo: vec2, hi: vec2, base: vec3, k: float) -> vec3 {
|
|
let t = clamp((p.y - lo.y) / max(hi.y - lo.y, 1.0), 0.0, 1.0)
|
|
var col = base * (1.30 - 0.50 * t)
|
|
let band = exp(0.0 - (t - 0.20) * (t - 0.20) / 0.010)
|
|
col = col + vec3(0.075, 0.068, 0.058) * band * 0.65 * k
|
|
col = col + vec3(0.090, 0.060, 0.020) * smoothstep(0.78, 1.0, t) * 0.30
|
|
return col
|
|
}
|
|
|
|
// POLISHED METAL over the box `lo`..`hi`: a mirror gradient, bright along
|
|
// the top where it faces the light, a warm darker band below the middle, a
|
|
// little light again at the foot from the floor; satin brushing across it.
|
|
// `contrast` 1 is polished gold, less is champagne or ivory. Pressed, the
|
|
// face is dished: the gradient turns over.
|
|
let ad_metal = fn(p: vec2, lo: vec2, hi: vec2, base: vec3, contrast: float, hover: float, press: float) -> vec3 {
|
|
let t0 = clamp((p.y - lo.y) / max(hi.y - lo.y, 1.0), 0.0, 1.0)
|
|
let t = mix(t0, 1.0 - t0, press * 0.8)
|
|
let up = 1.0 - smoothstep(0.0, 0.45, t)
|
|
let dip = exp(0.0 - (t - 0.68) * (t - 0.68) / 0.03)
|
|
let foot = smoothstep(0.85, 1.0, t)
|
|
var col = base * (1.0 + contrast * (0.24 * up - 0.24 * dip + 0.10 * foot))
|
|
col = mix(col, vec3(1.0, 0.97, 0.88), exp(0.0 - t * t / 0.006) * 0.35 * contrast * (1.0 - press))
|
|
let br = Finish.brushed(p, vec2(1.0, 0.0), 0.4) - 0.5
|
|
col = col * (1.0 + br * 0.06)
|
|
col = Finish.lift(col, 0.20 * hover * (1.0 - press))
|
|
col = col * (1.0 - 0.14 * press)
|
|
return min(col, vec3(1.0, 1.0, 1.0))
|
|
}
|
|
|
|
// A shaped piece of polished gold (a thumb, a cap, a stud): `d` its
|
|
// distance, `n` its outward normal, `depth` how far in its rounded edge
|
|
// runs, `t` 0..1 down it for the mirror gradient.
|
|
let ad_gold_shape = fn(d: float, n: vec2, depth: float, t: float, hover: float, dis: float) -> vec3 {
|
|
let ins = clamp(0.0 - d / max(depth, 0.01), 0.0, 1.0)
|
|
let facing = dot(n, vec2(-0.45, -0.89)) * (1.0 - ins)
|
|
var col = ad_gold_base() * (1.06 + 0.22 * (1.0 - smoothstep(0.0, 0.5, t)) - 0.26 * exp(0.0 - (t - 0.72) * (t - 0.72) / 0.03))
|
|
col = mix(col, ad_gold_hi(), smoothstep(0.30, 0.95, facing) * 0.85)
|
|
col = mix(col, ad_gold_dk(), smoothstep(0.15, 0.95, 0.0 - facing) * 0.75)
|
|
col = Finish.lift(col, 0.12 * hover)
|
|
col = mix(col, mix(col, g3(Finish.lum(col)), 0.7) * 0.6, dis)
|
|
return min(col, vec3(1.0, 1.0, 1.0))
|
|
}
|
|
|
|
// A polished gold dome (a stud, a bead): lit on its upper left.
|
|
let ad_dome = fn(dst: vec4, p: vec2, c: vec2, r: float, px: float, base: vec3) -> vec4 {
|
|
let q = (p - c) / max(r, 0.01)
|
|
let lit = clamp(0.5 - 0.6 * dot(q, vec2(0.45, 0.85)), 0.0, 1.0)
|
|
var col = mix(ad_gold_dk(), base, 0.25 + 0.75 * lit)
|
|
col = mix(col, ad_gold_hi(), exp(0.0 - dot(q - vec2(-0.35, -0.4), q - vec2(-0.35, -0.4)) / 0.06) * 0.85)
|
|
let d = length(p - c) - r
|
|
col = mix(col, ad_gold_dk() * 0.5, Finish.band(d, 0.0, max(px, 0.4), px) * 0.6)
|
|
let a = Finish.cover(d, px)
|
|
return Finish.over(dst, vec4(col * a, a))
|
|
}
|
|
|
|
// A SUNK WELL behind a polished gold rim: the fill, the shade falling in
|
|
// under the top edge, the rim, and a faint catch of gold light on the ground
|
|
// under its foot. `d`, `n` the well's edge; `c`, `h`, `r` its box for the
|
|
// inner shadow.
|
|
let ad_well = fn(p: vec2, c: vec2, h: vec2, r: float, d: float, n: vec2, px: float, fill: vec3, shade: float, w: float, dis: float) -> vec4 {
|
|
var col = fill
|
|
let sh = clamp(Finish.inset(p, c, h - vec2(w, w), max(r - w, 0.0), vec2(0.0, 1.4), 1.2), 0.0, 1.0)
|
|
col = mix(col, vec3(0.0, 0.0, 0.0), sh * shade)
|
|
let a = Finish.cover(d, px)
|
|
let lip = Finish.ring_out(d, 0.0, px, px) * clamp(n.y, 0.0, 1.0) * 0.30
|
|
var out = vec4(ad_gold_md() * lip, lip)
|
|
out = Finish.over(out, vec4(col * a, a))
|
|
return Finish.over(out, ad_rim(d, n, w, px, 1.0 - 0.7 * dis) * mix(1.0, 0.5, dis))
|
|
}
|
|
let ad_well_r = fn(p: vec2, c: vec2, h: vec2, r: float, px: float, fill: vec3, shade: float, w: float, dis: float) -> vec4 {
|
|
let d = md_rbox(p, c, h, r)
|
|
let n = ad_nrm(p, c, h, r)
|
|
return ad_well(p, c, h, r, d, n, px, fill, shade, w, dis)
|
|
}
|
|
|
|
// A dark plaque's indicator jewel, where a stock face carries a lamp.
|
|
let md_led = fn(p: vec2, lc: vec2, rad: float, px: float, ink: vec3, lit: float, glow: float) -> vec4 {
|
|
let q = p - lc
|
|
let d = length(q) - rad
|
|
let k = clamp(length(q) / max(rad, 0.001), 0.0, 1.0)
|
|
let on = mix(Finish.lift(ink, 0.35), ink * 0.9, smoothstep(0.2, 1.0, k))
|
|
let off = vec3(0.10, 0.08, 0.06)
|
|
var col = mix(off, on, lit)
|
|
col = mix(col, ad_gold_md(), Finish.band(d, 0.0, max(px, 0.6), px))
|
|
let a = Finish.cover(d, px)
|
|
let ha = glow * lit * exp(0.0 - max(d, 0.0) / 0.8) * step(0.0, d) * (1.0 - a)
|
|
var out = vec4(ink * ha, ha)
|
|
return Finish.over(out, vec4(col * a, a))
|
|
}
|
|
|
|
// A QUARTER SUNBURST in a corner, in the corner's own frame: `q` in points
|
|
// from the corner along its two edges, both into the surface. A small gold
|
|
// quarter disc on the corner, nine rays fanning out from it, long and short
|
|
// by turns, and a fine arc closing the long ones. `s` its reach in points.
|
|
let ad_fan = fn(dst: vec4, q: vec2, s: float, px: float, amt: float) -> vec4 {
|
|
var out = dst
|
|
let r = length(q)
|
|
if r > s + 2.0 || q.x < -1.0 || q.y < -1.0 {
|
|
return out
|
|
}
|
|
let phi = atan2(q.y, q.x)
|
|
let st = 1.5707963 / 8.0
|
|
let k = phi / st
|
|
let kf = floor(k + 0.5)
|
|
let dperp = abs(k - kf) * st * r
|
|
let long = 1.0 - step(0.25, abs(fract(kf * 0.5)))
|
|
let len = mix(s * 0.68, s, long)
|
|
let ray = Finish.cover(dperp - max(px * 0.5, 0.32), px) * Finish.cover(r - len, px) * step(r, len + 1.0) * smoothstep(3.5, 5.0, r)
|
|
let a = ray * amt * 0.9
|
|
out = Finish.over(out, vec4(ad_line_c() * a, a))
|
|
let arc = Finish.cover(abs(r - s * 0.68) - max(px * 0.5, 0.3), px) * amt * 0.7
|
|
out = Finish.over(out, vec4(ad_line_c() * arc, arc))
|
|
out = ad_dome(out, q, vec2(0.0, 0.0), 4.0, px, ad_gold_base())
|
|
return out
|
|
}
|
|
|
|
// The fan set into a box's corner `k` (0 top left, 1 top right, 2 bottom
|
|
// right, 3 bottom left), `ins` points in from its edges.
|
|
let ad_corner_fan = fn(dst: vec4, p: vec2, lo: vec2, hi: vec2, k: float, ins: float, s: float, px: float, amt: float) -> vec4 {
|
|
let right = step(0.5, k) * step(k, 2.5)
|
|
let bottom = step(1.5, k)
|
|
let x = mix(p.x - lo.x, hi.x - p.x, right) - ins
|
|
let y = mix(p.y - lo.y, hi.y - p.y, bottom) - ins
|
|
return ad_fan(dst, vec2(x, y), s, px, amt)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// BUTTONS. One face for the family: a plate of satin metal with rounded
|
|
// corners in its own polished rim, its edge bevelled toward the light, a
|
|
// tight shadow under it, the legend in dark ink. `kind`: 0 antique brass
|
|
// (the plain button), 1 polished gold (primary), 2 champagne (secondary), 3
|
|
// ivory-cream (tertiary), 4 copper (the one that deletes, its legend in
|
|
// oxblood), 5 the outline (the ground shows inside a double gold line), 6
|
|
// bare until touched (flatter), 7 champagne (the flat root and its sizes),
|
|
// 8 black lacquer (the quiet plates of a strip: a tab, a closed drop-down).
|
|
// Pressed, a plate sinks and its mirror turns over; disabled, it goes flat
|
|
// and dull and a small unlit lamp shows at its left end. The quad is grown
|
|
// by `m` for the shadow and the focus ring.
|
|
let ad_face = fn(p: vec2, lo: vec2, hi: vec2, kind: float, hover: float, press: float) -> vec3 {
|
|
if kind > 7.5 {
|
|
return Finish.lift(ad_lacq(p, lo, hi, ad_black(), 1.0 + 1.6 * hover), 0.04 * hover)
|
|
}
|
|
if kind < 0.5 {
|
|
return ad_metal(p, lo, hi, ad_brass(), 0.8, hover, press)
|
|
}
|
|
if kind < 1.5 {
|
|
return ad_metal(p, lo, hi, ad_gold_base(), 1.0, hover, press)
|
|
}
|
|
if kind < 2.5 {
|
|
return ad_metal(p, lo, hi, ad_champ(), 0.7, hover, press)
|
|
}
|
|
if kind < 3.5 {
|
|
return ad_metal(p, lo, hi, ad_ivory(), 0.35, hover, press)
|
|
}
|
|
if kind < 4.5 {
|
|
return ad_metal(p, lo, hi, ad_copper(), 0.85, hover, press)
|
|
}
|
|
return ad_metal(p, lo, hi, ad_champ(), 0.7, hover, press)
|
|
}
|
|
let ad_button = fn(pos: vec2, size: vec2, o: vec2, px: float, hover: float, down: float, focus: float, dis: float, loading: float, anim: float, k4: vec4, kind: float, m: float) -> vec4 {
|
|
let p = pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let live = 1.0 - dis
|
|
let press = down * live
|
|
let hov = hover * live
|
|
let lo = vec2(Finish.snap(o.x, px), Finish.snap(o.y, px)) - o
|
|
let hi = vec2(Finish.snap(o.x + size.x, px), Finish.snap(o.y + size.y, px)) - o
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let d = ad_cut(p, c, h, k4)
|
|
let n = ad_cut_n(p, c, h, k4)
|
|
let outline = step(4.5, kind) * step(kind, 5.5)
|
|
let bare = step(5.5, kind) * step(kind, 6.5)
|
|
let show = mix(1.0, clamp(hov * 0.85 + press, 0.0, 1.0), bare)
|
|
let solid = 1.0 - max(outline, bare)
|
|
var out = ad_drop(p, c, h, 2.0, (1.0 - 0.7 * press) * mix(1.0, 0.5, dis) * solid)
|
|
let w = 1.5
|
|
let lacq = step(7.5, kind)
|
|
var face = ad_face(p, lo + vec2(w, w), hi - vec2(w, w), kind, hov, press)
|
|
// disabled: the metal goes flat and dull, the lacquer greyed
|
|
let tt = clamp((p.y - lo.y) / max(hi.y - lo.y, 1.0), 0.0, 1.0)
|
|
let dull = mix(vec3(0.440, 0.410, 0.350) * (1.06 - 0.12 * tt), mix(face, g3(Finish.lum(face)), 0.65) * 0.55 + vec3(0.025, 0.020, 0.015), lacq)
|
|
face = mix(face, dull, dis)
|
|
// the plate's bevelled shoulder inside the rim, lit from the upper
|
|
// left: light along its top and left, shade along its foot and right
|
|
let bev = Finish.bevel(d + w, n, 1.8, vec2(-0.45, -0.89)) * Finish.cover(d + w, px) * (1.0 - press)
|
|
face = face * (1.0 + 0.22 * max(bev, 0.0) * (1.0 - lacq) + 0.22 * min(bev, 0.0))
|
|
face = face + vec3(0.05, 0.045, 0.04) * max(bev, 0.0) * lacq
|
|
// pressed: the surround's shade falls in under the top edge
|
|
let sh = clamp(Finish.inset(p, c, h - vec2(w, w), 1.5, vec2(0.0, 1.7), 1.2), 0.0, 1.0) * press
|
|
face = mix(face, face * 0.3, sh * 0.85)
|
|
let fa = Finish.cover(d + w * 0.5, px)
|
|
out = Finish.over(out, vec4(face * fa, fa) * solid)
|
|
// the outline and the bare kinds: a faint gold wash under the pointer
|
|
let wash = max(outline, bare) * (0.10 * hov + 0.18 * press) * fa
|
|
out = Finish.over(out, vec4(ad_gold_md() * wash, wash))
|
|
// the pinstripe inside the rim, on the lacquer and the outline
|
|
let pin = max(lacq, outline) * mix(0.85, 0.35, dis)
|
|
out = Finish.over(out, ad_pin(d, w + 1.4, max(px, 0.6), px, pin))
|
|
// disabled, a small lamp at the plate's left end is out: a slot of
|
|
// milky glass in a dark seat
|
|
let slot = dis * solid * (1.0 - lacq) * step(50.0, size.x)
|
|
if slot > 0.5 {
|
|
let sc = vec2(lo.x + w + 4.4, c.y)
|
|
let sd = md_rbox(p, sc, vec2(1.3, 4.6), 1.3)
|
|
let sa = Finish.cover(sd - 0.7, px)
|
|
out = Finish.over(out, vec4(vec3(0.16, 0.13, 0.09) * sa, sa))
|
|
let lt = clamp((p.y - (sc.y - 4.6)) / 9.2, 0.0, 1.0)
|
|
let lc = mix(vec3(0.80, 0.76, 0.66), vec3(0.60, 0.56, 0.47), lt)
|
|
let la = Finish.cover(sd, px)
|
|
out = Finish.over(out, vec4(lc * la, la))
|
|
}
|
|
// the rim: pressed, its light turns over, so the plaque reads sunk in it
|
|
out = Finish.over(out, ad_rim(d, n * (1.0 - 2.0 * press), w, px, mix(1.0, 0.3, dis) * (1.0 + 0.5 * hov)) * mix(1.0, 0.5, dis) * show)
|
|
out = Finish.over(out, ad_focus(d, px, focus * live))
|
|
if loading > 0.0 {
|
|
let sdf = Sdf2d.viewport(p)
|
|
let rr = max(min(h.x, h.y) - 5.0, 2.0)
|
|
let a0 = anim * 2.0 * PI
|
|
sdf.arc_round_caps(c.x, c.y, rr, a0, a0 + 1.5 * PI, 1.2)
|
|
sdf.fill(vec4(0.93, 0.79, 0.48, loading))
|
|
out = Finish.over(out, sdf.result)
|
|
}
|
|
return out
|
|
}
|
|
|
|
// Every button template: the flat root (and the sizes, which share its draw
|
|
// object) wears champagne gold; the roles are specialised below.
|
|
mod.widgets.ButtonFlat.clip_x = false
|
|
mod.widgets.ButtonFlat.clip_y = false
|
|
mod.widgets.ButtonFlat.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 8.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.ButtonFlat.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return self.host_over(ad_button(self.pos, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, md_corners(self.border_radius_tl, self.border_radius_tr, self.border_radius_br, self.border_radius_bl, 3.5), 7.0, 8.0), 8.0)
|
|
}
|
|
mod.widgets.Button.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return self.host_over(ad_button(self.pos, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, md_corners(self.border_radius_tl, self.border_radius_tr, self.border_radius_br, self.border_radius_bl, 3.5), 0.0, 8.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonPrimary.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return self.host_over(ad_button(self.pos, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, md_corners(self.border_radius_tl, self.border_radius_tr, self.border_radius_br, self.border_radius_bl, 3.5), 1.0, 8.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonSecondary.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return self.host_over(ad_button(self.pos, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, md_corners(self.border_radius_tl, self.border_radius_tr, self.border_radius_br, self.border_radius_bl, 3.5), 2.0, 8.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonTertiary.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return self.host_over(ad_button(self.pos, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, md_corners(self.border_radius_tl, self.border_radius_tr, self.border_radius_br, self.border_radius_bl, 3.5), 3.0, 8.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonDanger.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return self.host_over(ad_button(self.pos, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, md_corners(self.border_radius_tl, self.border_radius_tr, self.border_radius_br, self.border_radius_bl, 3.5), 4.0, 8.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonOutline.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return self.host_over(ad_button(self.pos, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, md_corners(self.border_radius_tl, self.border_radius_tr, self.border_radius_br, self.border_radius_bl, 3.5), 5.0, 8.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonFlatter.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return self.host_over(ad_button(self.pos, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, md_corners(self.border_radius_tl, self.border_radius_tr, self.border_radius_br, self.border_radius_bl, 3.5), 6.0, 8.0), 8.0)
|
|
}
|
|
// The large button is the black lacquer one, as the plain button.
|
|
mod.widgets.ButtonLg.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return self.host_over(ad_button(self.pos, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, md_corners(self.border_radius_tl, self.border_radius_tr, self.border_radius_br, self.border_radius_bl, 4.5), 0.0, 8.0), 8.0)
|
|
}
|
|
|
|
// Templates that draw a face of their own on top of these roots keep the
|
|
// plain quad: the grown one is only for the faces written here.
|
|
mod.widgets.CloseButton.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
mod.widgets.CopyButton.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
mod.widgets.BurgerButton.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
mod.widgets.ButtonFloating.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
mod.widgets.ButtonFloatingSm.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
mod.widgets.glass.CutButton.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
|
|
// Geometry: one 26 point row, 14 points either side of the word.
|
|
mod.widgets.ButtonFlat.padding = mod.turtle.Inset{left: 12.0 right: 12.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.Button.padding = mod.turtle.Inset{left: 14.0 right: 14.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.ButtonPrimary.padding = mod.turtle.Inset{left: 14.0 right: 14.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.ButtonSecondary.padding = mod.turtle.Inset{left: 14.0 right: 14.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.ButtonDanger.padding = mod.turtle.Inset{left: 14.0 right: 14.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.ButtonTertiary.padding = mod.turtle.Inset{left: 14.0 right: 14.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.ButtonOutline.padding = mod.turtle.Inset{left: 14.0 right: 14.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.ButtonIcon.padding = mod.turtle.Inset{left: 8.0 right: 8.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.Button.icon_walk = mod.turtle.Walk{width: 14.0 height: Fit}
|
|
mod.widgets.ButtonFlat.min_height = 26.0
|
|
mod.widgets.Button.min_height = 26.0
|
|
mod.widgets.ButtonXs.min_height = 0.0
|
|
mod.widgets.ButtonXs.padding = mod.turtle.Inset{left: 7.0 right: 7.0 top: 0.0 bottom: 0.0}
|
|
mod.widgets.ButtonXs.draw_text.text_style = mod.theme.font_label{font_size: 5.5}
|
|
mod.widgets.ButtonXl.draw_text.text_style = mod.theme.font_label{font_size: 9.5}
|
|
mod.widgets.ButtonSm.min_height = 0.0
|
|
|
|
// Words on the plates: the wide geometric legend face in dark ink; gold on
|
|
// the outline and on a bare button, which stand on the ground.
|
|
mod.widgets.ButtonFlat.draw_text.text_style = mod.theme.font_label{font_size: 6.5}
|
|
mod.widgets.ButtonFlat.draw_text.color = #22170a
|
|
mod.widgets.ButtonFlat.draw_text.color_hover = #160e05
|
|
mod.widgets.ButtonFlat.draw_text.color_down = #160e05
|
|
mod.widgets.ButtonFlat.draw_text.color_focus = #22170a
|
|
mod.widgets.ButtonFlat.draw_text.color_disabled = #3d3529
|
|
mod.widgets.Button.draw_text.text_style = mod.theme.font_label{font_size: 7.0}
|
|
mod.widgets.Button.draw_text.color = #1e1408
|
|
mod.widgets.Button.draw_text.color_hover = #120b03
|
|
mod.widgets.Button.draw_text.color_down = #120b03
|
|
mod.widgets.Button.draw_text.color_focus = #1e1408
|
|
mod.widgets.Button.draw_text.color_disabled = #3d3529
|
|
// An icon on a plate is in the plate's dark ink, whatever colour its
|
|
// caller asked for (the catalogue asks for the working cream, which a
|
|
// brass plate would swallow); on the outline and on a bare button, which
|
|
// stand on the dark ground, it is gold.
|
|
mod.widgets.ButtonFlat.draw_icon.get_color = fn() {
|
|
let base = self.eval_gradient()
|
|
let k = vec3(0.110, 0.075, 0.035)
|
|
return vec4(k * base.a, base.a) * self.opacity
|
|
}
|
|
mod.widgets.Button.draw_icon.get_color = fn() {
|
|
let base = self.eval_gradient()
|
|
let k = vec3(0.110, 0.075, 0.035)
|
|
return vec4(k * base.a, base.a) * self.opacity
|
|
}
|
|
mod.widgets.ButtonOutline.draw_icon.get_color = fn() {
|
|
let base = self.eval_gradient()
|
|
let k = vec3(0.880, 0.780, 0.560)
|
|
return vec4(k * base.a, base.a) * self.opacity
|
|
}
|
|
mod.widgets.ButtonFlat.draw_icon_end.get_color = fn() {
|
|
let base = self.eval_gradient()
|
|
let k = vec3(0.110, 0.075, 0.035)
|
|
return vec4(k * base.a, base.a) * self.opacity
|
|
}
|
|
mod.widgets.Button.draw_icon_end.get_color = fn() {
|
|
let base = self.eval_gradient()
|
|
let k = vec3(0.110, 0.075, 0.035)
|
|
return vec4(k * base.a, base.a) * self.opacity
|
|
}
|
|
mod.widgets.ButtonOutline.draw_icon_end.get_color = fn() {
|
|
let base = self.eval_gradient()
|
|
let k = vec3(0.880, 0.780, 0.560)
|
|
return vec4(k * base.a, base.a) * self.opacity
|
|
}
|
|
mod.widgets.ButtonFlatter.draw_icon_end.get_color = fn() {
|
|
let base = self.eval_gradient()
|
|
let k = vec3(0.880, 0.780, 0.560)
|
|
return vec4(k * base.a, base.a) * self.opacity
|
|
}
|
|
// A compound button's second line, on the plate: a quieter brown.
|
|
mod.widgets.ButtonFlat.draw_description.color = #4a3a22
|
|
mod.widgets.ButtonFlat.draw_description.text_style = mod.theme.font_regular{font_size: 8.0}
|
|
mod.widgets.ButtonFlatter.draw_icon.get_color = fn() {
|
|
let base = self.eval_gradient()
|
|
let k = vec3(0.880, 0.780, 0.560)
|
|
return vec4(k * base.a, base.a) * self.opacity
|
|
}
|
|
mod.widgets.ButtonLg.draw_text.text_style = mod.theme.font_label{font_size: 8.5}
|
|
mod.widgets.ButtonLg.draw_text.color = #1e1408
|
|
mod.widgets.ButtonLg.draw_text.color_hover = #120b03
|
|
mod.widgets.ButtonLg.draw_text.color_down = #120b03
|
|
mod.widgets.ButtonLg.draw_text.color_focus = #1e1408
|
|
mod.widgets.ButtonLg.draw_text.color_disabled = #3d3529
|
|
mod.widgets.ButtonSm.draw_text.text_style = mod.theme.font_label{font_size: 6.5}
|
|
mod.widgets.ButtonPrimary.draw_text.text_style = mod.theme.font_label{font_size: 7.0}
|
|
mod.widgets.ButtonPrimary.draw_text.color = #1c1206
|
|
mod.widgets.ButtonPrimary.draw_text.color_hover = #120b03
|
|
mod.widgets.ButtonPrimary.draw_text.color_down = #120b03
|
|
mod.widgets.ButtonPrimary.draw_text.color_focus = #1c1206
|
|
mod.widgets.ButtonPrimary.draw_text.color_disabled = #3d3529
|
|
mod.widgets.ButtonPrimary.draw_icon.color = #1c1206
|
|
mod.widgets.ButtonSecondary.draw_text.text_style = mod.theme.font_label{font_size: 7.0}
|
|
mod.widgets.ButtonSecondary.draw_text.color = #22170a
|
|
mod.widgets.ButtonSecondary.draw_text.color_hover = #160e05
|
|
mod.widgets.ButtonSecondary.draw_text.color_down = #160e05
|
|
mod.widgets.ButtonSecondary.draw_text.color_focus = #22170a
|
|
mod.widgets.ButtonSecondary.draw_icon.color = #22170a
|
|
mod.widgets.ButtonTertiary.draw_text.text_style = mod.theme.font_label{font_size: 7.0}
|
|
mod.widgets.ButtonTertiary.draw_text.color = #2a1f10
|
|
mod.widgets.ButtonTertiary.draw_text.color_hover = #1c1408
|
|
mod.widgets.ButtonTertiary.draw_text.color_down = #1c1408
|
|
mod.widgets.ButtonTertiary.draw_text.color_focus = #2a1f10
|
|
mod.widgets.ButtonTertiary.draw_icon.color = #2a1f10
|
|
mod.widgets.ButtonDanger.draw_text.text_style = mod.theme.font_label{font_size: 7.0}
|
|
mod.widgets.ButtonDanger.draw_text.color = #3a0c06
|
|
mod.widgets.ButtonDanger.draw_text.color_hover = #2a0703
|
|
mod.widgets.ButtonDanger.draw_text.color_down = #2a0703
|
|
mod.widgets.ButtonDanger.draw_text.color_focus = #3a0c06
|
|
mod.widgets.ButtonDanger.draw_icon.color = #3a0c06
|
|
mod.widgets.ButtonOutline.draw_text.text_style = mod.theme.font_label{font_size: 7.0}
|
|
mod.widgets.ButtonOutline.draw_text.color = #e0c891
|
|
mod.widgets.ButtonOutline.draw_text.color_hover = #f0dcaa
|
|
mod.widgets.ButtonOutline.draw_text.color_down = #f0dcaa
|
|
mod.widgets.ButtonOutline.draw_text.color_focus = #e0c891
|
|
mod.widgets.ButtonOutline.draw_text.color_disabled = #6a5c44
|
|
mod.widgets.ButtonOutline.draw_icon.color = #e0c891
|
|
mod.widgets.ButtonFlatter.draw_text.color = #e0c891
|
|
mod.widgets.ButtonFlatter.draw_text.color_hover = #f0dcaa
|
|
mod.widgets.ButtonFlatter.draw_text.color_down = #f0dcaa
|
|
mod.widgets.ButtonFlatter.draw_text.color_focus = #e0c891
|
|
mod.widgets.ButtonFlat.draw_bg.loading_color = #ecd08e
|
|
|
|
// The window's own buttons stand on the black lacquer: cream strokes.
|
|
mod.widgets.DesktopButton.draw_bg.color = uniform(#ede2c6)
|
|
mod.widgets.DesktopButton.draw_bg.color_hover = uniform(#fff6df)
|
|
mod.widgets.DesktopButton.draw_bg.color_down = uniform(#e0d4b6)
|
|
mod.widgets.DesktopButton.draw_bg.bg_color_hover = uniform(#ede2c620)
|
|
mod.widgets.DesktopButton.draw_bg.bg_color_down = uniform(#ede2c638)
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// CHECK BOXES. A 14 point well of black lacquer, its corners rounded, in
|
|
// its gold rim; set, a plaque of polished gold fills it with a black check;
|
|
// mixed, the gold with a black dash.
|
|
mod.widgets.CheckBoxFlat.clip_x = false
|
|
mod.widgets.CheckBoxFlat.clip_y = false
|
|
mod.widgets.CheckBoxFlat.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 4.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.CheckBoxCustom.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
mod.widgets.CheckBoxFlat.padding = mod.turtle.Inset{left: 0.0 right: 3.0 top: 3.0 bottom: 3.0}
|
|
mod.widgets.CheckBoxFlat.label_walk.margin = mod.turtle.Inset{left: 22.0 right: 3.0 top: 0.0 bottom: 0.0}
|
|
mod.widgets.CheckBoxFlat.draw_bg.size = uniform(14.0)
|
|
mod.widgets.CheckBoxFlat.min_height = 24.0
|
|
mod.widgets.CheckBoxFlat.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 4.0
|
|
let size = self.rect_size
|
|
let p = self.pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let o = self.rect_pos
|
|
let sz = self.size
|
|
let live = 1.0 - self.disabled
|
|
let x0 = mix(1.0, size.x - sz - 1.0, self.mark_at_end)
|
|
let lo = vec2(Finish.snap(o.x + x0, px), Finish.snap(o.y + (size.y - sz) * 0.5, px)) - o
|
|
let h = vec2(sz * 0.5, sz * 0.5)
|
|
let c = lo + h
|
|
let k = mix(2.5, h.y, step(20.0, self.border_radius))
|
|
let k4 = vec4(k, k, k, k)
|
|
let d = ad_cut(p, c, h, k4)
|
|
let n = ad_cut_n(p, c, h, k4)
|
|
let on = max(self.active, self.mixed)
|
|
let press = self.down * live
|
|
var fill = mix(vec3(0.016, 0.014, 0.013), vec3(0.045, 0.038, 0.030), self.hover * live)
|
|
fill = mix(fill, vec3(0.06, 0.05, 0.04), self.disabled)
|
|
var out = ad_well(p, c, h, k, d, n, px, fill, 0.6, 1.2, self.disabled)
|
|
out = Finish.over(out, ad_pin(d, 1.8, max(px, 0.6), px, 0.55 * self.hover * live * (1.0 - on)))
|
|
// the gold when set
|
|
let hf = h - vec2(1.2, 1.2)
|
|
var gcol = ad_metal(p, c - hf, c + hf, ad_gold_base(), 1.0, self.hover * live, press)
|
|
gcol = mix(gcol, vec3(0.30, 0.26, 0.20), self.disabled)
|
|
let ga = Finish.cover(ad_cut(p, c, hf, k4 - vec4(0.5, 0.5, 0.5, 0.5)), px) * on
|
|
out = Finish.over(out, vec4(gcol * ga, ga))
|
|
let kk = sz / 14.0
|
|
let m0 = lo + vec2(3.6, 7.3) * kk
|
|
let m1 = lo + vec2(6.0, 9.8) * kk
|
|
let m2 = lo + vec2(10.6, 4.3) * kk
|
|
let ck = min(md_seg(p, m0, m1), md_seg(p, m1, m2)) - 0.9 * kk
|
|
let d0 = lo + vec2(4.0, 7.0) * kk
|
|
let d1 = lo + vec2(10.0, 7.0) * kk
|
|
let dash = md_seg(p, d0, d1) - 0.9 * kk
|
|
let show_ck = self.active * (1.0 - self.mixed)
|
|
let mk = mix(Finish.cover(ck, px) * show_ck, Finish.cover(dash, px), self.mixed)
|
|
let ink = mix(vec3(0.07, 0.045, 0.02), vec3(0.15, 0.13, 0.10), self.disabled)
|
|
out = Finish.over(out, vec4(ink * mk, mk))
|
|
let err = Finish.band(d, 0.0, 2.0 * px, px) * self.error
|
|
out = Finish.over(out, vec4(vec3(0.75, 0.20, 0.15) * err, err))
|
|
return Finish.over(out, ad_focus(d, px, self.focus * live))
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// TOGGLES. A 38 by 16 point pill of black lacquer sunk in its gold rim, a
|
|
// 12 point ball of polished gold riding in it with its own small shadow;
|
|
// while on, the check at its left end burns warm white; while off, a small
|
|
// ring is engraved at its right end. The slide switch (below) fills its
|
|
// track with gold while on and rides an ivory dome.
|
|
let ad_toggle = fn(pos: vec2, size: vec2, o: vec2, px: float, active: float, drag_pos: float, drag: float, hover: float, down: float, focus: float, dis: float, err: float, at_end: float, slide: float) -> vec4 {
|
|
let m = 4.0
|
|
let p = pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let live = 1.0 - dis
|
|
let tw = 38.0
|
|
let th = 16.0
|
|
let x0 = mix(1.0, size.x - tw - 1.0, at_end)
|
|
let lo = vec2(Finish.snap(o.x + x0, px), Finish.snap(o.y + (size.y - th) * 0.5, px)) - o
|
|
let c = lo + vec2(tw * 0.5, th * 0.5)
|
|
let h = vec2(tw * 0.5, th * 0.5)
|
|
let r = h.y
|
|
let d = md_rbox(p, c, h, r)
|
|
let on = active
|
|
var fill = mix(vec3(0.016, 0.014, 0.013), vec3(0.040, 0.034, 0.028), hover * live)
|
|
fill = mix(fill, vec3(0.06, 0.05, 0.04), dis)
|
|
var out = ad_well_r(p, c, h, r, px, fill, 0.6, 1.3, dis)
|
|
out = Finish.over(out, ad_pin(d, 1.9, max(px, 0.6), px, 0.55 * hover * live * (1.0 - on)))
|
|
let inner = Finish.cover(d + 1.3, px)
|
|
let cq = p - (lo + vec2(8.0, 8.0))
|
|
let ck = min(md_seg(cq, vec2(-3.0, 0.2), vec2(-1.0, 2.4)), md_seg(cq, vec2(-1.0, 2.4), vec2(3.2, -2.4))) - 0.75
|
|
if slide > 0.5 {
|
|
// the slide switch: the gold of the lit track, a check cut in it
|
|
let hf = h - vec2(1.3, 1.3)
|
|
var gcol = ad_metal(p, c - hf, c + hf, ad_gold_base(), 1.0, hover * live, 0.0)
|
|
gcol = mix(gcol, vec3(0.30, 0.26, 0.20), dis)
|
|
let ga = Finish.cover(md_rbox(p, c, hf, hf.y), px) * on
|
|
out = Finish.over(out, vec4(gcol * ga, ga))
|
|
let cka = Finish.cover(ck, px) * on * 0.85
|
|
out = Finish.over(out, vec4(vec3(0.10, 0.065, 0.025) * cka, cka))
|
|
} else {
|
|
// the toggle: the track stays black; while on, the check at its
|
|
// left end burns warm white in a short amber glow; while off, a
|
|
// small ring is engraved at its right end
|
|
let lit = on * live
|
|
let cg = exp(0.0 - max(ck, 0.0) / 1.2) * lit * 0.6 * inner
|
|
out = Finish.over(out, vec4(vec3(1.0, 0.68, 0.30) * cg, cg))
|
|
let cka = Finish.cover(ck, px) * on
|
|
let ckc = mix(vec3(0.40, 0.36, 0.30), vec3(1.0, 0.94, 0.78), live)
|
|
out = Finish.over(out, vec4(ckc * cka, cka))
|
|
let rq = p - (lo + vec2(tw - 8.0, 8.0))
|
|
let ring = abs(length(rq) - 2.2) - 0.45
|
|
let ra = Finish.cover(ring, px) * (1.0 - on) * mix(0.75, 0.4, dis)
|
|
out = Finish.over(out, vec4(ad_gold_md() * ra, ra))
|
|
}
|
|
let ea = Finish.band(d, 0.0, 2.0 * px, px) * err
|
|
out = Finish.over(out, vec4(vec3(0.75, 0.20, 0.15) * ea, ea))
|
|
// the ball: polished gold on the toggle, an ivory dome on the slide
|
|
let kt = clamp(mix(on, drag_pos, drag), 0.0, 1.0)
|
|
let kr = 6.0
|
|
let kx = Finish.snap(o.x + lo.x + 2.0 + kr + kt * (tw - 4.0 - 2.0 * kr), px) - o.x
|
|
let kc = vec2(kx, c.y)
|
|
let press = down * live
|
|
out = Finish.over(out, ad_drop(p, kc, vec2(kr, kr), kr, (0.9 - 0.5 * press) * mix(1.0, 0.5, dis)))
|
|
let q = p - kc
|
|
let kd = length(q) - kr
|
|
let kn = q / max(length(q), 0.001)
|
|
let lit2 = clamp(0.5 - 0.55 * dot(q / kr, vec2(0.45, 0.85)), 0.0, 1.0)
|
|
let iv = mix(ad_ivory_dk(), ad_ivory(), 0.3 + 0.7 * lit2)
|
|
let gd = mix(ad_gold_dk(), ad_gold_base(), 0.3 + 0.7 * lit2)
|
|
var face = mix(gd, iv, slide)
|
|
face = mix(face, vec3(1.0, 0.99, 0.95), exp(0.0 - dot(q / kr - vec2(-0.35, -0.42), q / kr - vec2(-0.35, -0.42)) / 0.05) * 0.65)
|
|
face = Finish.lift(face, 0.12 * hover * live * (1.0 - press))
|
|
face = mix(face, face * 0.88, press)
|
|
face = mix(face, mix(face, g3(Finish.lum(face)), 0.7) * 0.5, dis)
|
|
let ka = Finish.cover(kd, px)
|
|
out = Finish.over(out, vec4(face * ka, ka))
|
|
out = Finish.over(out, ad_rim(kd, kn, 1.1, px, live) * mix(1.0, 0.5, dis))
|
|
return Finish.over(out, ad_focus(d, px, focus * live))
|
|
}
|
|
mod.widgets.ToggleFlat.label_walk.margin = mod.turtle.Inset{left: 46.0 right: 3.0 top: 0.0 bottom: 0.0}
|
|
mod.widgets.ToggleFlat.draw_bg.size = 14.0
|
|
mod.widgets.ToggleFlat.min_height = 24.0
|
|
mod.widgets.ToggleFlat.draw_bg.pill_aspect = 2.7143
|
|
mod.widgets.ToggleFlat.draw_bg.knob_inset = 7.0
|
|
mod.widgets.ToggleFlat.clip_x = false
|
|
mod.widgets.ToggleFlat.clip_y = false
|
|
mod.widgets.ToggleFlat.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 4.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.ToggleFlat.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return ad_toggle(self.pos, self.rect_size, self.rect_pos, px, self.active, self.drag_pos, self.drag, self.hover, self.down, self.focus, self.disabled, self.error, self.mark_at_end, 0.0)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// RADIOS. A round seat of black lacquer in its gold rim holding a polished
|
|
// gold bead; the chosen one is a lamp instead, burning white at its middle
|
|
// and warm at its rim, its glow held in the seat.
|
|
let ad_radio = fn(p: vec2, c: vec2, rad: float, px: float, hover: float, down: float, focus: float, active: float, dis: float) -> vec4 {
|
|
let live = 1.0 - dis
|
|
let q = p - c
|
|
let lr = length(q)
|
|
let d = lr - rad
|
|
var fill = mix(vec3(0.016, 0.014, 0.013), vec3(0.045, 0.038, 0.030), hover * live)
|
|
fill = mix(fill, vec3(0.06, 0.05, 0.04), dis)
|
|
var out = ad_well_r(p, c, vec2(rad, rad), rad, px, fill, 0.6, 1.2, dis)
|
|
out = Finish.over(out, ad_pin(d, 1.8, max(px, 0.6), px, 0.45 * hover * live * (1.0 - active)))
|
|
let br = rad * 0.58
|
|
// the glow of the lamp, held inside its seat
|
|
let on = active * live
|
|
let glow = exp(0.0 - max(lr - br, 0.0) / 1.3) * on * Finish.cover(d + 1.2, px) * 0.75
|
|
out = Finish.over(out, vec4(vec3(1.0, 0.70, 0.34) * glow, glow))
|
|
// not chosen: a polished gold bead, a little lower while pressed
|
|
let bead = ad_dome(vec4(0.0, 0.0, 0.0, 0.0), p, c, br, px, mix(ad_gold_lt(), vec3(0.36, 0.31, 0.24), dis))
|
|
out = Finish.over(out, bead * (1.0 - active) * (1.0 - 0.3 * down * live))
|
|
// chosen: the lamp itself, its middle burning white, warm at its rim
|
|
let t = clamp(lr / br, 0.0, 1.0)
|
|
var lc = mix(vec3(1.0, 0.99, 0.95), vec3(1.0, 0.78, 0.46), smoothstep(0.25, 1.0, t))
|
|
lc = mix(lc, vec3(0.46, 0.42, 0.35), dis)
|
|
let la = Finish.cover(lr - br, px) * active
|
|
out = Finish.over(out, vec4(lc * la, la))
|
|
let gq = q / br - vec2(-0.32, -0.38)
|
|
let gl = exp(0.0 - dot(gq, gq) / 0.04) * la * 0.55
|
|
out = Finish.over(out, vec4(vec3(1.0, 1.0, 1.0) * gl, gl))
|
|
return Finish.over(out, ad_focus(d, px, focus * live))
|
|
}
|
|
|
|
mod.widgets.RadioButtonFlat.clip_x = false
|
|
mod.widgets.RadioButtonFlat.clip_y = false
|
|
mod.widgets.RadioButtonFlat.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 4.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.glass.RadioButton.draw_bg.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
|
|
}
|
|
mod.widgets.RadioButtonFlat.padding = mod.turtle.Inset{left: 0.0 right: 3.0 top: 3.0 bottom: 3.0}
|
|
mod.widgets.RadioButtonFlat.label_walk.margin = mod.turtle.Inset{left: 22.0 right: 3.0 top: 0.0 bottom: 0.0}
|
|
mod.widgets.RadioButtonFlat.draw_bg.size = uniform(14.0)
|
|
mod.widgets.RadioButtonFlat.min_height = 24.0
|
|
mod.widgets.RadioButtonFlat.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 4.0
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let o = self.rect_pos
|
|
let sz = self.size
|
|
let lo = vec2(Finish.snap(o.x + 1.0, px), Finish.snap(o.y + (self.rect_size.y - sz) * 0.5, px)) - o
|
|
let c = lo + vec2(sz * 0.5, sz * 0.5)
|
|
return ad_radio(p, c, sz * 0.5, px, self.hover, self.down, self.focus, self.active, self.disabled)
|
|
}
|
|
// The flatter radio is its word alone: chosen, the word sits on a small
|
|
// lacquer plaque in a gold rim; under the pointer a faint gold wash.
|
|
mod.widgets.RadioButtonFlatter.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 4.0
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let o = self.rect_pos
|
|
let live = 1.0 - self.disabled
|
|
let lo = vec2(Finish.snap(o.x - 3.0, px), Finish.snap(o.y + 1.0, px)) - o
|
|
let hi = vec2(Finish.snap(o.x + self.rect_size.x + 3.0, px), Finish.snap(o.y + self.rect_size.y - 1.0, px)) - o
|
|
let h = (hi - lo) * 0.5
|
|
let c = lo + h
|
|
let k4 = vec4(2.5, 2.5, 2.5, 2.5)
|
|
let d = ad_cut(p, c, h, k4)
|
|
let wash = Finish.cover(d, px) * 0.15 * self.hover * live * (1.0 - self.active)
|
|
var out = vec4(ad_gold_md() * wash, wash)
|
|
let face = ad_lacq(p, lo, hi, ad_black(), 1.0)
|
|
let a = Finish.cover(d, px) * self.active
|
|
out = Finish.over(out, vec4(face * a, a))
|
|
out = Finish.over(out, ad_rim(d, ad_cut_n(p, c, h, k4), 1.2, px, 1.0) * self.active)
|
|
return Finish.over(out, ad_focus(d, px, self.focus * live))
|
|
}
|
|
|
|
// Radio tabs (the catalogue's Docs, Controls, Actions, Theme): lacquer
|
|
// plaques in their rims; the chosen one champagne gold pressed in, its word
|
|
// dark.
|
|
mod.widgets.RadioButtonTabFlat.padding = mod.turtle.Inset{left: 14.0 right: 14.0 top: 6.0 bottom: 2.0}
|
|
mod.widgets.RadioButtonTabFlat.label_walk.margin = mod.turtle.Inset{left: 0.0 right: 0.0 top: 0.0 bottom: 0.0}
|
|
mod.widgets.RadioButtonTabFlat.min_height = 26.0
|
|
mod.widgets.RadioButtonTabFlat.clip_x = false
|
|
mod.widgets.RadioButtonTabFlat.clip_y = false
|
|
mod.widgets.RadioButtonTabFlat.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 6.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.RadioButtonTabFlat.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let k4 = vec4(3.0, 3.0, 3.0, 3.0)
|
|
let dark = ad_button(self.pos, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, 0.0, 0.0, k4, 8.0, 6.0)
|
|
let gold = ad_button(self.pos, self.rect_size, self.rect_pos, px, self.hover * 0.5, 0.6, self.focus, self.disabled, 0.0, 0.0, k4, 2.0, 6.0)
|
|
return mix(dark, gold, self.active)
|
|
}
|
|
mod.widgets.RadioButtonTabFlat.draw_text.color = #ede2c6
|
|
mod.widgets.RadioButtonTabFlat.draw_text.color_active = #1c1206
|
|
mod.widgets.RadioButtonTabFlat.draw_text.color_disabled = #7a6e5a
|
|
mod.widgets.RadioButtonTabFlat.draw_text.text_style = mod.theme.font_label{font_size: 7.0}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// SLIDERS. A gold tube: a capsule three and a half points high in its
|
|
// polished rim, a black slot inside, polished gold filling the slot up to
|
|
// the value; fine gold ticks above it. The thumb is a gold streamline wing:
|
|
// an upright capsule on the value with three feathers swept back from its
|
|
// shoulder, each shorter than the one above it, with its own shadow. Every
|
|
// slider's quad grows for the wing, its shadow and the focus ring.
|
|
let ad_tube = fn(p: vec2, c: vec2, h: vec2, px: float, f0: float, f1: float, dis: float, hover: float) -> vec4 {
|
|
let r = h.y
|
|
var out = ad_well_r(p, c, h, r, px, vec3(0.012, 0.011, 0.010), 0.5, 1.4, dis)
|
|
let w = 1.4
|
|
let fh = vec2(max((f1 - f0) * 0.5, 0.0), max(h.y - w - 0.5, 0.6))
|
|
let fc = vec2((f0 + f1) * 0.5, c.y)
|
|
let fd = md_rbox(p, fc, fh, fh.y)
|
|
var fcol = ad_metal(p, fc - fh - vec2(0.0, 0.8), fc + fh + vec2(0.0, 0.8), ad_gold_base(), 1.0, hover, 0.0)
|
|
fcol = mix(fcol, vec3(0.30, 0.26, 0.20), dis)
|
|
let fa = Finish.cover(fd, px) * step(0.01, f1 - f0) * Finish.cover(md_rbox(p, c, h, r) + w, px)
|
|
return Finish.over(out, vec4(fcol * fa, fa))
|
|
}
|
|
|
|
// The distance to a quadratic curve from `A` through the pull of `B` to `C`
|
|
// (.x), and how far along it the nearest point lies (.y, 0..1).
|
|
let ad_bez = fn(pos: vec2, A: vec2, B: vec2, C: vec2) -> vec2 {
|
|
let a = B - A
|
|
let b = A - 2.0 * B + C
|
|
let c = a * 2.0
|
|
let d = A - pos
|
|
let kk = 1.0 / max(dot(b, b), 0.0001)
|
|
let kx = kk * dot(a, b)
|
|
let ky = kk * (2.0 * dot(a, a) + dot(d, b)) / 3.0
|
|
let kz = kk * dot(d, a)
|
|
let p = ky - kx * kx
|
|
let p3 = p * p * p
|
|
let q = kx * (2.0 * kx * kx - 3.0 * ky) + kz
|
|
var h = q * q + 4.0 * p3
|
|
var res = 0.0
|
|
var tt = 0.0
|
|
if h >= 0.0 {
|
|
h = sqrt(h)
|
|
let x0 = (h - q) * 0.5
|
|
let x1 = (0.0 - h - q) * 0.5
|
|
let u0 = sign(x0) * pow(abs(x0), 1.0 / 3.0)
|
|
let u1 = sign(x1) * pow(abs(x1), 1.0 / 3.0)
|
|
tt = clamp(u0 + u1 - kx, 0.0, 1.0)
|
|
let e = d + (c + b * tt) * tt
|
|
res = dot(e, e)
|
|
} else {
|
|
let z = sqrt(0.0 - p)
|
|
let v = acos(clamp(q / (p * z * 2.0), -1.0, 1.0)) / 3.0
|
|
let m = cos(v)
|
|
let n = sin(v) * 1.732050808
|
|
let t0 = clamp((m + m) * z - kx, 0.0, 1.0)
|
|
let t1 = clamp((0.0 - n - m) * z - kx, 0.0, 1.0)
|
|
let e0 = d + (c + b * t0) * t0
|
|
let e1 = d + (c + b * t1) * t1
|
|
let r0 = dot(e0, e0)
|
|
let r1 = dot(e1, e1)
|
|
res = min(r0, r1)
|
|
tt = mix(t1, t0, step(r0, r1))
|
|
}
|
|
return vec2(sqrt(res), tt)
|
|
}
|
|
|
|
// A feather of the wing: a stroke along the curve `A`, `B`, `C`, tapering
|
|
// from `r0` at its root to a rounded tip of `r1`, rounded across, lit along
|
|
// its top, with a dark groove along its edge where it lies over the next.
|
|
let ad_feather = fn(dst: vec4, p: vec2, A: vec2, B: vec2, C: vec2, r0: float, r1: float, t: float, px: float, hover: float, dis: float) -> vec4 {
|
|
let bz = ad_bez(p, A, B, C)
|
|
let u = 1.0 - bz.y
|
|
let q = A * u * u + B * 2.0 * u * bz.y + C * bz.y * bz.y
|
|
let axis = p - q
|
|
let rr = mix(r0, r1, bz.y)
|
|
let d = bz.x - rr
|
|
let n = axis / max(length(axis), 0.0001)
|
|
var col = ad_gold_shape(d, n, rr * 1.2, t, hover, dis)
|
|
col = mix(col, ad_gold_dk() * 0.35, Finish.band(d, 0.0, max(px, 0.55), px) * 0.8)
|
|
let fa = Finish.cover(d, px)
|
|
return Finish.over(dst, vec4(col * fa, fa))
|
|
}
|
|
let ad_wing = fn(p: vec2, kc: vec2, s: float, px: float, hover: float, press: float, dis: float) -> vec4 {
|
|
let live = 1.0 - dis
|
|
let bh = vec2(5.0, 8.5) * s
|
|
let bc = kc + vec2(0.0, 0.5 * s)
|
|
var out = ad_drop(p, bc, bh, bh.x, (1.0 - 0.5 * press) * mix(1.0, 0.5, dis))
|
|
out = Finish.over(out, ad_drop(p, kc + vec2(-9.5, -5.0) * s, vec2(9.0, 4.5) * s, 3.0 * s, 0.5 * (1.0 - 0.5 * press)))
|
|
let t = clamp((p.y - (kc.y - 12.0 * s)) / (21.0 * s), 0.0, 1.0)
|
|
let hv = hover * live * (1.0 - press)
|
|
if p.x < kc.x + 3.0 * s && p.y < kc.y + 2.5 * s && p.y > kc.y - 14.5 * s && p.x > kc.x - 22.0 * s {
|
|
out = ad_feather(out, p, kc + vec2(0.0, -1.0) * s, kc + vec2(-6.5, -1.3) * s, kc + vec2(-10.8, -3.4) * s, 2.2 * s, 1.0 * s, t, px, hv, dis)
|
|
out = ad_feather(out, p, kc + vec2(0.0, -4.1) * s, kc + vec2(-8.5, -4.6) * s, kc + vec2(-14.0, -7.0) * s, 2.2 * s, 1.0 * s, t, px, hv, dis)
|
|
out = ad_feather(out, p, kc + vec2(0.0, -7.2) * s, kc + vec2(-10.5, -7.9) * s, kc + vec2(-17.2, -10.3) * s, 2.3 * s, 1.05 * s, t, px, hv, dis)
|
|
}
|
|
// the body, over the roots of the feathers
|
|
let db = md_rbox(p, bc, bh, bh.x)
|
|
let bn = ad_nrm(p, bc, bh, bh.x)
|
|
var bcol = ad_gold_shape(db, bn, 2.4 * s, t, hv, dis)
|
|
bcol = mix(bcol, bcol * 0.88, press)
|
|
bcol = mix(bcol, ad_gold_dk() * 0.4, Finish.band(db, 0.0, max(px, 0.5), px) * 0.75)
|
|
let ba = Finish.cover(db, px)
|
|
return Finish.over(out, vec4(bcol * ba, ba))
|
|
}
|
|
|
|
// Fine gold ticks above a track: one every tenth of the travel, the ends
|
|
// and the middle longer.
|
|
let ad_ticks = fn(p: vec2, x0: float, span: float, ytop: float, px: float, dis: float) -> vec4 {
|
|
let f = (p.x - x0) / max(span, 1.0) * 10.0
|
|
let fi = floor(f + 0.5)
|
|
let dx = abs(p.x - (x0 + fi / 10.0 * span))
|
|
let major = 1.0 - step(0.1, abs(fi * 0.2 - floor(fi * 0.2 + 0.5)))
|
|
let len = mix(2.0, 3.4, major)
|
|
let inr = step(-0.5, fi) * step(fi, 10.5)
|
|
let tk = Finish.cover(dx - max(px * 0.5, 0.3), px) * step(ytop - len, p.y) * step(p.y, ytop) * inr * mix(0.85, 0.4, dis)
|
|
return vec4(ad_line_c() * tk, tk)
|
|
}
|
|
|
|
mod.widgets.SliderFlat.height = 36.0
|
|
mod.widgets.SliderFlat.clip_x = false
|
|
mod.widgets.SliderFlat.clip_y = false
|
|
mod.widgets.SliderFlat.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 18.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.SliderFlat.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 18.0
|
|
let size = self.rect_size
|
|
let p = self.pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let o = self.rect_pos
|
|
let live = 1.0 - self.disabled
|
|
let cy = Finish.snap(o.y + size.y - 9.0, px) - o.y
|
|
let x0 = Finish.snap(o.x + 1.0, px) - o.x
|
|
let x1 = Finish.snap(o.x + size.x - 1.0, px) - o.x
|
|
let w = x1 - x0
|
|
let span = w - 18.0
|
|
let kx = x0 + 9.0 + self.slide_pos * span
|
|
let ox = x0 + 9.0 + self.origin_pos * span
|
|
let f0 = mix(x0 + 2.0, min(ox, kx), self.arc_origin)
|
|
let f1 = mix(kx, max(ox, kx), self.arc_origin)
|
|
var out = ad_ticks(p, x0 + 9.0, span, cy - 6.0, px, self.disabled)
|
|
out = Finish.over(out, ad_tube(p, vec2((x0 + x1) * 0.5, cy), vec2(w * 0.5, 4.5), px, f0, f1, self.disabled, max(self.hover, self.drag) * live))
|
|
let kc = vec2(Finish.snap(o.x + kx, px) - o.x, cy)
|
|
out = Finish.over(out, ad_wing(p, kc, 1.0, px, max(self.hover, self.focus * 0.5), self.drag * live, self.disabled))
|
|
return Finish.over(out, ad_focus(md_rbox(p, kc + vec2(0.0, 0.5), vec2(5.0, 8.5), 5.0), px, self.focus * live))
|
|
}
|
|
mod.widgets.SliderFlat.text_input.draw_text.text_style = mod.theme.font_regular{font_size: 9.5}
|
|
|
|
// The range slider: the same tube, gold between the two ends, a round gold
|
|
// coin on each end with a ring engraved in it, pressed while it is the one
|
|
// held.
|
|
let ad_coin = fn(p: vec2, c: vec2, rad: float, px: float, hover: float, press: float, dis: float) -> vec4 {
|
|
var out = ad_drop(p, c, vec2(rad, rad), rad, (1.0 - 0.5 * press) * mix(1.0, 0.5, dis))
|
|
let q = p - c
|
|
let d = length(q) - rad
|
|
let n = q / max(length(q), 0.001)
|
|
let t = clamp((p.y - (c.y - rad)) / (2.0 * rad), 0.0, 1.0)
|
|
var col = ad_gold_shape(d, n, rad * 0.45, t, hover * (1.0 - press), dis)
|
|
col = mix(col, col * 0.88, press)
|
|
col = mix(col, ad_gold_dk() * 0.5, Finish.band(d, 0.0, max(px, 0.45), px) * 0.6)
|
|
let a = Finish.cover(d, px)
|
|
out = Finish.over(out, vec4(col * a, a))
|
|
let ring = Finish.band(d, rad * 0.42, rad * 0.42 + max(px, 0.5), px) * 0.7
|
|
out = Finish.over(out, vec4(ad_gold_dk() * 0.6 * ring, ring))
|
|
let ringl = Finish.band(d, rad * 0.42 + max(px, 0.5), rad * 0.42 + 2.0 * max(px, 0.5), px) * 0.5
|
|
return Finish.over(out, vec4(ad_gold_hi() * ringl, ringl))
|
|
}
|
|
mod.widgets.RangeSliderFlat.handle_size = 16.0
|
|
mod.widgets.RangeSliderFlat.track_inset = 1.0
|
|
mod.widgets.RangeSliderFlat.clip_x = false
|
|
mod.widgets.RangeSliderFlat.clip_y = false
|
|
mod.widgets.RangeSliderFlat.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 6.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.RangeSliderFlat.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 6.0
|
|
let size = self.rect_size
|
|
let p = self.pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let o = self.rect_pos
|
|
let live = 1.0 - self.disabled
|
|
let top = self.label_px
|
|
let cy = Finish.snap(o.y + top + (size.y - top) * 0.5, px) - o.y
|
|
let x0 = Finish.snap(o.x + 1.0, px) - o.x
|
|
let x1 = Finish.snap(o.x + size.x - 1.0, px) - o.x
|
|
let w = x1 - x0
|
|
let span = max(size.x - self.inset_px * 2.0 - self.handle_px, 1.0)
|
|
let sx = self.inset_px + self.handle_px * 0.5 + self.start_pos * span
|
|
let ex = self.inset_px + self.handle_px * 0.5 + self.end_pos * span
|
|
var out = ad_tube(p, vec2((x0 + x1) * 0.5, cy), vec2(w * 0.5, 4.5), px, sx, ex, self.disabled, max(self.hover, self.drag) * live)
|
|
let k0 = vec2(Finish.snap(o.x + sx, px) - o.x, cy)
|
|
let k1 = vec2(Finish.snap(o.x + ex, px) - o.x, cy)
|
|
out = Finish.over(out, ad_coin(p, k0, 7.0, px, max(self.hot_start, self.focus * 0.5) * live, self.drag * self.hot_start * live, self.disabled))
|
|
out = Finish.over(out, ad_coin(p, k1, 7.0, px, max(self.hot_end, self.focus * 0.5) * live, self.drag * self.hot_end * live, self.disabled))
|
|
return out
|
|
}
|
|
|
|
// The minimal slider: a gold hairline (a dark device pixel over a bright
|
|
// one), a brighter gold thread along it to the thumb, and the wing a size
|
|
// smaller riding on it.
|
|
mod.widgets.SliderMinimal.clip_x = false
|
|
mod.widgets.SliderMinimal.clip_y = false
|
|
mod.widgets.SliderMinimal.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 16.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.SliderMinimal.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 16.0
|
|
let size = self.rect_size
|
|
let p = self.pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let o = self.rect_pos
|
|
let live = 1.0 - self.disabled
|
|
let cy = Finish.snap(o.y + size.y - 6.0, px) - o.y
|
|
let kr = 5.0
|
|
let kx = kr + self.slide_pos * (size.x - 2.0 * kr)
|
|
let inx = step(0.0, p.x) * step(p.x, size.x)
|
|
let dark = step(cy - px, p.y) * step(p.y, cy) * inx
|
|
let light = step(cy, p.y) * step(p.y, cy + px) * inx
|
|
let thread = step(cy - 2.0 * px, p.y) * step(p.y, cy + px) * step(p.x, kx) * inx
|
|
var out = vec4(0.0, 0.0, 0.0, 0.0)
|
|
let la = light * 0.75 * mix(1.0, 0.5, self.disabled)
|
|
out = Finish.over(out, vec4(ad_gold_md() * la, la))
|
|
let da = dark * 0.9
|
|
out = Finish.over(out, vec4(vec3(0.0, 0.0, 0.0) * da, da))
|
|
let tcol = mix(ad_gold_lt(), vec3(0.36, 0.31, 0.24), self.disabled)
|
|
out = Finish.over(out, vec4(tcol * thread, thread))
|
|
let kc = vec2(Finish.snap(o.x + kx, px) - o.x, cy - 1.0)
|
|
out = Finish.over(out, ad_wing(p, kc, 0.8, px, max(self.hover, self.focus * 0.5), self.drag * live, self.disabled))
|
|
return Finish.over(out, ad_focus(md_rbox(p, kc + vec2(0.0, 0.4), vec2(4.0, 6.8), 4.0), px, self.focus * live))
|
|
}
|
|
mod.widgets.SliderMinimal.text_input.draw_text.text_style = mod.theme.font_regular{font_size: 9.5}
|
|
|
|
// The round slider: a short gold tube beside its label, gold to the value,
|
|
// a gold ball on the end of the gold; the value reads past it.
|
|
mod.widgets.SliderRoundFlat.height = 18.0
|
|
mod.widgets.SliderRoundFlat.clip_x = false
|
|
mod.widgets.SliderRoundFlat.clip_y = false
|
|
mod.widgets.SliderRoundFlat.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 6.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.SliderRoundFlat.text_input.margin = mod.turtle.Inset{left: 0.0 right: 8.0 top: 0.0 bottom: 0.0}
|
|
mod.widgets.SliderRoundFlat.text_input.width = 30.0
|
|
mod.widgets.SliderRoundFlat.text_input.min_height = 0.0
|
|
mod.widgets.SliderRoundFlat.text_input.padding = mod.turtle.Inset{left: 0.0 right: 0.0 top: 0.0 bottom: 0.0}
|
|
mod.widgets.SliderRoundFlat.text_input.draw_text.text_style = mod.theme.font_regular{font_size: 9.5}
|
|
mod.widgets.SliderRoundFlat.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 6.0
|
|
let size = self.rect_size
|
|
let p = self.pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let o = self.rect_pos
|
|
let live = 1.0 - self.disabled
|
|
let x0 = Finish.snap(o.x + self.label_size, px) - o.x
|
|
let y0 = Finish.snap(o.y + 2.0, px) - o.y
|
|
let x1 = Finish.snap(o.x + size.x - 44.0, px) - o.x
|
|
let y1 = Finish.snap(o.y + size.y - 2.0, px) - o.y
|
|
let h = vec2((x1 - x0) * 0.5, (y1 - y0) * 0.5)
|
|
let c = vec2(x0, y0) + h
|
|
let ins = 1.4
|
|
let kr = h.y - ins + 0.2
|
|
let kx = x0 + ins + kr + self.slide_pos * (2.0 * h.x - 2.0 * ins - 2.0 * kr)
|
|
var out = ad_tube(p, c, h, px, x0 + ins, kx, self.disabled, self.hover * live)
|
|
let kc = vec2(Finish.snap(o.x + kx, px) - o.x, c.y)
|
|
out = Finish.over(out, ad_coin(p, kc, kr + 1.0, px, self.hover, self.drag * live, self.disabled))
|
|
return Finish.over(out, ad_focus(md_rbox(p, c, h, h.y), px, self.focus * live))
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// FADERS. A black slot five points wide in its gold rim, fine gold ticks
|
|
// either side, a gold thread in the slot for the value; the cap a polished
|
|
// gold block 22 points across with its corners rounded, two grip grooves cut
|
|
// across it and a black line with a cream thread through its middle.
|
|
mod.widgets.SliderFader.cap_size = 13.0
|
|
mod.widgets.SliderFader.clip_x = false
|
|
mod.widgets.SliderFader.clip_y = false
|
|
mod.widgets.SliderFader.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 5.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.SliderFader.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 5.0
|
|
let size = self.rect_size
|
|
let p = self.pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let o = self.rect_pos
|
|
let live = 1.0 - self.disabled
|
|
let vert = self.is_vertical
|
|
let a = mix(p.x, size.y - p.y, vert)
|
|
let b = mix(p.y, p.x, vert)
|
|
let along = mix(size.x, size.y, vert)
|
|
let across = mix(size.y, size.x, vert)
|
|
let travel = max(along - self.inset_px * 2.0 - self.cap_px, 1.0)
|
|
let foot = self.inset_px + self.cap_px * 0.5
|
|
let mid = floor(across * 0.5 / px) * px
|
|
// the slot, in screen space
|
|
let sw = 5.0
|
|
let sc = mix(vec2(along * 0.5, mid), vec2(mid, size.y - along * 0.5), vert)
|
|
let sh = mix(vec2(along * 0.5 - self.inset_px, sw * 0.5), vec2(sw * 0.5, along * 0.5 - self.inset_px), vert)
|
|
var out = ad_well_r(p, sc, sh, sw * 0.5, px, vec3(0.010, 0.009, 0.008), 0.5, 1.0, self.disabled)
|
|
// the value: a gold thread in the slot, from the origin (or the foot)
|
|
let va0 = foot + self.fill_lo * travel
|
|
let va1 = foot + self.fill_hi * travel
|
|
let vl = step(va0, a) * step(a, va1) * (1.0 - smoothstep(0.6, 0.6 + px, abs(b - mid))) * live
|
|
out = Finish.over(out, vec4(ad_gold_lt() * 0.95 * vl, vl * 0.95))
|
|
// ticks: a long one every quarter of the travel, short ones between
|
|
let nt = 16.0
|
|
let f = (a - foot) / travel * nt
|
|
let fi = floor(f + 0.5)
|
|
let da = abs(a - (foot + fi / nt * travel))
|
|
let major = 1.0 - step(0.1, abs(fi * 0.25 - floor(fi * 0.25 + 0.5)))
|
|
let tl = mix(2.5, 4.5, major)
|
|
let off = abs(b - mid) - sw * 0.5 - 2.5
|
|
let in_rng = step(-0.5, fi) * step(fi, nt + 0.5)
|
|
let tk = (1.0 - smoothstep(px * 0.6, px * 0.6 + 0.01 + px * 0.4, da)) * step(0.0, off) * step(off, tl) * in_rng * 0.85 * mix(1.0, 0.5, self.disabled)
|
|
out = Finish.over(out, vec4(ad_line_c() * tk, tk))
|
|
// the cap
|
|
let at = foot + self.slide_pos * travel
|
|
let cw = min(22.0, across)
|
|
let cs = mix(vec2(at, mid), vec2(mid, size.y - at), vert)
|
|
let ch = mix(vec2(self.cap_px * 0.5, cw * 0.5), vec2(cw * 0.5, self.cap_px * 0.5), vert)
|
|
let cc = vec2(Finish.snap(o.x + cs.x, px) - o.x, Finish.snap(o.y + cs.y, px) - o.y)
|
|
let k4 = vec4(2.5, 2.5, 2.5, 2.5)
|
|
let cd = ad_cut(p, cc, ch, k4)
|
|
let press = self.drag * live
|
|
out = Finish.over(out, ad_drop(p, cc, ch, 2.0, (1.0 - press * 0.5) * mix(1.0, 0.5, self.disabled)))
|
|
var face = ad_metal(p, cc - ch, cc + ch, ad_gold_base(), 1.0, max(self.hover, self.focus * 0.5) * live, press)
|
|
face = mix(face, vec3(0.30, 0.26, 0.20), self.disabled)
|
|
let fa = Finish.cover(cd, px)
|
|
out = Finish.over(out, vec4(face * fa, fa))
|
|
// the grooves and the middle line, across the cap
|
|
let ln = mix(abs(p.y - cc.y), abs(p.x - cc.x), 1.0 - vert)
|
|
let inside = Finish.cover(cd + 2.0, px)
|
|
let gr = (1.0 - smoothstep(0.35, 0.35 + px, abs(ln - 3.6))) * inside * 0.55
|
|
out = Finish.over(out, vec4(vec3(0.20, 0.13, 0.05) * gr, gr))
|
|
let bl = (1.0 - smoothstep(0.9, 0.9 + px, ln)) * inside
|
|
out = Finish.over(out, vec4(vec3(0.02, 0.018, 0.016) * bl, bl))
|
|
let cl = (1.0 - smoothstep(0.25, 0.25 + px, ln)) * inside * 0.9
|
|
out = Finish.over(out, vec4(ad_cream() * cl, cl))
|
|
out = Finish.over(out, ad_rim(cd, ad_cut_n(p, cc, ch, k4), 1.2, px, live) * mix(1.0, 0.5, self.disabled))
|
|
return Finish.over(out, ad_focus(cd, px, self.focus * live))
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// KNOBS. An ivory knob: a fluted skirt, its flutes running round its side
|
|
// and turning with the light from the upper left, under a cap of spun gold
|
|
// in a polished collar; the pointer a lit cream slit in the cap. Round it a
|
|
// fine gold track and the value in bright gold.
|
|
let ad_knob = fn(p: vec2, c: vec2, rad: float, px: float, ang: float, hover: float, press: float, dis: float) -> vec4 {
|
|
let live = 1.0 - dis
|
|
var out = ad_drop(p, c, vec2(rad, rad), rad, (1.0 - 0.4 * press) * mix(1.0, 0.5, dis))
|
|
let q = p - c
|
|
let l = length(q)
|
|
let d = l - rad
|
|
let n = q / max(l, 0.001)
|
|
// the fluted skirt
|
|
let th = atan2(q.y, q.x)
|
|
let nf = max(floor(rad * 1.1), 14.0)
|
|
let fl = cos(th * nf)
|
|
let lit = clamp(0.5 - 0.6 * dot(n, vec2(0.45, 0.85)), 0.0, 1.0)
|
|
var sk = mix(ad_ivory_dk(), ad_ivory(), 0.2 + 0.8 * lit)
|
|
sk = sk * (0.86 + 0.14 * fl)
|
|
sk = mix(sk, sk * 0.72, smoothstep(0.82, 1.0, l / rad) * 0.6)
|
|
sk = Finish.lift(sk, 0.08 * hover * live)
|
|
sk = mix(sk, mix(sk, g3(Finish.lum(sk)), 0.7) * 0.55, dis)
|
|
sk = mix(sk, vec3(0.30, 0.25, 0.18), Finish.band(d, 0.0, max(px, 0.5), px) * 0.6)
|
|
let a = Finish.cover(d, px)
|
|
out = Finish.over(out, vec4(sk * a, a))
|
|
// the spun gold cap in its collar
|
|
let cr = rad * 0.64
|
|
let dc = l - cr
|
|
var cap = ad_gold_base() * Finish.spun(p, c, vec2(-0.45, -0.89))
|
|
cap = mix(cap, ad_gold_hi(), smoothstep(0.55, 1.0, lit) * 0.25)
|
|
cap = Finish.lift(cap, 0.10 * hover * live * (1.0 - press))
|
|
cap = mix(cap, cap * 0.88, press)
|
|
cap = mix(cap, mix(cap, g3(Finish.lum(cap)), 0.7) * 0.55, dis)
|
|
let ca = Finish.cover(dc, px)
|
|
out = Finish.over(out, vec4(min(cap, vec3(1.0, 1.0, 1.0)) * ca, ca))
|
|
out = Finish.over(out, ad_rim(dc, n, max(0.9, rad * 0.07), px, live) * mix(1.0, 0.5, dis))
|
|
// the pointer: a lit cream slit cut in the cap from its middle to its
|
|
// edge, a dark hairline round it
|
|
let dir = vec2(0.0 - sin(ang), cos(ang))
|
|
let lw = max(0.5, rad * 0.04)
|
|
let ld = md_seg(p, c + dir * cr * 0.10, c + dir * (cr - max(1.0, rad * 0.07)))
|
|
let ea = Finish.cover(ld - lw - max(px, 0.45), px) * 0.7
|
|
out = Finish.over(out, vec4(vec3(0.06, 0.04, 0.02) * ea, ea))
|
|
let la = Finish.cover(ld - lw, px)
|
|
let lcol = mix(vec3(1.0, 0.97, 0.88), vec3(0.60, 0.56, 0.48), dis)
|
|
return Finish.over(out, vec4(lcol * la, la))
|
|
}
|
|
|
|
// The value arc round a knob: `ar` its middle radius, `aw` its width; the
|
|
// gap centred at the bottom, the value clockwise from its left end, or from
|
|
// the origin when the knob is bipolar. The track a fine gold line with a
|
|
// tick at either end, the value bright gold.
|
|
let md_arc = fn(p: vec2, c: vec2, ar: float, aw: float, px: float, v0: float, v1: float, gap: float, dis: float) -> vec4 {
|
|
let start = gap * 0.5
|
|
let sweep = 2.0 * PI - gap
|
|
let q = p - c
|
|
var ang = atan2(0.0 - q.x, q.y)
|
|
if ang < 0.0 {
|
|
ang = ang + 2.0 * PI
|
|
}
|
|
let rd = abs(length(q) - ar) - aw * 0.5
|
|
let rt = abs(length(q) - ar) - max(px * 0.6, 0.4)
|
|
let in_arc = step(start, ang) * step(ang, start + sweep)
|
|
let e0 = vec2(0.0 - sin(start), cos(start))
|
|
let e1 = vec2(0.0 - sin(start + sweep), cos(start + sweep))
|
|
let t0 = md_seg(p, c + e0 * (ar - aw), c + e0 * (ar + aw * 1.2)) - max(px * 0.6, 0.4)
|
|
let t1 = md_seg(p, c + e1 * (ar - aw), c + e1 * (ar + aw * 1.2)) - max(px * 0.6, 0.4)
|
|
let track_d = min(mix(1000.0, rt, in_arc), min(t0, t1))
|
|
let a0 = start + sweep * v0
|
|
let a1 = start + sweep * v1
|
|
let l0 = c + vec2(0.0 - sin(a0), cos(a0)) * ar
|
|
let l1 = c + vec2(0.0 - sin(a1), cos(a1)) * ar
|
|
let lit_in = step(a0, ang) * step(ang, a1)
|
|
let lit_d = min(mix(1000.0, rd, lit_in), min(length(p - l0), length(p - l1)) - aw * 0.5)
|
|
let ta = Finish.cover(track_d, px) * 0.75
|
|
var out = vec4(ad_line_c() * ta, ta)
|
|
let la = Finish.cover(lit_d, px)
|
|
let ink = mix(ad_gold_lt(), vec3(0.36, 0.31, 0.24), dis)
|
|
return Finish.over(out, vec4(ink * la, la))
|
|
}
|
|
|
|
mod.widgets.RotaryKnob.clip_x = false
|
|
mod.widgets.RotaryKnob.clip_y = false
|
|
mod.widgets.RotaryKnob.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 5.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.RotaryKnob.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 5.0
|
|
let size = self.rect_size
|
|
let p = self.pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let o = self.rect_pos
|
|
let live = 1.0 - self.disabled
|
|
let dia = min(size.x, size.y)
|
|
let rr = dia * 0.5 - 1.0
|
|
let c = vec2(Finish.snap(o.x + size.x * 0.5, px) - o.x, Finish.snap(o.y + size.y - dia * 0.5, px) - o.y)
|
|
let gap = self.gap * PI / 180.0
|
|
let aw = 1.6
|
|
let ar = floor((rr - aw * 0.5) / px) * px
|
|
let rad = floor((ar - aw * 0.5 - 2.6) / px) * px
|
|
let lo = min(self.origin_pos, self.slide_pos)
|
|
let hi = max(self.origin_pos, self.slide_pos)
|
|
let v0 = mix(0.0, lo, self.arc_origin)
|
|
let v1 = mix(self.slide_pos, hi, self.arc_origin)
|
|
var out = md_arc(p, c, ar, aw, px, v0, v1, gap, self.disabled)
|
|
let ang = gap * 0.5 + (2.0 * PI - gap) * self.slide_pos
|
|
out = Finish.over(out, ad_knob(p, c, rad, px, ang, max(self.hover, self.focus * 0.5), self.drag * live, self.disabled))
|
|
return Finish.over(out, ad_focus(length(p - c) - ar - aw * 0.5, px, self.focus * live))
|
|
}
|
|
// Knob legends are small wide capitals in gold.
|
|
mod.widgets.RotaryKnob.draw_text.color = #d8c08c
|
|
mod.widgets.RotaryKnob.draw_text.text_style = mod.theme.font_label{font_size: 6.5}
|
|
|
|
// The dial: the knob above set in a sunburst. A polished gold band round
|
|
// the outside steps down to a ring of fan blades, ivory and gold by turns,
|
|
// each ivory blade carrying an LED slot that lights warm white up to the
|
|
// value; a gold step inside the fan, a black moat, and in it the value as a
|
|
// glowing ring round the knob. Where the sweep leaves its gap the fan is
|
|
// black lacquer.
|
|
mod.widgets.RotaryFlat.clip_x = false
|
|
mod.widgets.RotaryFlat.clip_y = false
|
|
mod.widgets.RotaryFlat.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 5.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.RotaryFlat.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 5.0
|
|
let size = self.rect_size
|
|
let p = self.pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let o = self.rect_pos
|
|
let live = 1.0 - self.disabled
|
|
let dis = self.disabled
|
|
let room = vec2(size.x, size.y - 24.0)
|
|
let dia = min(room.x, room.y)
|
|
let rr = dia * 0.5 - 1.0
|
|
let c = vec2(Finish.snap(o.x + size.x * 0.5, px) - o.x, Finish.snap(o.y + 24.0 + room.y * 0.5, px) - o.y)
|
|
let gap = self.gap * PI / 180.0
|
|
let start = gap * 0.5
|
|
let sweep = 2.0 * PI - gap
|
|
let lo = min(self.origin_pos, self.slide_pos)
|
|
let hi = max(self.origin_pos, self.slide_pos)
|
|
let v0 = mix(0.0, lo, self.arc_origin)
|
|
let v1 = mix(self.slide_pos, hi, self.arc_origin)
|
|
let q = p - c
|
|
let l = length(q)
|
|
let n = q / max(l, 0.001)
|
|
var ang = atan2(0.0 - q.x, q.y)
|
|
if ang < 0.0 {
|
|
ang = ang + 2.0 * PI
|
|
}
|
|
let d_out = l - rr
|
|
var out = ad_drop(p, c, vec2(rr, rr), rr, mix(1.0, 0.5, dis))
|
|
// the black lacquer disc
|
|
let lac = ad_lacq(p, c - vec2(rr, rr), c + vec2(rr, rr), ad_black(), 0.6)
|
|
let ba = Finish.cover(d_out, px)
|
|
out = Finish.over(out, vec4(lac * ba, ba))
|
|
// the ring of fan blades over the sweep
|
|
let bw = max(2.0, rr * 0.075)
|
|
let fo = rr - bw
|
|
let fw = max(5.0, rr * 0.22)
|
|
let fi = fo - fw
|
|
let nb = max(floor(sweep / (2.0 * PI / 24.0) + 0.5), 4.0)
|
|
let seg = sweep / nb
|
|
let kf = floor((ang - start) / seg)
|
|
let ivory = 1.0 - step(0.25, abs(fract(kf * 0.5)))
|
|
let in_sweep = step(start, ang) * step(ang, start + sweep)
|
|
let ring = Finish.cover(l - fo, px) * Finish.cover(fi - l, px) * in_sweep
|
|
let u = clamp((l - fi) / max(fw, 0.01), 0.0, 1.0)
|
|
let side = fract((ang - start) / seg)
|
|
var blade = mix(ad_gold_base() * (0.85 + 0.35 * (1.0 - side)), ad_ivory() * (0.80 + 0.22 * (1.0 - side)), ivory)
|
|
blade = blade * (0.88 + 0.16 * clamp(0.5 - 0.6 * dot(n, vec2(0.45, 0.85)), 0.0, 1.0))
|
|
blade = mix(blade, mix(blade, g3(Finish.lum(blade)), 0.7) * 0.55, dis)
|
|
// a dark hairline between the blades
|
|
let bdist = min(side, 1.0 - side) * seg * l
|
|
blade = mix(blade, vec3(0.06, 0.04, 0.02), Finish.cover(bdist - max(px * 0.5, 0.3), px) * 0.8)
|
|
out = Finish.over(out, vec4(blade * ring, ring))
|
|
// the LED slot in each ivory blade, lit up to the value
|
|
let bmid = start + (kf + 0.5) * seg
|
|
let bv = (kf + 0.5) / nb
|
|
let led_on = step(v0 - 0.001, bv) * step(bv, v1 + 0.001) * live
|
|
let dir = vec2(0.0 - sin(bmid), cos(bmid))
|
|
let sd = md_seg(p, c + dir * (fi + fw * 0.30), c + dir * (fi + fw * 0.70)) - max(0.75, rr * 0.022)
|
|
let sa = Finish.cover(sd, px) * ivory * in_sweep
|
|
let sglow = exp(0.0 - max(sd, 0.0) / 1.2) * ivory * in_sweep * led_on * step(fi, l) * step(l, fo)
|
|
out = Finish.over(out, vec4(vec3(1.0, 0.70, 0.30) * sglow * 0.55, sglow * 0.55))
|
|
let scol = mix(vec3(0.16, 0.12, 0.08), vec3(1.0, 0.97, 0.88), led_on)
|
|
out = Finish.over(out, vec4(scol * sa, sa))
|
|
// the polished band outside, and the gold step inside the fan
|
|
out = Finish.over(out, ad_rim(d_out, n, bw, px, live) * mix(1.0, 0.5, dis))
|
|
let sw = max(1.4, rr * 0.045)
|
|
let d_step = l - fi
|
|
out = Finish.over(out, ad_rim(d_step, n, sw, px, live) * mix(1.0, 0.5, dis))
|
|
// the moat and the glowing value ring round the knob
|
|
let kr = fi - sw - max(3.0, rr * 0.09)
|
|
let gr = (fi - sw + kr) * 0.5
|
|
let la0 = start + sweep * v0
|
|
let la1 = start + sweep * v1
|
|
let lit_in = step(la0, ang) * step(ang, la1)
|
|
let gd = abs(l - gr) - 0.6
|
|
let core = Finish.cover(gd, px) * lit_in * live
|
|
let halo = exp(0.0 - max(gd, 0.0) / 1.1) * lit_in * live * step(kr, l) * step(l, fi - sw)
|
|
out = Finish.over(out, vec4(vec3(1.0, 0.72, 0.32) * halo * 0.6, halo * 0.6))
|
|
out = Finish.over(out, vec4(vec3(1.0, 0.97, 0.88) * core, core))
|
|
let kang = start + sweep * self.slide_pos
|
|
out = Finish.over(out, ad_knob(p, c, kr, px, kang, max(self.hover, self.focus * 0.5), self.drag * live, dis))
|
|
return Finish.over(out, ad_focus(d_out, px, self.focus * live))
|
|
}
|
|
|
|
// The dial's readout: a small plaque of the screens' black glass in its
|
|
// gold rim, amber figures.
|
|
let md_lcd = fn(p: vec2, size: vec2, o: vec2, px: float) -> vec4 {
|
|
let lo = vec2(Finish.snap(o.x, px), Finish.snap(o.y, px)) - o + vec2(0.0, px)
|
|
let hi = vec2(Finish.snap(o.x + size.x, px), Finish.snap(o.y + size.y, px)) - o - vec2(0.0, 2.0 * px)
|
|
let h = (hi - lo) * 0.5
|
|
let c = lo + h
|
|
let k4 = vec4(2.5, 2.5, 2.5, 2.5)
|
|
let d = ad_cut(p, c, h, k4)
|
|
let t = clamp((p.y - lo.y) / max(2.0 * h.y, 1.0), 0.0, 1.0)
|
|
var col = vec3(0.020, 0.018, 0.016) * (1.6 - 0.8 * t)
|
|
col = mix(col, vec3(0.0, 0.0, 0.0), clamp(Finish.inset(p, c, h, 2.0, vec2(0.0, 1.2), 1.0), 0.0, 1.0) * 0.5)
|
|
let a = Finish.cover(d, px)
|
|
var out = ad_drop(p, c, h, 2.0, 0.6)
|
|
out = Finish.over(out, vec4(col * a, a))
|
|
return Finish.over(out, ad_rim(d, ad_cut_n(p, c, h, k4), 1.3, px, 1.0))
|
|
}
|
|
mod.widgets.RotaryFlat.text_input.padding = mod.turtle.Inset{left: 7.0 right: 7.0 top: 2.0 bottom: 2.0}
|
|
mod.widgets.RotaryFlat.text_input.min_height = 20.0
|
|
mod.widgets.RotaryFlat.text_input.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return md_lcd(self.pos * self.rect_size, self.rect_size, self.rect_pos, px)
|
|
}
|
|
mod.widgets.RotaryFlat.text_input.draw_text.color = #ffb648
|
|
mod.widgets.RotaryFlat.text_input.draw_text.color_hover = #ffc768
|
|
mod.widgets.RotaryFlat.text_input.draw_text.color_focus = #ffc768
|
|
mod.widgets.RotaryFlat.text_input.draw_text.color_empty = #a07a3a
|
|
mod.widgets.RotaryFlat.text_input.draw_text.text_style = mod.theme.font_regular{font_size: 9.5}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// TEXT FIELDS. A well of black lacquer sunk behind its gold rim, its corners
|
|
// cut; focused, a fine bright gold line lights inside the rim. Read only,
|
|
// the well is a dull bronze-black and the rim is dimmed.
|
|
let md_field = fn(p: vec2, size: vec2, o: vec2, px: float, hover: float, focus: float, dis: float, k: float) -> vec4 {
|
|
let ins = 1.5
|
|
let lo = vec2(Finish.snap(o.x + ins, px), Finish.snap(o.y + ins, px)) - o
|
|
let hi = vec2(Finish.snap(o.x + size.x - ins, px), Finish.snap(o.y + size.y - ins, px)) - o - vec2(0.0, px)
|
|
let h = (hi - lo) * 0.5
|
|
let c = lo + h
|
|
let k4 = vec4(k, k, k, k)
|
|
let d = ad_cut(p, c, h, k4)
|
|
let n = ad_cut_n(p, c, h, k4)
|
|
var fill = mix(vec3(0.016, 0.014, 0.013), vec3(0.032, 0.028, 0.024), hover * (1.0 - dis))
|
|
fill = mix(fill, vec3(0.055, 0.045, 0.035), dis)
|
|
var out = ad_well(p, c, h, k, d, n, px, fill, mix(0.7, 0.3, dis), 1.3, dis)
|
|
out = Finish.over(out, ad_pin(d, 2.3, max(px, 0.6), px, 0.45 * hover * (1.0 - focus) * (1.0 - dis)))
|
|
let fl = Finish.band(d, 2.3, 2.3 + max(px, 0.7), px) * focus * (1.0 - dis)
|
|
return Finish.over(out, vec4(vec3(1.0, 0.88, 0.60) * fl, fl))
|
|
}
|
|
|
|
mod.widgets.TextInputFlat.padding = mod.turtle.Inset{left: 10.0 right: 10.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.TextInputFlat.draw_bg.pixel = fn() {
|
|
if self.color.a < 0.01 {
|
|
return vec4(0.0, 0.0, 0.0, 0.0)
|
|
}
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return md_field(self.pos * self.rect_size, self.rect_size, self.rect_pos, px, self.hover, self.focus, self.disabled, 3.0)
|
|
}
|
|
mod.widgets.TextInputFlat.draw_text.color_empty = #a08f70
|
|
mod.widgets.TextInputFlat.draw_text.color_disabled = #8a7c64
|
|
mod.widgets.TextInputFlat.draw_cursor.color = #f2d07c
|
|
|
|
// The well a form's field stands in is the same lacquer well; a caller who
|
|
// asks for no box (a clear colour) gets none.
|
|
mod.widgets.FieldWell.draw_bg.pixel = fn() {
|
|
if self.color.a < 0.01 {
|
|
return vec4(0.0, 0.0, 0.0, 0.0)
|
|
}
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return md_field(self.pos * self.rect_size, self.rect_size, self.rect_pos, px, self.hover, self.focus, self.disabled, 3.0)
|
|
}
|
|
|
|
// NUMBER FIELDS. The lacquer well, and on its right a block of champagne
|
|
// gold split by a fine cut, a small black chevron in each half; the half
|
|
// under the pointer lifts, the held half sinks.
|
|
mod.widgets.NumberField.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return md_field(self.pos * self.rect_size, self.rect_size, self.rect_pos, px, self.hover, self.focus, self.disabled, 3.0)
|
|
}
|
|
mod.widgets.NumberField.pad_left = 10.0
|
|
mod.widgets.NumberSpin.width = 16.0
|
|
mod.widgets.NumberSpin.draw_text.color = #00000000
|
|
mod.widgets.NumberSpin.draw_text.color_disabled = #00000000
|
|
let ad_chev = fn(p: vec2, c: vec2, hw: float, hh: float, dir: float) -> float {
|
|
// a chevron hw either side, hh tall, pointing up (dir -1) or down (1)
|
|
let a = c + vec2(0.0 - hw, 0.0 - hh * dir * 0.5)
|
|
let b = c + vec2(0.0, hh * dir * 0.5)
|
|
let e = c + vec2(hw, 0.0 - hh * dir * 0.5)
|
|
return min(md_seg(p, a, b), md_seg(p, b, e))
|
|
}
|
|
mod.widgets.NumberSpin.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let o = self.rect_pos
|
|
let live = 1.0 - self.disabled
|
|
let lo = vec2(Finish.snap(o.x, px), Finish.snap(o.y + 2.8, px)) - o
|
|
let hi = vec2(Finish.snap(o.x + self.rect_size.x - 2.8, px), Finish.snap(o.y + self.rect_size.y - 2.8, px)) - o
|
|
let mid = Finish.snap(o.y + (lo.y + hi.y) * 0.5, px) - o.y
|
|
let upper = step(p.y, mid)
|
|
let hot = mix(max(0.0, 0.0 - self.hot), max(0.0, self.hot), upper) * live
|
|
let dn = mix(max(0.0, 0.0 - self.down), max(0.0, self.down), upper) * live
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let k4 = vec4(0.0, 1.5, 1.5, 0.0)
|
|
let d = ad_cut(p, c, h, k4)
|
|
var face = ad_metal(p, lo, hi, ad_champ(), 0.7, hot, dn)
|
|
face = mix(face, vec3(0.30, 0.26, 0.20), self.disabled)
|
|
let a = Finish.cover(d, px)
|
|
var out = vec4(face * a, a)
|
|
// the cut down its left and across its middle
|
|
let vl = step(lo.x, p.x) * step(p.x, lo.x + max(px, 0.7)) * step(lo.y, p.y) * step(p.y, hi.y) * 0.9
|
|
let hl = step(abs(p.y - mid), max(px, 0.6) * 0.5) * step(lo.x, p.x) * step(p.x, hi.x) * 0.6
|
|
let la = max(vl, hl)
|
|
out = Finish.over(out, vec4(vec3(0.16, 0.10, 0.04) * la, la))
|
|
let cx = (lo.x + hi.x) * 0.5 + 0.5
|
|
let cu = ad_chev(p, vec2(cx, (lo.y + mid) * 0.5), 2.6, 2.4, -1.0) - 0.55
|
|
let cd = ad_chev(p, vec2(cx, (mid + hi.y) * 0.5), 2.6, 2.4, 1.0) - 0.55
|
|
let ti = Finish.cover(min(cu, cd), px)
|
|
return Finish.over(out, vec4(vec3(0.08, 0.05, 0.02) * ti, ti))
|
|
}
|
|
|
|
// The drag-number: the lacquer well, its track a faint gold wash behind the
|
|
// ink.
|
|
mod.widgets.ValueInput.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
var out = md_field(p, self.rect_size, self.rect_pos, px, max(self.hover, self.drag), self.focus, 0.0, 3.0)
|
|
let d = md_rbox(p, self.rect_size * 0.5, self.rect_size * 0.5 - vec2(3.0, 3.0), 1.5)
|
|
let wx = 3.0 + (self.rect_size.x - 6.0) * max(self.fill, 0.0)
|
|
let wash = step(0.0, self.fill) * step(p.x, wx) * Finish.cover(d, px) * 0.22
|
|
return Finish.over(out, vec4(ad_gold_md() * wash, wash))
|
|
}
|
|
mod.widgets.ValueInput.draw_text.color = #ede2c6
|
|
mod.widgets.ValueInput.draw_text.text_style = mod.theme.font_regular{font_size: 9.5 line_spacing: 1.0}
|
|
mod.widgets.ValueInput.arrow_color = #d8c08c
|
|
mod.widgets.ValueInput.text_input.draw_bg.color = #00000000
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// DROP-DOWNS. A black lacquer plaque in its gold rim, and at its right end a
|
|
// block of champagne gold carrying a black chevron. Open, the plaque is
|
|
// held pressed in.
|
|
let md_dropdown = fn(pos0: vec2, size0: vec2, o0: vec2, px: float, hover: float, held: float, focus: float, dis: float, ins: float) -> vec4 {
|
|
let m = 6.0
|
|
let p = pos0 * (size0 + vec2(2.0 * m, 2.0 * m)) - vec2(m, m) - vec2(0.0, ins)
|
|
let size = size0 - vec2(0.0, 2.0 * ins)
|
|
let o = o0 + vec2(0.0, ins)
|
|
let pos = (p + vec2(m, m)) / (size + vec2(2.0 * m, 2.0 * m))
|
|
let live = 1.0 - dis
|
|
var out = ad_button(pos, size, o, px, hover, held, focus, dis, 0.0, 0.0, vec4(3.0, 3.0, 3.0, 3.0), 8.0, m)
|
|
let lo = vec2(Finish.snap(o.x + size.x - 22.0, px) - o.x, 1.5)
|
|
let hi = vec2(Finish.snap(o.x + size.x - 1.5, px) - o.x, size.y - 1.5)
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let k4 = vec4(0.0, 2.0, 2.0, 0.0)
|
|
let d = ad_cut(p, c, h, k4)
|
|
var face = ad_metal(p, lo, hi, ad_champ(), 0.7, hover * live, held * live)
|
|
face = mix(face, vec3(0.30, 0.26, 0.20), dis)
|
|
let a = Finish.cover(d, px)
|
|
out = Finish.over(out, vec4(face * a, a))
|
|
let sl = step(lo.x, p.x) * step(p.x, lo.x + max(px, 0.7)) * step(lo.y, p.y) * step(p.y, hi.y)
|
|
out = Finish.over(out, vec4(vec3(0.10, 0.065, 0.025) * sl, sl))
|
|
let cc = vec2(c.x + 0.5, size.y * 0.5 + held * live * px)
|
|
let tri = Finish.cover(ad_chev(p, cc, 3.2, 3.0, 1.0) - 0.65, px)
|
|
return Finish.over(out, vec4(vec3(0.08, 0.05, 0.02) * tri, tri))
|
|
}
|
|
|
|
mod.widgets.DropDownFlat.padding = mod.turtle.Inset{left: 12.0 right: 32.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.DropDown.padding = mod.turtle.Inset{left: 12.0 right: 32.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.DropDownFlat.clip_x = false
|
|
mod.widgets.DropDownFlat.clip_y = false
|
|
mod.widgets.DropDownFlat.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 6.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.DropDownFlat.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return md_dropdown(self.pos, self.rect_size, self.rect_pos, px, self.hover, max(self.down, self.active), self.focus, self.disabled, 1.0)
|
|
}
|
|
mod.widgets.DropDownFlat.draw_text.text_style = mod.theme.font_regular{font_size: 9.5}
|
|
|
|
mod.widgets.Select.clip_x = false
|
|
mod.widgets.Select.clip_y = false
|
|
mod.widgets.MultiSelect.clip_x = false
|
|
mod.widgets.MultiSelect.clip_y = false
|
|
mod.widgets.Select.face.clip_x = false
|
|
mod.widgets.Select.face.clip_y = false
|
|
mod.widgets.MultiSelect.face.clip_x = false
|
|
mod.widgets.MultiSelect.face.clip_y = false
|
|
mod.widgets.Select.face.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 6.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.MultiSelect.face.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 6.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.Select.face.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return md_dropdown(self.pos, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, 0.0)
|
|
}
|
|
mod.widgets.MultiSelect.face.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return md_dropdown(self.pos, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, 0.0)
|
|
}
|
|
mod.widgets.Select.face.padding.right = 32.0
|
|
mod.widgets.MultiSelect.face.padding.right = 32.0
|
|
|
|
// The combo box: the lacquer well one types into, and the champagne gold
|
|
// block with its chevron at the right end.
|
|
mod.widgets.ComboBox.padding = mod.turtle.Inset{left: 10.0 right: 32.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.ComboBox.input.min_height = 0.0
|
|
mod.widgets.ComboBox.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let size = self.rect_size
|
|
let o = self.rect_pos
|
|
let live = 1.0 - self.disabled
|
|
var out = md_field(p, size, o, px, self.hover, self.focus, self.disabled, 3.0)
|
|
let held = self.down * self.hover * live
|
|
let lo = vec2(Finish.snap(o.x + size.x - 23.0, px) - o.x, Finish.snap(o.y + 2.8, px) - o.y)
|
|
let hi = vec2(Finish.snap(o.x + size.x - 2.8, px) - o.x, Finish.snap(o.y + size.y - 2.8, px) - o.y - px)
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let d = ad_cut(p, c, h, vec4(0.0, 1.6, 1.6, 0.0))
|
|
var face = ad_metal(p, lo, hi, ad_champ(), 0.7, self.hover * live, held)
|
|
face = mix(face, vec3(0.30, 0.26, 0.20), self.disabled)
|
|
let a = Finish.cover(d, px)
|
|
out = Finish.over(out, vec4(face * a, a))
|
|
let sl = step(lo.x, p.x) * step(p.x, lo.x + max(px, 0.7)) * step(lo.y, p.y) * step(p.y, hi.y)
|
|
out = Finish.over(out, vec4(vec3(0.10, 0.065, 0.025) * sl, sl))
|
|
let cc = vec2(c.x + 0.5, c.y + held * px)
|
|
let tri = Finish.cover(ad_chev(p, cc, 3.2, 3.0, 1.0) - 0.65, px)
|
|
return Finish.over(out, vec4(vec3(0.08, 0.05, 0.02) * tri, tri))
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// SEGMENTS AND TABS. One black lacquer plaque across the strip in its gold
|
|
// rim; the chosen segment a champagne gold plaque pressed into it, its word
|
|
// dark.
|
|
let md_strip = fn(p: vec2, size: vec2, o: vec2, px: float) -> vec4 {
|
|
let lo = vec2(Finish.snap(o.x, px), Finish.snap(o.y, px)) - o
|
|
let hi = vec2(Finish.snap(o.x + size.x, px), Finish.snap(o.y + size.y, px)) - o
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let k4 = vec4(3.0, 3.0, 3.0, 3.0)
|
|
let d = ad_cut(p, c, h, k4)
|
|
var out = ad_drop(p, c, h, 2.0, 0.8)
|
|
let face = ad_lacq(p, lo, hi, ad_black(), 1.0)
|
|
let fa = Finish.cover(d + 0.75, px)
|
|
out = Finish.over(out, vec4(face * fa, fa))
|
|
out = Finish.over(out, ad_pin(d, 2.9, max(px, 0.6), px, 0.6))
|
|
return Finish.over(out, ad_rim(d, ad_cut_n(p, c, h, k4), 1.5, px, 1.0))
|
|
}
|
|
// The chosen cell of a strip: a champagne plaque inside the cell, pressed
|
|
// in, in a rim of its own.
|
|
let md_cell = fn(p: vec2, lo: vec2, hi: vec2, px: float, base: vec3) -> vec4 {
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let k4 = vec4(2.0, 2.0, 2.0, 2.0)
|
|
let d = ad_cut(p, c, h, k4)
|
|
var face = ad_metal(p, lo, hi, base, 0.7, 0.0, 0.6)
|
|
let sh = clamp(Finish.inset(p, c, h - vec2(1.2, 1.2), 1.0, vec2(0.0, 1.0), 0.9), 0.0, 1.0)
|
|
face = mix(face, face * 0.45, sh * 0.6)
|
|
let a = Finish.cover(d + 0.6, px)
|
|
var out = vec4(face * a, a)
|
|
return Finish.over(out, ad_rim(d, ad_cut_n(p, c, h, k4), 1.2, px, 1.0))
|
|
}
|
|
|
|
mod.widgets.SegmentedControlFlat.segment_height = 22.0
|
|
mod.widgets.SegmentedControlFlat.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 5.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.SegmentedControlFlat.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 5.0
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
return md_strip(p, self.rect_size, self.rect_pos, px)
|
|
}
|
|
// The pill is the segment's own box: its quad grows a point each way so the
|
|
// chosen plaque stands just inside the strip's rim.
|
|
mod.widgets.SegmentedControlFlat.draw_pill.vertex = fn() {
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(1.0, 1.0), self.rect_size + vec2(2.0, 2.0))
|
|
}
|
|
mod.widgets.SegmentedControlFlat.draw_pill.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let o = self.rect_pos
|
|
let size = self.rect_size
|
|
let p = self.pos * (size + vec2(2.0, 2.0)) - vec2(1.0, 1.0)
|
|
let lo = vec2(Finish.snap(o.x - 0.5, px), Finish.snap(o.y - 0.5, px)) - o
|
|
let hi = vec2(Finish.snap(o.x + size.x + 0.5, px), Finish.snap(o.y + size.y + 0.5, px)) - o
|
|
return md_cell(p, lo, hi, px, ad_champ())
|
|
}
|
|
mod.widgets.SegmentedControlFlat.draw_text.color = #ede2c6
|
|
mod.widgets.SegmentedControlFlat.draw_text_selected.color = #1c1206
|
|
mod.widgets.SegmentedControlFlat.palette.on_neutral_container = #1c1206
|
|
mod.widgets.SegmentedControlFlat.draw_text.text_style = mod.theme.font_label{font_size: 7.0}
|
|
mod.widgets.SegmentedControlFlat.draw_text_selected.text_style = mod.theme.font_label{font_size: 7.0}
|
|
|
|
// The tab strip: the same plaque; the tab in use a champagne plaque pressed
|
|
// into it, a hovered tab takes a faint gold wash, the quiet ones parted by a
|
|
// fine gold line with a small gold lozenge at its middle.
|
|
mod.widgets.Tabs.height = 26.0
|
|
mod.widgets.Tabs.tab_min_width = 46.0
|
|
mod.widgets.Tabs.clip_x = false
|
|
mod.widgets.Tabs.clip_y = false
|
|
mod.widgets.Tabs.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 5.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.Tabs.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 5.0
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
return md_strip(p, self.rect_size, self.rect_pos, px)
|
|
}
|
|
mod.widgets.Tabs.draw_tab.pixel = fn() {
|
|
return vec4(0.0, 0.0, 0.0, 0.0)
|
|
}
|
|
mod.widgets.Tabs.draw_tab_hover.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let h = self.rect_size * 0.5 - vec2(2.5, 3.0)
|
|
let d = md_rbox(p, self.rect_size * 0.5, h, 1.5)
|
|
let a = Finish.cover(d, px) * 0.14
|
|
return vec4(ad_gold_lt() * a, a)
|
|
}
|
|
mod.widgets.Tabs.draw_tab_active.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let o = self.rect_pos
|
|
let size = self.rect_size
|
|
let lo = vec2(Finish.snap(o.x + 1.0, px), Finish.snap(o.y + 1.5, px)) - o
|
|
let hi = vec2(Finish.snap(o.x + size.x - 1.0, px), Finish.snap(o.y + size.y - 1.5, px)) - o
|
|
return md_cell(self.pos * size, lo, hi, px, ad_champ())
|
|
}
|
|
mod.widgets.Tabs.draw_sep.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let x = self.rect_size.x * 0.5
|
|
let y = self.rect_size.y * 0.5
|
|
let ln = step(abs(p.x - x), max(px, 0.6) * 0.5) * step(abs(p.y - y), self.rect_size.y * 0.30) * 0.75
|
|
let lq = abs(p - vec2(x, y))
|
|
let lz = Finish.cover(lq.x + lq.y * 0.6 - 1.6, px)
|
|
let a = max(ln, lz)
|
|
return vec4(mix(ad_line_c(), ad_gold_lt(), lz * 0.5) * a, a)
|
|
}
|
|
mod.widgets.Tabs.draw_mark.color = #ede2c6
|
|
mod.widgets.Tabs.draw_mark.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let o = self.rect_pos
|
|
let c = vec2(Finish.snap(o.x + self.rect_size.x * 0.5, px), Finish.snap(o.y + self.rect_size.y * 0.5, px)) - o
|
|
// the add mark a plus in the middle of its room; the close mark a small
|
|
// cross tucked into the top right of its room, clear of the word
|
|
let a = mix(0.7853981634, 0.0, self.plus)
|
|
let r = mix(2.0, 3.6, self.plus)
|
|
let cm = mix(vec2(self.rect_size.x - 3.0, 4.5), c, self.plus)
|
|
let u = vec2(cos(a), sin(a)) * r
|
|
let v = vec2(0.0 - sin(a), cos(a)) * r
|
|
let dd = min(md_seg(p, cm - u, cm + u), md_seg(p, cm - v, cm + v)) - mix(0.5, 0.6, self.plus)
|
|
let k = Finish.cover(dd, px) * self.color.a
|
|
return vec4(self.color.rgb * k, k)
|
|
}
|
|
mod.widgets.Tabs.draw_text.color = #ede2c6
|
|
mod.widgets.Tabs.draw_text_active.color = #1c1206
|
|
mod.widgets.Tabs.draw_text.text_style = mod.theme.font_regular{font_size: 9.0 top_drop: 0.22}
|
|
mod.widgets.Tabs.draw_text_active.text_style = mod.theme.font_regular{font_size: 9.0 top_drop: 0.22}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// PROGRESS. A gold tube with a black slot; the value a string of small LED
|
|
// beads down the slot, each burning warm white with a tight glow, a faint
|
|
// gold light under the lit run; the beads past the value are dark glass.
|
|
// The unknown value is a still scatter of lit beads along the whole slot: a
|
|
// face may not run a clock.
|
|
mod.widgets.ProgressBarFlat.height = 11.0
|
|
mod.widgets.ProgressBarFlat.draw_bg.thickness = uniform(11.0)
|
|
mod.widgets.ProgressBarFlat.clip_x = false
|
|
mod.widgets.ProgressBarFlat.clip_y = false
|
|
mod.widgets.ProgressBarFlat.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 3.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.ProgressBarFlat.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 3.0
|
|
let size = self.rect_size
|
|
let p = self.pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let o = self.rect_pos
|
|
let th = min(self.thickness, size.y)
|
|
let top = Finish.snap(o.y + (size.y - th) * 0.5, px) - o.y
|
|
let bot = Finish.snap(o.y + (size.y + th) * 0.5, px) - o.y
|
|
let x0 = Finish.snap(o.x + size.x * self.start, px) - o.x
|
|
let x1 = Finish.snap(o.x + size.x * self.end, px) - o.x
|
|
let h = vec2((x1 - x0) * 0.5, (bot - top) * 0.5)
|
|
let c = vec2(x0, top) + h
|
|
let r = h.y
|
|
let d = md_rbox(p, c, h, r)
|
|
let dis = step(4.5, self.intent)
|
|
var out = ad_well_r(p, c, h, r, px, vec3(0.012, 0.011, 0.010), 0.5, 1.4, dis)
|
|
var v1 = x0 + (x1 - x0) * clamp(self.value, 0.0, 1.0)
|
|
var unknown = 0.0
|
|
if self.value < 0.0 {
|
|
v1 = x1
|
|
unknown = 1.0
|
|
}
|
|
var hue = vec3(1.0, 0.94, 0.80)
|
|
if self.intent > 0.5 {
|
|
hue = mix(self.fill_color().rgb, vec3(1.0, 1.0, 1.0), 0.35)
|
|
}
|
|
hue = mix(hue, vec3(0.40, 0.36, 0.30), dis)
|
|
let inner = Finish.cover(d + 1.6, px)
|
|
let pitch = 4.0
|
|
let bx0 = x0 + r
|
|
let k = floor((p.x - bx0) / pitch + 0.5)
|
|
let bc = vec2(bx0 + k * pitch, c.y)
|
|
let inb = step(bx0 - 0.5, bc.x) * step(bc.x, x1 - r + 0.5)
|
|
var lit = step(bc.x, v1 - 1.0)
|
|
if unknown > 0.5 {
|
|
lit = step(0.62, Finish.hash(vec2(k * 1.37, 4.1)))
|
|
}
|
|
lit = lit * inb * (1.0 - dis * 0.6)
|
|
let bd = length(p - bc) - 1.05
|
|
// the faint gold light under the lit run
|
|
let under = step(x0 + 1.0, p.x) * step(p.x, v1) * inner * 0.10 * (1.0 - unknown)
|
|
out = Finish.over(out, vec4(vec3(1.0, 0.70, 0.30) * under, under))
|
|
let glow = exp(0.0 - max(bd, 0.0) / 0.9) * lit * inner * 0.55
|
|
out = Finish.over(out, vec4(mix(hue, vec3(1.0, 0.75, 0.40), 0.4) * glow, glow))
|
|
let core = Finish.cover(bd, px) * inb * inner
|
|
let bcol = mix(vec3(0.10, 0.085, 0.07), hue, lit)
|
|
out = Finish.over(out, vec4(bcol * core, core))
|
|
return out * self.track * self.opacity
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// LEVEL METERS. A black well of cells four points long with a point
|
|
// between: unlit cells dark glass, lit ones warm gold, amber from 70 % and
|
|
// a red ember from 90 %; the hold a cream line; the over lamp a small LED.
|
|
mod.widgets.LevelMeter.height = 8.0
|
|
mod.widgets.LevelMeterColumn.width = 8.0
|
|
mod.widgets.LevelMeter.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let vert = self.vertical
|
|
let along = mix(self.rect_size.x, self.rect_size.y, vert)
|
|
let across = mix(self.rect_size.y, self.rect_size.x, vert)
|
|
let a = mix(p.x, self.rect_size.y - p.y, vert)
|
|
let b = mix(p.y, p.x, vert)
|
|
let q = vec2(a, b)
|
|
let th = min(7.0, across)
|
|
let lamp_room = self.lamp * (th + 4.0)
|
|
let bar = max(4.0, along - lamp_room)
|
|
let h = vec2(bar * 0.5, th * 0.5)
|
|
let c = vec2(h.x, across * 0.5)
|
|
let r = 1.0
|
|
let d = md_rbox(q, c, h, r)
|
|
let pad = 1.5
|
|
let span = max(1.0, bar - pad * 2.0)
|
|
let share = clamp((a - pad) / span, 0.0, 1.0)
|
|
let pitch = 5.0
|
|
let cell = fract((a - pad) / pitch)
|
|
let in_cell = step(cell, 4.0 / pitch)
|
|
let lit = step(a, pad + span * self.level) * step(pad, a) * in_cell
|
|
let ramp = mix(mix(mix(vec3(0.93, 0.76, 0.38), vec3(1.0, 0.80, 0.42), smoothstep(0.0, 0.7, share)), vec3(1.0, 0.58, 0.20), step(0.7, share)), vec3(0.95, 0.27, 0.15), step(0.9, share))
|
|
let well = vec3(0.012, 0.011, 0.010)
|
|
var fill = mix(well, ramp, lit)
|
|
let cell_row = in_cell * step(pad, a) * step(a, pad + span)
|
|
fill = mix(fill, vec3(0.075, 0.060, 0.045), (1.0 - lit) * cell_row * step(1.2, abs(b - c.y) + 1.2))
|
|
let bt = b - (c.y - h.y)
|
|
fill = mix(fill, vec3(1.0, 0.97, 0.88), lit * step(1.0, bt) * step(bt, 1.0 + px) * 0.35)
|
|
if self.hold > 0.002 {
|
|
let at = pad + span * self.hold
|
|
let hm = step(abs(a - at), px) * step(abs(b - c.y), h.y)
|
|
fill = mix(fill, ad_cream(), hm)
|
|
}
|
|
let ca = Finish.cover(d, px)
|
|
var out = vec4(fill * ca, ca)
|
|
let e = Finish.band(d, 0.0, max(px, 0.7), px)
|
|
out = Finish.over(out, vec4(ad_gold_md() * e, e))
|
|
if self.lamp > 0.5 {
|
|
let la = bar + 2.0 + th * 0.5 + 1.0
|
|
let lc = vec2(mix(la, across * 0.5, vert), mix(across * 0.5, self.rect_size.y - la, vert))
|
|
out = Finish.over(out, md_led(p, lc, 2.6, px, vec3(1.0, 0.32, 0.18), step(0.5, self.over), 0.35))
|
|
}
|
|
return out * self.opacity
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// SCROLL BARS. A gold hairline down the length of the view and a slim
|
|
// capsule of polished gold riding on it.
|
|
mod.widgets.ScrollBar.bar_size = 10.0
|
|
mod.widgets.ScrollBar.bar_side_margin = 0.0
|
|
mod.widgets.ScrollBar.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let vert = self.is_vertical
|
|
let a = mix(p.x, p.y, vert)
|
|
let b = mix(p.y, p.x, vert)
|
|
let along = mix(self.rect_size.x, self.rect_size.y, vert)
|
|
let across = mix(self.rect_size.y, self.rect_size.x, vert)
|
|
let q = vec2(a, b)
|
|
let mid = across * 0.5
|
|
let rail = (1.0 - smoothstep(0.35, 0.35 + px, abs(b - mid))) * 0.55
|
|
var out = vec4(ad_line_c() * rail, rail)
|
|
let t0 = along * self.norm_scroll
|
|
let tl = along * self.norm_handle
|
|
let th = vec2(max(tl * 0.5 - 1.0, 4.0), 3.0)
|
|
let tc = vec2(t0 + tl * 0.5, mid)
|
|
let td = md_rbox(q, tc, th, th.y)
|
|
let tn = ad_nrm(q, tc, th, th.y)
|
|
let tn2 = mix(tn, vec2(tn.y, tn.x), vert)
|
|
let t = clamp((b - (mid - th.y)) / (2.0 * th.y), 0.0, 1.0)
|
|
var col = ad_gold_shape(td, tn2, 1.6, t, 0.12 * self.hover, 0.0)
|
|
col = mix(col, col * 0.85, self.drag)
|
|
col = mix(col, ad_gold_dk() * 0.5, Finish.band(td, 0.0, max(px, 0.45), px) * 0.6)
|
|
let ta = Finish.cover(td, px)
|
|
out = Finish.over(out, vec4(col * ta, ta))
|
|
return out * self.opacity
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// VIEWS AND PANELS. A raised panel is black lacquer stepped at its corners,
|
|
// in a polished gold rim with a pinstripe inside it, a small sunburst fan in
|
|
// its top right and bottom right corners and gold studs in the other two;
|
|
// the sunken one a deeper black well inside a double gold frame, a stepped
|
|
// wedge of mother-of-pearl set into the frame at the middle of its top and
|
|
// of its foot. The words on both keep the cream ink.
|
|
let ad_wedge = fn(dst: vec4, p: vec2, cx: float, y0: float, dir: float, px: float) -> vec4 {
|
|
// a stepped wedge on the edge at `y0`, growing into the surface (`dir`
|
|
// 1 down, -1 up): a broad low step and a narrow tall one, pearl inside
|
|
// a gold line
|
|
let yy = (p.y - y0) * dir
|
|
let qa = vec2(abs(p.x - cx), yy)
|
|
let s1 = md_rbox(qa, vec2(0.0, 2.2), vec2(13.0, 2.2), 0.0)
|
|
let s2 = md_rbox(qa, vec2(0.0, 3.6), vec2(7.0, 3.6), 0.0)
|
|
let d = min(s1, s2)
|
|
let a = Finish.cover(d, px)
|
|
var out = Finish.over(dst, vec4(ad_pearl(p * 1.3) * a, a))
|
|
let e = Finish.band(d, 0.0, max(px, 0.7), px)
|
|
return Finish.over(out, vec4(ad_gold_md() * e, e))
|
|
}
|
|
let md_plate = fn(p: vec2, size: vec2, o: vec2, px: float, sunken: float) -> vec4 {
|
|
let lo = vec2(Finish.snap(o.x, px), Finish.snap(o.y, px)) - o
|
|
let hi = vec2(Finish.snap(o.x + size.x, px), Finish.snap(o.y + size.y, px)) - o
|
|
let h = (hi - lo) * 0.5
|
|
let c = lo + h
|
|
let s = 4.0
|
|
let d = ad_step(p, c, h, s)
|
|
let n = ad_step_n(p, c, h, s)
|
|
var out = vec4(0.0, 0.0, 0.0, 0.0)
|
|
let k = clamp(30.0 / max(size.y, 1.0), 0.15, 1.0)
|
|
if sunken > 0.5 {
|
|
var face = ad_lacq(p, lo, hi, vec3(0.016, 0.014, 0.013), k * 0.5)
|
|
let sh = clamp(Finish.inset(p, c, h - vec2(1.6, 1.6), 2.0, vec2(0.0, 2.2), 2.4), 0.0, 1.0)
|
|
face = mix(face, vec3(0.0, 0.0, 0.0), sh * 0.6)
|
|
let a = Finish.cover(d, px)
|
|
out = Finish.over(out, vec4(face * a, a))
|
|
out = Finish.over(out, ad_pin(d, 2.7, max(px, 0.6), px, 0.75))
|
|
out = Finish.over(out, ad_rim(d + 4.0, n, 1.2, px, 0.8))
|
|
out = Finish.over(out, ad_rim(d, n, 1.6, px, 1.0))
|
|
out = ad_wedge(out, p, c.x, lo.y + 0.5, 1.0, px)
|
|
out = ad_wedge(out, p, c.x, hi.y - 0.5, -1.0, px)
|
|
return out
|
|
}
|
|
out = ad_drop(p, c, h, 2.0, 1.0)
|
|
var face = ad_lacq(p, lo, hi, ad_black(), k)
|
|
face = face + g3(Finish.grain(p / px, 0.004))
|
|
let a = Finish.cover(d, px)
|
|
out = Finish.over(out, vec4(face * a, a))
|
|
let fs = clamp(min(size.x, size.y) * 0.32, 14.0, 26.0)
|
|
out = ad_corner_fan(out, p, lo, hi, 1.0, 5.0, fs, px, 1.0)
|
|
out = ad_corner_fan(out, p, lo, hi, 2.0, 5.0, fs, px, 1.0)
|
|
out = ad_dome(out, p, lo + vec2(8.0, 8.0), 2.1, px, ad_gold_base())
|
|
out = ad_dome(out, p, vec2(lo.x + 8.0, hi.y - 8.0), 2.1, px, ad_gold_base())
|
|
out = Finish.over(out, ad_pin(d, 3.4, max(px, 0.6), px, 0.75))
|
|
return Finish.over(out, ad_rim(d, n, 1.6, px, 1.0))
|
|
}
|
|
|
|
mod.widgets.PanelView.clip_x = false
|
|
mod.widgets.PanelView.clip_y = false
|
|
mod.widgets.PanelView.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 5.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.PanelView.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 5.0
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
return md_plate(p, self.rect_size, self.rect_pos, px, self.sunken)
|
|
}
|
|
|
|
// The card is a leaf of macassar ebony laid crosswise, warmer than the
|
|
// ground, in a gold rim and pinstripe, a polished stud in each of its four
|
|
// corners. It lifts a little under the pointer.
|
|
mod.widgets.Card.radius = 2.0
|
|
mod.widgets.Card.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 5.0)
|
|
return self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.Card.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 5.0
|
|
let size = self.rect_size
|
|
let p = self.pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let o = self.rect_pos
|
|
let lo = vec2(Finish.snap(o.x, px), Finish.snap(o.y, px)) - o
|
|
let hi = vec2(Finish.snap(o.x + size.x, px), Finish.snap(o.y + size.y, px)) - o
|
|
let h = (hi - lo) * 0.5
|
|
let c = lo + h
|
|
let k4 = vec4(4.0, 4.0, 4.0, 4.0)
|
|
let d = ad_cut(p, c, h, k4)
|
|
var out = ad_drop(p, c, h, 2.0, 1.0 + 0.4 * self.hover)
|
|
var face = ad_ebony(vec2(p.y * 1.0 + 300.0, p.x * 0.6 + 40.0), px)
|
|
face = mix(face, ad_ebony_c(), 0.35) * vec3(1.25, 1.08, 0.95) + vec3(0.018, 0.010, 0.004)
|
|
face = Finish.lift(face, 0.03 * self.hover)
|
|
let a = Finish.cover(d, px)
|
|
out = Finish.over(out, vec4(face * a, a))
|
|
out = ad_dome(out, p, lo + vec2(7.0, 7.0), 2.0, px, ad_gold_base())
|
|
out = ad_dome(out, p, vec2(hi.x - 7.0, lo.y + 7.0), 2.0, px, ad_gold_base())
|
|
out = ad_dome(out, p, hi - vec2(7.0, 7.0), 2.0, px, ad_gold_base())
|
|
out = ad_dome(out, p, vec2(lo.x + 7.0, hi.y - 7.0), 2.0, px, ad_gold_base())
|
|
out = Finish.over(out, ad_pin(d, 3.2, max(px, 0.6), px, 0.75))
|
|
return Finish.over(out, ad_rim(d, ad_cut_n(p, c, h, k4), 1.6, px, 1.0))
|
|
}
|
|
|
|
// The plain rounded view keeps the colours its caller gives it; the edge is
|
|
// a snapped hairline at the true radius.
|
|
mod.widgets.RoundedView.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
var fill = self.color
|
|
if self.color_2.x > -0.5 {
|
|
fill = mix(self.color, self.color_2, mix(self.pos.y, self.pos.x, self.gradient_fill_horizontal))
|
|
}
|
|
let lo = vec2(self.border_inset.x, self.border_inset.y)
|
|
let hi = self.rect_size - vec2(self.border_inset.z, self.border_inset.w)
|
|
let h = (hi - lo) * 0.5
|
|
let c = lo + h
|
|
let d = md_rbox(p, c, h, max(self.border_radius * 2.0, 1.0))
|
|
var col = fill
|
|
if self.border_size > 0.0 {
|
|
col = mix(col, self.border_color, Finish.band(d, 0.0, max(self.border_size, px), px) * self.border_color.a)
|
|
}
|
|
let a = Finish.cover(d, px) * col.a
|
|
return vec4(col.rgb * a, a)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// LISTS. Rows of 22 points on the ebony, parted by a faint gold hairline; a
|
|
// hovered row takes a breath of gold; the chosen row is a plaque of dark old
|
|
// gold in a polished rim (dark enough that the cream ink keeps its 5:1),
|
|
// ending short of the scroll bar.
|
|
let ad_row_plate = fn(p: vec2, c: vec2, h: vec2, px: float) -> vec4 {
|
|
let k4 = vec4(2.5, 2.5, 2.5, 2.5)
|
|
let d = ad_cut(p, c, h, k4)
|
|
let t = clamp((p.y - (c.y - h.y)) / max(2.0 * h.y, 1.0), 0.0, 1.0)
|
|
var face = ad_bronze() * (1.25 - 0.45 * t)
|
|
face = face + vec3(0.10, 0.07, 0.03) * exp(0.0 - (t - 0.18) * (t - 0.18) / 0.012) * 0.6
|
|
let br = Finish.brushed(p, vec2(1.0, 0.0), 0.4) - 0.5
|
|
face = face * (1.0 + br * 0.08)
|
|
let a = Finish.cover(d, px)
|
|
var out = vec4(face * a, a)
|
|
return Finish.over(out, ad_rim(d, ad_cut_n(p, c, h, k4), 1.2, px, 1.0))
|
|
}
|
|
mod.widgets.ListItemOne.height = 22.0
|
|
mod.widgets.ListItem.padding = mod.turtle.Inset{left: 12.0 right: 8.0 top: 0.0 bottom: 0.0}
|
|
mod.widgets.ListItem.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let o = self.rect_pos
|
|
let live = 1.0 - self.disabled
|
|
let lo = vec2(Finish.snap(o.x, px), Finish.snap(o.y, px)) - o
|
|
let hi = vec2(Finish.snap(o.x + self.rect_size.x, px), Finish.snap(o.y + self.rect_size.y, px)) - o
|
|
let lay = (self.hover * 0.12 + self.down * 0.08) * live * (1.0 - self.selected)
|
|
let hd = md_rbox(p, (lo + hi) * 0.5 - vec2(3.0, 0.0), (hi - lo) * 0.5 - vec2(5.0, 1.5), 1.5)
|
|
let la = Finish.cover(hd, px) * lay
|
|
var out = vec4(ad_gold_md() * la, la)
|
|
if self.selected > 0.5 {
|
|
let h = vec2((hi.x - lo.x) * 0.5 - 6.0, (hi.y - lo.y) * 0.5 - 1.0)
|
|
let c = vec2(lo.x + h.x + 2.0, (lo.y + hi.y) * 0.5)
|
|
out = Finish.over(out, ad_row_plate(p, c, h, px))
|
|
}
|
|
let yb = hi.y
|
|
let dk = step(yb - max(px, 0.6), p.y) * step(p.y, yb) * step(lo.x + 4.0, p.x) * step(p.x, hi.x - 8.0) * 0.25 * (1.0 - self.selected)
|
|
out = Finish.over(out, vec4(ad_line_c() * dk, dk))
|
|
return out
|
|
}
|
|
mod.widgets.ListItem.draw_text.color = #ede2c6
|
|
|
|
// The open list of a drop-down: a black lacquer leaf stepped at its corners
|
|
// in a gold rim and pinstripe, with a soft shadow; the row under the
|
|
// pointer a gold wash, the chosen row a gold check.
|
|
mod.widgets.PopupMenuFlat.clip_x = false
|
|
mod.widgets.PopupMenuFlat.clip_y = false
|
|
mod.widgets.PopupMenuFlat.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 10.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.PopupMenuFlat.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 10.0
|
|
let size = self.rect_size
|
|
let p = self.pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let o = self.rect_pos
|
|
let lo = vec2(Finish.snap(o.x, px), Finish.snap(o.y, px)) - o
|
|
let hi = vec2(Finish.snap(o.x + size.x, px), Finish.snap(o.y + size.y, px)) - o
|
|
let h = (hi - lo) * 0.5
|
|
let c = lo + h
|
|
let s = 3.0
|
|
let d = ad_step(p, c, h, s)
|
|
let sh = Finish.drop(p, c, h, 2.0, vec2(0.5, 2.5), 2.2) * 0.55
|
|
var out = vec4(0.0, 0.0, 0.0, sh)
|
|
let face = ad_lacq(p, lo, hi, ad_black(), clamp(30.0 / max(size.y, 1.0), 0.2, 1.0))
|
|
let a = Finish.cover(d, px)
|
|
out = Finish.over(out, vec4(face * a, a))
|
|
out = Finish.over(out, ad_pin(d, 3.0, max(px, 0.6), px, 0.7))
|
|
return Finish.over(out, ad_rim(d, ad_step_n(p, c, h, s), 1.5, px, 1.0))
|
|
}
|
|
mod.widgets.PopupMenuItem.padding.left = 18.0
|
|
mod.widgets.PopupMenuItem.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let c = self.rect_size * 0.5
|
|
let h = c - vec2(3.0, 0.5)
|
|
let d = md_rbox(p, c, h, 1.5)
|
|
let live = 1.0 - self.disabled
|
|
let wa = Finish.cover(d, px) * self.hover * live * 0.22
|
|
var out = vec4(ad_gold_md() * wa, wa)
|
|
let m0 = vec2(5.0, c.y + 0.2)
|
|
let m1 = vec2(7.2, c.y + 2.4)
|
|
let m2 = vec2(10.6, c.y - 2.6)
|
|
let mk = Finish.cover(min(md_seg(p, m0, m1), md_seg(p, m1, m2)) - 0.75, px) * self.active
|
|
return Finish.over(out, vec4(ad_gold_lt() * mk, mk))
|
|
}
|
|
|
|
// The dock's tabs: the bar is the ground with a gold line at its foot; the
|
|
// tab in use a black lacquer leaf rounded at its top corners in its rim, open at
|
|
// the foot where it joins the panel below; the others lift under the
|
|
// pointer.
|
|
mod.widgets.Tab.padding = mod.turtle.Inset{left: 12.0 right: 12.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.Tab.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let o = self.rect_pos
|
|
let lo = vec2(Finish.snap(o.x, px), Finish.snap(o.y + 2.0, px)) - o
|
|
let hi = vec2(Finish.snap(o.x + self.rect_size.x, px), Finish.snap(o.y + self.rect_size.y, px)) - o + vec2(0.0, 8.0)
|
|
let h = (hi - lo) * 0.5
|
|
let c = lo + h
|
|
let k4 = vec4(3.0, 3.0, 0.0, 0.0)
|
|
let d = ad_cut(p, c, h, k4)
|
|
let face = ad_lacq(p, lo, hi, ad_black(), 1.0)
|
|
let a = Finish.cover(d, px) * self.active
|
|
var out = vec4(face * a, a)
|
|
out = Finish.over(out, ad_rim(d, ad_cut_n(p, c, h, k4), 1.3, px, 1.0) * self.active)
|
|
let lift = Finish.cover(d, px) * 0.12 * self.hover * (1.0 - self.active)
|
|
return Finish.over(vec4(ad_gold_md() * lift, lift), out)
|
|
}
|
|
mod.widgets.TabBar.draw_fill.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let yb = Finish.snap(self.rect_pos.y + self.rect_size.y, px) - self.rect_pos.y
|
|
let dk = step(yb - 1.3, p.y) * step(p.y, yb) * 0.9
|
|
return vec4(ad_gold_md() * dk, dk)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// CHIPS AND BADGES. A chip is a small lacquer plaque in its rim (the
|
|
// outline when it asks for a border); a badge a small lacquer plaque in a
|
|
// gold rim with gold figures.
|
|
mod.widgets.ChipFlat.size = mod.widgets.ChipSize.Small
|
|
mod.widgets.Chip.size = mod.widgets.ChipSize.Small
|
|
mod.widgets.ChipFlat.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 6.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.ChipFlat.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 6.0
|
|
let ch = min(22.0, self.rect_size.y)
|
|
let dy = (self.rect_size.y - ch) * 0.5
|
|
let sz = vec2(self.rect_size.x, ch)
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let pp = (p - vec2(0.0, dy) + vec2(m, m)) / (sz + vec2(2.0 * m, 2.0 * m))
|
|
let has_fill = step(0.05, self.color.a) * step(0.6, Finish.lum(self.ink.rgb))
|
|
let kind = mix(5.0, 8.0, step(0.5, has_fill + 1.0 - step(0.01, self.border_size)))
|
|
let lift = mix(0.0, 0.6, has_fill)
|
|
return ad_button(pp, sz, self.rect_pos + vec2(0.0, dy), px, max(self.hover, lift), self.down, self.keyed, 0.0, 0.0, 0.0, vec4(2.5, 2.5, 2.5, 2.5), kind, m)
|
|
}
|
|
mod.widgets.ChipFlat.draw_text.text_style = mod.theme.font_label{font_size: 6.5}
|
|
mod.widgets.BadgePalette.neutral = #1a1510
|
|
mod.widgets.BadgePalette.on_neutral = #e8d4a2
|
|
mod.widgets.BadgeFlat.draw_text.text_style = mod.theme.font_label{font_size: 6.5}
|
|
mod.widgets.Badge.draw_text.text_style = mod.theme.font_label{font_size: 6.5}
|
|
mod.widgets.BadgeFlat.clip_x = false
|
|
mod.widgets.BadgeFlat.clip_y = false
|
|
mod.widgets.BadgeFlat.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let o = self.rect_pos
|
|
let bh = min(18.0, self.rect_size.y - 2.0)
|
|
let y0 = Finish.snap(o.y + (self.rect_size.y - bh) * 0.5, px) - o.y
|
|
let lo = vec2(Finish.snap(o.x + 1.0, px) - o.x, y0)
|
|
let hi = vec2(Finish.snap(o.x + self.rect_size.x - 1.0, px) - o.x, Finish.snap(o.y + y0 + bh, px) - o.y)
|
|
let h = (hi - lo) * 0.5
|
|
let c = lo + h
|
|
let k4 = vec4(2.0, 2.0, 2.0, 2.0)
|
|
let d = ad_cut(p, c, h, k4)
|
|
let face = ad_lacq(p, lo, hi, self.color.rgb, 1.0)
|
|
let a = Finish.cover(d, px)
|
|
var out = vec4(face * a, a)
|
|
out = Finish.over(out, ad_rim(d, ad_cut_n(p, c, h, k4), 1.2, px, 1.0))
|
|
return out * self.color.a
|
|
}
|
|
|
|
// Bold in running text is the reading serif's own bold: the wide legend
|
|
// face is for captions and plaques, and set inside a sentence it would
|
|
// shout.
|
|
mod.widgets.Markdown.text_style_bold = mod.theme.font_regular{font_size: 9.5 font_family: mod.theme.font_regular.font_family{ibm_plex_text := FontMember{res: crate_resource("self:resources/PlayfairDisplay-Variable.ttf") weight: 700.0 asc: 0.0 desc: 0.0}}}
|
|
mod.widgets.Html.text_style_bold = mod.theme.font_regular{font_size: 9.5 font_family: mod.theme.font_regular.font_family{ibm_plex_text := FontMember{res: crate_resource("self:resources/PlayfairDisplay-Variable.ttf") weight: 700.0 asc: 0.0 desc: 0.0}}}
|
|
mod.widgets.TextFlow.text_style_bold = mod.theme.font_regular{font_size: 9.5 font_family: mod.theme.font_regular.font_family{ibm_plex_text := FontMember{res: crate_resource("self:resources/PlayfairDisplay-Variable.ttf") weight: 700.0 asc: 0.0 desc: 0.0}}}
|
|
|
|
// The spinner keeps its stock turning face (it runs on the pass clock, which
|
|
// a face may not read), in gold on a faint track.
|
|
mod.widgets.SpinnerFlat.draw_bg.color = #cdb07a
|
|
mod.widgets.SpinnerFlat.draw_bg.stroke_width = 2.5
|
|
mod.widgets.SpinnerFlat.draw_bg.track_alpha = 0.25
|
|
|
|
// Rules between groups: a gold hairline with a small stepped lozenge at its
|
|
// middle.
|
|
mod.widgets.Hr.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let y = Finish.snap(self.rect_pos.y + self.rect_size.y * 0.5, px) - self.rect_pos.y
|
|
let ln = (1.0 - smoothstep(0.35, 0.35 + px, abs(p.y - y))) * 0.8
|
|
let lq = abs(p - vec2(self.rect_size.x * 0.5, y))
|
|
let lz = Finish.cover(lq.x * 0.5 + lq.y - 2.0, px)
|
|
let a = max(ln, lz)
|
|
return vec4(ad_line_c() * a, a)
|
|
}
|
|
mod.widgets.Vr.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let x = Finish.snap(self.rect_pos.x + self.rect_size.x * 0.5, px) - self.rect_pos.x
|
|
let a = (1.0 - smoothstep(0.35, 0.35 + px, abs(p.x - x))) * 0.8
|
|
return vec4(ad_line_c() * a, a)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// THE TREE. Its rows stand on the ebony, clear; the open row is the dark old
|
|
// gold plaque of the list's chosen row.
|
|
mod.widgets.FileTreeNode.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let lo = vec2(2.0, 1.0)
|
|
let hi = self.rect_size - vec2(4.0, 1.0)
|
|
let h = (hi - lo) * 0.5
|
|
let c = lo + h
|
|
return ad_row_plate(p, c, h, px) * self.active
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// STATES. Every held state is written as a plain value that cuts in at once:
|
|
// the library writes some as snap() values, which a state held as a default
|
|
// (the states page) never applies. Live, the cut is the same as the snap.
|
|
mod.widgets.ButtonFlat.animator.hover.on.from = {all: Snap}
|
|
mod.widgets.ButtonFlat.animator.hover.on.apply = {draw_bg: {down: 0.0 hover: 1.0} draw_text: {down: 0.0 hover: 1.0}}
|
|
mod.widgets.ButtonFlat.animator.hover.down.from = {all: Snap}
|
|
mod.widgets.ButtonFlat.animator.hover.down.apply = {draw_bg: {down: 1.0 hover: 1.0} draw_text: {down: 1.0 hover: 1.0}}
|
|
mod.widgets.CheckBoxFlat.animator.hover.on.from = {all: Snap}
|
|
mod.widgets.CheckBoxFlat.animator.hover.on.apply = {draw_bg: {down: 0.0 hover: 1.0} draw_text: {down: 0.0 hover: 1.0}}
|
|
mod.widgets.CheckBoxFlat.animator.hover.down.from = {all: Snap}
|
|
mod.widgets.CheckBoxFlat.animator.hover.down.apply = {draw_bg: {down: 1.0 hover: 1.0} draw_text: {down: 1.0 hover: 1.0}}
|
|
mod.widgets.ToggleFlat.animator.hover.on.from = {all: Snap}
|
|
mod.widgets.ToggleFlat.animator.hover.on.apply = {draw_bg: {down: 0.0 hover: 1.0} draw_text: {down: 0.0 hover: 1.0}}
|
|
mod.widgets.ToggleFlat.animator.hover.down.from = {all: Snap}
|
|
mod.widgets.ToggleFlat.animator.hover.down.apply = {draw_bg: {down: 1.0 hover: 1.0} draw_text: {down: 1.0 hover: 1.0}}
|
|
mod.widgets.RadioButtonFlat.animator.hover.on.from = {all: Snap}
|
|
mod.widgets.RadioButtonFlat.animator.hover.on.apply = {draw_bg: {down: 0.0 hover: 1.0} draw_text: {down: 0.0 hover: 1.0}}
|
|
mod.widgets.RadioButtonFlat.animator.hover.down.from = {all: Snap}
|
|
mod.widgets.RadioButtonFlat.animator.hover.down.apply = {draw_bg: {down: 1.0 hover: 1.0} draw_text: {down: 1.0 hover: 1.0}}
|
|
mod.widgets.TextInputFlat.animator.hover.on.from = {all: Snap}
|
|
mod.widgets.TextInputFlat.animator.hover.on.apply = {draw_bg: {down: 0.0 hover: 1.0} draw_text: {down: 0.0 hover: 1.0}}
|
|
mod.widgets.TextInputFlat.animator.hover.down.from = {all: Snap}
|
|
mod.widgets.TextInputFlat.animator.hover.down.apply = {draw_bg: {down: 1.0 hover: 1.0} draw_text: {down: 1.0 hover: 1.0}}
|
|
mod.widgets.DropDownFlat.animator.hover.on.from = {all: Snap}
|
|
mod.widgets.DropDownFlat.animator.hover.on.apply = {draw_bg: {down: 0.0 hover: 1.0} draw_text: {down: 0.0 hover: 1.0}}
|
|
mod.widgets.DropDownFlat.animator.hover.down.from = {all: Snap}
|
|
mod.widgets.DropDownFlat.animator.hover.down.apply = {draw_bg: {down: 1.0 hover: 1.0} draw_text: {down: 1.0 hover: 1.0}}
|
|
mod.widgets.SliderFlat.animator.hover.on.from = {all: Snap}
|
|
mod.widgets.SliderFlat.animator.hover.on.apply = {draw_bg: {hover: 1.0} draw_text: {hover: 1.0}}
|
|
mod.widgets.SliderFlat.animator.drag.on.from = {all: Snap}
|
|
mod.widgets.SliderFlat.animator.drag.on.apply = {draw_bg: {drag: 1.0} draw_text: {drag: 1.0}}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// THE WINDOW'S GROUND. Black lacquer, with two holes cut in it: the header
|
|
// where the catalogue's toolbar stands and the panes below it, both stepped
|
|
// at their corners, both showing the ebony. A polished gold rim runs round
|
|
// each hole on the lacquer's side and a pinstripe beside it, and a rim runs
|
|
// round the window's own edge, so every band of lacquer between them is
|
|
// drawn with the double gold line. The caption band above the header holds
|
|
// the crest round the title and the sunburst; nothing else of the frame is
|
|
// ornamented, and the ebony is calm under the words.
|
|
let ad_holes = fn(p: vec2, W: float, H: float) -> float {
|
|
let dh = ad_step(p, vec2(W * 0.5, 60.0), vec2(W * 0.5 - 6.0, 27.0), 4.0)
|
|
let dp = ad_step(p, vec2(W * 0.5, (95.0 + H - 6.0) * 0.5), vec2(W * 0.5 - 6.0, (H - 6.0 - 95.0) * 0.5), 5.0)
|
|
return min(dh, dp)
|
|
}
|
|
|
|
// The crest round the title, in the window's middle: `q` is (distance from
|
|
// the middle, y), so it is drawn the same on both sides. A plaque of black
|
|
// lacquer stepped at its corners in a gold rim and pinstripe, and three
|
|
// steps falling away from it either side, the nearest inlaid with
|
|
// mother-of-pearl, the two beyond with upright gold pinstripes.
|
|
let ad_crest = fn(dst: vec4, q: vec2, px: float) -> vec4 {
|
|
var out = dst
|
|
if q.x > 140.0 {
|
|
return out
|
|
}
|
|
// the steps either side
|
|
let s0 = md_rbox(q, vec2(93.0, 15.5), vec2(8.0, 10.5), 0.0)
|
|
let s1 = md_rbox(q, vec2(110.0, 18.0), vec2(8.0, 8.0), 0.0)
|
|
let s2 = md_rbox(q, vec2(127.0, 20.5), vec2(8.0, 5.5), 0.0)
|
|
let ds = min(s0, min(s1, s2))
|
|
let sa = Finish.cover(ds, px)
|
|
let sl = ad_lacq(q, vec2(0.0, 5.0), vec2(0.0, 26.0), ad_black(), 1.0)
|
|
out = Finish.over(out, vec4(sl * sa, sa))
|
|
// the pearl in the nearest step
|
|
let pd = md_rbox(q, vec2(93.0, 15.5), vec2(5.6, 8.1), 0.0)
|
|
let pa = Finish.cover(pd, px)
|
|
out = Finish.over(out, vec4(ad_pearl(q * 1.2 + vec2(3.0, 0.0)) * pa, pa))
|
|
// upright pinstripes in the two beyond
|
|
let u1 = (1.0 - smoothstep(0.35, 0.35 + px, abs(abs(q.x - 110.0) - 2.5))) * Finish.cover(md_rbox(q, vec2(110.0, 18.0), vec2(6.0, 6.0), 0.0), px)
|
|
let u2 = (1.0 - smoothstep(0.35, 0.35 + px, abs(q.x - 127.0))) * Finish.cover(md_rbox(q, vec2(127.0, 20.5), vec2(6.0, 3.5), 0.0), px)
|
|
let ua = max(u1, u2) * 0.85
|
|
out = Finish.over(out, vec4(ad_line_c() * ua, ua))
|
|
// each step's gold outline
|
|
let e0 = Finish.band(s0, 0.0, 1.0, px)
|
|
let e1 = Finish.band(s1, 0.0, 1.0, px)
|
|
let e2 = Finish.band(s2, 0.0, 1.0, px)
|
|
let ea = clamp(e0 + e1 + e2, 0.0, 1.0)
|
|
out = Finish.over(out, vec4(ad_gold_md() * ea, ea))
|
|
// the plaque
|
|
let pc = vec2(0.0, 15.5)
|
|
let ph = vec2(83.0, 11.5)
|
|
let d = ad_step(q, pc, ph, 3.0)
|
|
let n = ad_step_n(q, pc, ph, 3.0)
|
|
let a = Finish.cover(d, px)
|
|
let face = ad_lacq(q, pc - ph, pc + ph, ad_black(), 1.0)
|
|
out = Finish.over(out, vec4(face * a, a))
|
|
out = Finish.over(out, ad_pin(d, 2.8, max(px, 0.6), px, 0.8))
|
|
return Finish.over(out, ad_rim(d, n, 1.5, px, 1.0))
|
|
}
|
|
|
|
// The sunburst: gold rays fanning from a point far below the window's
|
|
// middle, thick and thin by turns, across the caption band clear of the
|
|
// crest; they fade out short of the window's buttons and of its left end.
|
|
let ad_burst = fn(dst: vec4, p: vec2, W: float, px: float) -> vec4 {
|
|
let cx = W * 0.5
|
|
let x = abs(p.x - cx)
|
|
if x < 136.0 {
|
|
return dst
|
|
}
|
|
let q = vec2(p.x - cx, 160.0 - p.y)
|
|
let r = length(q)
|
|
let phi = atan2(q.x, q.y)
|
|
let st = 0.03
|
|
let k = phi / st
|
|
let kf = floor(k + 0.5)
|
|
let dperp = abs(k - kf) * st * r
|
|
let thick = mix(0.26, 0.6, step(0.25, abs(fract(kf * 0.5))))
|
|
let ray = Finish.cover(dperp - thick, px)
|
|
let clear = smoothstep(136.0, 150.0, x) * smoothstep(2.0, 5.0, p.y) * (1.0 - smoothstep(26.0, 28.0, p.y))
|
|
let fade_r = 1.0 - smoothstep(W - 300.0, W - 165.0, p.x)
|
|
let fade_l = smoothstep(6.0, 70.0, p.x)
|
|
let ra = ray * clear * fade_r * fade_l * 0.75
|
|
return Finish.over(dst, vec4(mix(ad_line_c(), ad_gold_lt(), 0.25) * ra, ra))
|
|
}
|
|
|
|
mod.widgets.Window.show_bg = true
|
|
mod.widgets.Window.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let p = self.pos * self.rect_size
|
|
let W = self.rect_size.x
|
|
let H = self.rect_size.y
|
|
let dhole = ad_holes(p, W, H)
|
|
let e = 0.35
|
|
let gx = ad_holes(p + vec2(e, 0.0), W, H) - ad_holes(p - vec2(e, 0.0), W, H)
|
|
let gy = ad_holes(p + vec2(0.0, e), W, H) - ad_holes(p - vec2(0.0, e), W, H)
|
|
var nh = vec2(0.0, 1.0)
|
|
if length(vec2(gx, gy)) > 0.0001 {
|
|
nh = normalize(vec2(gx, gy))
|
|
}
|
|
// the lacquer of the frame: a band of the room's light high in the
|
|
// caption band, a little lighter toward the top
|
|
var col = vec3(0.026, 0.024, 0.022)
|
|
let lb = exp(0.0 - (p.y - 9.0) * (p.y - 9.0) / 45.0) * 0.032
|
|
col = col + vec3(lb, lb * 0.95, lb * 0.88)
|
|
// the ebony in the holes under one broad diagonal lacquer sheen
|
|
var wood = ad_ebony(p, px)
|
|
let u = (p.x * 0.45 + p.y) / max(H, 1.0)
|
|
let sheen = exp(0.0 - (u - 0.30) * (u - 0.30) / 0.02) * 0.016
|
|
wood = wood + vec3(sheen, sheen * 0.92, sheen * 0.8)
|
|
let inh = Finish.cover(dhole, px)
|
|
col = mix(col, wood, inh)
|
|
// the frame's shade on the wood along each hole's upper and left edges
|
|
let sh = (1.0 - smoothstep(0.0, 5.0, 0.0 - dhole)) * inh * (0.4 + 0.6 * clamp(0.0 - nh.y - nh.x * 0.5, 0.0, 1.0))
|
|
col = mix(col, col * 0.45, sh * 0.7)
|
|
var out = vec4(col, 1.0)
|
|
// the caption band's ornament
|
|
if p.y < 31.0 {
|
|
out = ad_burst(out, p, W, px)
|
|
out = ad_crest(out, vec2(abs(p.x - W * 0.5), p.y), px)
|
|
}
|
|
// the gold rim along every hole on the lacquer's side, the pinstripe
|
|
// beyond it, and the rim round the window's edge
|
|
out = Finish.over(out, ad_rim(0.0 - dhole, nh * -1.0, 2.0, px, 1.0))
|
|
out = Finish.over(out, ad_pin(0.0 - dhole, 3.0, max(px, 0.7), px, 0.85))
|
|
let dw = md_rbox(p, vec2(W, H) * 0.5, vec2(W, H) * 0.5, 0.0)
|
|
let nw = ad_nrm(p, vec2(W, H) * 0.5, vec2(W, H) * 0.5, 0.0)
|
|
out = Finish.over(out, ad_rim(dw, nw, 1.6, px, 1.0))
|
|
return vec4(out.rgb, 1.0)
|
|
}
|
|
|
|
// A splitter is the frame's lacquer band run down between two panes, ten
|
|
// points wide, its gold rims stepping into the header's band above and the
|
|
// foot band below as the panes' corners step.
|
|
let ad_split = fn(q: vec2, mid: float, hw: float, a0: float, a1: float) -> float {
|
|
let ph = vec2(200.0, (a1 - a0) * 0.5)
|
|
let dl = ad_step(q, vec2(mid - hw - 200.0, (a0 + a1) * 0.5), ph, 5.0)
|
|
let dr = ad_step(q, vec2(mid + hw + 200.0, (a0 + a1) * 0.5), ph, 5.0)
|
|
return min(min(dl, dr), q.y + 4.0)
|
|
}
|
|
mod.widgets.Splitter.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 14.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.Splitter.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let m = 14.0
|
|
let size = self.rect_size
|
|
let p = self.pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let v = self.is_vertical
|
|
// work in the bar's own frame: `a` along it, `b` across it
|
|
let a = mix(p.x, p.y, v)
|
|
let b = mix(p.y, p.x, v)
|
|
let along = mix(size.x, size.y, v)
|
|
let thick = mix(size.y, size.x, v)
|
|
let mid = thick * 0.5
|
|
let hw = 5.0
|
|
let a0 = 4.0
|
|
let a1 = along - 6.0
|
|
let q = vec2(b, a)
|
|
let dh = ad_split(q, mid, hw, a0, a1)
|
|
let e = 0.35
|
|
let gx = ad_split(q + vec2(e, 0.0), mid, hw, a0, a1) - ad_split(q - vec2(e, 0.0), mid, hw, a0, a1)
|
|
let gy = ad_split(q + vec2(0.0, e), mid, hw, a0, a1) - ad_split(q - vec2(0.0, e), mid, hw, a0, a1)
|
|
var nh = vec2(0.0, 1.0)
|
|
if length(vec2(gx, gy)) > 0.0001 {
|
|
nh = normalize(vec2(gx, gy))
|
|
}
|
|
let inside = step(-8.0, a) * step(a, along - 1.6) * step(abs(b - mid), hw + 12.0)
|
|
let band = Finish.cover(0.0 - dh, px) * inside
|
|
let act = max(max(self.hover, self.drag), self.focus)
|
|
var lac = vec3(0.026, 0.024, 0.022)
|
|
lac = Finish.lift(lac, 0.04 * act)
|
|
var out = vec4(lac * band, band)
|
|
let nn = vec2(mix(nh.y, nh.x, v), mix(nh.x, nh.y, v))
|
|
out = Finish.over(out, ad_rim(0.0 - dh, nn * -1.0, 2.0, px, 1.0) * inside)
|
|
out = Finish.over(out, ad_pin(0.0 - dh, 3.0, max(px, 0.7), px, 0.85) * inside)
|
|
// under the hand, a bright gold line down the middle of the grip
|
|
let inbar = 1.0 - smoothstep(self.bar_size * 0.5 - 2.0, self.bar_size * 0.5, abs(a - along * 0.5))
|
|
let gl = (1.0 - smoothstep(0.5, 0.5 + px, abs(b - mid))) * inbar * act
|
|
out = Finish.over(out, vec4(ad_gold_lt() * gl, gl))
|
|
return out
|
|
}
|
|
|
|
// ---------------------------------------------------------------- switches and meter
|
|
|
|
// THE SWITCHES. The slide switch is a black pill in its gold rim that fills
|
|
// with gold while on, an ivory dome riding in it. The rocker is a lever
|
|
// switch: a black lacquer plate in its gold rim, a polished gold collar at
|
|
// its middle with a small lamp set in it, and a gold bat-handle lever
|
|
// thrown to the left while off and to the right while on, when the lamp in
|
|
// the collar burns amber.
|
|
let ad_lever_d = fn(p: vec2, cc: vec2, tip: vec2) -> vec4 {
|
|
// the lever's distance (.x) and its outward normal (.yz): a tapered
|
|
// shaft from the collar to the tip, and a ball on the tip
|
|
let ba = tip - cc
|
|
let k = clamp(dot(p - cc, ba) / max(dot(ba, ba), 0.0001), 0.0, 1.0)
|
|
let ax = p - (cc + ba * k)
|
|
let dl = length(ax) - mix(2.4, 1.6, k)
|
|
let bq = p - tip
|
|
let db = length(bq) - 3.1
|
|
if db < dl {
|
|
let nb = bq / max(length(bq), 0.0001)
|
|
return vec4(db, nb.x, nb.y, 0.0)
|
|
}
|
|
let nl = ax / max(length(ax), 0.0001)
|
|
return vec4(dl, nl.x, nl.y, 0.0)
|
|
}
|
|
let ad_rocker = fn(pos: vec2, size: vec2, o: vec2, px: float, active: float, hover: float, down: float, focus: float, dis: float, at_end: float) -> vec4 {
|
|
let m = 4.0
|
|
let p = pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let live = 1.0 - dis
|
|
let tw = 38.0
|
|
let th = 16.0
|
|
let x0 = mix(1.0, size.x - tw - 1.0, at_end)
|
|
let lo = vec2(Finish.snap(o.x + x0, px), Finish.snap(o.y + (size.y - th) * 0.5, px)) - o
|
|
let hi = lo + vec2(tw, th)
|
|
let c = (lo + hi) * 0.5
|
|
let h = vec2(tw * 0.5, th * 0.5)
|
|
let d = md_rbox(p, c, h, 3.0)
|
|
let n = ad_nrm(p, c, h, 3.0)
|
|
var out = ad_drop(p, c, h, 3.0, mix(1.0, 0.5, dis))
|
|
let face = mix(ad_lacq(p, lo, hi, ad_black(), 1.0), vec3(0.06, 0.05, 0.04), dis)
|
|
let a = Finish.cover(d, px)
|
|
out = Finish.over(out, vec4(face * a, a))
|
|
out = Finish.over(out, ad_pin(d, 2.6, max(px, 0.6), px, mix(0.6, 0.3, dis)))
|
|
out = Finish.over(out, ad_rim(d, n, 1.3, px, 1.0 - 0.7 * dis) * mix(1.0, 0.5, dis))
|
|
let on = clamp(active, 0.0, 1.0)
|
|
let cc = vec2(Finish.snap(o.x + c.x, px) - o.x, c.y)
|
|
let tip = cc + vec2(mix(-11.0, 11.0, on), 0.3)
|
|
let press = down * live
|
|
// the lever's shadow on the plate, down and to the right
|
|
let sh = ad_lever_d(p - vec2(0.6, 1.5), cc, tip)
|
|
let sa = (1.0 - smoothstep(-0.6, 1.8, sh.x)) * 0.6 * a
|
|
out = Finish.over(out, vec4(0.0, 0.0, 0.0, sa))
|
|
// the lever, polished gold
|
|
let lv = ad_lever_d(p, cc, tip)
|
|
let t = clamp((p.y - (cc.y - 3.0)) / 6.0, 0.0, 1.0)
|
|
var lc = ad_gold_shape(lv.x, vec2(lv.y, lv.z), 1.8, t, hover * live * (1.0 - press), dis)
|
|
lc = mix(lc, lc * 0.85, press)
|
|
lc = mix(lc, ad_gold_dk() * 0.4, Finish.band(lv.x, 0.0, max(px, 0.5), px) * 0.7)
|
|
let lfa = Finish.cover(lv.x, px)
|
|
out = Finish.over(out, vec4(lc * lfa, lfa))
|
|
// the collar over the lever's root, and the lamp in it: amber and
|
|
// burning while on, dark glass while off
|
|
out = Finish.over(out, ad_drop(p, cc, vec2(5.2, 5.2), 5.2, 0.6))
|
|
out = ad_dome(out, p, cc, 5.2, px, mix(ad_gold_base(), vec3(0.36, 0.31, 0.24), dis))
|
|
let jq = p - cc
|
|
let jl = length(jq)
|
|
let seat = Finish.cover(jl - 2.9, px)
|
|
out = Finish.over(out, vec4(vec3(0.05, 0.035, 0.02) * seat, seat))
|
|
let lit = on * live
|
|
let jt = clamp(jl / 2.3, 0.0, 1.0)
|
|
let jon = mix(vec3(1.0, 0.95, 0.80), vec3(1.0, 0.56, 0.16), smoothstep(0.2, 1.0, jt))
|
|
let joff = mix(vec3(0.16, 0.09, 0.04), vec3(0.08, 0.045, 0.02), jt)
|
|
var jc = mix(joff, jon, lit)
|
|
let gq = jq / 2.3 - vec2(-0.3, -0.4)
|
|
jc = mix(jc, vec3(1.0, 1.0, 1.0), exp(0.0 - dot(gq, gq) / 0.05) * mix(0.35, 0.5, lit))
|
|
let ja = Finish.cover(jl - 2.3, px)
|
|
out = Finish.over(out, vec4(jc * ja, ja))
|
|
let jg = exp(0.0 - max(jl - 2.3, 0.0) / 1.0) * lit * (1.0 - ja) * Finish.cover(jl - 2.9, px) * 0.8
|
|
out = Finish.over(out, vec4(vec3(1.0, 0.62, 0.22) * jg, jg))
|
|
return Finish.over(out, ad_focus(d, px, focus * live))
|
|
}
|
|
mod.widgets.ToggleRocker.label_walk.margin = mod.turtle.Inset{left: 46.0 right: 3.0 top: 0.0 bottom: 0.0}
|
|
mod.widgets.ToggleSlide.label_walk.margin = mod.turtle.Inset{left: 46.0 right: 3.0 top: 0.0 bottom: 0.0}
|
|
mod.widgets.ToggleRocker.draw_bg.size = 14.0
|
|
mod.widgets.ToggleSlide.draw_bg.size = 14.0
|
|
mod.widgets.ToggleRocker.min_height = 24.0
|
|
mod.widgets.ToggleSlide.min_height = 24.0
|
|
mod.widgets.ToggleRocker.draw_bg.pill_aspect = 2.7143
|
|
mod.widgets.ToggleSlide.draw_bg.pill_aspect = 2.7143
|
|
mod.widgets.ToggleRocker.draw_bg.knob_inset = 7.0
|
|
mod.widgets.ToggleSlide.draw_bg.knob_inset = 7.0
|
|
mod.widgets.ToggleRocker.clip_x = false
|
|
mod.widgets.ToggleRocker.clip_y = false
|
|
mod.widgets.ToggleSlide.clip_x = false
|
|
mod.widgets.ToggleSlide.clip_y = false
|
|
mod.widgets.ToggleRocker.draw_bg.vertex = mod.widgets.ToggleFlat.draw_bg.vertex
|
|
mod.widgets.ToggleSlide.draw_bg.vertex = mod.widgets.ToggleFlat.draw_bg.vertex
|
|
mod.widgets.ToggleRocker.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return ad_rocker(self.pos, self.rect_size, self.rect_pos, px, self.active, self.hover, self.down, self.focus, self.disabled, self.mark_at_end)
|
|
}
|
|
mod.widgets.ToggleSlide.draw_bg.pixel = fn() {
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
return ad_toggle(self.pos, self.rect_size, self.rect_pos, px, self.active, self.drag_pos, self.drag, self.hover, self.down, self.focus, self.disabled, self.error, self.mark_at_end, 1.0)
|
|
}
|
|
|
|
// THE GLASS of the readouts, the screen and the meter: black glass, a faint
|
|
// warm sheen across its upper left and the surround's shade falling in under
|
|
// its top edge, set in a polished gold rim with a pinstripe inside it.
|
|
let ad_glass = fn(p: vec2, lo: vec2, hi: vec2, r4: vec4, px: float, face: vec3) -> vec4 {
|
|
let h = (hi - lo) * 0.5
|
|
let c = lo + h
|
|
let r = md_r4(p, c, h, r4)
|
|
let d = md_rbox(p, c, h, r)
|
|
var out = ad_drop(p, c, h, r, 0.8)
|
|
let hf = h - vec2(1.8, 1.8)
|
|
var g = face
|
|
let uv = (p - lo) / max(hi - lo, vec2(1.0, 1.0))
|
|
let diag = uv.x * 0.7 + uv.y
|
|
let sheen = smoothstep(0.0, 0.25, diag) * (1.0 - smoothstep(0.30, 0.70, diag)) * 0.045
|
|
g = g + vec3(0.95, 0.88, 0.72) * sheen
|
|
g = mix(g, vec3(0.0, 0.0, 0.0), clamp(Finish.inset(p, c, hf, max(r - 1.8, 0.0), vec2(0.0, 2.2), 2.0), 0.0, 1.0) * 0.6)
|
|
let a = Finish.cover(d, px)
|
|
out = Finish.over(out, vec4(g * a, a))
|
|
out = Finish.over(out, ad_pin(d, 3.0, max(px, 0.55), px, 0.55))
|
|
return Finish.over(out, ad_rim(d, ad_nrm(p, c, h, r), 1.8, px, 1.0))
|
|
}
|
|
|
|
mod.widgets.ScreenView.clip_x = false
|
|
mod.widgets.ScreenView.clip_y = false
|
|
mod.widgets.ScreenView.padding = mod.turtle.Inset{top: 8.0 right: 11.0 bottom: 8.0 left: 11.0}
|
|
mod.widgets.ScreenView.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 5.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.ScreenView.draw_bg.pixel = fn() {
|
|
let m = 5.0
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let lo = vec2(Finish.snap(self.rect_pos.x, px), Finish.snap(self.rect_pos.y, px)) - self.rect_pos
|
|
let hi = vec2(Finish.snap(self.rect_pos.x + self.rect_size.x, px), Finish.snap(self.rect_pos.y + self.rect_size.y, px) - px) - self.rect_pos
|
|
return ad_glass(p, lo, hi, vec4(3.0, 3.0, 3.0, 3.0), px, self.color.rgb)
|
|
}
|
|
mod.widgets.ScreenView.bezel = 3.0
|
|
mod.widgets.ScreenView.sheen = 0.02
|
|
|
|
// THE METER sits in the same glass: its window arched at the top, faint gold
|
|
// rays fanning up from the pivot behind the scale, the scale a fine gold arc
|
|
// with gold ticks, the colour band under it running gold to amber to an
|
|
// ember red, the needle a cream spear and its pivot a polished gold boss.
|
|
mod.widgets.NeedleMeter.clip_x = false
|
|
mod.widgets.NeedleMeter.clip_y = false
|
|
mod.widgets.NeedleMeter.draw_bg.border_radius = uniform(3.0)
|
|
mod.widgets.NeedleMeter.draw_bg.color = uniform(#0b0907)
|
|
mod.widgets.NeedleMeter.draw_bg.color_needle = uniform(#xf3e8cf)
|
|
mod.widgets.NeedleMeter.draw_bg.color_zone = uniform(#xe0482a)
|
|
mod.widgets.NeedleMeter.draw_bg.color_scale = uniform(#xe2cc96)
|
|
mod.widgets.NeedleMeter.draw_bg.vertex = fn() {
|
|
let g = md_grow(self.rect_pos, self.rect_size, 5.0)
|
|
self.vertex_pos = self.clip_and_transform_vertex(g.xy, g.zw)
|
|
}
|
|
mod.widgets.NeedleMeter.draw_bg.pixel = fn() {
|
|
let m = 5.0
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let lo = vec2(Finish.snap(self.rect_pos.x, px), Finish.snap(self.rect_pos.y, px)) - self.rect_pos
|
|
let hi = vec2(Finish.snap(self.rect_pos.x + self.rect_size.x, px), Finish.snap(self.rect_pos.y + self.rect_size.y, px) - px) - self.rect_pos
|
|
let r = min(self.border_radius, min(hi.x - lo.x, hi.y - lo.y) * 0.5)
|
|
let rt = min(34.0, min(hi.x - lo.x, hi.y - lo.y) * 0.45)
|
|
var out = ad_glass(p, lo, hi, vec4(rt, rt, r, r), px, vec3(0.043, 0.035, 0.027))
|
|
let pv = self.pivot()
|
|
let rr = self.scale_radius()
|
|
let q = p - pv
|
|
let rq = length(q)
|
|
let ang = atan2(q.x, 0.0 - q.y)
|
|
let sweep = self.sweep * 0.017453293
|
|
let t = ang / sweep + 0.5
|
|
let on_scale = step(-0.0001, t) * step(t, 1.0001)
|
|
let inside = Finish.cover(md_rbox4(p, (lo + hi) * 0.5, (hi - lo) * 0.5 - vec2(2.5, 2.5), vec4(rt - 2.5, rt - 2.5, r, r)), px)
|
|
// the rays behind the scale
|
|
let st = sweep / 16.0
|
|
let kr = ang / st
|
|
let kd = abs(kr - floor(kr + 0.5)) * st * rq
|
|
let rays = Finish.cover(kd - max(px * 0.5, 0.3), px) * smoothstep(6.0, 10.0, rq) * (1.0 - smoothstep(rr - 7.0, rr - 5.0, rq)) * on_scale * inside * 0.22
|
|
out = Finish.over(out, vec4(ad_line_c() * rays, rays))
|
|
// the colour band under the scale
|
|
let bandr = Finish.cover(abs(rq - (rr - 2.6)) - 1.6, px) * on_scale
|
|
let ramp = mix(mix(vec3(0.86, 0.70, 0.38), vec3(1.0, 0.62, 0.24), smoothstep(0.35, 0.7, t)), self.color_zone.rgb, step(self.zone, t))
|
|
let ba = bandr * 0.85 * inside
|
|
out = Finish.over(out, vec4(ramp * ba, ba))
|
|
// the scale: a hairline arc and a tick at every division
|
|
let arc = Finish.cover(abs(rq - rr) - px * 0.6, px) * on_scale
|
|
let n = max(floor(self.majors + 0.5), 1.0) * max(floor(self.minors + 0.5), 1.0)
|
|
let k = floor(clamp(t, 0.0, 1.0) * n + 0.5)
|
|
let ak = (k / n - 0.5) * sweep
|
|
let perp = abs(q.x * cos(ak) + q.y * sin(ak))
|
|
let mn = max(floor(self.minors + 0.5), 1.0)
|
|
let major = 1.0 - step(0.5, k - mn * floor(k / mn + 0.0001))
|
|
let len = mix(self.tick_minor, self.tick_major, major)
|
|
let radial = max(rr - len - rq, rq - rr)
|
|
let tick = Finish.cover(perp - px * mix(0.55, 0.9, major), px) * Finish.cover(radial, px) * step(0.0, 0.0 - q.y * cos(ak) + q.x * sin(ak))
|
|
let sa = max(arc, tick) * inside
|
|
out = Finish.over(out, vec4(self.color_scale.rgb * sa, sa))
|
|
// the needle: a slim spear from under the pivot to just past the scale
|
|
let na = self.needle_angle(self.value)
|
|
let nd = vec2(sin(na), 0.0 - cos(na))
|
|
let sp = ad_taper(p, pv - nd * 3.0, pv + nd * (rr + 4.0), 1.3, 0.35)
|
|
let nf = mix(self.color_needle.rgb, ad_gold_lt(), smoothstep(0.3, 1.0, sp.y) * 0.25)
|
|
let nk = Finish.cover(sp.x, px)
|
|
out = Finish.over(out, vec4(nf * nk, nk))
|
|
out = ad_dome(out, p, pv, self.pivot_size + 0.8, px, ad_gold_base())
|
|
return out * self.color.a * self.opacity
|
|
}
|
|
mod.widgets.NeedleMeter.draw_label.color = #xe2cc96
|
|
|
|
// ---------------------------------------------------------------- lamps
|
|
// LAMPS: LEDs in polished gold bezels. The emitter is the light: at full
|
|
// current its middle burns toward white and its rim is its most saturated
|
|
// colour; at lower current the middle is no longer white, the colour deeper,
|
|
// the glow smaller; out, it is dark tinted glass, its colour barely there,
|
|
// with a catch light along its lower rim. Its light is added, never
|
|
// painted: a tight hot halo and a short bloom in its own hue, gone in about
|
|
// two radii. A bar is the same light drawn out into a short light pipe.
|
|
let md_led_lamp_add = fn(res: vec4, light: vec3, ground: vec3) -> vec4 {
|
|
let est = res.rgb + ground * (1.0 - res.a)
|
|
let add = (vec3(1.0, 1.0, 1.0) - exp(0.0 - light)) * max(vec3(1.0, 1.0, 1.0) - est, vec3(0.0, 0.0, 0.0))
|
|
return vec4(res.rgb + add, res.a)
|
|
}
|
|
let md_led_lamp_full = fn(ink: vec3) -> vec3 {
|
|
return ink / max(max(ink.x, max(ink.y, ink.z)), 0.01)
|
|
}
|
|
let md_led_lamp_hue = fn(ink: vec3, vivid: float) -> vec3 {
|
|
let f = md_led_lamp_full(ink)
|
|
let mn = min(f.x, min(f.y, f.z))
|
|
let ch = 1.0 - mn
|
|
let pure = (f - vec3(mn, mn, mn)) / max(ch, 0.001)
|
|
return mix(f, pure, clamp(vivid, 0.0, 1.0) * 0.72 * smoothstep(0.03, 0.12, ch))
|
|
}
|
|
let md_led_lamp = fn(dst: vec4, p: vec2, c: vec2, hb: vec2, lit: float, ink: vec3, vivid: float, px: float, ground: vec3, room: float) -> vec4 {
|
|
let rt = max(min(hb.x, hb.y), 0.4)
|
|
let d = Material.sd_box(p, c, hb, rt)
|
|
let bw = clamp(0.32 * rt, 0.8, 2.4)
|
|
let ds = d - bw
|
|
let L = clamp(lit, 0.0, 1.0)
|
|
let b = md_led_lamp_full(ink)
|
|
let hue = md_led_lamp_hue(ink, vivid)
|
|
let pw = L * sqrt(L)
|
|
let white = vec3(1.0, 1.0, 1.0)
|
|
var res = dst
|
|
let x = max(ds, 0.0)
|
|
let reach = max(room, 1.0)
|
|
let win = 1.0 - smoothstep(0.55 * reach, reach, x)
|
|
let ex = max(hb.x - hb.y, 0.0)
|
|
let ey = max(hb.y - hb.x, 0.0)
|
|
let qx = p.x - c.x
|
|
let qy = p.y - c.y
|
|
let q = vec2(qx - clamp(qx, 0.0 - ex, ex), qy - clamp(qy, 0.0 - ey, ey)) / rt
|
|
let t = clamp(length(q), 0.0, 1.0)
|
|
let nrm = q / max(length(q), 0.001)
|
|
// the bezel's shadow on the ground
|
|
let shd = Finish.drop(p, c, hb + vec2(bw, bw), rt + bw, vec2(0.0, 0.12 * rt + 0.3), 0.10 * rt + 0.5) * 0.5 * (1.0 - 0.6 * pw)
|
|
res = Finish.over(res, vec4(0.0, 0.0, 0.0, shd))
|
|
// the polished gold bezel: a ring rounded over, lit from the upper left,
|
|
// a dark seat line where it holds the lens
|
|
let a_s = Finish.cover(ds, px)
|
|
let u = clamp(d / max(bw, 0.01), 0.0, 1.0)
|
|
let facing = dot(nrm * (u - 0.5) * 2.0, vec2(-0.45, -0.89))
|
|
var rc = ad_gold_base() * (0.85 + 0.45 * facing)
|
|
rc = mix(rc, ad_gold_hi(), smoothstep(0.5, 0.95, facing) * 0.8)
|
|
rc = mix(rc, ad_gold_dk() * 0.6, Finish.band(ds, 0.0, max(px, 0.45), px) * 0.6)
|
|
rc = mix(rc, vec3(0.02, 0.015, 0.01), Finish.ring_out(d, 0.0, max(px, 0.45), px) * 0.85)
|
|
res = Finish.over(res, vec4(min(rc, white) * a_s, a_s))
|
|
if L > 0.001 {
|
|
let xl = max(d, 0.0)
|
|
let halo = exp(0.0 - xl / max(0.30 * rt, 0.4)) * 1.5 + exp(0.0 - xl / max(0.65 * rt, 0.7)) * 0.32
|
|
let hwin = 1.0 - smoothstep(1.1 * rt, 2.0 * rt + 1.0, xl)
|
|
res = md_led_lamp_add(res, mix(hue, white, 0.15 * pw) * halo * pw * hwin * win, ground)
|
|
}
|
|
// THE LENS: lit, its middle burns toward white at full current and its
|
|
// rim is its most saturated colour.
|
|
let top = smoothstep(-1.0, 0.6, q.y)
|
|
let pool = exp(0.0 - (q.y - 0.55) * (q.y - 0.55) / 0.09 - q.x * q.x / 0.30)
|
|
var on = mix(hue * mix(0.55, 0.8, L), mix(b, hue, 0.5), top)
|
|
on = mix(on, min(mix(b, hue, 0.4) + vec3(0.35, 0.35, 0.35), white), pool * 0.5)
|
|
on = mix(on, vec3(1.0, 0.99, 0.975), exp(0.0 - t * t / 0.20) * smoothstep(0.5, 1.0, L) * 0.85)
|
|
on = mix(on, hue * (0.82 + 0.18 * L), smoothstep(0.62, 1.0, t))
|
|
on = on * (0.42 + 0.58 * L)
|
|
// out: dark tinted glass, a catch light along its lower rim
|
|
let offc = mix(vec3(0.06, 0.055, 0.05), b * 0.42, 0.26)
|
|
var off = mix(offc * 0.62, offc * 1.15, top)
|
|
off = mix(off, min(offc + vec3(0.16, 0.16, 0.16), white), pool * 0.35)
|
|
off = off * mix(1.0, 0.75, smoothstep(0.75, 1.0, t))
|
|
let catchl = smoothstep(0.62, 0.9, t) * (1.0 - smoothstep(0.9, 1.0, t)) * smoothstep(0.2, 0.9, nrm.y)
|
|
off = off + vec3(0.30, 0.26, 0.20) * catchl
|
|
var col = mix(off, min(on, white), smoothstep(0.0, 0.35, L))
|
|
let e = length(vec2(q.x / 0.62, (q.y + 0.46) / 0.30))
|
|
let spec = (1.0 - smoothstep(0.55, 1.0, e)) * mix(1.0, 0.3, clamp((q.y + 0.76) / 0.6, 0.0, 1.0))
|
|
col = mix(col, white, spec * mix(0.8, 0.55, L) * smoothstep(0.9, 2.2, rt))
|
|
col = min(col, white)
|
|
let a_l = Finish.cover(d, px)
|
|
return Finish.over(res, vec4(col * a_l, a_l))
|
|
}
|
|
|
|
// The Lamp widget and the bar lamp. A round LED takes the middle of its
|
|
// cell; its halo's room is held in the cell, so the light is never cut at
|
|
// its edge and fades within half the gap. A bar is a short light pipe set at
|
|
// the left of its cell, six points thick and twice that long, its glow held
|
|
// to two and a half points round its bezel -- the whole lamp takes the first
|
|
// twenty points of its cell and leaves the rest free.
|
|
mod.widgets.Lamp.halo = 0.3
|
|
mod.widgets.Lamp.size = 14.0
|
|
mod.widgets.Lamp.halo_reach = 0.3
|
|
mod.widgets.LampBar.size = 14.0
|
|
mod.widgets.LampBar.halo_reach = 0.3
|
|
mod.widgets.Lamp.draw_bg.color_accent = uniform(#xffa83a)
|
|
mod.widgets.Lamp.draw_bg.color_success = uniform(#x3ad98a)
|
|
mod.widgets.Lamp.draw_bg.color_warning = uniform(#xf2c443)
|
|
mod.widgets.Lamp.draw_bg.color_error = uniform(#xe5483a)
|
|
mod.widgets.Lamp.draw_bg.color_plain = uniform(#xfff3d8)
|
|
mod.widgets.Lamp.draw_bg.vertex = fn() {
|
|
let m = 4.0
|
|
self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.Lamp.draw_bg.pixel = fn() {
|
|
let m = 4.0
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
|
|
let reach = clamp(self.reach, 0.0, 1.0)
|
|
let t = min(self.rect_size.y / (1.0 + 2.0 * reach), 14.0)
|
|
let room = (self.rect_size.y - t) * 0.5
|
|
let tb = min(t, 6.0)
|
|
let lb = 14.0
|
|
let c = mix(self.rect_size * 0.5, vec2(1.6 + lb * 0.5, self.rect_size.y * 0.5), self.bar)
|
|
let hb = mix(vec2(t * 0.5, t * 0.5), vec2(lb * 0.5, tb * 0.5), self.bar)
|
|
let glow = mix(max(room - 2.5, 2.0), 2.2, self.bar)
|
|
let res = md_led_lamp(vec4(0.0, 0.0, 0.0, 0.0), p, c, hb, self.lit, self.intent_color().rgb, 1.0 - step(3.5, self.intent), px, ad_ebony_c(), glow)
|
|
return res * self.opacity
|
|
}
|
|
true
|