2706 lines
139 KiB
Text
2706 lines
139 KiB
Text
use mod.prelude.widgets_internal.*
|
|
|
|
// Pop art. Every part is printed on a comic-book page: a flat shape in one
|
|
// primary ink with a thick black ink outline, and under it a solid black
|
|
// shadow the same shape moved down and to the right -- never blurred. Pressed,
|
|
// a part drops onto its shadow. Shading is a Ben-Day dot screen in the ink's
|
|
// own deeper tone whose dots grow toward the lower right, and a short white
|
|
// glint runs inside the upper left of each outline, as a letterer's white
|
|
// highlight stroke does. Every face is drawn in true points (one device pixel
|
|
// is `px`); shadows and focus rings that fall outside a layout box are drawn
|
|
// in a quad grown in `vertex`, and no padding is spent on them.
|
|
|
|
// ---------------------------------------------------------------- helpers
|
|
|
|
// One device pixel in points.
|
|
let pa_px = fn(dpi: float) -> float {
|
|
return 1.0 / max(dpi, 0.5)
|
|
}
|
|
|
|
// An edge rounded to a whole device pixel in window space, handed back in
|
|
// box space.
|
|
let pa_snap = fn(v: float, o: float, px: float) -> float {
|
|
return Finish.snap(o + v, px) - o
|
|
}
|
|
|
|
// Distance from p to the segment a..b, in points.
|
|
let pa_seg = fn(p: vec2, a: vec2, b: vec2) -> float {
|
|
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 length(pa - ba * t)
|
|
}
|
|
|
|
// The inks: 0 cadmium yellow, 1 cyan-blue, 2 red, 3 white paper, 4 green,
|
|
// 5 purple, 6 magenta, 7 night blue, 8 warm grey, 9 the bright red black
|
|
// words read on, 10 orange.
|
|
let pa_col = fn(k: float) -> vec3 {
|
|
if k < 0.5 { return vec3(0.992, 0.835, 0.012) }
|
|
if k < 1.5 { return vec3(0.071, 0.549, 0.941) }
|
|
if k < 2.5 { return vec3(0.910, 0.125, 0.165) }
|
|
if k < 3.5 { return vec3(0.969, 0.953, 0.910) }
|
|
if k < 4.5 { return vec3(0.071, 0.722, 0.361) }
|
|
if k < 5.5 { return vec3(0.518, 0.208, 0.741) }
|
|
if k < 6.5 { return vec3(0.898, 0.145, 0.561) }
|
|
if k < 7.5 { return vec3(0.055, 0.106, 0.180) }
|
|
if k < 8.5 { return vec3(0.660, 0.647, 0.608) }
|
|
if k < 9.5 { return vec3(1.000, 0.333, 0.271) }
|
|
return vec3(1.0, 0.541, 0.110)
|
|
}
|
|
|
|
// Black printing ink.
|
|
let pa_ink = fn() -> vec3 {
|
|
return vec3(0.067, 0.067, 0.071)
|
|
}
|
|
|
|
// The deeper tone of an ink a dot screen shades it with: saturated and
|
|
// darker, as a second pass of the same ink is.
|
|
let pa_deep = fn(c: vec3) -> vec3 {
|
|
return c * c * 0.8
|
|
}
|
|
|
|
// THE DOT SCREEN. The centre of the Ben-Day dot nearest `q` on a lattice
|
|
// `pitch` points apart, turned 45 degrees as a printer's screen is.
|
|
let pa_cell = fn(q: vec2, pitch: float) -> vec2 {
|
|
let u = vec2(q.x + q.y, q.y - q.x) * (0.70710678 / pitch)
|
|
let g = floor(u) + vec2(0.5, 0.5)
|
|
return vec2(g.x - g.y, g.x + g.y) * (0.70710678 * pitch)
|
|
}
|
|
|
|
// A dot of radius `r` round `c`: its coverage at `q`. A dot smaller than a
|
|
// device pixel is drawn a pixel and a half across with its ink thinned to
|
|
// its area, so a screen fading out never sparkles.
|
|
let pa_dot = fn(q: vec2, c: vec2, r: float, px: float) -> float {
|
|
let rr = max(r, px * 0.75)
|
|
return clamp((rr - length(q - c)) / px + 0.5, 0.0, 1.0) * clamp(r * r / (rr * rr), 0.0, 1.0)
|
|
}
|
|
|
|
// A screen of dots `pitch` apart whose ink covers `cov` of the area round
|
|
// `q` (0..0.75; at 0.785 the dots touch). `cov` may change across a shape
|
|
// (a Ben-Day gradient); every dot is round, its size what the coverage asks.
|
|
let pa_screen = fn(q: vec2, pitch: float, cov: float, px: float) -> float {
|
|
let c = pa_cell(q, pitch)
|
|
let r = pitch * sqrt(clamp(cov, 0.0, 0.75) * 0.3183)
|
|
return pa_dot(q, c, r, px) * step(0.002, cov)
|
|
}
|
|
|
|
// The size of the ink outline and of the shadow offset for a part whose
|
|
// smaller side is `sz` points, each a whole number of device pixels.
|
|
let pa_ow = fn(sz: float, px: float) -> float {
|
|
return max(Finish.snap(clamp(0.075 * sz, 1.0, 2.5), px), px)
|
|
}
|
|
let pa_so = fn(sz: float, px: float) -> float {
|
|
return max(Finish.snap(clamp(0.09 * sz, 1.3, 3.0), px), px)
|
|
}
|
|
|
|
// A signed distance to the triangle a, b, c.
|
|
let pa_sd_tri = fn(p: vec2, a: vec2, b: vec2, c: vec2) -> float {
|
|
let e0 = b - a
|
|
let e1 = c - b
|
|
let e2 = a - c
|
|
let v0 = p - a
|
|
let v1 = p - b
|
|
let v2 = p - c
|
|
let pq0 = v0 - e0 * clamp(dot(v0, e0) / max(dot(e0, e0), 0.0001), 0.0, 1.0)
|
|
let pq1 = v1 - e1 * clamp(dot(v1, e1) / max(dot(e1, e1), 0.0001), 0.0, 1.0)
|
|
let pq2 = v2 - e2 * clamp(dot(v2, e2) / max(dot(e2, e2), 0.0001), 0.0, 1.0)
|
|
let s = sign(e0.x * e2.y - e0.y * e2.x)
|
|
let d0 = vec2(dot(pq0, pq0), s * (v0.x * e0.y - v0.y * e0.x))
|
|
let d1 = vec2(dot(pq1, pq1), s * (v1.x * e1.y - v1.y * e1.x))
|
|
let d2 = vec2(dot(pq2, pq2), s * (v2.x * e2.y - v2.y * e2.x))
|
|
let dd = min(min(d0, d1), d2)
|
|
return 0.0 - sqrt(dd.x) * sign(dd.y)
|
|
}
|
|
|
|
// Two distances joined with a fillet `k` points round, as an inker joins a
|
|
// speech bubble's tail to its body.
|
|
let pa_smin = fn(a: float, b: float, k: float) -> float {
|
|
let h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0)
|
|
return mix(b, a, h) - k * h * (1.0 - h)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- the print
|
|
|
|
// A printed shape laid on the page, premultiplied, from its distance field:
|
|
// `d` at the face (moved by the press already), `ds` at its shadow. The fill
|
|
// `base` shaded by a dot screen toward the lower right (`uv` the point in the
|
|
// face, 0..1 each way, `q` the point from the face's corner, for the
|
|
// screen), a black outline `ow` wide inside the edge, a white glint inside
|
|
// the outline along the upper left, and the solid black shadow. Hover lifts
|
|
// the ink toward white and thins the screen; disabled, the shape is printed
|
|
// grey and its shadow goes pale.
|
|
let pa_print = fn(d: float, ds: float, uv: vec2, q: vec2, px: float, ow: float, base: vec3, hover: float, disabled: float, shade: float) -> vec4 {
|
|
let live = 1.0 - disabled
|
|
let sa = Finish.cover(ds, px) * mix(1.0, 0.3, disabled)
|
|
var res = vec4(pa_ink() * sa, sa)
|
|
var b = mix(base, mix(base, pa_col(8.0), 0.85), disabled)
|
|
b = b + (vec3(1.0, 1.0, 1.0) - b) * 0.16 * hover * live
|
|
let t = uv.x * 0.42 + uv.y * 0.58
|
|
let cov = (0.03 + 0.34 * smoothstep(0.38, 1.02, t)) * (1.0 - 0.55 * hover) * shade
|
|
var col = mix(b, pa_deep(b), pa_screen(q, 2.6, cov, px))
|
|
// The glint: a white stroke a point wide, a point and a half inside the
|
|
// outline, round the upper left corner and along the top, thinning out.
|
|
let gd = abs(d + ow + 1.3) - 0.6
|
|
let gm = (1.0 - smoothstep(0.42, 0.78, uv.x)) * (1.0 - smoothstep(0.32, 0.6, uv.y))
|
|
let gl = Finish.cover(gd, px) * gm * (0.95 - 0.55 * Finish.lum(b)) * live
|
|
col = mix(col, vec3(1.0, 1.0, 1.0), gl)
|
|
let ink = mix(pa_ink(), vec3(0.30, 0.30, 0.31), disabled)
|
|
col = mix(ink, col, Finish.cover(d + ow, px))
|
|
let a = Finish.cover(d, px)
|
|
return Finish.over(res, vec4(col * a, a))
|
|
}
|
|
|
|
// A rounded box `lo`..`hi` printed with its shadow. `lift` scales the
|
|
// shadow (0 prints the shape flat on the page); pressed, the shape drops by
|
|
// the shadow's offset onto it. Focus: a cyan-blue ring standing off the
|
|
// edge.
|
|
let pa_block = fn(p: vec2, lo: vec2, hi: vec2, r: float, px: float, base: vec3, hover: float, down: float, disabled: float, focus: float, lift: float) -> vec4 {
|
|
let live = 1.0 - disabled
|
|
let sz = min(hi.y - lo.y, hi.x - lo.x)
|
|
let ow = pa_ow(sz, px)
|
|
let so = pa_so(sz, px) * lift
|
|
let dn = clamp(down, 0.0, 1.0) * live
|
|
let off = vec2(so, so) * dn
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let d = Material.sd_box(p, c + off, h, r)
|
|
let ds = Material.sd_box(p, c + vec2(so, so), h, r) + 1000.0 * step(so, 0.001)
|
|
let uv = clamp((p - lo - off) / max(hi - lo, vec2(1.0, 1.0)), vec2(0.0, 0.0), vec2(1.0, 1.0))
|
|
var res = pa_print(d, ds, uv, p - lo - off, px, ow, base, hover, disabled, 1.0)
|
|
let fr = Finish.ring_out(d, 1.0, 2.6, px)
|
|
return Finish.over(res, vec4(pa_col(1.0), 1.0) * fr * focus * live)
|
|
}
|
|
|
|
// A disc of radius `rad` round `c`, printed the same way.
|
|
let pa_disc = fn(p: vec2, c: vec2, rad: float, px: float, base: vec3, hover: float, down: float, disabled: float, focus: float, lift: float) -> vec4 {
|
|
let live = 1.0 - disabled
|
|
let ow = pa_ow(rad * 2.0, px)
|
|
let so = pa_so(rad * 2.0, px) * lift
|
|
let off = vec2(so, so) * clamp(down, 0.0, 1.0) * live
|
|
let d = length(p - c - off) - rad
|
|
let ds = length(p - c - vec2(so, so)) - rad + 1000.0 * step(so, 0.001)
|
|
let uv = clamp((p - c - off) / (rad * 2.0) + vec2(0.5, 0.5), vec2(0.0, 0.0), vec2(1.0, 1.0))
|
|
var res = pa_print(d, ds, uv, p - c - off, px, ow, base, hover, disabled, 1.0)
|
|
let fr = Finish.ring_out(d, 1.0, 2.6, px)
|
|
return Finish.over(res, vec4(pa_col(1.0), 1.0) * fr * focus * live)
|
|
}
|
|
|
|
// A speech bubble: a rounded box with a short tail at its lower left
|
|
// pointing down and out, joined to it with a fillet, printed with its shadow.
|
|
let pa_bubble = fn(p: vec2, lo: vec2, hi: vec2, r: float, px: float, base: vec3, hover: float, down: float, disabled: float, focus: float) -> vec4 {
|
|
let live = 1.0 - disabled
|
|
let sz = min(hi.y - lo.y, hi.x - lo.x)
|
|
let ow = pa_ow(sz, px)
|
|
let so = pa_so(sz, px)
|
|
let off = vec2(so, so) * clamp(down, 0.0, 1.0) * live
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let ta = vec2(lo.x + 7.0, hi.y - 3.0)
|
|
let tb = vec2(lo.x + 15.0, hi.y - 3.0)
|
|
let tc = vec2(lo.x + 4.0, hi.y + 4.5)
|
|
let d = pa_smin(Material.sd_box(p - off, c, h, r), pa_sd_tri(p - off, ta, tb, tc), 1.5)
|
|
let ds = pa_smin(Material.sd_box(p - vec2(so, so), c, h, r), pa_sd_tri(p - vec2(so, so), ta, tb, tc), 1.5)
|
|
let uv = clamp((p - lo - off) / max(hi - lo, vec2(1.0, 1.0)), vec2(0.0, 0.0), vec2(1.0, 1.0))
|
|
var res = pa_print(d, ds, uv, p - lo - off, px, ow, base, hover, disabled, 0.6)
|
|
let fr = Finish.ring_out(d, 1.0, 2.6, px)
|
|
return Finish.over(res, vec4(pa_col(1.0), 1.0) * fr * focus * live)
|
|
}
|
|
|
|
// A ball: a printed disc lit from the upper left, its lower right shaded by
|
|
// a coarser dot screen, a white glint high on its left, with its shadow.
|
|
// `held` drops it onto the shadow.
|
|
let pa_ball = fn(dst: vec4, p: vec2, c: vec2, rad: float, px: float, base: vec3, hover: float, held: float, disabled: float, lift: float) -> vec4 {
|
|
let live = 1.0 - disabled
|
|
let ow = max(Finish.snap(clamp(0.16 * rad, 1.0, 2.0), px), px)
|
|
let so = max(Finish.snap(clamp(0.17 * rad, 1.0, 2.5), px), px) * lift
|
|
let off = vec2(so, so) * clamp(held, 0.0, 1.0) * live
|
|
let q = p - c - off
|
|
let d = length(q) - rad
|
|
let sa = Finish.cover(length(p - c - vec2(so, so)) - rad, px) * step(0.001, so) * mix(1.0, 0.3, disabled)
|
|
var res = Finish.over(dst, vec4(pa_ink() * sa, sa))
|
|
var b = mix(base, mix(base, pa_col(8.0), 0.85), disabled)
|
|
b = b + (vec3(1.0, 1.0, 1.0) - b) * 0.16 * hover * live
|
|
// The shade: a crescent toward the lower right, screened.
|
|
let qn = q / max(rad, 0.5)
|
|
let sh = smoothstep(-0.1, 0.9, dot(qn, vec2(0.55, 0.83)) + 0.25 * length(qn))
|
|
let cov = 0.05 + 0.5 * sh * sh
|
|
var col = mix(b, pa_deep(b), pa_screen(q, max(2.0, rad * 0.32), cov, px))
|
|
// The glint: a small white oval up on the left.
|
|
let gq = (qn - vec2(-0.36, -0.40))
|
|
let gr = vec2(gq.x * 0.8 + gq.y * 0.6, gq.y * 0.8 - gq.x * 0.6) / vec2(0.26, 0.15)
|
|
col = mix(col, vec3(1.0, 1.0, 1.0), Finish.cover((length(gr) - 1.0) * rad * 0.15, px) * (0.95 - 0.4 * Finish.lum(b)) * live)
|
|
col = mix(mix(pa_ink(), vec3(0.3, 0.3, 0.31), disabled), col, Finish.cover(d + ow, px))
|
|
let a = Finish.cover(d, px)
|
|
return Finish.over(res, vec4(col * a, a))
|
|
}
|
|
|
|
// A lightning bolt standing on `c`, `rad` its half height: two triangles of
|
|
// yellow ink, outlined, with their shadow. `held` drops it.
|
|
let pa_bolt_d = fn(q: vec2, rad: float) -> float {
|
|
let s = rad
|
|
let u = pa_sd_tri(q, vec2(-0.02, -1.0) * s, vec2(0.66, -1.0) * s, vec2(-0.44, 0.20) * s)
|
|
let l = pa_sd_tri(q, vec2(-0.34, -0.12) * s, vec2(0.52, -0.12) * s, vec2(-0.30, 1.06) * s)
|
|
return min(u, l)
|
|
}
|
|
let pa_bolt = fn(dst: vec4, p: vec2, c: vec2, rad: float, px: float, base: vec3, hover: float, held: float, disabled: float) -> vec4 {
|
|
let live = 1.0 - disabled
|
|
let ow = max(Finish.snap(1.2, px), px)
|
|
let so = max(Finish.snap(1.6, px), px)
|
|
let off = vec2(so, so) * clamp(held, 0.0, 1.0) * live
|
|
let d = pa_bolt_d(p - c - off, rad)
|
|
let ds = pa_bolt_d(p - c - vec2(so, so), rad)
|
|
let uv = clamp((p - c - off) / (rad * 2.0) + vec2(0.5, 0.5), vec2(0.0, 0.0), vec2(1.0, 1.0))
|
|
let res = pa_print(d, ds, uv, p - c - off, px, ow, base, hover, disabled, 0.7)
|
|
return Finish.over(dst, res)
|
|
}
|
|
|
|
// A chunky track: a pill outlined in ink on its own short shadow, `fill`
|
|
// over the box `flo`..`fhi` with a white highlight stroke along its upper
|
|
// edge (its left edge when the track stands, `vert` 1), night blue
|
|
// elsewhere.
|
|
let pa_track_box = fn(dst: vec4, p: vec2, lo: vec2, hi: vec2, flo: vec2, fhi: vec2, px: float, fill: vec3, disabled: float, vert: float) -> vec4 {
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let r = min(h.x, h.y)
|
|
let ow = max(Finish.snap(1.3, px), px)
|
|
let so = max(Finish.snap(1.3, px), px)
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let sa = Finish.cover(Material.sd_box(p, c + vec2(so, so), h, r), px) * mix(1.0, 0.3, disabled)
|
|
var res = Finish.over(dst, vec4(pa_ink() * sa, sa))
|
|
let fc = mix(fill, mix(fill, pa_col(8.0), 0.85), disabled)
|
|
let rest = mix(pa_col(7.0), vec3(0.42, 0.42, 0.43), disabled)
|
|
let inf = step(flo.x, p.x) * step(p.x, fhi.x) * step(flo.y, p.y) * step(p.y, fhi.y)
|
|
var col = mix(rest, fc, inf)
|
|
let across = mix(p.y - lo.y, p.x - lo.x, vert)
|
|
let wide = mix(hi.y - lo.y, hi.x - lo.x, vert)
|
|
let hl = Finish.cover(abs(across - (ow + 0.9)) - 0.45, px) * inf
|
|
col = mix(col, vec3(1.0, 1.0, 1.0), hl * 0.75 * (1.0 - disabled))
|
|
col = mix(col, pa_deep(fc), pa_screen(p - lo, 2.2, 0.22 * smoothstep(0.45, 1.0, across / max(wide, 1.0)), px) * inf)
|
|
col = mix(pa_ink(), col, Finish.cover(d + ow, px))
|
|
let a = Finish.cover(d, px)
|
|
return Finish.over(res, vec4(col * a, a))
|
|
}
|
|
let pa_track = fn(dst: vec4, p: vec2, lo: vec2, hi: vec2, f0: float, f1: float, px: float, fill: vec3, disabled: float) -> vec4 {
|
|
return pa_track_box(dst, p, lo, hi, vec2(f0, lo.y - 1.0), vec2(f1, hi.y + 1.0), px, fill, disabled, 0.0)
|
|
}
|
|
|
|
// The focus ring of a shape at distance `d`: a cyan-blue line standing a
|
|
// point off its edge.
|
|
let pa_focus = fn(dst: vec4, d: float, px: float, focus: float) -> vec4 {
|
|
return Finish.over(dst, vec4(pa_col(1.0), 1.0) * Finish.ring_out(d, 1.0, 2.6, px) * focus)
|
|
}
|
|
|
|
// The three-quarter arc a waiting button turns in place of its label.
|
|
let pa_spinner = fn(dst: vec4, p: vec2, c: vec2, rad: float, t: float, amt: float, stroke: float) -> vec4 {
|
|
let sdf = Sdf2d.viewport(p)
|
|
let a0 = t * 2.0 * PI
|
|
sdf.arc_round_caps(c.x, c.y, rad, a0, a0 + 1.5 * PI, stroke)
|
|
sdf.fill(vec4(0.067, 0.067, 0.071, amt))
|
|
return Finish.over(dst, sdf.result)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- buttons
|
|
|
|
// Every button is a block of flat ink with a black outline on its solid
|
|
// shadow: the plain button yellow, the primary and the flat one blue, the
|
|
// secondary and the danger red, the small one blue, the large one yellow,
|
|
// the icon key yellow; the outline button is white paper. Under the hand
|
|
// the ink lifts toward white; pressed, the block drops onto its shadow and
|
|
// its legend drops with it.
|
|
mod.widgets.ButtonFlat.padding = mod.turtle.Inset{left: 12.0 right: 12.0 top: 3.0 bottom: 3.0}
|
|
mod.widgets.ButtonFlat.min_height = 24.0
|
|
mod.widgets.ButtonFlat.icon_walk.width = 14.0
|
|
mod.widgets.ButtonIcon.padding = mod.turtle.Inset{left: 6.0 right: 6.0 top: 3.0 bottom: 3.0}
|
|
mod.widgets.ButtonFlatIcon.padding = mod.turtle.Inset{left: 6.0 right: 6.0 top: 3.0 bottom: 3.0}
|
|
mod.widgets.ButtonFlatterIcon.padding = mod.turtle.Inset{left: 6.0 right: 6.0 top: 3.0 bottom: 3.0}
|
|
mod.widgets.ButtonPrimary.padding = mod.turtle.Inset{left: 12.0 right: 12.0 top: 3.0 bottom: 3.0}
|
|
mod.widgets.ButtonSecondary.padding = mod.turtle.Inset{left: 12.0 right: 12.0 top: 3.0 bottom: 3.0}
|
|
mod.widgets.ButtonTertiary.padding = mod.turtle.Inset{left: 12.0 right: 12.0 top: 3.0 bottom: 3.0}
|
|
mod.widgets.ButtonDanger.padding = mod.turtle.Inset{left: 12.0 right: 12.0 top: 3.0 bottom: 3.0}
|
|
mod.widgets.ButtonOutline.padding = mod.turtle.Inset{left: 12.0 right: 12.0 top: 3.0 bottom: 3.0}
|
|
mod.widgets.ButtonXs.min_height = 0.0
|
|
mod.widgets.ButtonSm.min_height = 0.0
|
|
mod.widgets.ButtonSm.padding = mod.turtle.Inset{left: 9.0 right: 9.0 top: 1.0 bottom: 1.0}
|
|
mod.widgets.ButtonLg.padding = mod.turtle.Inset{left: 15.0 right: 15.0 top: 2.0 bottom: 2.0}
|
|
mod.widgets.ButtonFlat.draw_bg.border_radius = uniform(2.5)
|
|
mod.widgets.ButtonFlat.draw_bg.border_size = uniform(1.5)
|
|
mod.widgets.ButtonFlat.clip_x = false
|
|
mod.widgets.ButtonFlat.clip_y = false
|
|
mod.widgets.ButtonFlat.draw_bg.vertex = fn() {
|
|
let m = 8.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))
|
|
}
|
|
|
|
// The ink of a button `kind`: 0 flat (blue), 1 plain (yellow), 2 primary
|
|
// (blue), 3 secondary (red), 4 tertiary (yellow), 5 danger (red), 8 icon
|
|
// (yellow), 9 small (blue).
|
|
let pa_key_col = fn(kind: float) -> vec3 {
|
|
if kind < 0.5 { return pa_col(1.0) }
|
|
if kind < 1.5 { return pa_col(0.0) }
|
|
if kind < 2.5 { return pa_col(1.0) }
|
|
if kind < 3.5 { return pa_col(2.0) }
|
|
if kind < 4.5 { return pa_col(0.0) }
|
|
if kind < 5.5 { return pa_col(2.0) }
|
|
if kind < 8.5 { return pa_col(0.0) }
|
|
return pa_col(1.0)
|
|
}
|
|
|
|
// The block and its states, shared by every button template; 6 is the
|
|
// outline button (white paper, its outline dashed when asked) and 7 the
|
|
// flatter button, printed only under the hand.
|
|
let pa_button = fn(pos: vec2, size: vec2, o: vec2, dpi: float, hover: float, down: float, disabled: float, focus: float, loading: float, anim: float, kind: float, dash: float) -> vec4 {
|
|
let m = 8.0
|
|
let px = pa_px(dpi)
|
|
let p = pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(pa_snap(0.0, o.x, px), pa_snap(0.0, o.y, px))
|
|
let hi = vec2(pa_snap(size.x, o.x, px), pa_snap(size.y, o.y, px))
|
|
let hh = hi.y - lo.y
|
|
let r = clamp(0.22 * hh, 3.0, 6.5)
|
|
var res = vec4(0.0, 0.0, 0.0, 0.0)
|
|
if kind > 6.5 && kind < 7.5 {
|
|
if hover + down + focus > 0.001 {
|
|
res = pa_block(p, lo, hi, r, px, pa_col(3.0), hover, down, disabled, focus, 0.6) * clamp(max(max(hover, down), focus), 0.0, 1.0)
|
|
}
|
|
} else {
|
|
if kind > 5.5 && kind < 6.5 {
|
|
res = pa_block(p, lo, hi, r, px, pa_col(3.0), hover, down, disabled, focus, 1.0)
|
|
if dash > 0.0 {
|
|
// A dashed outline: the paper shows through the gaps.
|
|
let so = pa_so(min(hh, hi.x - lo.x), px)
|
|
let off = vec2(so, so) * clamp(down, 0.0, 1.0) * (1.0 - disabled)
|
|
let c = (lo + hi) * 0.5
|
|
let d = Material.sd_box(p, c + off, (hi - lo) * 0.5, r)
|
|
let ow = pa_ow(min(hh, hi.x - lo.x), px)
|
|
let gap = step(0.5, fract((p.x + p.y) / (dash * 2.0)))
|
|
let band = Finish.cover(d, px) * (1.0 - Finish.cover(d + ow, px))
|
|
res = Finish.over(res, vec4(pa_col(3.0), 1.0) * band * gap)
|
|
}
|
|
} else {
|
|
res = pa_block(p, lo, hi, r, px, pa_key_col(kind), hover, down, disabled, focus, 1.0)
|
|
}
|
|
}
|
|
if loading > 0.001 {
|
|
let rad = max(min(hi.x - lo.x, hh) * 0.5 - 6.0, 2.0)
|
|
res = pa_spinner(res, p, (lo + hi) * 0.5, rad, anim, loading, 1.6)
|
|
}
|
|
return res
|
|
}
|
|
|
|
mod.widgets.ButtonFlat.draw_bg.pixel = fn() {
|
|
return self.host_over(pa_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 0.0, 0.0), 8.0)
|
|
}
|
|
mod.widgets.Button.draw_bg.pixel = fn() {
|
|
return self.host_over(pa_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 1.0, 0.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonSm.draw_bg.pixel = fn() {
|
|
return self.host_over(pa_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 9.0, 0.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonLg.draw_bg.pixel = fn() {
|
|
return self.host_over(pa_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 1.0, 0.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonXs.draw_bg.pixel = fn() {
|
|
return self.host_over(pa_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 1.0, 0.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonXl.draw_bg.pixel = fn() {
|
|
return self.host_over(pa_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 1.0, 0.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonIcon.draw_bg.pixel = fn() {
|
|
return self.host_over(pa_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 8.0, 0.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonPrimary.draw_bg.pixel = fn() {
|
|
return self.host_over(pa_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 2.0, 0.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonSecondary.draw_bg.pixel = fn() {
|
|
return self.host_over(pa_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 3.0, 0.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonTertiary.draw_bg.pixel = fn() {
|
|
return self.host_over(pa_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 4.0, 0.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonDanger.draw_bg.pixel = fn() {
|
|
return self.host_over(pa_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 5.0, 0.0), 8.0)
|
|
}
|
|
mod.widgets.ButtonOutline.draw_bg.pixel = fn() {
|
|
return self.host_over(pa_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 6.0, self.border_dash), 8.0)
|
|
}
|
|
mod.widgets.ButtonFlatter.draw_bg.pixel = fn() {
|
|
return self.host_over(pa_button(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.down, self.disabled, self.focus, self.loading, self.anim_time, 7.0, 0.0), 8.0)
|
|
}
|
|
|
|
// Legend ink per block: black on the yellow and the paper, white on the
|
|
// blue and the red (lettered with a black outline); disabled, a dark grey
|
|
// on the grey block.
|
|
mod.widgets.ButtonFlat.draw_text.color = #ffffff
|
|
mod.widgets.ButtonFlat.draw_text.color_hover = #ffffff
|
|
mod.widgets.ButtonFlat.draw_text.color_down = #ffffff
|
|
mod.widgets.ButtonFlat.draw_text.color_focus = #ffffff
|
|
mod.widgets.ButtonFlat.draw_text.color_disabled = #3a3a3a
|
|
mod.widgets.ButtonFlat.draw_icon.color = #ffffff
|
|
mod.widgets.Button.draw_text.color = #141414
|
|
mod.widgets.Button.draw_text.color_hover = #000000
|
|
mod.widgets.Button.draw_text.color_down = #000000
|
|
mod.widgets.Button.draw_text.color_focus = #141414
|
|
mod.widgets.Button.draw_text.color_disabled = #3a3a3a
|
|
mod.widgets.Button.draw_icon.color = #141414
|
|
mod.widgets.ButtonSm.draw_text.color = #ffffff
|
|
mod.widgets.ButtonSm.draw_text.color_hover = #ffffff
|
|
mod.widgets.ButtonSm.draw_text.color_down = #ffffff
|
|
mod.widgets.ButtonSm.draw_text.color_focus = #ffffff
|
|
mod.widgets.ButtonSm.draw_text.color_disabled = #3a3a3a
|
|
mod.widgets.ButtonLg.draw_text.color = #141414
|
|
mod.widgets.ButtonLg.draw_text.color_hover = #000000
|
|
mod.widgets.ButtonLg.draw_text.color_down = #000000
|
|
mod.widgets.ButtonLg.draw_text.color_focus = #141414
|
|
mod.widgets.ButtonLg.draw_text.color_disabled = #3a3a3a
|
|
mod.widgets.ButtonPrimary.draw_text.color = #ffffff
|
|
mod.widgets.ButtonPrimary.draw_text.color_hover = #ffffff
|
|
mod.widgets.ButtonPrimary.draw_text.color_down = #ffffff
|
|
mod.widgets.ButtonPrimary.draw_text.color_focus = #ffffff
|
|
mod.widgets.ButtonPrimary.draw_text.color_disabled = #3a3a3a
|
|
mod.widgets.ButtonPrimary.draw_icon.color = #ffffff
|
|
mod.widgets.ButtonSecondary.draw_text.color = #ffffff
|
|
mod.widgets.ButtonSecondary.draw_text.color_hover = #ffffff
|
|
mod.widgets.ButtonSecondary.draw_text.color_down = #ffffff
|
|
mod.widgets.ButtonSecondary.draw_text.color_focus = #ffffff
|
|
mod.widgets.ButtonSecondary.draw_text.color_disabled = #3a3a3a
|
|
mod.widgets.ButtonSecondary.draw_icon.color = #ffffff
|
|
mod.widgets.ButtonTertiary.draw_text.color = #141414
|
|
mod.widgets.ButtonTertiary.draw_text.color_hover = #000000
|
|
mod.widgets.ButtonTertiary.draw_text.color_down = #000000
|
|
mod.widgets.ButtonTertiary.draw_text.color_focus = #141414
|
|
mod.widgets.ButtonTertiary.draw_text.color_disabled = #3a3a3a
|
|
mod.widgets.ButtonTertiary.draw_icon.color = #141414
|
|
mod.widgets.ButtonDanger.draw_text.color = #ffffff
|
|
mod.widgets.ButtonDanger.draw_text.color_hover = #ffffff
|
|
mod.widgets.ButtonDanger.draw_text.color_down = #ffffff
|
|
mod.widgets.ButtonDanger.draw_text.color_focus = #ffffff
|
|
mod.widgets.ButtonDanger.draw_text.color_disabled = #3a3a3a
|
|
mod.widgets.ButtonDanger.draw_icon.color = #ffffff
|
|
mod.widgets.ButtonOutline.draw_text.color = #141414
|
|
mod.widgets.ButtonOutline.draw_text.color_hover = #000000
|
|
mod.widgets.ButtonOutline.draw_text.color_down = #000000
|
|
mod.widgets.ButtonOutline.draw_text.color_focus = #141414
|
|
mod.widgets.ButtonOutline.draw_text.color_disabled = #3a3a3a
|
|
mod.widgets.ButtonOutline.draw_icon.color = #141414
|
|
mod.widgets.ButtonFlatter.draw_text.color = #141414
|
|
mod.widgets.ButtonFlatter.draw_text.color_hover = #000000
|
|
mod.widgets.ButtonFlatter.draw_text.color_down = #000000
|
|
mod.widgets.ButtonFlatter.draw_text.color_disabled = #4a4a4a
|
|
mod.widgets.ButtonXs.draw_text.color = #141414
|
|
mod.widgets.ButtonXs.draw_text.color_hover = #000000
|
|
mod.widgets.ButtonXs.draw_text.color_down = #000000
|
|
mod.widgets.ButtonXs.draw_text.color_focus = #141414
|
|
mod.widgets.ButtonXs.draw_text.color_disabled = #3a3a3a
|
|
mod.widgets.ButtonXl.draw_text.color = #141414
|
|
mod.widgets.ButtonXl.draw_text.color_hover = #000000
|
|
mod.widgets.ButtonXl.draw_text.color_down = #000000
|
|
mod.widgets.ButtonXl.draw_text.color_focus = #141414
|
|
mod.widgets.ButtonXl.draw_text.color_disabled = #3a3a3a
|
|
mod.widgets.ButtonFlat.draw_icon_end.color = #ffffff
|
|
// A compound button's description line: white on its blue block, lettered.
|
|
mod.widgets.ButtonFlat.draw_description.color = #ffffff
|
|
mod.widgets.ButtonCompound.draw_description.color = #ffffff
|
|
// The legends are lettered in Anton, the poster capitals.
|
|
mod.widgets.ButtonFlat.draw_text.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
mod.widgets.Button.draw_text.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
mod.widgets.ButtonPrimary.draw_text.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
mod.widgets.ButtonSecondary.draw_text.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
mod.widgets.ButtonTertiary.draw_text.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
mod.widgets.ButtonDanger.draw_text.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
mod.widgets.ButtonOutline.draw_text.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
mod.widgets.ButtonFlatter.draw_text.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
mod.widgets.ButtonSm.draw_text.text_style = mod.theme.font_bold{font_size: 9.0}
|
|
mod.widgets.ButtonLg.draw_text.text_style = mod.theme.font_bold{font_size: 12.0}
|
|
mod.widgets.ButtonXs.draw_text.text_style = mod.theme.font_bold{font_size: 7.5}
|
|
mod.widgets.ButtonXl.draw_text.text_style = mod.theme.font_bold{font_size: 14.0}
|
|
|
|
// ---------------------------------------------------------------- selection
|
|
|
|
// The quad of a small control grows by this much so its shadow and focus
|
|
// ring can fall outside the box.
|
|
mod.widgets.CheckBoxFlat.draw_bg.vertex = fn() {
|
|
let m = 6.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.CheckBoxFlat.clip_x = false
|
|
mod.widgets.CheckBoxFlat.clip_y = false
|
|
mod.widgets.CheckBoxFlat.padding = mod.turtle.Inset{left: 8.0 right: 8.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.CheckBoxFlat.draw_bg.size = uniform(15.0)
|
|
mod.widgets.CheckBoxFlat.draw_bg.border_radius = uniform(2.0)
|
|
mod.widgets.CheckBoxFlat.label_walk.margin.left = 15.0
|
|
|
|
// The check box: a square of white paper, screened grey toward its foot, on
|
|
// its shadow. Checked, it is printed blue with a fat black tick; mixed, blue
|
|
// with a black dash. Pressed, it drops onto its shadow and the mark with it.
|
|
mod.widgets.CheckBoxFlat.draw_bg.pixel = fn() {
|
|
let m = 6.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let sz = self.size
|
|
let x0 = (self.rect_size.x - sz) * self.mark_at_end
|
|
let y0 = self.rect_size.y * 0.5 - sz * 0.5
|
|
let lo = vec2(pa_snap(x0, o.x, px), pa_snap(y0, o.y, px))
|
|
let hi = vec2(pa_snap(x0 + sz, o.x, px), pa_snap(y0 + sz, o.y, px))
|
|
let live = 1.0 - self.disabled
|
|
let fill = mix(pa_col(3.0), pa_col(1.0), max(self.active, self.mixed))
|
|
var res = pa_block(p, lo, hi, 3.0, px, fill, self.hover, self.down, self.disabled, self.focus, 1.0)
|
|
let so = pa_so(sz, px)
|
|
let c = (lo + hi) * 0.5 + vec2(so, so) * clamp(self.down, 0.0, 1.0) * live
|
|
let ink = mix(pa_ink(), vec3(0.3, 0.3, 0.31), self.disabled)
|
|
// Mixed: a black dash.
|
|
let dd = pa_seg(p, vec2(c.x - 3.4, c.y), vec2(c.x + 3.4, c.y)) - 1.2
|
|
res = Finish.over(res, vec4(ink, 1.0) * Finish.cover(dd, px) * self.mixed)
|
|
// Checked: the tick.
|
|
let on = self.active * (1.0 - self.mixed)
|
|
let cm = c + vec2(0.0, 0.3)
|
|
let dm = min(pa_seg(p, vec2(cm.x - 4.2, cm.y - 0.4), vec2(cm.x - 1.3, cm.y + 2.9)), pa_seg(p, vec2(cm.x - 1.3, cm.y + 2.9), vec2(cm.x + 4.4, cm.y - 3.6))) - 1.35
|
|
res = Finish.over(res, vec4(ink, 1.0) * Finish.cover(dm, px) * on)
|
|
// Disabled and empty: a small padlock printed in the box.
|
|
let lk = self.disabled * (1.0 - max(self.active, self.mixed))
|
|
let bd = Material.sd_box(p, c + vec2(0.0, 1.4), vec2(3.3, 2.5), 0.7)
|
|
let sk = abs(length(vec2(p.x - c.x, min(p.y - (c.y - 1.0), 0.0))) - 2.1) - 0.65
|
|
let lock = max(Finish.cover(bd, px), Finish.cover(max(sk, p.y - (c.y + 0.2)), px))
|
|
res = Finish.over(res, vec4(0.27, 0.27, 0.28, 1.0) * lock * lk)
|
|
// The error: the outline turns red.
|
|
let d = Material.sd_box(p, (lo + hi) * 0.5, (hi - lo) * 0.5, 3.0)
|
|
return Finish.over(res, vec4(pa_col(2.0), 1.0) * Finish.ring_out(d, 0.0, 1.6, px) * self.error)
|
|
}
|
|
|
|
// The toggle: a pill of grey paper on its shadow with a square key of white
|
|
// paper riding in it; on, the pill is printed in the toggle's ink and the key
|
|
// stands at its right end. The key is screened grey like newsprint.
|
|
mod.widgets.ToggleFlat.draw_bg.size = uniform(18.0)
|
|
mod.widgets.ToggleFlat.draw_bg.pill_aspect = uniform(1.89)
|
|
mod.widgets.ToggleFlat.label_walk.margin.left = 34.0
|
|
let pa_toggle = fn(p: vec2, lo: vec2, hi: vec2, o: vec2, px: float, kt: float, on: float, hover: float, down: float, disabled: float, focus: float, tint: vec3, round: float) -> vec4 {
|
|
let th = hi.y - lo.y
|
|
let tw = hi.x - lo.x
|
|
let r = th * 0.5
|
|
let off_col = vec3(0.74, 0.72, 0.66)
|
|
var res = pa_block(p, lo, hi, r, px, mix(off_col, tint, on), hover * 0.5, 0.0, disabled, focus, 1.0)
|
|
let ow = pa_ow(th, px)
|
|
let ks = th - 2.0 * ow - 1.4
|
|
let kx = pa_snap(lo.x + ow + 0.7 + (tw - 2.0 * ow - 1.4 - ks) * kt, o.x, px)
|
|
let klo = vec2(kx, lo.y + ow + 0.7)
|
|
let khi = vec2(kx + ks, lo.y + ow + 0.7 + ks)
|
|
let kr = mix(ks * 0.28, ks * 0.5, round)
|
|
res = Finish.over(res, pa_block(p, klo, khi, kr, px, pa_col(3.0), hover, down * 0.0, disabled, 0.0, 0.0))
|
|
return res
|
|
}
|
|
mod.widgets.ToggleFlat.draw_bg.pixel = fn() {
|
|
let m = 5.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let tw = self.size * self.pill_aspect
|
|
let th = self.size
|
|
let x0 = (self.rect_size.x - tw) * self.mark_at_end
|
|
let y0 = self.rect_size.y * 0.5 - th * 0.5
|
|
let lo = vec2(pa_snap(x0, o.x, px), pa_snap(y0, o.y, px))
|
|
let hi = vec2(pa_snap(x0 + tw, o.x, px), pa_snap(y0 + th, o.y, px))
|
|
let kt = mix(self.active, self.drag_pos, self.drag)
|
|
return pa_toggle(p, lo, hi, o, px, kt, self.active, self.hover, max(self.pressed, self.down), self.disabled, self.focus, pa_col(1.0), 0.0)
|
|
}
|
|
|
|
// The radio: a disc of white paper on its shadow. Chosen, it is printed red
|
|
// with a ring of white paper round a red bead in its middle, and stands
|
|
// dropped onto its shadow.
|
|
mod.widgets.RadioButtonFlat.draw_bg.vertex = fn() {
|
|
let m = 6.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.RadioButtonFlat.clip_x = false
|
|
mod.widgets.RadioButtonFlat.clip_y = false
|
|
mod.widgets.RadioButtonFlat.draw_bg.size = uniform(15.0)
|
|
mod.widgets.RadioButtonFlat.padding = mod.turtle.Inset{left: 8.0 right: 8.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.RadioButtonFlat.label_walk.margin.left = 15.0
|
|
mod.widgets.RadioButtonFlat.draw_bg.pixel = fn() {
|
|
let m = 6.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let sz = self.size
|
|
let y0 = self.rect_size.y * 0.5 - sz * 0.5
|
|
let lo = vec2(pa_snap(0.0, o.x, px), pa_snap(y0, o.y, px))
|
|
let hi = vec2(pa_snap(sz, o.x, px), pa_snap(y0 + sz, o.y, px))
|
|
let rad = (hi.x - lo.x) * 0.5
|
|
let live = 1.0 - self.disabled
|
|
let on = self.active
|
|
let pushed = max(self.down, on)
|
|
var res = pa_disc(p, (lo + hi) * 0.5, rad, px, mix(pa_col(3.0), pa_col(2.0), on), self.hover, pushed, self.disabled, self.focus, 1.0)
|
|
let so = pa_so(sz, px)
|
|
let c = (lo + hi) * 0.5 + vec2(so, so) * clamp(pushed, 0.0, 1.0) * live
|
|
let rl = length(p - c)
|
|
let ring = Finish.cover(abs(rl - rad * 0.48) - rad * 0.13, px) * on
|
|
res = Finish.over(res, vec4(pa_col(3.0), 1.0) * ring)
|
|
return res
|
|
}
|
|
|
|
// The radio tab (the catalogue's panel tabs): a blue block with a black
|
|
// word; the tab in use is printed white and dropped onto its shadow.
|
|
mod.widgets.RadioButtonTabFlat.draw_bg.vertex = fn() {
|
|
let m = 8.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.RadioButtonTabFlat.clip_x = false
|
|
mod.widgets.RadioButtonTabFlat.clip_y = false
|
|
mod.widgets.RadioButtonTabFlat.padding = mod.turtle.Inset{left: 0.0 right: 8.0 top: 3.0 bottom: 3.0}
|
|
mod.widgets.RadioButtonTabFlat.min_height = 24.0
|
|
mod.widgets.RadioButtonTabFlat.draw_bg.pixel = fn() {
|
|
let m = 8.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(pa_snap(0.0, o.x, px), pa_snap(0.0, o.y, px))
|
|
let hi = vec2(pa_snap(self.rect_size.x, o.x, px), pa_snap(self.rect_size.y, o.y, px))
|
|
let r = clamp(0.22 * (hi.y - lo.y), 3.0, 6.0)
|
|
return pa_block(p, lo, hi, r, px, mix(pa_col(1.0), pa_col(3.0), self.active), self.hover, max(self.down, self.active), self.disabled, self.focus, 1.0)
|
|
}
|
|
mod.widgets.RadioButtonTabFlat.draw_text.color = #141414
|
|
mod.widgets.RadioButtonTabFlat.draw_text.color_hover = #000000
|
|
mod.widgets.RadioButtonTabFlat.draw_text.color_active = #000000
|
|
mod.widgets.RadioButtonTabFlat.draw_text.color_disabled = #3a3a3a
|
|
mod.widgets.RadioButtonTabFlat.draw_text.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
|
|
// ---------------------------------------------------------------- lamps
|
|
|
|
// LAMPS: a real LED, a glossy bead of coloured glass, set in a thick bezel
|
|
// of glossy black outlined in ink. 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. The bead sits in a socket
|
|
// in the bezel, the socket's lower rim catching the light. Over the bead
|
|
// one crisp highlight of a dome. Its light is added, never painted: a tight
|
|
// hot halo and a short bloom in its own hue on the black bezel, gone in
|
|
// about two radii.
|
|
let pa_led_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(-light)) * max(vec3(1.0, 1.0, 1.0) - est, vec3(0.0, 0.0, 0.0))
|
|
return vec4(res.rgb + add, res.a)
|
|
}
|
|
// An LED's colour at full strength: its brightest channel at one.
|
|
let pa_led_full = fn(ink: vec3) -> vec3 {
|
|
return ink / max(max(ink.x, max(ink.y, ink.z)), 0.01)
|
|
}
|
|
// The same colour at the emitter's own chroma: the hue kept and its
|
|
// saturation raised by `vivid` (a colour with next to no hue, a white or a
|
|
// plain lamp, stays neutral).
|
|
let pa_led_hue = fn(ink: vec3, vivid: float) -> vec3 {
|
|
let f = pa_led_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))
|
|
}
|
|
// The lamp: its lens a rounded box `hb` either side of `c` (round when the
|
|
// two are equal), `lit` its current 0..1, `ink` its colour and `vivid` how
|
|
// far its chroma is raised, `ground` the bezel's dark under the light,
|
|
// `room` how far its light may reach, `bez` the bezel's black, `raised` 1
|
|
// for a bezel standing on the page. Premultiplied over `dst`.
|
|
let pa_led = fn(dst: vec4, p: vec2, c: vec2, hb: vec2, lit: float, ink: vec3, vivid: float, px: float, ground: vec3, room: float, bez: vec3, raised: 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.62 * rt, 1.4, 3.6)
|
|
let ds = d - bw
|
|
let L = clamp(lit, 0.0, 1.0)
|
|
let b = pa_led_full(ink)
|
|
let hue = pa_led_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)
|
|
// The lens's own frame: `q` in lens radii from its centre line, `t` its
|
|
// distance out, `nrm` the way its outline faces.
|
|
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 solid shadow on the page, down and to the right.
|
|
let so = max(Finish.snap(clamp(0.3 * rt, 0.7, 1.4), px), px) * raised
|
|
let shd = Finish.cover(Material.sd_box(p, c + vec2(so, so), hb + vec2(bw, bw), rt + bw), px) * step(0.001, so)
|
|
res = Finish.over(res, vec4(pa_ink() * shd, shd))
|
|
// The bezel: glossy black, rounded over, a grey sheen along its upper
|
|
// left; its outer edge an ink line; the socket's lower rim a catch light.
|
|
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 = bez * (0.94 + 0.12 * facing)
|
|
rc = mix(rc, min(bez + vec3(0.42, 0.42, 0.42), white), smoothstep(0.35, 0.95, facing) * 0.75 * smoothstep(0.15, 0.5, u) * (1.0 - smoothstep(0.75, 1.0, u)))
|
|
rc = mix(rc, min(bez + vec3(0.55, 0.55, 0.55), white), Finish.ring_out(d, 0.0, max(px * 1.2, 0.6), px) * smoothstep(0.2, 0.95, nrm.y) * 0.9)
|
|
rc = mix(rc, pa_ink() * 0.6, Finish.band(ds, 0.0, max(px, 0.6), px))
|
|
res = Finish.over(res, vec4(rc * a_s, a_s))
|
|
// The light: a tight hot halo and a short bloom in its hue, gone in
|
|
// about two radii, falling on the bezel.
|
|
if L > 0.001 {
|
|
let xl = max(d, 0.0)
|
|
let halo = exp(-xl / max(0.30 * rt, 0.4)) * 1.5 + exp(-xl / max(0.65 * rt, 0.7)) * 0.32
|
|
let hwin = 1.0 - smoothstep(1.1 * rt, 2.0 * rt + 1.0, xl)
|
|
res = pa_led_add(res, mix(hue, white, 0.15 * pw) * halo * pw * hwin * win, ground)
|
|
}
|
|
// THE BEAD: a glossy dome of coloured glass. Its colour deepens toward
|
|
// the top; light pools low inside, where it comes through the dome; 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(-(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(-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, its colour barely there, the same dome, a catch
|
|
// light along its lower rim.
|
|
let offc = mix(vec3(0.085, 0.09, 0.115), b * 0.4, 0.14)
|
|
var off = mix(offc * 0.62, offc * 1.08, top)
|
|
off = mix(off, min(offc + vec3(0.18, 0.18, 0.18), 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.30, 0.32) * catchl
|
|
var col = mix(off, min(on, white), smoothstep(0.0, 0.35, L))
|
|
// One crisp highlight: a white oval across its upper third.
|
|
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 = mix(col, col * 0.7, Finish.band(d, 0.0, px * 0.6, px) * 0.6 * (1.0 - smoothstep(0.0, 0.25, L)))
|
|
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: the bead in its black bezel on its
|
|
// shadow. The halo's room is held in the lamp's own box (the library
|
|
// reserves a lens thickness either side once a halo is asked for), so the
|
|
// light is never cut at its edge.
|
|
mod.widgets.Lamp.halo = 0.3
|
|
mod.widgets.Lamp.halo_reach = 1.0
|
|
mod.widgets.Lamp.draw_bg.color_accent = uniform(#2a9cff)
|
|
mod.widgets.Lamp.draw_bg.color_success = uniform(#x3ee05a)
|
|
mod.widgets.Lamp.draw_bg.color_warning = uniform(#ffc21a)
|
|
mod.widgets.Lamp.draw_bg.color_error = uniform(#ff3a2a)
|
|
mod.widgets.Lamp.draw_bg.vertex = fn() {
|
|
let m = 2.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 = 2.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)
|
|
// The bead takes about two fifths of its box, the rest is room for its
|
|
// bezel and light.
|
|
let t = min(self.rect_size.y / (1.0 + 2.0 * reach) * 1.12, self.rect_size.y * 0.38)
|
|
let room = (self.rect_size.y - t) * 0.5
|
|
let c = self.rect_size * 0.5
|
|
// A round lamp: the bead the lamp's size in the middle of its box. A
|
|
// bar: a short light pipe three fifths of a bead thick and at most 11
|
|
// points long, set from the start of its box with its light gone
|
|
// within a point and a half, so in a row it never reaches toward what
|
|
// stands after it.
|
|
let tb = t * 0.6
|
|
let blen = min(max(self.rect_size.x - 2.0 * room, tb), min(2.0 * tb, 10.0))
|
|
let cb = vec2(2.5 + 1.2 + blen * 0.5, self.rect_size.y * 0.5)
|
|
let cc = mix(c, cb, self.bar)
|
|
let hb = mix(vec2(t * 0.5, t * 0.5), vec2(blen * 0.5, tb * 0.5), self.bar)
|
|
let reach_px = mix(max(room - 1.0, 2.0), 1.5, self.bar)
|
|
let res = pa_led(vec4(0.0, 0.0, 0.0, 0.0), p, cc, hb, self.lit, self.intent_color().rgb, 1.0 - step(3.5, self.intent), px, vec3(0.07, 0.07, 0.08), reach_px, vec3(0.09, 0.09, 0.1), 1.0)
|
|
return res * self.opacity
|
|
}
|
|
mod.widgets.LampBar.draw_bg.color_accent = uniform(#2a9cff)
|
|
mod.widgets.LampBar.draw_bg.color_success = uniform(#x3ee05a)
|
|
mod.widgets.LampBar.draw_bg.color_warning = uniform(#ffc21a)
|
|
mod.widgets.LampBar.draw_bg.color_error = uniform(#ff3a2a)
|
|
|
|
// ---------------------------------------------------------------- sliders
|
|
|
|
// A slider is a chunky track outlined in ink: printed in the slider's ink up
|
|
// to the value, night blue past it, a white highlight stroke along the ink,
|
|
// and a yellow ball riding it on its own shadow. Each kind has its ink: the
|
|
// slider red, the minimal one magenta, the round one green with a lightning
|
|
// bolt for a thumb, the band blue. Its value is set in the slanted hand
|
|
// beside its name, on the page; under the hand or keyed, a tag of white
|
|
// paper stands behind it.
|
|
let pa_slider = fn(dst: vec4, p: vec2, lo: vec2, hi: vec2, f0: float, f1: float, hx: vec2, px: float, rad: float, base: vec3, hover: float, held: float, disabled: float) -> vec4 {
|
|
var res = pa_track(dst, p, lo, hi, f0, f1, px, base, disabled)
|
|
if rad > 0.0 {
|
|
res = pa_ball(res, p, hx, rad, px, pa_col(0.0), hover, held, disabled, 1.0)
|
|
}
|
|
return res
|
|
}
|
|
|
|
// The value tag of a slider kind: nothing at rest; white paper outlined in
|
|
// ink under the hand or while it is being typed in.
|
|
let pa_valbox = fn(pos: vec2, size: vec2, o: vec2, dpi: float, hover: float, focus: float, disabled: float) -> vec4 {
|
|
let px = pa_px(dpi)
|
|
let p = pos * size
|
|
if size.x < 1.0 || size.y < 1.0 {
|
|
return vec4(0.0, 0.0, 0.0, 0.0)
|
|
}
|
|
let lo = vec2(pa_snap(0.0, o.x, px), pa_snap(0.0, o.y, px))
|
|
let hi = vec2(pa_snap(size.x - px * 0.49, o.x, px), pa_snap(size.y - px * 0.49, o.y, px))
|
|
let c = (lo + hi) * 0.5
|
|
let d = Material.sd_box(p, c, (hi - lo) * 0.5, 3.0)
|
|
let ow = max(Finish.snap(1.2, px), px)
|
|
var col = mix(pa_ink(), mix(pa_col(3.0), vec3(1.0, 1.0, 1.0), focus), Finish.cover(d + ow, px))
|
|
let a = Finish.cover(d, px) * clamp(max(hover * 0.85, focus), 0.0, 1.0) * (1.0 - disabled)
|
|
return vec4(col * a, a)
|
|
}
|
|
|
|
mod.widgets.SliderFlat.clip_x = false
|
|
mod.widgets.SliderFlat.clip_y = false
|
|
mod.widgets.SliderFlat.draw_bg.vertex = fn() {
|
|
let m = 12.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.SliderFlat.draw_bg.pixel = fn() {
|
|
let m = 12.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let rad = 8.5
|
|
let cy = pa_snap(20.0 + (self.rect_size.y - 20.0) * 0.5, o.y, px)
|
|
let lo = vec2(pa_snap(0.0, o.x, px), cy - 4.0)
|
|
let hi = vec2(pa_snap(self.rect_size.x, o.x, px), cy + 4.0)
|
|
let span = self.rect_size.x - rad * 2.0
|
|
let hx = rad + self.slide_pos * span
|
|
let ox = rad + self.origin_pos * span
|
|
let f0 = mix(lo.x, min(ox, hx), self.arc_origin)
|
|
let f1 = mix(hx, max(ox, hx), self.arc_origin)
|
|
var res = pa_slider(vec4(0.0, 0.0, 0.0, 0.0), p, lo, hi, f0, f1, vec2(hx, cy), px, rad, pa_col(2.0), self.hover, self.drag, self.disabled)
|
|
return pa_focus(res, length(p - vec2(hx, cy)) - rad, px, self.focus * (1.0 - self.disabled))
|
|
}
|
|
|
|
// The value field rides in the label row.
|
|
mod.widgets.SliderMinimal.text_input.min_height = 0.0
|
|
mod.widgets.SliderMinimal.text_input.padding = mod.turtle.Inset{left: 5.0 right: 5.0 top: 1.0 bottom: 1.0}
|
|
mod.widgets.SliderFlat.text_input.min_height = 0.0
|
|
mod.widgets.SliderFlat.text_input.padding = mod.turtle.Inset{left: 5.0 right: 5.0 top: 1.0 bottom: 1.0}
|
|
mod.widgets.Slider.text_input.min_height = 0.0
|
|
mod.widgets.Slider.text_input.padding = mod.turtle.Inset{left: 5.0 right: 5.0 top: 1.0 bottom: 1.0}
|
|
mod.widgets.SliderRoundFlat.text_input.min_height = 0.0
|
|
mod.widgets.SliderRoundFlat.text_input.padding = mod.turtle.Inset{left: 5.0 right: 5.0 top: 1.0 bottom: 1.0}
|
|
mod.widgets.SliderRound.text_input.min_height = 0.0
|
|
mod.widgets.SliderRound.text_input.padding = mod.turtle.Inset{left: 5.0 right: 5.0 top: 1.0 bottom: 1.0}
|
|
mod.widgets.SliderFlat.text_input.draw_bg.pixel = fn() {
|
|
return pa_valbox(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.focus, self.disabled)
|
|
}
|
|
mod.widgets.Slider.text_input.draw_bg.pixel = fn() {
|
|
return pa_valbox(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.focus, self.disabled)
|
|
}
|
|
mod.widgets.SliderMinimal.text_input.draw_bg.pixel = fn() {
|
|
return pa_valbox(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.focus, self.disabled)
|
|
}
|
|
mod.widgets.SliderRoundFlat.text_input.draw_bg.pixel = fn() {
|
|
return pa_valbox(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.focus, self.disabled)
|
|
}
|
|
mod.widgets.SliderRound.text_input.draw_bg.pixel = fn() {
|
|
return pa_valbox(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.focus, self.disabled)
|
|
}
|
|
|
|
// The minimal slider: a slimmer magenta track and a smaller ball.
|
|
mod.widgets.SliderMinimal.clip_x = false
|
|
mod.widgets.SliderMinimal.clip_y = false
|
|
mod.widgets.SliderMinimal.draw_bg.vertex = fn() {
|
|
let m = 12.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.SliderMinimal.draw_bg.pixel = fn() {
|
|
let m = 12.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let rad = 7.0
|
|
let cy = pa_snap(self.offset_y + (self.rect_size.y - self.offset_y) * 0.5, o.y, px)
|
|
let lo = vec2(pa_snap(0.0, o.x, px), cy - 3.0)
|
|
let hi = vec2(pa_snap(self.rect_size.x, o.x, px), cy + 3.0)
|
|
let span = self.rect_size.x - rad * 2.0
|
|
let hx = rad + self.slide_pos * span
|
|
let ox = rad + self.origin_pos * span
|
|
let f0 = mix(lo.x, min(ox, hx), self.arc_origin)
|
|
let f1 = mix(hx, max(ox, hx), self.arc_origin)
|
|
var res = pa_slider(vec4(0.0, 0.0, 0.0, 0.0), p, lo, hi, f0, f1, vec2(hx, cy), px, rad, pa_col(6.0), self.hover, self.drag, self.disabled)
|
|
return pa_focus(res, length(p - vec2(hx, cy)) - rad, px, self.focus * (1.0 - self.disabled))
|
|
}
|
|
|
|
// The round slider: a label column, then the green track with a lightning
|
|
// bolt riding it; the track ends short of the right edge, where its value
|
|
// stands on the page.
|
|
mod.widgets.SliderRoundFlat.clip_x = false
|
|
mod.widgets.SliderRoundFlat.clip_y = false
|
|
mod.widgets.SliderRoundFlat.draw_bg.vertex = fn() {
|
|
let m = 12.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.SliderRoundFlat.draw_bg.pixel = fn() {
|
|
let m = 12.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let rad = 11.0
|
|
let cy = pa_snap(self.rect_size.y * 0.5, o.y, px)
|
|
let x0 = pa_snap(self.label_size, o.x, px)
|
|
let lo = vec2(x0, cy - 3.5)
|
|
let hi = vec2(pa_snap(self.rect_size.x - 46.0, o.x, px), cy + 3.5)
|
|
let span = hi.x - lo.x - 12.0
|
|
let hx = lo.x + 6.0 + self.slide_pos * span
|
|
var res = pa_track(vec4(0.0, 0.0, 0.0, 0.0), p, lo, hi, lo.x, hx, px, pa_col(4.0), self.disabled)
|
|
res = pa_bolt(res, p, vec2(hx, cy), rad, px, pa_col(0.0), self.hover, self.drag, self.disabled)
|
|
return pa_focus(res, pa_bolt_d(p - vec2(hx, cy), rad), px, self.focus * (1.0 - self.disabled))
|
|
}
|
|
|
|
// THE BAND is the slider with two yellow balls, printed blue between them.
|
|
// The widget's grab geometry is the balls' own.
|
|
mod.widgets.RangeSliderFlat.clip_x = false
|
|
mod.widgets.RangeSliderFlat.clip_y = false
|
|
mod.widgets.RangeSliderFlat.track_inset = 0.0
|
|
mod.widgets.RangeSliderFlat.handle_size = 17.0
|
|
mod.widgets.RangeSliderFlat.draw_bg.vertex = fn() {
|
|
let m = 12.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.RangeSliderFlat.draw_bg.pixel = fn() {
|
|
let m = 12.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let rad = 8.5
|
|
let cy = pa_snap(self.label_px + (self.rect_size.y - self.label_px) * 0.5, o.y, px)
|
|
let lo = vec2(pa_snap(0.0, o.x, px), cy - 4.0)
|
|
let hi = vec2(pa_snap(self.rect_size.x, o.x, px), cy + 4.0)
|
|
let span = self.rect_size.x - rad * 2.0
|
|
let h0 = rad + self.start_pos * span
|
|
let h1 = rad + self.end_pos * span
|
|
var res = pa_track(vec4(0.0, 0.0, 0.0, 0.0), p, lo, hi, h0, h1, px, pa_col(1.0), self.disabled)
|
|
res = pa_ball(res, p, vec2(h0, cy), rad, px, pa_col(0.0), self.hot_start, self.drag * self.hot_start, self.disabled, 1.0)
|
|
res = pa_ball(res, p, vec2(h1, cy), rad, px, pa_col(0.0), self.hot_end, self.drag * self.hot_end, self.disabled, 1.0)
|
|
let d = min(length(p - vec2(h0, cy)), length(p - vec2(h1, cy))) - rad
|
|
return pa_focus(res, d, px, self.focus * (1.0 - self.disabled))
|
|
}
|
|
|
|
// THE FADER: a black slot with an ink scale either side, yellow ink in the
|
|
// slot up to the value, and a chunky red cap outlined in ink on its shadow,
|
|
// a white index line across its middle.
|
|
mod.widgets.SliderFader.cap_size = 22.0
|
|
// A standing fader is 34 points wide, so a bank of four keeps to its column.
|
|
mod.widgets.SliderFaderY.width = 34.0
|
|
mod.widgets.SliderFader.track_inset = 8.0
|
|
mod.widgets.SliderFader.draw_bg.track_size = uniform(6.0)
|
|
mod.widgets.SliderFader.draw_bg.cap_cross = uniform(0.66)
|
|
mod.widgets.SliderFader.clip_x = false
|
|
mod.widgets.SliderFader.clip_y = false
|
|
mod.widgets.SliderFader.draw_bg.vertex = fn() {
|
|
let m = 12.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.SliderFader.draw_bg.pixel = fn() {
|
|
let m = 12.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let sz = self.rect_size
|
|
let o = self.rect_pos
|
|
let p = self.pos * (sz + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let v = self.is_vertical
|
|
let along = mix(sz.x, sz.y, v)
|
|
let across = mix(sz.y, sz.x, v)
|
|
let inset = self.inset_px
|
|
let travel = max(along - inset * 2.0 - self.cap_px, 1.0)
|
|
let foot = inset + self.cap_px * 0.5
|
|
let dis = self.disabled
|
|
// Track space: `a` along the track from the value's zero (up the screen
|
|
// when the fader stands), `b` across it.
|
|
let a = mix(p.x, sz.y - p.y, v)
|
|
let b = mix(p.y, p.x, v)
|
|
let mid = pa_snap(across * 0.5, mix(o.y, o.x, v), px)
|
|
let tw = min(self.track_size, across)
|
|
// The scale: eleven short ink dashes either side of the slot.
|
|
let pitch = travel / 10.0
|
|
let k = (a - foot) / max(pitch, 1.0)
|
|
let ka = abs(fract(k + 0.5) - 0.5) * pitch
|
|
let inr = step(-0.5, k) * step(k, 10.5)
|
|
let side = abs(abs(b - mid) - (tw * 0.5 + 5.0))
|
|
let dash = Finish.cover(max(ka - 0.6, side - 2.0), px) * inr
|
|
var res = vec4(pa_ink(), 1.0) * dash * mix(0.9, 0.4, dis)
|
|
// The slot and the value in it, laid out in track space and drawn in
|
|
// screen space through the swap.
|
|
var lo = foot + self.fill_lo * travel
|
|
var hi = foot + self.fill_hi * travel
|
|
if self.fill_lo < 0.0005 {
|
|
lo = inset
|
|
}
|
|
if self.fill_hi > 0.9995 {
|
|
hi = along - inset
|
|
}
|
|
let slo = mix(vec2(inset, mid - tw * 0.5), vec2(mid - tw * 0.5, inset), v)
|
|
let shi = mix(vec2(along - inset, mid + tw * 0.5), vec2(mid + tw * 0.5, along - inset), v)
|
|
let flo = mix(vec2(lo, mid - tw), vec2(mid - tw, sz.y - hi), v)
|
|
let fhi = mix(vec2(hi, mid + tw), vec2(mid + tw, sz.y - lo), v)
|
|
res = pa_track_box(res, p, slo, shi, flo, fhi, px, pa_col(0.0), dis, v)
|
|
// The cap.
|
|
let at = foot + self.slide_pos * travel
|
|
let cw = min(max(across * self.cap_cross, 8.0), across)
|
|
let cc = mix(vec2(at, mid), vec2(mid, sz.y - at), v)
|
|
let ch = mix(vec2(self.cap_px * 0.5, cw * 0.5), vec2(cw * 0.5, self.cap_px * 0.5), v)
|
|
let clo = vec2(Finish.snap(o.x + cc.x - ch.x, px), Finish.snap(o.y + cc.y - ch.y, px)) - o
|
|
let chi = clo + ch * 2.0
|
|
let held = self.drag * (1.0 - dis)
|
|
var cap = pa_block(p, clo, chi, 3.0, px, pa_col(2.0), self.hover, held, dis, self.focus, 1.0)
|
|
let so = pa_so(min(chi.x - clo.x, chi.y - clo.y), px) * held
|
|
let cm = (clo + chi) * 0.5 + vec2(so, so)
|
|
let lw = max(Finish.snap(1.4, px), px)
|
|
let line = Finish.cover(abs(mix(p.y - cm.y, p.x - cm.x, 1.0 - v)) - lw * 0.5, px) * Finish.cover(abs(mix(p.x - cm.x, p.y - cm.y, 1.0 - v)) - (mix(ch.x, ch.y, 1.0 - v) - 3.0), px)
|
|
cap = Finish.over(cap, vec4(1.0, 1.0, 1.0, 1.0) * line * mix(1.0, 0.5, dis))
|
|
return Finish.over(res, cap)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- knobs
|
|
|
|
// The angle of `q` from straight down, clockwise, 0..2 pi.
|
|
let pa_ang = fn(q: vec2) -> float {
|
|
var ang = atan2(0.0 - q.x, q.y)
|
|
if ang < 0.0 {
|
|
ang = ang + 2.0 * PI
|
|
}
|
|
return ang
|
|
}
|
|
|
|
// A printed knob: a disc of flat ink on its solid shadow, outlined in ink,
|
|
// its lower right shaded by a dot screen, a white glint stroke inside its
|
|
// upper left, and a fat white pointer outlined in ink from near its middle
|
|
// to its rim. `col` its ink.
|
|
let pa_knob_cap = fn(dst: vec4, p: vec2, c: vec2, rk: float, px: float, col: vec3, ve: float, hover: float, held: float, disabled: float) -> vec4 {
|
|
let live = 1.0 - disabled
|
|
let ow = max(Finish.snap(clamp(0.085 * rk * 2.0, 1.2, 2.6), px), px)
|
|
let so = max(Finish.snap(clamp(0.07 * rk * 2.0, 1.3, 3.5), px), px)
|
|
let off = vec2(so, so) * clamp(held, 0.0, 1.0) * 0.5 * live
|
|
let q = p - c - off
|
|
let d = length(q) - rk
|
|
let ds = length(p - c - vec2(so, so)) - rk
|
|
let uv = clamp(q / (rk * 2.0) + vec2(0.5, 0.5), vec2(0.0, 0.0), vec2(1.0, 1.0))
|
|
// A coarser screen on a big knob, finer on a small one.
|
|
let pitch = clamp(rk * 0.16, 2.2, 4.5)
|
|
let qn = q / max(rk, 0.5)
|
|
let sh = smoothstep(-0.15, 0.95, dot(qn, vec2(0.5, 0.86)) + 0.3 * length(qn))
|
|
let live_hover = hover * live
|
|
var b = mix(col, mix(col, pa_col(8.0), 0.85), disabled)
|
|
b = b + (vec3(1.0, 1.0, 1.0) - b) * 0.14 * live_hover
|
|
let sa = Finish.cover(ds, px) * mix(1.0, 0.3, disabled)
|
|
var res = Finish.over(dst, vec4(pa_ink() * sa, sa))
|
|
var fc = mix(b, pa_deep(b) * 0.85, pa_screen(q, pitch, 0.06 + 0.52 * sh * sh, px))
|
|
// The glint: a white arc stroke inside the outline, upper left.
|
|
let ang = atan2(q.y, q.x)
|
|
let ga = smoothstep(0.55, 0.0, abs(ang + 2.25))
|
|
fc = mix(fc, vec3(1.0, 1.0, 1.0), Finish.cover(abs(length(q) - (rk - ow - 1.8)) - 0.6, px) * ga * 0.9 * live)
|
|
fc = mix(mix(pa_ink(), vec3(0.3, 0.3, 0.31), disabled), fc, Finish.cover(d + ow, px))
|
|
let a = Finish.cover(d, px)
|
|
res = Finish.over(res, vec4(fc * a, a))
|
|
// The pointer.
|
|
let dir = vec2(0.0 - sin(ve), cos(ve))
|
|
let pa = c + off + dir * rk * 0.22
|
|
let pb = c + off + dir * (rk - ow - 1.2)
|
|
let pw = clamp(0.11 * rk, 1.3, 3.2)
|
|
let dp = pa_seg(p, pa, pb) - pw
|
|
var pc = mix(pa_ink(), vec3(1.0, 1.0, 1.0), Finish.cover(dp + max(Finish.snap(1.0, px), px), px))
|
|
res = Finish.over(res, vec4(pc, 1.0) * Finish.cover(dp, px) * a)
|
|
return res
|
|
}
|
|
|
|
// A small knob: round its disc, eleven short ink ticks over the sweep, the
|
|
// ticks up to the value printed red; the disc red. Angles run from straight
|
|
// down, clockwise, the gap at the bottom.
|
|
let pa_knob = fn(p: vec2, c: vec2, rr: float, px: float, slide: float, origin: float, arc_origin: float, gap: float, hover: float, held: float, focus: float, disabled: float) -> vec4 {
|
|
let q = p - c
|
|
let rl = length(q)
|
|
let ang = pa_ang(q)
|
|
let one = PI / 180.0
|
|
let sweep = 2.0 * PI - gap * one
|
|
let start = gap * one * 0.5
|
|
let ve = start + sweep * slide
|
|
let oe = start + sweep * origin
|
|
let a0 = mix(start, min(oe, ve), arc_origin)
|
|
let a1 = mix(ve, max(oe, ve), arc_origin)
|
|
let live = 1.0 - disabled
|
|
var res = vec4(0.0, 0.0, 0.0, 0.0)
|
|
// The ticks.
|
|
let n = 11.0
|
|
let tl = clamp(0.16 * rr, 2.5, 6.0)
|
|
let kf = clamp(floor((ang - start) / sweep * (n - 1.0) + 0.5), 0.0, n - 1.0)
|
|
let ta = start + kf / (n - 1.0) * sweep
|
|
let tdir = vec2(0.0 - sin(ta), cos(ta))
|
|
let tw = clamp(0.045 * rr, 0.9, 1.6)
|
|
let dt = pa_seg(p, c + tdir * (rr - tl + tw), c + tdir * (rr - tw)) - tw
|
|
let lit = step(a0 - 0.001, ta) * step(ta, a1 + 0.001) * step(0.002, a1 - a0)
|
|
let tcol = mix(pa_ink(), pa_col(2.0), lit * live)
|
|
let tdo = Finish.cover(dt - max(Finish.snap(0.8, px), px) * lit, px)
|
|
res = Finish.over(res, vec4(pa_ink(), 1.0) * tdo)
|
|
res = Finish.over(res, vec4(tcol, 1.0) * Finish.cover(dt, px))
|
|
// The disc.
|
|
let rk = rr - tl - clamp(0.06 * rr, 1.2, 3.0)
|
|
res = pa_knob_cap(res, p, c, rk, px, pa_col(2.0), ve, hover, held, disabled)
|
|
return pa_focus(res, rl - rr, px, focus * live)
|
|
}
|
|
|
|
mod.widgets.RotaryKnob.clip_x = false
|
|
mod.widgets.RotaryKnob.clip_y = false
|
|
mod.widgets.RotaryKnob.draw_bg.vertex = fn() {
|
|
let m = 6.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.RotaryKnob.draw_bg.pixel = fn() {
|
|
let m = 6.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let dia = min(self.rect_size.x, self.rect_size.y)
|
|
let c = vec2(Finish.snap(self.rect_pos.x + self.rect_size.x * 0.5, px) - self.rect_pos.x, Finish.snap(self.rect_pos.y + self.rect_size.y - dia * 0.5, px) - self.rect_pos.y)
|
|
return pa_knob(p, c, dia * 0.5 - 1.5, px, self.slide_pos, self.origin_pos, self.arc_origin, self.gap, self.hover, self.drag, self.focus, self.disabled)
|
|
}
|
|
|
|
// THE DIAL: a big purple disc printed like the small knobs, in a black
|
|
// scale ring of its own: a thick ink band round it with nineteen white ticks
|
|
// over the sweep, the ticks past the value grey and the last fifth of the
|
|
// scale red, the band itself on its solid shadow.
|
|
let pa_dial = fn(p: vec2, c: vec2, rr: float, px: float, slide: float, origin: float, arc_origin: float, gap: float, hover: float, held: float, focus: float, disabled: float) -> vec4 {
|
|
let q = p - c
|
|
let rl = length(q)
|
|
let ang = pa_ang(q)
|
|
let one = PI / 180.0
|
|
let sweep = 2.0 * PI - gap * one
|
|
let start = gap * one * 0.5
|
|
let ve = start + sweep * slide
|
|
let oe = start + sweep * origin
|
|
let a0 = mix(start, min(oe, ve), arc_origin)
|
|
let a1 = mix(ve, max(oe, ve), arc_origin)
|
|
let live = 1.0 - disabled
|
|
var res = vec4(0.0, 0.0, 0.0, 0.0)
|
|
// The scale band: a ring of ink, its own shadow under it.
|
|
let bw = clamp(0.15 * rr, 4.0, 10.0)
|
|
let so = max(Finish.snap(clamp(0.035 * rr, 1.3, 3.0), px), px)
|
|
let rm = rr - bw * 0.5 - so
|
|
let db = abs(rl - rm) - bw * 0.5
|
|
let dbs = abs(length(q - vec2(so, so)) - rm) - bw * 0.5
|
|
let sa = Finish.cover(dbs, px)
|
|
res = Finish.over(res, vec4(pa_ink() * sa, sa))
|
|
let ba = Finish.cover(db, px)
|
|
res = Finish.over(res, vec4(mix(pa_ink(), vec3(0.3, 0.3, 0.31), disabled) * ba, ba))
|
|
// The ticks on it.
|
|
let n = 19.0
|
|
let kf = clamp(floor((ang - start) / sweep * (n - 1.0) + 0.5), 0.0, n - 1.0)
|
|
let tt = kf / (n - 1.0)
|
|
let ta = start + tt * sweep
|
|
let tdir = vec2(0.0 - sin(ta), cos(ta))
|
|
let tw = clamp(0.022 * rr, 0.7, 1.4)
|
|
let major = 1.0 - step(0.5, abs(kf - 2.0 * floor(kf * 0.5 + 0.01)))
|
|
let tin = mix(bw * 0.28, bw * 0.12, major)
|
|
let dt = pa_seg(p, c + tdir * (rm - bw * 0.5 + tin + tw), c + tdir * (rm + bw * 0.5 - tin - tw)) - tw
|
|
let lit = step(a0 - 0.001, ta) * step(ta, a1 + 0.001) * step(0.002, a1 - a0)
|
|
let zone = step(0.79, tt)
|
|
var tcol = mix(mix(vec3(0.42, 0.42, 0.44), vec3(0.55, 0.16, 0.14), zone), mix(vec3(1.0, 1.0, 1.0), pa_col(9.0), zone), lit)
|
|
tcol = mix(tcol, vec3(0.55, 0.55, 0.56), disabled)
|
|
res = Finish.over(res, vec4(tcol, 1.0) * Finish.cover(dt, px))
|
|
// The disc.
|
|
let rk = rm - bw * 0.5 + 0.5
|
|
res = pa_knob_cap(res, p, c, rk, px, pa_col(5.0), ve, hover, held, disabled)
|
|
return pa_focus(res, rl - rr, px, focus * live)
|
|
}
|
|
|
|
mod.widgets.RotaryFlat.clip_x = false
|
|
mod.widgets.RotaryFlat.clip_y = false
|
|
mod.widgets.RotaryFlat.draw_bg.vertex = fn() {
|
|
let m = 12.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.RotaryFlat.draw_bg.pixel = fn() {
|
|
let m = 12.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let dia = min(self.rect_size.x, self.rect_size.y - 22.0)
|
|
let c = vec2(Finish.snap(self.rect_pos.x + self.rect_size.x * 0.5, px) - self.rect_pos.x, Finish.snap(self.rect_pos.y + 20.0 + dia * 0.5, px) - self.rect_pos.y)
|
|
return pa_dial(p, c, dia * 0.5 - 1.0, px, self.slide_pos, self.origin_pos, self.arc_origin, self.gap, self.hover, self.drag, self.focus, self.disabled)
|
|
}
|
|
|
|
// A rotary's value sits in a small blue block outlined in ink, black
|
|
// figures on it.
|
|
let pa_tag = fn(pos: vec2, size: vec2, o: vec2, dpi: float, hover: float, focus: float, disabled: float) -> vec4 {
|
|
let px = pa_px(dpi)
|
|
let p = pos * size
|
|
if size.x < 1.0 || size.y < 1.0 {
|
|
return vec4(0.0, 0.0, 0.0, 0.0)
|
|
}
|
|
let so = max(Finish.snap(1.3, px), px)
|
|
let lo = vec2(pa_snap(0.0, o.x, px), pa_snap(0.0, o.y, px))
|
|
let hi = vec2(pa_snap(size.x - px * 0.49, o.x, px), pa_snap(size.y - px * 0.49, o.y, px)) - vec2(so, so)
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let r = min(h.y, 6.0)
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let ds = Material.sd_box(p, c + vec2(so, so), h, r)
|
|
let uv = clamp((p - lo) / max(hi - lo, vec2(1.0, 1.0)), vec2(0.0, 0.0), vec2(1.0, 1.0))
|
|
var res = pa_print(d, ds, uv, p - lo, px, max(Finish.snap(1.3, px), px), mix(pa_col(1.0), vec3(1.0, 1.0, 1.0), focus * 0.85), hover, disabled, 0.6)
|
|
return res
|
|
}
|
|
mod.widgets.RotaryFlat.text_input.min_height = 0.0
|
|
mod.widgets.RotaryFlat.text_input.padding = mod.turtle.Inset{left: 7.0 right: 8.0 top: 2.0 bottom: 3.0}
|
|
mod.widgets.Rotary.text_input.min_height = 0.0
|
|
mod.widgets.Rotary.text_input.padding = mod.turtle.Inset{left: 7.0 right: 8.0 top: 2.0 bottom: 3.0}
|
|
mod.widgets.RotaryGradientY.text_input.min_height = 0.0
|
|
mod.widgets.RotaryGradientY.text_input.padding = mod.turtle.Inset{left: 7.0 right: 8.0 top: 2.0 bottom: 3.0}
|
|
mod.widgets.RotaryFlat.text_input.draw_bg.pixel = fn() {
|
|
return pa_tag(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.focus, self.disabled)
|
|
}
|
|
mod.widgets.Rotary.text_input.draw_bg.pixel = fn() {
|
|
return pa_tag(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.focus, self.disabled)
|
|
}
|
|
mod.widgets.RotaryGradientY.text_input.draw_bg.pixel = fn() {
|
|
return pa_tag(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, self.hover, self.focus, self.disabled)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- fields
|
|
|
|
// A text field: a night-blue well outlined in ink on its solid shadow, all
|
|
// inside its own box (a field clips what it holds), the last points to the
|
|
// right and below left for the shadow. Under the hand the blue lifts a
|
|
// little; focused, the outline is printed in cyan-blue. Read only, the
|
|
// well is grey.
|
|
let pa_field = fn(p: vec2, size: vec2, o: vec2, px: float, fill: vec3, hover: float, focus: float, disabled: float) -> vec4 {
|
|
let so = max(Finish.snap(2.0, px), px)
|
|
let lo = vec2(pa_snap(0.0, o.x, px), pa_snap(0.0, o.y, px))
|
|
let hi = vec2(pa_snap(size.x - px * 0.49, o.x, px), pa_snap(size.y - px * 0.49, o.y, px)) - vec2(so, so)
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let r = 4.0
|
|
let ow = max(Finish.snap(1.8, px), px)
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let ds = Material.sd_box(p, c + vec2(so, so), h, r)
|
|
let sa = Finish.cover(ds, px) * mix(1.0, 0.45, disabled)
|
|
var res = vec4(pa_ink() * sa, sa)
|
|
var f = mix(fill + vec3(0.03, 0.035, 0.045) * hover, vec3(0.53, 0.52, 0.50), disabled)
|
|
// A faint screen in the well's own deeper blue toward its foot.
|
|
let t = clamp((p.y - lo.y) / max(hi.y - lo.y, 1.0), 0.0, 1.0)
|
|
f = mix(f, f * 0.55, pa_screen(p - lo, 2.4, 0.16 * smoothstep(0.4, 1.0, t), px))
|
|
let fo = focus * (1.0 - disabled)
|
|
let ink = mix(mix(pa_ink(), vec3(0.28, 0.28, 0.29), disabled), pa_col(1.0), fo)
|
|
var col = mix(ink, f, Finish.cover(d + ow, px))
|
|
let a = Finish.cover(d, px)
|
|
return Finish.over(res, vec4(col * a, a))
|
|
}
|
|
|
|
// Text fields; an input with no fill of its own (the one a slider, a combo
|
|
// box or a well holds) draws nothing.
|
|
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 = pa_px(self.draw_pass.dpi_factor)
|
|
return pa_field(self.pos * self.rect_size, self.rect_size, self.rect_pos, px, pa_col(7.0), self.hover, self.focus, self.disabled)
|
|
}
|
|
// A field well (a form's field, a search box with icons) wears the same
|
|
// well and carries its input's state into it.
|
|
mod.widgets.FieldWell.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
return pa_field(self.pos * self.rect_size, self.rect_size, self.rect_pos, px, pa_col(7.0), self.hover, self.focus, self.disabled)
|
|
}
|
|
mod.widgets.FormField.input.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
return pa_field(self.pos * self.rect_size, self.rect_size, self.rect_pos, px, pa_col(7.0), self.hover, self.focus, self.disabled)
|
|
}
|
|
mod.widgets.TextInputFlat.padding = mod.turtle.Inset{left: 9.0 right: 11.0 top: 3.0 bottom: 5.0}
|
|
mod.widgets.TextInputFlat.min_height = 24.0
|
|
mod.widgets.TextInputFlat.draw_cursor.color = #ffffff
|
|
mod.widgets.TextInputFlat.draw_text.color = #xf7f3e8
|
|
mod.widgets.TextInputFlat.draw_text.color_hover = uniform(#ffffff)
|
|
mod.widgets.TextInputFlat.draw_text.color_focus = uniform(#ffffff)
|
|
mod.widgets.TextInputFlat.draw_text.color_down = uniform(#ffffff)
|
|
mod.widgets.TextInputFlat.draw_text.color_empty = uniform(#a9b8cc)
|
|
mod.widgets.TextInputFlat.draw_text.color_empty_hover = uniform(#c2cede)
|
|
mod.widgets.TextInputFlat.draw_text.color_empty_focus = uniform(#c2cede)
|
|
mod.widgets.TextInputFlat.draw_text.color_disabled = uniform(#x1e1e1e)
|
|
mod.widgets.TextInputFlat.draw_selection.color = uniform(#128cf080)
|
|
mod.widgets.TextInputFlat.draw_selection.color_hover = uniform(#128cf080)
|
|
mod.widgets.TextInputFlat.draw_selection.color_focus = uniform(#128cf0a6)
|
|
mod.widgets.TextInputFlat.draw_selection.color_down = uniform(#128cf0a6)
|
|
|
|
// The number field: the same well; its stepper stands inside the well's
|
|
// right end behind an ink rule, two white arrowheads, the one under the
|
|
// hand lit blue.
|
|
mod.widgets.NumberField.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
return pa_field(self.pos * self.rect_size, self.rect_size, self.rect_pos, px, pa_col(7.0), self.hover, self.focus, self.disabled)
|
|
}
|
|
mod.widgets.NumberField.spin_width = 16.0
|
|
mod.widgets.NumberSpin.width = 16.0
|
|
mod.widgets.NumberSpin.draw_text.color = #00000000
|
|
mod.widgets.NumberSpin.draw_text.color_disabled = #00000000
|
|
mod.widgets.NumberSpin.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * self.rect_size
|
|
let so = max(Finish.snap(2.0, px), px)
|
|
let ow = max(Finish.snap(1.8, px), px)
|
|
let x0 = pa_snap(0.0, o.x, px)
|
|
let xr = pa_snap(self.rect_size.x - px * 0.49, o.x, px) - so - ow
|
|
let yt = pa_snap(0.0, o.y, px) + ow
|
|
let yb = pa_snap(self.rect_size.y - px * 0.49, o.y, px) - so - ow
|
|
let mid = (yt + yb) * 0.5
|
|
let live = 1.0 - self.disabled
|
|
var res = vec4(0.0, 0.0, 0.0, 0.0)
|
|
// The rule: ink down the stepper's left side.
|
|
let rule = step(x0, p.x) * step(p.x, x0 + ow) * step(yt, p.y) * step(p.y, yb)
|
|
res = Finish.over(res, vec4(pa_ink(), 1.0) * rule)
|
|
// The halves under the hand.
|
|
let up = max(0.0, self.hot)
|
|
let dn = max(0.0, 0.0 - self.hot)
|
|
let hu = step(x0 + ow, p.x) * step(p.x, xr) * step(yt, p.y) * step(p.y, mid)
|
|
let hd = step(x0 + ow, p.x) * step(p.x, xr) * step(mid, p.y) * step(p.y, yb)
|
|
res = Finish.over(res, vec4(pa_col(1.0), 1.0) * (hu * up + hd * dn) * live)
|
|
let cx = (x0 + ow + xr) * 0.5
|
|
let cu = (yt + mid) * 0.5 + 0.4
|
|
let cd = (mid + yb) * 0.5 - 0.4
|
|
let tu = pa_sd_tri(p, vec2(cx - 3.0, cu + 1.6), vec2(cx + 3.0, cu + 1.6), vec2(cx, cu - 1.8))
|
|
let td = pa_sd_tri(p, vec2(cx - 3.0, cd - 1.6), vec2(cx, cd + 1.8), vec2(cx + 3.0, cd - 1.6))
|
|
let ink = mix(vec3(0.6, 0.6, 0.6), vec3(1.0, 1.0, 1.0), live)
|
|
return Finish.over(res, vec4(ink, 1.0) * Finish.cover(min(tu, td), px))
|
|
}
|
|
|
|
// The drop-down: a yellow block outlined in ink on its shadow, a black
|
|
// arrowhead at its right behind an ink rule.
|
|
mod.widgets.DropDownFlat.padding = mod.turtle.Inset{left: 10.0 right: 28.0 top: 3.0 bottom: 3.0}
|
|
mod.widgets.DropDownFlat.clip_x = false
|
|
mod.widgets.DropDownFlat.clip_y = false
|
|
mod.widgets.DropDownFlat.draw_bg.vertex = fn() {
|
|
let m = 8.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))
|
|
}
|
|
// The rule and the arrowhead, laid on a block or a field at its right end.
|
|
let pa_chevron = fn(dst: vec4, p: vec2, lo: vec2, hi: vec2, px: float, ink: vec3, disabled: float) -> vec4 {
|
|
let ow = max(Finish.snap(1.3, px), px)
|
|
let dx = Finish.snap(hi.x - 20.0, px)
|
|
let inside = step(lo.y + 4.0, p.y) * step(p.y, hi.y - 4.0)
|
|
let rule = step(dx - ow, p.x) * step(p.x, dx) * inside
|
|
let k = mix(ink, vec3(0.35, 0.35, 0.36), disabled)
|
|
var res = Finish.over(dst, vec4(k, 1.0) * rule)
|
|
let cc = vec2(dx + 10.0, (lo.y + hi.y) * 0.5)
|
|
let dt = pa_sd_tri(p, vec2(cc.x - 4.2, cc.y - 2.2), vec2(cc.x + 4.2, cc.y - 2.2), vec2(cc.x, cc.y + 2.8))
|
|
return Finish.over(res, vec4(k, 1.0) * Finish.cover(dt, px))
|
|
}
|
|
mod.widgets.DropDownFlat.draw_bg.pixel = fn() {
|
|
let m = 8.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(pa_snap(0.0, o.x, px), pa_snap(0.0, o.y, px))
|
|
let hi = vec2(pa_snap(self.rect_size.x, o.x, px), pa_snap(self.rect_size.y, o.y, px))
|
|
let r = clamp(0.22 * (hi.y - lo.y), 3.0, 6.5)
|
|
let dn = max(self.down, self.active)
|
|
var res = pa_block(p, lo, hi, r, px, pa_col(0.0), self.hover, dn, self.disabled, self.focus, 1.0)
|
|
let so = pa_so(min(hi.y - lo.y, hi.x - lo.x), px) * clamp(dn, 0.0, 1.0) * (1.0 - self.disabled)
|
|
return pa_chevron(res, p, lo + vec2(so, so), hi + vec2(so, so), px, pa_ink(), self.disabled)
|
|
}
|
|
mod.widgets.DropDownFlat.draw_text.color = #141414
|
|
mod.widgets.DropDownFlat.draw_text.color_hover = #000000
|
|
mod.widgets.DropDownFlat.draw_text.color_focus = #141414
|
|
mod.widgets.DropDownFlat.draw_text.color_disabled = #3a3a3a
|
|
mod.widgets.DropDownFlat.draw_text.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
|
|
// The combo box: a bar of bright red ink outlined on its shadow, its words
|
|
// black, its list opened from the arrowhead at its right.
|
|
mod.widgets.ComboBoxFlat.padding = mod.turtle.Inset{left: 10.0 right: 28.0 top: 3.0 bottom: 5.0}
|
|
mod.widgets.ComboBoxFlat.input.min_height = 0.0
|
|
mod.widgets.ComboBoxFlat.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * self.rect_size
|
|
let o = self.rect_pos
|
|
let so = max(Finish.snap(2.0, px), px)
|
|
let lo = vec2(pa_snap(0.0, o.x, px), pa_snap(0.0, o.y, px))
|
|
let hi = vec2(pa_snap(self.rect_size.x - px * 0.49, o.x, px), pa_snap(self.rect_size.y - px * 0.49, o.y, px)) - vec2(so, so)
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let r = 5.0
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let ds = Material.sd_box(p, c + vec2(so, so), h, r)
|
|
let uv = clamp((p - lo) / max(hi - lo, vec2(1.0, 1.0)), vec2(0.0, 0.0), vec2(1.0, 1.0))
|
|
var res = pa_print(d, ds, uv, p - lo, px, max(Finish.snap(1.8, px), px), pa_col(9.0), self.hover, self.disabled, 0.8)
|
|
res = Finish.over(res, vec4(pa_col(1.0), 1.0) * Finish.band(d, max(Finish.snap(1.8, px), px), max(Finish.snap(1.8, px), px) + 1.4, px) * self.focus * (1.0 - self.disabled))
|
|
return pa_chevron(res, p, lo, hi, px, pa_ink(), self.disabled)
|
|
}
|
|
mod.widgets.ComboBoxFlat.input.draw_text.color = #141414
|
|
mod.widgets.ComboBoxFlat.input.draw_text.color_hover = #000000
|
|
mod.widgets.ComboBoxFlat.input.draw_text.color_focus = #000000
|
|
mod.widgets.ComboBoxFlat.input.draw_text.color_empty = #5a1a14
|
|
mod.widgets.ComboBoxFlat.input.draw_text.color_disabled = #3a3a3a
|
|
mod.widgets.ComboBoxFlat.input.draw_cursor.color = #141414
|
|
// Selected words on the red bar: a dark wash that leaves the black words
|
|
// black.
|
|
mod.widgets.ComboBoxFlat.input.draw_selection.color = uniform(#00000000)
|
|
mod.widgets.ComboBoxFlat.input.draw_selection.color_hover = uniform(#x0000002e)
|
|
mod.widgets.ComboBoxFlat.input.draw_selection.color_focus = uniform(#00000038)
|
|
mod.widgets.ComboBoxFlat.input.draw_selection.color_down = uniform(#00000038)
|
|
|
|
// Open lists: a sheet of white paper outlined in ink with its solid shadow
|
|
// inside its own box; the row under the hand printed yellow, the chosen row
|
|
// a blue strip outlined in ink.
|
|
let pa_menu = fn(p: vec2, size: vec2, px: float) -> vec4 {
|
|
let so = max(Finish.snap(3.0, px), px)
|
|
let lo = vec2(0.0, 0.0)
|
|
let hi = size - vec2(so, so)
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let r = 5.0
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let ds = Material.sd_box(p, c + vec2(so, so), h, r)
|
|
let uv = clamp((p - lo) / max(hi - lo, vec2(1.0, 1.0)), vec2(0.0, 0.0), vec2(1.0, 1.0))
|
|
return pa_print(d, ds, uv, p - lo, px, max(Finish.snap(2.0, px), px), pa_col(3.0), 0.0, 0.0, 0.35)
|
|
}
|
|
let pa_row = fn(p: vec2, size: vec2, px: float, hover: float, active: float, disabled: float) -> vec4 {
|
|
let lo = vec2(4.0, 1.0)
|
|
let hi = size - vec2(7.0, 1.0)
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let d = Material.sd_box(p, c, h, 3.0)
|
|
let ow = max(Finish.snap(1.3, px), px)
|
|
let hv = vec4(pa_col(0.0), 1.0) * Finish.cover(d, px) * hover * (1.0 - disabled) * (1.0 - active)
|
|
let col = mix(pa_ink(), mix(pa_col(1.0), vec3(1.0, 1.0, 1.0), 0.12 * hover), Finish.cover(d + ow, px))
|
|
let key = vec4(col, 1.0) * Finish.cover(d, px)
|
|
return mix(hv, key, active)
|
|
}
|
|
mod.widgets.PopupMenuFlat.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
return pa_menu(self.pos * self.rect_size, self.rect_size, px)
|
|
}
|
|
mod.widgets.PopupMenuItem.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
return pa_row(self.pos * self.rect_size, self.rect_size, px, self.hover, self.active, self.disabled)
|
|
}
|
|
mod.widgets.PopupMenuItem.draw_text.color = #141414
|
|
mod.widgets.PopupMenuItem.draw_text.color_hover = #000000
|
|
mod.widgets.PopupMenuItem.draw_text.color_active = #000000
|
|
mod.widgets.ComboBoxFlat.draw_popup_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
return pa_menu(self.pos * self.rect_size, self.rect_size, px)
|
|
}
|
|
mod.widgets.ComboBoxFlat.draw_item.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
return pa_row(self.pos * self.rect_size, self.rect_size, px, self.hover, self.active, 0.0)
|
|
}
|
|
mod.widgets.ComboBoxFlat.draw_item_text.color = #141414
|
|
mod.widgets.ComboBoxFlat.draw_item_text.color_active = #000000
|
|
|
|
// ---------------------------------------------------------------- tabs
|
|
|
|
// The segmented control: the whole strip one long blue block on its shadow,
|
|
// black words on it; the chosen answer is printed on white paper and
|
|
// dropped onto the shadow -- pushed in -- its word going down with it.
|
|
mod.widgets.SegmentedControlFlat.draw_bg.vertex = fn() {
|
|
let m = 8.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.SegmentedControlFlat.draw_bg.pixel = fn() {
|
|
let m = 8.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(pa_snap(0.0, o.x, px), pa_snap(0.0, o.y, px))
|
|
let hi = vec2(pa_snap(self.rect_size.x, o.x, px), pa_snap(self.rect_size.y, o.y, px))
|
|
let r = clamp(0.22 * (hi.y - lo.y), 3.0, 6.5)
|
|
return pa_block(p, lo, hi, r, px, pa_col(1.0), 0.0, 0.0, 0.0, 0.0, 1.0)
|
|
}
|
|
// The chosen answer stands a point and a half in from the strip's edge.
|
|
mod.widgets.SegmentedControlFlat.draw_pill.vertex = fn() {
|
|
let m = 9.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.SegmentedControlFlat.draw_pill.pixel = fn() {
|
|
let m = 9.0
|
|
let v = 1.0 - step(0.0, self.radius)
|
|
let hz = 1.0 - v
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(pa_snap(1.0 * hz - 0.5 * v, o.x, px), pa_snap(-1.0 * hz, o.y, px))
|
|
let hi = vec2(pa_snap(self.rect_size.x - 1.0 * hz + 0.5 * v, o.x, px), pa_snap(self.rect_size.y + 1.0 * hz, o.y, px))
|
|
let r = clamp(0.22 * (hi.y - lo.y), 3.0, 6.0)
|
|
return pa_block(p, lo, hi, r, px, pa_col(3.0), 0.0, 1.0, 0.0, 0.0, 1.0)
|
|
}
|
|
mod.widgets.SegmentedControlFlat.draw_text.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
mod.widgets.SegmentedControlFlat.draw_text_selected.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
mod.widgets.SegmentedControlFlat.draw_text.color = #141414
|
|
mod.widgets.SegmentedControlFlat.draw_text_selected.color = #000000
|
|
mod.widgets.SegmentedControlVertical.draw_pill.radius = -1.0
|
|
|
|
// Tabs: each tab is a red block of its own with a small gap to the next;
|
|
// the tab in use is printed on white paper and dropped onto its shadow like
|
|
// the chosen segment.
|
|
mod.widgets.Tabs.height = 26.0
|
|
mod.widgets.Tabs.clip_x = false
|
|
mod.widgets.Tabs.clip_y = false
|
|
let pa_tab = fn(pos: vec2, size: vec2, o: vec2, dpi: float, hover: float, active: float) -> vec4 {
|
|
let m = 8.0
|
|
let px = pa_px(dpi)
|
|
let p = pos * (size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(pa_snap(1.5, o.x, px), pa_snap(0.0, o.y, px))
|
|
let hi = vec2(pa_snap(size.x - 2.5, o.x, px), pa_snap(size.y - 1.0, o.y, px))
|
|
let r = clamp(0.22 * (hi.y - lo.y), 3.0, 6.0)
|
|
return pa_block(p, lo, hi, r, px, mix(pa_col(9.0), pa_col(3.0), active), hover, active, 0.0, 0.0, 1.0)
|
|
}
|
|
mod.widgets.Tabs.draw_tab.vertex = fn() {
|
|
let m = 8.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.Tabs.draw_tab_hover.vertex = fn() {
|
|
let m = 8.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.Tabs.draw_tab_active.vertex = fn() {
|
|
let m = 8.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.Tabs.draw_bg.pixel = fn() {
|
|
return vec4(0.0, 0.0, 0.0, 0.0)
|
|
}
|
|
mod.widgets.Tabs.draw_tab.pixel = fn() {
|
|
return pa_tab(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, 0.0, 0.0)
|
|
}
|
|
mod.widgets.Tabs.draw_tab_hover.pixel = fn() {
|
|
return pa_tab(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, 1.0, 0.0)
|
|
}
|
|
mod.widgets.Tabs.draw_tab_active.pixel = fn() {
|
|
return pa_tab(self.pos, self.rect_size, self.rect_pos, self.draw_pass.dpi_factor, 0.0, 1.0)
|
|
}
|
|
mod.widgets.Tabs.draw_sep.pixel = fn() {
|
|
return vec4(0.0, 0.0, 0.0, 0.0)
|
|
}
|
|
mod.widgets.Tabs.draw_mark.color = #141414
|
|
mod.widgets.Tabs.draw_text.color = #141414
|
|
mod.widgets.Tabs.draw_text_active.color = #000000
|
|
mod.widgets.Tabs.draw_text.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
mod.widgets.Tabs.draw_text_active.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
|
|
// ---------------------------------------------------------------- feedback
|
|
|
|
// The progress bar: a chunky track, night blue, printed in its ink up to
|
|
// the value; still and unknown, a block of red and yellow racing stripes in
|
|
// its middle third.
|
|
mod.widgets.ProgressBarFlat.height = 9.0
|
|
mod.widgets.ProgressBarFlat.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * self.rect_size
|
|
let so = max(Finish.snap(1.3, px), px)
|
|
let th = min(max(self.thickness, 7.0), self.rect_size.y - so)
|
|
let y0 = pa_snap((self.rect_size.y - so - th) * 0.5, o.y, px)
|
|
let x0 = pa_snap(self.rect_size.x * self.start, o.x, px)
|
|
let x1 = pa_snap(self.rect_size.x * self.end, o.x, px) - so
|
|
let lo = vec2(x0, y0)
|
|
let hi = vec2(x1, y0 + Finish.snap(th, px))
|
|
let span = hi.x - lo.x
|
|
var f0 = lo.x
|
|
var f1 = f0 + span * clamp((self.value - self.start) / max(self.end - self.start, 0.001), 0.0, 1.0)
|
|
let fill = self.fill_color()
|
|
var res = vec4(0.0, 0.0, 0.0, 0.0)
|
|
if self.value < 0.0 {
|
|
f0 = lo.x + span * 0.3
|
|
f1 = lo.x + span * 0.7
|
|
res = pa_track(res, p, lo, hi, f0, f1, px, pa_col(0.0), 0.0)
|
|
// Red stripes across the block.
|
|
let st = step(0.5, fract((p.x - p.y * 0.8) / 7.0)) * step(f0, p.x) * step(p.x, f1)
|
|
let d = Material.sd_box(p, (lo + hi) * 0.5, (hi - lo) * 0.5, (hi.y - lo.y) * 0.5)
|
|
let ow = max(Finish.snap(1.3, px), px)
|
|
res = Finish.over(res, vec4(pa_col(2.0), 1.0) * st * Finish.cover(d + ow, px))
|
|
} else {
|
|
if self.track > 0.5 {
|
|
res = pa_track(res, p, lo, hi, f0, f1, px, fill.rgb, 0.0)
|
|
}
|
|
}
|
|
return res * self.opacity
|
|
}
|
|
mod.widgets.ProgressBarFlat.draw_bg.color_primary = #128cf0
|
|
|
|
// The level meter: a night-blue channel outlined in ink holding square
|
|
// cells of ink, blue at its foot, then green, yellow toward the top,
|
|
// orange, red at the end,
|
|
// each lit cell screened in its deeper tone; unlit cells are dark glass of
|
|
// their own colour. The clip lamp is a small LED.
|
|
mod.widgets.LevelMeter.height = 9.0
|
|
mod.widgets.LevelMeterColumn.width = 12.0
|
|
mod.widgets.LevelMeter.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let sz = self.rect_size
|
|
let p = self.pos * sz
|
|
let v = self.vertical
|
|
let along = mix(sz.x, sz.y, v)
|
|
let across = mix(sz.y, sz.x, v)
|
|
let a = mix(p.x, sz.y - p.y, v)
|
|
let b = mix(p.y, p.x, v)
|
|
let lamp_room = self.lamp * (across + 3.0)
|
|
let bar = max(4.0, along - lamp_room)
|
|
let wlo = mix(vec2(0.0, 0.0), vec2(0.0, sz.y - bar), v)
|
|
let whi = mix(vec2(bar, sz.y), vec2(sz.x, sz.y), v)
|
|
let lo = vec2(pa_snap(wlo.x, o.x, px), pa_snap(wlo.y, o.y, px))
|
|
let hi = vec2(pa_snap(whi.x, o.x, px), pa_snap(whi.y, o.y, px))
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let r = min(min(h.x, h.y), 3.0)
|
|
let ow = max(Finish.snap(clamp(across * 0.14, 0.8, 1.4), px), px)
|
|
let d = Material.sd_box(p, c, h, r)
|
|
var res = vec4(pa_ink(), 1.0) * Finish.cover(d, px)
|
|
res = Finish.over(res, vec4(pa_col(7.0), 1.0) * Finish.cover(d + ow, px))
|
|
let pad = ow + 0.8
|
|
let span = max(1.0, bar - pad * 2.0)
|
|
// The cells: about a cell and a half of the meter's thickness long.
|
|
let pitch = span / max(floor(span / max(across * 1.4, 4.0) + 0.5), 1.0)
|
|
let k = floor((a - pad) / pitch)
|
|
let ca = pad + (k + 0.5) * pitch
|
|
let share = clamp((ca - pad) / span, 0.0, 1.0)
|
|
var lc = mix(pa_col(1.0), pa_col(4.0), step(self.hot_at * 0.4, share))
|
|
lc = mix(lc, pa_col(0.0), step(self.hot_at, share))
|
|
lc = mix(lc, pa_col(10.0), step(mix(self.hot_at, self.hot_to, 0.6), share))
|
|
lc = mix(lc, pa_col(2.0), step(self.hot_to, share))
|
|
let on = step(share - 0.5 / max(span / pitch, 1.0), self.level) * step(0.001, self.level)
|
|
let held = step(abs(ca - (pad + span * self.hold)), pitch * 0.5) * step(0.002, self.hold)
|
|
let lit = max(on, held)
|
|
let cw = max(pitch - 1.2, 1.0)
|
|
let cb = across - pad * 2.0
|
|
let cq = vec2(a - ca, b - across * 0.5)
|
|
let cd = Material.sd_box(cq, vec2(0.0, 0.0), vec2(cw * 0.5, cb * 0.5), min(0.8, cb * 0.5))
|
|
let inb = step(pad, a) * step(a, bar - pad)
|
|
var cc = mix(lc, pa_deep(lc), pa_screen(cq + vec2(10.0, 10.0), 1.9, 0.18, px))
|
|
let unl = mix(vec3(0.05, 0.08, 0.13), lc, 0.16)
|
|
cc = mix(unl, cc, lit)
|
|
res = Finish.over(res, vec4(cc, 1.0) * Finish.cover(cd, px) * inb)
|
|
res = res * self.opacity
|
|
if self.lamp > 0.5 {
|
|
let lcen = mix(vec2(bar + 3.0 + across * 0.5, sz.y * 0.5), vec2(sz.x * 0.5, across * 0.5), v)
|
|
let rl = clamp(across * 0.5 - 1.0, 1.5, 3.5)
|
|
res = pa_led(res, p, lcen, vec2(rl, rl), step(0.5, self.over), pa_col(2.0), 1.0, px, vec3(0.07, 0.07, 0.08), rl * 1.0, vec3(0.08, 0.08, 0.09), 1.0) * self.opacity
|
|
}
|
|
return res
|
|
}
|
|
|
|
// The spinner: a little gauge -- a yellow disc outlined in ink on its
|
|
// shadow, short ink ticks round it and a black needle. A sheet may not read
|
|
// the pass clock, so it stands still.
|
|
mod.widgets.SpinnerFlat.size = 20.0
|
|
mod.widgets.SpinnerFlat.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * self.rect_size
|
|
let o = self.rect_pos
|
|
let size = min(self.rect_size.x, self.rect_size.y)
|
|
let so = max(Finish.snap(1.3, px), px)
|
|
let rad = size * 0.5 - so - 0.5
|
|
let c = vec2(Finish.snap(o.x + rad + 0.5, px), Finish.snap(o.y + rad + 0.5, px)) - o
|
|
var res = pa_disc(p, c, rad, px, pa_col(0.0), 0.0, 0.0, 0.0, 0.0, 1.0)
|
|
let q = p - c
|
|
let ang = pa_ang(q)
|
|
let k = floor(ang / (PI / 4.0) + 0.5)
|
|
let ta = k * PI / 4.0
|
|
let tdir = vec2(0.0 - sin(ta), cos(ta))
|
|
let dt = pa_seg(p, c + tdir * rad * 0.62, c + tdir * rad * 0.8) - 0.55
|
|
res = Finish.over(res, vec4(pa_ink(), 1.0) * Finish.cover(dt, px) * step(0.5, abs(k - 0.0)) * step(abs(k - 8.0), 7.5))
|
|
let nd = vec2(0.72, -0.69)
|
|
let dn = pa_seg(p, c - nd * rad * 0.15, c + nd * rad * 0.72) - 0.9
|
|
res = Finish.over(res, vec4(pa_ink(), 1.0) * Finish.cover(dn, px))
|
|
res = Finish.over(res, vec4(pa_ink(), 1.0) * Finish.cover(length(q) - 1.8, px))
|
|
return res * self.alpha
|
|
}
|
|
|
|
// A count is a small blue block outlined in ink on its shadow, its figures
|
|
// black.
|
|
mod.widgets.BadgePalette.neutral = #128cf0
|
|
mod.widgets.BadgePalette.on_neutral = #111111
|
|
mod.widgets.BadgeFlat.shape = mod.widgets.BadgeShape.Rounded
|
|
mod.widgets.BadgeFlat.radius = 4.0
|
|
mod.widgets.BadgeFlat.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * self.rect_size
|
|
let so = max(Finish.snap(1.3, px), px)
|
|
let lo = vec2(pa_snap(0.0, o.x, px), pa_snap(0.0, o.y, px))
|
|
let hi = vec2(pa_snap(self.rect_size.x - px * 0.49, o.x, px), pa_snap(self.rect_size.y - px * 0.49, o.y, px)) - vec2(so, so)
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let r = min(4.0, min(h.x, h.y))
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let ds = Material.sd_box(p, c + vec2(so, so), h, r)
|
|
let uv = clamp((p - lo) / max(hi - lo, vec2(1.0, 1.0)), vec2(0.0, 0.0), vec2(1.0, 1.0))
|
|
return pa_print(d, ds, uv, p - lo, px, max(Finish.snap(1.3, px), px), self.color.rgb, 0.0, 0.0, 0.6) * max(self.color.a, 0.0)
|
|
}
|
|
|
|
// A chip is a speech bubble of white paper outlined in ink, its tail at its
|
|
// lower left, its word black; a keyed chip wears the focus ring.
|
|
mod.widgets.ChipFlat.draw_text.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
mod.widgets.ChipFlat.draw_text.color = #141414
|
|
mod.widgets.ChipFlat.draw_bg.vertex = fn() {
|
|
let m = 8.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.ChipFlat.draw_bg.pixel = fn() {
|
|
let m = 8.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(pa_snap(0.0, o.x, px), pa_snap(0.0, o.y, px))
|
|
let hi = vec2(pa_snap(self.rect_size.x, o.x, px), pa_snap(self.rect_size.y, o.y, px))
|
|
let r = (hi.y - lo.y) * 0.5
|
|
return pa_bubble(p, lo, hi, r, px, pa_col(3.0), self.hover, self.down, 0.0, self.keyed)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- surfaces
|
|
|
|
// The scroll bar: a channel of white paper outlined in ink, the thumb a
|
|
// blue strip outlined in ink in it.
|
|
mod.widgets.ScrollBar.bar_size = 10.0
|
|
mod.widgets.ScrollBar.bar_side_margin = 1.0
|
|
mod.widgets.ScrollBar.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let sz = self.rect_size
|
|
let p = self.pos * sz
|
|
let v = self.is_vertical
|
|
let lo = vec2(pa_snap(0.0, o.x, px), pa_snap(0.0, o.y, px))
|
|
let hi = vec2(pa_snap(sz.x, o.x, px), pa_snap(sz.y, o.y, px))
|
|
let ow = max(Finish.snap(1.2, px), px)
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let d = Material.sd_box(p, c, h, min(h.x, h.y))
|
|
var res = vec4(mix(pa_ink(), pa_col(3.0), Finish.cover(d + ow, px)), 1.0) * Finish.cover(d, px)
|
|
let t0 = mix(sz.x * self.norm_scroll, sz.y * self.norm_scroll, v)
|
|
let t1 = t0 + mix(sz.x * self.norm_handle, sz.y * self.norm_handle, v)
|
|
let tlo = mix(vec2(t0 + 1.0, 1.5), vec2(1.5, t0 + 1.0), v)
|
|
let thi = mix(vec2(t1 - 1.0, sz.y - 1.5), vec2(sz.x - 1.5, t1 - 1.0), v)
|
|
let slo = vec2(pa_snap(tlo.x, o.x, px), pa_snap(tlo.y, o.y, px))
|
|
let shi = vec2(pa_snap(thi.x, o.x, px), pa_snap(thi.y, o.y, px))
|
|
let sc = (slo + shi) * 0.5
|
|
let shh = max((shi - slo) * 0.5, vec2(0.5, 0.5))
|
|
let dt = Material.sd_box(p, sc, shh, min(shh.x, shh.y))
|
|
let col = pa_col(1.0) + (vec3(1.0, 1.0, 1.0) - pa_col(1.0)) * 0.18 * max(self.hover, self.drag)
|
|
let tc = mix(pa_ink(), col, Finish.cover(dt + ow, px))
|
|
res = Finish.over(res, vec4(tc, 1.0) * Finish.cover(dt, px))
|
|
return res * self.opacity
|
|
}
|
|
|
|
// A comic panel: a big flat shape of ink outlined thick in black on its
|
|
// solid shadow, its shadow held within half the gap to its neighbours, its
|
|
// fill screened toward the lower right in its own deeper tone. A raised
|
|
// panel is blue; a sunken panel is red with the page's shadow falling into
|
|
// it along its upper and left walls, a hole printed in the page.
|
|
let pa_slab = fn(p: vec2, size: vec2, o: vec2, px: float, r: float, base: vec3, hover: float, sunk: float) -> vec4 {
|
|
let so = max(Finish.snap(3.0, px), px) * (1.0 - sunk)
|
|
let ow = max(Finish.snap(2.6, px), px)
|
|
let lo = vec2(pa_snap(0.0, o.x, px), pa_snap(0.0, o.y, px))
|
|
let hi = vec2(pa_snap(size.x, o.x, px), pa_snap(size.y, o.y, px))
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let ds = Material.sd_box(p, c + vec2(so, so), h, r) + 1000.0 * sunk
|
|
let uv = clamp((p - lo) / max(hi - lo, vec2(1.0, 1.0)), vec2(0.0, 0.0), vec2(1.0, 1.0))
|
|
// A coarser screen than a control's, about four points apart.
|
|
let sa = Finish.cover(ds, px)
|
|
var res = vec4(pa_ink() * sa, sa)
|
|
var b = base + (vec3(1.0, 1.0, 1.0) - base) * 0.06 * hover
|
|
let t = uv.x * 0.42 + uv.y * 0.58
|
|
let cov = 0.04 + 0.30 * smoothstep(0.30, 1.05, t)
|
|
var col = mix(b, pa_deep(b), pa_screen(p - lo, 3.6, cov, px))
|
|
// Sunk: the shadow of the page falls in from the upper left, solid.
|
|
let sw = max(Finish.snap(6.0, px), px)
|
|
let din = Material.sd_box(p, c + vec2(sw, sw), h, r)
|
|
col = mix(col, pa_ink(), (1.0 - Finish.cover(din, px)) * sunk)
|
|
// The glint, a white stroke inside the upper left of the outline.
|
|
let gd = abs(d + ow + 2.0) - 0.75
|
|
let gm = (1.0 - smoothstep(0.10, 0.28, uv.x)) * (1.0 - smoothstep(0.12, 0.45, uv.y)) * (1.0 - sunk)
|
|
col = mix(col, vec3(1.0, 1.0, 1.0), Finish.cover(gd, px) * gm * (0.9 - 0.5 * Finish.lum(b)))
|
|
col = mix(pa_ink(), col, Finish.cover(d + ow, px))
|
|
let a = Finish.cover(d, px)
|
|
return Finish.over(res, vec4(col * a, a))
|
|
}
|
|
|
|
mod.widgets.PanelView.clip_x = false
|
|
mod.widgets.PanelView.clip_y = false
|
|
mod.widgets.PanelView.padding = mod.turtle.Inset{left: 12.0 right: 12.0 top: 12.0 bottom: 12.0}
|
|
mod.widgets.PanelView.draw_bg.vertex = fn() {
|
|
let m = 8.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.PanelView.draw_bg.pixel = fn() {
|
|
let m = 8.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
if self.sunken > 0.5 {
|
|
return pa_slab(p, self.rect_size, self.rect_pos, px, 9.0, pa_col(9.0), 0.0, 1.0)
|
|
}
|
|
return pa_slab(p, self.rect_size, self.rect_pos, px, 9.0, pa_col(1.0), 0.0, 0.0)
|
|
}
|
|
|
|
// The rounded view keeps the colour its caller gives it: opaque, it is a
|
|
// panel of that ink outlined in black on its shadow; translucent, it stays a
|
|
// plain tint with no outline.
|
|
mod.widgets.RoundedView.clip_x = false
|
|
mod.widgets.RoundedView.clip_y = false
|
|
mod.widgets.RoundedView.draw_bg.vertex = fn() {
|
|
let m = 6.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.RoundedView.draw_bg.pixel = fn() {
|
|
let m = 6.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
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 c = (lo + hi) * 0.5
|
|
let h = max((hi - lo) * 0.5, vec2(0.5, 0.5))
|
|
let r = min(2.0 * max(1.0, self.border_radius), min(h.x, h.y))
|
|
let d = Material.sd_box(p, c, h, r)
|
|
var fill = self.color
|
|
if self.color_2.x > -0.5 {
|
|
fill = mix(self.color, self.color_2, mix(clamp((p.y - lo.y) / max(hi.y - lo.y, 1.0), 0.0, 1.0), clamp((p.x - lo.x) / max(hi.x - lo.x, 1.0), 0.0, 1.0), self.gradient_fill_horizontal))
|
|
}
|
|
let solid = step(0.98, fill.a)
|
|
let big = step(30.0, min(h.x, h.y) * 2.0)
|
|
let so = max(Finish.snap(2.6, px), px) * solid * big
|
|
let ow = max(Finish.snap(mix(1.3, 2.4, big), px), px) * solid
|
|
let ds = Material.sd_box(p, c + vec2(so, so), h, r) + 1000.0 * step(so, 0.001)
|
|
let sa = Finish.cover(ds, px)
|
|
var res = vec4(pa_ink() * sa, sa)
|
|
let uv = clamp((p - lo) / max(hi - lo, vec2(1.0, 1.0)), vec2(0.0, 0.0), vec2(1.0, 1.0))
|
|
let t = uv.x * 0.42 + uv.y * 0.58
|
|
var col = mix(fill.rgb, pa_deep(fill.rgb), pa_screen(p - lo, 3.0, (0.03 + 0.22 * smoothstep(0.4, 1.05, t)) * solid * big, px))
|
|
var ink = self.border_color
|
|
if self.border_size > 0.01 {
|
|
col = mix(col, ink.rgb, Finish.band(d, 0.0, max(self.border_size, px), px) * ink.a)
|
|
}
|
|
col = mix(pa_ink(), col, mix(1.0, Finish.cover(d + ow, px), solid))
|
|
let a = Finish.cover(d, px)
|
|
res = Finish.over(res * solid, vec4(col * a * fill.a, a * fill.a))
|
|
return res + vec4(ink.rgb * ink.a, ink.a) * Finish.band(d, 0.0, max(self.border_size, px), px) * a * (1.0 - fill.a) * step(0.01, self.border_size)
|
|
}
|
|
|
|
// The card: a yellow panel screened heavier than the page, outlined in
|
|
// black on its shadow; a pressable card lifts toward white under the hand.
|
|
mod.widgets.Card.clip_x = false
|
|
mod.widgets.Card.clip_y = false
|
|
mod.widgets.Card.padding = mod.turtle.Inset{left: 12.0 right: 12.0 top: 12.0 bottom: 12.0}
|
|
mod.widgets.Card.draw_bg.vertex = fn() {
|
|
let m = 8.0
|
|
return self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
|
|
}
|
|
mod.widgets.Card.draw_bg.pixel = fn() {
|
|
let m = 8.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
return pa_slab(p, self.rect_size, self.rect_pos, px, 9.0, vec3(1.0, 0.80, 0.0), self.hover, 0.0)
|
|
}
|
|
|
|
// List rows: 22 points, the words 20 points in. Each row carries a small
|
|
// ink arrowhead at its left; the chosen row is a blue strip outlined in ink
|
|
// (no shadow: the rows stand edge to edge) with its arrowhead filled white.
|
|
mod.widgets.ListItem.height = 22.0
|
|
mod.widgets.ListItemOne.height = 22.0
|
|
mod.widgets.ListItem.padding = mod.turtle.Inset{left: 20.0 right: 8.0 top: 0.0 bottom: 2.0}
|
|
mod.widgets.ListItemOne.padding = mod.turtle.Inset{left: 20.0 right: 8.0 top: 0.0 bottom: 2.0}
|
|
mod.widgets.ListItem.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * self.rect_size
|
|
let live = 1.0 - self.disabled
|
|
let lo = vec2(pa_snap(1.0, o.x, px), pa_snap(1.0, o.y, px))
|
|
let hi = vec2(pa_snap(self.rect_size.x - 2.0, o.x, px), pa_snap(self.rect_size.y - 1.0, o.y, px))
|
|
let c = (lo + hi) * 0.5
|
|
let d = Material.sd_box(p, c, (hi - lo) * 0.5, 4.0)
|
|
let ow = max(Finish.snap(1.3, px), px)
|
|
var res = vec4(1.0, 1.0, 1.0, 1.0) * (0.22 * self.hover + 0.1 * self.down) * live * Finish.cover(d, px) * (1.0 - self.selected)
|
|
let sel = vec4(mix(pa_ink(), pa_col(1.0), Finish.cover(d + ow, px)), 1.0) * Finish.cover(d, px)
|
|
res = mix(res, sel, self.selected)
|
|
let tc = vec2(pa_snap(10.0, o.x, px), (lo.y + hi.y) * 0.5)
|
|
let dt = pa_sd_tri(p, vec2(tc.x - 2.6, tc.y - 3.6), vec2(tc.x - 2.6, tc.y + 3.6), vec2(tc.x + 3.4, tc.y))
|
|
res = Finish.over(res, vec4(pa_ink(), 1.0) * Finish.cover(dt, px))
|
|
res = Finish.over(res, vec4(1.0, 1.0, 1.0, 1.0) * Finish.cover(dt + max(Finish.snap(1.1, px), px), px) * mix(0.0, 1.0, self.selected))
|
|
return res
|
|
}
|
|
mod.widgets.ListItem.draw_text.color = #141414
|
|
mod.widgets.ListItem.draw_text_2.color = #3b3418
|
|
|
|
// The tree's rows stand on the page, clear; the open row is a blue strip
|
|
// outlined in ink.
|
|
mod.widgets.FileTreeNode.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * self.rect_size
|
|
let lo = vec2(1.0, 1.0)
|
|
let hi = self.rect_size - vec2(2.0, 1.0)
|
|
let d = Material.sd_box(p, (lo + hi) * 0.5, (hi - lo) * 0.5, 4.0)
|
|
let ow = max(Finish.snap(1.3, px), px)
|
|
let key = vec4(mix(pa_ink(), pa_col(1.0), Finish.cover(d + ow, px)), 1.0) * Finish.cover(d, px)
|
|
return key * self.active
|
|
}
|
|
mod.widgets.FileTreeNode.draw_text.color_active = #000000
|
|
mod.widgets.FileTreeNode.draw_icon.color_active = #000000
|
|
|
|
// ---------------------------------------------------------------- lettering
|
|
|
|
// WORDS. Dark words are printed plain. A pale word (white on a blue or a red
|
|
// block, a heading's white capitals) is lettered as a comic letterer does
|
|
// it: the letters ringed by a black ink outline a device pixel and a half
|
|
// wide, and, on the page, a solid black shadow of the outlined letters a
|
|
// little down and to the right. A word given the comic's red (a caption over
|
|
// a group) is printed in black with a solid red copy of its letters a point
|
|
// and a quarter down and to the right, a misregistered second ink, nothing
|
|
// round the letters. A block's legend drops with the block when it is
|
|
// pressed, and the chosen segment's and tab's word stays dropped. The glyph
|
|
// quads are grown (aa_pad_px) so the outline and the shadows are never cut
|
|
// at their edge.
|
|
let pa_words = fn() {
|
|
let c = self.get_color()
|
|
let red = step(0.6, c.r) * step(c.g, 0.25) * step(c.b, 0.25)
|
|
let pale = smoothstep(0.42, 0.62, dot(c.rgb, vec3(0.2126, 0.7152, 0.0722))) * (1.0 - red)
|
|
if self.texture_index > 2.5 {
|
|
if self.slug_curve_count() < 0.5 {
|
|
return vec4(0.0, 0.0, 0.0, 0.0)
|
|
}
|
|
let ex = dFdx(self.pos)
|
|
let ey = dFdy(self.pos)
|
|
let sample = self.pos
|
|
let px_x = max(abs(dFdx(self.pos.x)) + abs(dFdy(self.pos.x)), 0.00001)
|
|
let px_y = max(abs(dFdx(self.pos.y)) + abs(dFdy(self.pos.y)), 0.00001)
|
|
let grid = if self.aa_4x4 > 0.5 {4.0} else if self.aa_2x2 > 0.5 {2.0} else {1.0}
|
|
let inv_grid = if self.aa_4x4 > 0.5 {0.25} else if self.aa_2x2 > 0.5 {0.5} else {1.0}
|
|
var alpha_sum = 0.0
|
|
var sample_index = 0.0
|
|
loop {
|
|
if sample_index >= grid * grid { break }
|
|
let row = floor(sample_index * inv_grid)
|
|
let col = sample_index - row * grid
|
|
let offset = (vec2(col, row) + 0.5 - grid * 0.5) * inv_grid * vec2(px_x, px_y)
|
|
alpha_sum = alpha_sum + self.alpha_at(sample + offset, px_x, px_y)
|
|
sample_index = sample_index + 1.0
|
|
}
|
|
let alpha_base = clamp(alpha_sum * inv_grid * inv_grid, 0.0, 1.0)
|
|
let darken = clamp(max(px_x, px_y) * self.stem_darken, 0.0, self.stem_darken_max)
|
|
let edge_weight = clamp(1.0 - abs(alpha_base * 2.0 - 1.0), 0.0, 1.0)
|
|
let alpha = clamp(alpha_base + darken * edge_weight, 0.0, 1.0)
|
|
let fc = mix(c.rgb, vec3(0.067, 0.067, 0.071), red)
|
|
let main = vec4(fc * c.a * alpha, c.a * alpha)
|
|
if red > 0.5 {
|
|
let s = 1.25 * max(self.draw_pass.dpi_factor, 0.5)
|
|
let sh = clamp(self.alpha_at(sample - (ex + ey) * s, px_x, px_y), 0.0, 1.0)
|
|
return Finish.over(vec4(0.910, 0.125, 0.165, 1.0) * sh * c.a, main)
|
|
}
|
|
if pale < 0.01 {
|
|
return main
|
|
}
|
|
let r = 1.5
|
|
let k = r * 0.7071
|
|
var o = alpha
|
|
o = max(o, self.alpha_at(sample + ex * r, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample - ex * r, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample + ey * r, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample - ey * r, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample + (ex + ey) * k, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample - (ex + ey) * k, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample + (ex - ey) * k, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample - (ex - ey) * k, px_x, px_y))
|
|
let s = 2.0
|
|
let sq = sample - (ex + ey) * s
|
|
var sh = self.alpha_at(sq, px_x, px_y)
|
|
sh = max(sh, self.alpha_at(sq + ex * r, px_x, px_y))
|
|
sh = max(sh, self.alpha_at(sq - ex * r, px_x, px_y))
|
|
sh = max(sh, self.alpha_at(sq + ey * r, px_x, px_y))
|
|
sh = max(sh, self.alpha_at(sq - ey * r, px_x, px_y))
|
|
let ink = vec4(0.067, 0.067, 0.071, 1.0)
|
|
let w = c.a * pale
|
|
var res = ink * clamp(sh, 0.0, 1.0) * w
|
|
res = Finish.over(res, ink * clamp(o, 0.0, 1.0) * w)
|
|
return Finish.over(res, main)
|
|
}
|
|
return self.sample_text_pixel()
|
|
}
|
|
|
|
// The same lettering for a block's legend: no shadow of its own (the block
|
|
// carries one), and it drops with the block, `push` device pixels down and
|
|
// to the right.
|
|
let pa_legend = fn() {
|
|
let c = self.get_color()
|
|
let pale = smoothstep(0.42, 0.62, dot(c.rgb, vec3(0.2126, 0.7152, 0.0722)))
|
|
let push = 2.0 * max(self.draw_pass.dpi_factor, 0.5) * step(0.5, self.down)
|
|
if self.texture_index > 2.5 {
|
|
if self.slug_curve_count() < 0.5 {
|
|
return vec4(0.0, 0.0, 0.0, 0.0)
|
|
}
|
|
let ex = dFdx(self.pos)
|
|
let ey = dFdy(self.pos)
|
|
let sample = self.pos - (ex + ey) * push
|
|
let px_x = max(abs(dFdx(self.pos.x)) + abs(dFdy(self.pos.x)), 0.00001)
|
|
let px_y = max(abs(dFdx(self.pos.y)) + abs(dFdy(self.pos.y)), 0.00001)
|
|
let grid = if self.aa_4x4 > 0.5 {4.0} else if self.aa_2x2 > 0.5 {2.0} else {1.0}
|
|
let inv_grid = if self.aa_4x4 > 0.5 {0.25} else if self.aa_2x2 > 0.5 {0.5} else {1.0}
|
|
var alpha_sum = 0.0
|
|
var sample_index = 0.0
|
|
loop {
|
|
if sample_index >= grid * grid { break }
|
|
let row = floor(sample_index * inv_grid)
|
|
let col = sample_index - row * grid
|
|
let offset = (vec2(col, row) + 0.5 - grid * 0.5) * inv_grid * vec2(px_x, px_y)
|
|
alpha_sum = alpha_sum + self.alpha_at(sample + offset, px_x, px_y)
|
|
sample_index = sample_index + 1.0
|
|
}
|
|
let alpha_base = clamp(alpha_sum * inv_grid * inv_grid, 0.0, 1.0)
|
|
let darken = clamp(max(px_x, px_y) * self.stem_darken, 0.0, self.stem_darken_max)
|
|
let edge_weight = clamp(1.0 - abs(alpha_base * 2.0 - 1.0), 0.0, 1.0)
|
|
let alpha = clamp(alpha_base + darken * edge_weight, 0.0, 1.0)
|
|
let main = vec4(c.rgb * c.a * alpha, c.a * alpha)
|
|
if pale < 0.01 {
|
|
return main
|
|
}
|
|
let r = 1.5
|
|
let k = r * 0.7071
|
|
var o = alpha
|
|
o = max(o, self.alpha_at(sample + ex * r, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample - ex * r, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample + ey * r, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample - ey * r, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample + (ex + ey) * k, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample - (ex + ey) * k, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample + (ex - ey) * k, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample - (ex - ey) * k, px_x, px_y))
|
|
let ink = vec4(0.067, 0.067, 0.071, 1.0)
|
|
return Finish.over(ink * clamp(o, 0.0, 1.0) * c.a * pale, main)
|
|
}
|
|
return self.sample_text_pixel()
|
|
}
|
|
|
|
// The word of a chosen segment or tab: plain black, dropped with its block.
|
|
let pa_pushed = fn() {
|
|
let c = self.get_color()
|
|
if self.texture_index > 2.5 {
|
|
if self.slug_curve_count() < 0.5 {
|
|
return vec4(0.0, 0.0, 0.0, 0.0)
|
|
}
|
|
let push = 2.0 * max(self.draw_pass.dpi_factor, 0.5)
|
|
let ex = dFdx(self.pos)
|
|
let ey = dFdy(self.pos)
|
|
let sample = self.pos - (ex + ey) * push
|
|
let px_x = max(abs(dFdx(self.pos.x)) + abs(dFdy(self.pos.x)), 0.00001)
|
|
let px_y = max(abs(dFdx(self.pos.y)) + abs(dFdy(self.pos.y)), 0.00001)
|
|
let grid = if self.aa_4x4 > 0.5 {4.0} else if self.aa_2x2 > 0.5 {2.0} else {1.0}
|
|
let inv_grid = if self.aa_4x4 > 0.5 {0.25} else if self.aa_2x2 > 0.5 {0.5} else {1.0}
|
|
var alpha_sum = 0.0
|
|
var sample_index = 0.0
|
|
loop {
|
|
if sample_index >= grid * grid { break }
|
|
let row = floor(sample_index * inv_grid)
|
|
let col = sample_index - row * grid
|
|
let offset = (vec2(col, row) + 0.5 - grid * 0.5) * inv_grid * vec2(px_x, px_y)
|
|
alpha_sum = alpha_sum + self.alpha_at(sample + offset, px_x, px_y)
|
|
sample_index = sample_index + 1.0
|
|
}
|
|
let alpha_base = clamp(alpha_sum * inv_grid * inv_grid, 0.0, 1.0)
|
|
let darken = clamp(max(px_x, px_y) * self.stem_darken, 0.0, self.stem_darken_max)
|
|
let edge_weight = clamp(1.0 - abs(alpha_base * 2.0 - 1.0), 0.0, 1.0)
|
|
let alpha = clamp(alpha_base + darken * edge_weight, 0.0, 1.0)
|
|
return vec4(c.rgb * c.a * alpha, c.a * alpha)
|
|
}
|
|
return self.sample_text_pixel()
|
|
}
|
|
|
|
// The radio tab's word drops with its tab when the tab is in use.
|
|
let pa_tab_words = fn() {
|
|
let c = self.get_color()
|
|
if self.texture_index > 2.5 {
|
|
if self.slug_curve_count() < 0.5 {
|
|
return vec4(0.0, 0.0, 0.0, 0.0)
|
|
}
|
|
let push = 2.0 * max(self.draw_pass.dpi_factor, 0.5) * step(0.5, max(self.active, self.down))
|
|
let ex = dFdx(self.pos)
|
|
let ey = dFdy(self.pos)
|
|
let sample = self.pos - (ex + ey) * push
|
|
let px_x = max(abs(dFdx(self.pos.x)) + abs(dFdy(self.pos.x)), 0.00001)
|
|
let px_y = max(abs(dFdx(self.pos.y)) + abs(dFdy(self.pos.y)), 0.00001)
|
|
let grid = if self.aa_4x4 > 0.5 {4.0} else if self.aa_2x2 > 0.5 {2.0} else {1.0}
|
|
let inv_grid = if self.aa_4x4 > 0.5 {0.25} else if self.aa_2x2 > 0.5 {0.5} else {1.0}
|
|
var alpha_sum = 0.0
|
|
var sample_index = 0.0
|
|
loop {
|
|
if sample_index >= grid * grid { break }
|
|
let row = floor(sample_index * inv_grid)
|
|
let col = sample_index - row * grid
|
|
let offset = (vec2(col, row) + 0.5 - grid * 0.5) * inv_grid * vec2(px_x, px_y)
|
|
alpha_sum = alpha_sum + self.alpha_at(sample + offset, px_x, px_y)
|
|
sample_index = sample_index + 1.0
|
|
}
|
|
let alpha_base = clamp(alpha_sum * inv_grid * inv_grid, 0.0, 1.0)
|
|
let darken = clamp(max(px_x, px_y) * self.stem_darken, 0.0, self.stem_darken_max)
|
|
let edge_weight = clamp(1.0 - abs(alpha_base * 2.0 - 1.0), 0.0, 1.0)
|
|
let alpha = clamp(alpha_base + darken * edge_weight, 0.0, 1.0)
|
|
return vec4(c.rgb * c.a * alpha, c.a * alpha)
|
|
}
|
|
return self.sample_text_pixel()
|
|
}
|
|
|
|
// HEADINGS are lettered: white capitals ringed in ink on their shadow,
|
|
// whatever ink the heading was given.
|
|
let pa_heading = fn() {
|
|
let c0 = self.get_color()
|
|
let c = vec4(1.0, 1.0, 1.0, c0.a)
|
|
if self.texture_index > 2.5 {
|
|
if self.slug_curve_count() < 0.5 {
|
|
return vec4(0.0, 0.0, 0.0, 0.0)
|
|
}
|
|
let ex = dFdx(self.pos)
|
|
let ey = dFdy(self.pos)
|
|
let sample = self.pos
|
|
let px_x = max(abs(dFdx(self.pos.x)) + abs(dFdy(self.pos.x)), 0.00001)
|
|
let px_y = max(abs(dFdx(self.pos.y)) + abs(dFdy(self.pos.y)), 0.00001)
|
|
let alpha = clamp(self.alpha_at(sample, px_x, px_y), 0.0, 1.0)
|
|
let main = vec4(c.rgb * c.a * alpha, c.a * alpha)
|
|
let r = 1.6
|
|
let k = r * 0.7071
|
|
var o = alpha
|
|
o = max(o, self.alpha_at(sample + ex * r, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample - ex * r, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample + ey * r, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample - ey * r, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample + (ex + ey) * k, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample - (ex + ey) * k, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample + (ex - ey) * k, px_x, px_y))
|
|
o = max(o, self.alpha_at(sample - (ex - ey) * k, px_x, px_y))
|
|
let s = 2.2
|
|
let sq = sample - (ex + ey) * s
|
|
var sh = self.alpha_at(sq, px_x, px_y)
|
|
sh = max(sh, self.alpha_at(sq + ex * r, px_x, px_y))
|
|
sh = max(sh, self.alpha_at(sq - ex * r, px_x, px_y))
|
|
sh = max(sh, self.alpha_at(sq + ey * r, px_x, px_y))
|
|
sh = max(sh, self.alpha_at(sq - ey * r, px_x, px_y))
|
|
let ink = vec4(0.067, 0.067, 0.071, 1.0)
|
|
var res = ink * clamp(sh, 0.0, 1.0) * c.a
|
|
res = Finish.over(res, ink * clamp(o, 0.0, 1.0) * c.a)
|
|
return Finish.over(res, main)
|
|
}
|
|
return self.sample_text_pixel()
|
|
}
|
|
|
|
mod.widgets.Label.draw_text.pixel = pa_words
|
|
mod.widgets.Label.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.H1.draw_text.pixel = pa_heading
|
|
mod.widgets.H2.draw_text.pixel = pa_heading
|
|
mod.widgets.H3.draw_text.pixel = pa_heading
|
|
mod.widgets.H4.draw_text.pixel = pa_heading
|
|
mod.widgets.H5.draw_text.pixel = pa_heading
|
|
mod.widgets.H6.draw_text.pixel = pa_heading
|
|
mod.widgets.H1.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.H2.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.H3.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.H4.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.H5.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.H6.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.ButtonFlat.draw_text.pixel = pa_legend
|
|
mod.widgets.Button.draw_text.pixel = pa_legend
|
|
mod.widgets.ButtonPrimary.draw_text.pixel = pa_legend
|
|
mod.widgets.ButtonSecondary.draw_text.pixel = pa_legend
|
|
mod.widgets.ButtonTertiary.draw_text.pixel = pa_legend
|
|
mod.widgets.ButtonDanger.draw_text.pixel = pa_legend
|
|
mod.widgets.ButtonOutline.draw_text.pixel = pa_legend
|
|
mod.widgets.ButtonFlatter.draw_text.pixel = pa_legend
|
|
mod.widgets.ButtonXs.draw_text.pixel = pa_legend
|
|
mod.widgets.ButtonSm.draw_text.pixel = pa_legend
|
|
mod.widgets.ButtonLg.draw_text.pixel = pa_legend
|
|
mod.widgets.ButtonXl.draw_text.pixel = pa_legend
|
|
mod.widgets.ButtonFlat.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.Button.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.ButtonPrimary.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.ButtonSecondary.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.ButtonTertiary.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.ButtonDanger.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.ButtonOutline.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.ButtonFlatter.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.ButtonXs.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.ButtonSm.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.ButtonLg.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.ButtonXl.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.ButtonFlat.draw_description.pixel = pa_words
|
|
mod.widgets.ButtonFlat.draw_description.aa_pad_px = uniform(5.0)
|
|
mod.widgets.ButtonCompound.draw_description.pixel = pa_words
|
|
mod.widgets.ButtonCompound.draw_description.aa_pad_px = uniform(5.0)
|
|
mod.widgets.DropDownFlat.draw_text.pixel = pa_legend
|
|
mod.widgets.DropDownFlat.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.RadioButtonTabFlat.draw_text.pixel = pa_tab_words
|
|
mod.widgets.RadioButtonTabFlat.draw_text.aa_pad_px = uniform(5.0)
|
|
mod.widgets.SegmentedControlFlat.draw_text_selected.pixel = pa_pushed
|
|
mod.widgets.SegmentedControlFlat.draw_text_selected.aa_pad_px = uniform(5.0)
|
|
mod.widgets.Tabs.draw_text_active.pixel = pa_pushed
|
|
mod.widgets.Tabs.draw_text_active.aa_pad_px = uniform(5.0)
|
|
|
|
// The words beside the controls -- a check box's, a toggle's, a radio's, a
|
|
// slider's name and value, a knob's -- are set in the slanted bold hand.
|
|
mod.widgets.CheckBoxFlat.draw_text.text_style = mod.theme.font_label{font_size: 8.5}
|
|
mod.widgets.ToggleFlat.draw_text.text_style = mod.theme.font_label{font_size: 8.5}
|
|
mod.widgets.RadioButtonFlat.draw_text.text_style = mod.theme.font_label{font_size: 8.5}
|
|
mod.widgets.SliderFlat.draw_text.text_style = mod.theme.font_label{font_size: 8.5}
|
|
mod.widgets.SliderMinimal.draw_text.text_style = mod.theme.font_label{font_size: 8.5}
|
|
mod.widgets.SliderRoundFlat.draw_text.text_style = mod.theme.font_label{font_size: 8.5}
|
|
mod.widgets.RangeSliderFlat.draw_text.text_style = mod.theme.font_label{font_size: 8.5}
|
|
mod.widgets.SliderFlat.text_input.draw_text.text_style = mod.theme.font_label{font_size: 8.5}
|
|
mod.widgets.SliderMinimal.text_input.draw_text.text_style = mod.theme.font_label{font_size: 8.5}
|
|
mod.widgets.SliderRoundFlat.text_input.draw_text.text_style = mod.theme.font_label{font_size: 8.5}
|
|
mod.widgets.RotaryKnob.draw_text.text_style = mod.theme.font_label{font_size: 8.5}
|
|
mod.widgets.RotaryFlat.draw_text.text_style = mod.theme.font_label{font_size: 8.5}
|
|
mod.widgets.RotaryFlat.text_input.draw_text.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
mod.widgets.SliderFlat.text_input.draw_text.color = #141414
|
|
mod.widgets.SliderMinimal.text_input.draw_text.color = #141414
|
|
mod.widgets.SliderRoundFlat.text_input.draw_text.color = #141414
|
|
mod.widgets.RotaryFlat.text_input.draw_text.color = #111111
|
|
mod.widgets.RotaryFlat.text_input.draw_text.color_hover = uniform(#000000)
|
|
mod.widgets.RotaryFlat.text_input.draw_text.color_focus = uniform(#000000)
|
|
mod.widgets.RotaryFlat.text_input.draw_text.color_drag = uniform(#000000)
|
|
mod.widgets.RotaryFlat.text_input.draw_text.color_empty = uniform(#2a2a2a)
|
|
mod.widgets.RotaryFlat.text_input.draw_text.color_empty_hover = uniform(#1a1a1a)
|
|
mod.widgets.RotaryFlat.text_input.draw_text.color_empty_focus = uniform(#000000)
|
|
mod.widgets.RotaryFlat.text_input.draw_text.color_disabled = uniform(#3a3a3a)
|
|
mod.widgets.Rotary.text_input.draw_text.color = #111111
|
|
mod.widgets.Rotary.text_input.draw_text.color_hover = uniform(#000000)
|
|
mod.widgets.Rotary.text_input.draw_text.color_focus = uniform(#000000)
|
|
mod.widgets.Rotary.text_input.draw_text.color_drag = uniform(#000000)
|
|
mod.widgets.Rotary.text_input.draw_text.color_empty = uniform(#2a2a2a)
|
|
mod.widgets.Rotary.text_input.draw_text.color_empty_hover = uniform(#1a1a1a)
|
|
mod.widgets.Rotary.text_input.draw_text.color_empty_focus = uniform(#000000)
|
|
mod.widgets.Rotary.text_input.draw_text.color_disabled = uniform(#3a3a3a)
|
|
mod.widgets.Rotary.text_input.draw_text.text_style = mod.theme.font_bold{font_size: 10.0}
|
|
// The value a slider or a rotary shows is held selected for typing over;
|
|
// unfocused, the selection is not shown.
|
|
mod.widgets.RotaryFlat.text_input.draw_selection.color = uniform(#00000000)
|
|
mod.widgets.RotaryFlat.text_input.draw_selection.color_hover = uniform(#00000000)
|
|
mod.widgets.RotaryFlat.text_input.draw_selection.color_focus = uniform(#ffffff73)
|
|
mod.widgets.Rotary.text_input.draw_selection.color = uniform(#00000000)
|
|
mod.widgets.Rotary.text_input.draw_selection.color_hover = uniform(#00000000)
|
|
mod.widgets.Rotary.text_input.draw_selection.color_focus = uniform(#ffffff73)
|
|
mod.widgets.SliderFlat.text_input.draw_selection.color = uniform(#00000000)
|
|
mod.widgets.SliderFlat.text_input.draw_selection.color_hover = uniform(#00000000)
|
|
mod.widgets.SliderFlat.text_input.draw_selection.color_focus = uniform(#ffffff73)
|
|
mod.widgets.Slider.text_input.draw_selection.color = uniform(#00000000)
|
|
mod.widgets.Slider.text_input.draw_selection.color_hover = uniform(#00000000)
|
|
mod.widgets.Slider.text_input.draw_selection.color_focus = uniform(#ffffff73)
|
|
mod.widgets.SliderMinimal.text_input.draw_selection.color = uniform(#00000000)
|
|
mod.widgets.SliderMinimal.text_input.draw_selection.color_hover = uniform(#00000000)
|
|
mod.widgets.SliderMinimal.text_input.draw_selection.color_focus = uniform(#ffffff73)
|
|
mod.widgets.SliderRoundFlat.text_input.draw_selection.color = uniform(#00000000)
|
|
mod.widgets.SliderRoundFlat.text_input.draw_selection.color_hover = uniform(#00000000)
|
|
mod.widgets.SliderRoundFlat.text_input.draw_selection.color_focus = uniform(#ffffff73)
|
|
mod.widgets.SliderRound.text_input.draw_selection.color = uniform(#00000000)
|
|
mod.widgets.SliderRound.text_input.draw_selection.color_hover = uniform(#00000000)
|
|
mod.widgets.SliderRound.text_input.draw_selection.color_focus = uniform(#ffffff73)
|
|
|
|
// ---------------------------------------------------------------- field row
|
|
|
|
// A ROW OF FIELDS IS ONE HEIGHT. Left to themselves the library's fields each
|
|
// come out at a size of their own, so the box metrics are stated ONCE here
|
|
// and handed to each field below; a field added to the library later joins
|
|
// the row by being named here.
|
|
let field_height = 24.0
|
|
let field_pad_v = 3.0
|
|
let field_radius = 2.5
|
|
let field_border = 0.67
|
|
|
|
// The room a Fit field takes: a minimum height, and the padding with it.
|
|
let field_room = fn(w) {
|
|
w.min_height = field_height
|
|
w.padding.top = field_pad_v
|
|
w.padding.bottom = field_pad_v + 1.0
|
|
}
|
|
// The box a field draws, given the draw object.
|
|
let field_face = fn(d) {
|
|
d.border_radius = field_radius
|
|
d.border_size = field_border
|
|
}
|
|
// A field that states a frame and lays its own parts out inside it: the
|
|
// height is all these take.
|
|
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.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
|
|
// The drop-down stands in the field row: the text box's padding, so the
|
|
// two are one height (sheet_checks::field_row).
|
|
mod.widgets.DropDown.padding.top = 3.0
|
|
mod.widgets.DropDown.padding.bottom = 4.0
|
|
|
|
// ---------------------------------------------------------------- rules
|
|
|
|
// A rule is a line of black ink.
|
|
mod.widgets.Hr.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * self.rect_size
|
|
let lw = max(Finish.snap(1.4, px), px)
|
|
let y0 = pa_snap(self.rect_size.y * 0.5 - lw * 0.5, self.rect_pos.y, px)
|
|
return vec4(pa_ink(), 1.0) * step(y0, p.y) * step(p.y, y0 + lw)
|
|
}
|
|
mod.widgets.Vr.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * self.rect_size
|
|
let lw = max(Finish.snap(1.4, px), px)
|
|
let x0 = pa_snap(self.rect_size.x * 0.5 - lw * 0.5, self.rect_pos.x, px)
|
|
return vec4(pa_ink(), 1.0) * step(x0, p.x) * step(p.x, x0 + lw)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- ground
|
|
|
|
// Plain views stop clipping so a shadow can fall past their edge; scroll
|
|
// views keep clipping their content.
|
|
mod.widgets.View.clip_x = false
|
|
mod.widgets.View.clip_y = false
|
|
mod.widgets.Window.pass.clear_color = #fdd503
|
|
|
|
// A splitter is the gutter between two comic panels: a strip of the
|
|
// frame's blue sky under its dot screen, inked along both sides and rounded
|
|
// off at its ends, so the panes either side read as panels of one page.
|
|
// Under the hand or held, a grip of white paper outlined in ink stands in
|
|
// its middle.
|
|
mod.widgets.Splitter.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let p = self.pos * self.rect_size
|
|
let w = p + self.rect_pos
|
|
let v = self.is_vertical
|
|
let across = mix(p.y, p.x, v)
|
|
let along = mix(p.x, p.y, v)
|
|
let wide = mix(self.rect_size.y, self.rect_size.x, v)
|
|
let long = mix(self.rect_size.x, self.rect_size.y, v)
|
|
let r = wide * 0.5
|
|
let q = vec2(along - long * 0.5, across - r)
|
|
let d = Material.sd_box(q, vec2(0.0, 0.0), vec2(long * 0.5, r), r)
|
|
let lw = max(Finish.snap(1.3, px), px)
|
|
let act = clamp(max(max(self.hover, self.drag), self.focus), 0.0, 1.0)
|
|
var sky = mix(pa_col(1.0), vec3(0.02, 0.32, 0.68), pa_screen(w, 3.6, 0.30, px))
|
|
sky = sky + (vec3(1.0, 1.0, 1.0) - sky) * 0.15 * act
|
|
let col = mix(pa_ink(), sky, Finish.cover(d + lw, px))
|
|
var res = vec4(col, 1.0) * Finish.cover(d, px)
|
|
let gq = vec2(along - long * 0.5, across - r)
|
|
let gh = vec2(min(self.bar_size, long) * 0.25, max(r - lw - 0.2, 0.8))
|
|
let dg = Material.sd_box(gq, vec2(0.0, 0.0), gh, gh.y)
|
|
let grip = vec4(mix(pa_ink(), pa_col(3.0), Finish.cover(dg + max(Finish.snap(0.8, px), px), px)), 1.0) * Finish.cover(dg, px)
|
|
return Finish.over(res, grip * act)
|
|
}
|
|
|
|
// The page: yellow newsprint under a light dot screen, its dots a deeper
|
|
// orange-yellow, growing slowly toward the window's edges and drifting a
|
|
// little over the page, so it is never one flat field and never busy under
|
|
// words. Screened in window points: it does not move with a scroll.
|
|
let pa_page = fn(w: vec2, sz: vec2, px: float) -> vec3 {
|
|
let e = min(min(w.x, sz.x - w.x), min(w.y, sz.y - w.y))
|
|
let edge = 1.0 - smoothstep(0.0, 240.0, e)
|
|
let drift = Finish.noise(w * 0.0035 + vec2(3.1, 7.7))
|
|
let cov = 0.07 + 0.09 * drift * drift + 0.14 * edge * edge
|
|
return mix(pa_col(0.0), vec3(0.95, 0.64, 0.0), pa_screen(w, 4.6, cov, px))
|
|
}
|
|
|
|
// A burst: a jagged star round `c`, `n` spikes reaching from `r0` toward
|
|
// `r1`, each a length of its own. Its distance in points.
|
|
let pa_burst_d = fn(w: vec2, c: vec2, r0: float, r1: float, n: float, seed: float, px: float) -> float {
|
|
let q = w - c
|
|
let ang = atan2(q.y, q.x) + PI + seed
|
|
let f = ang / (2.0 * PI) * n
|
|
let k = floor(f)
|
|
let fr = f - k
|
|
let tri = 1.0 - abs(fr * 2.0 - 1.0)
|
|
let kk = k - n * floor(k / n)
|
|
let len = 0.5 + 0.5 * Finish.hash(vec2(kk * 1.7, seed * 13.0 + 2.0))
|
|
let rr = r0 + (r1 - r0) * len * pow(tri, 1.4)
|
|
let dd = length(q) - rr
|
|
let g = max(length(vec2(dFdx(dd), dFdy(dd))) / px, 0.25)
|
|
return dd / g
|
|
}
|
|
// The burst printed over `col`: `fill` screened toward its tips, an ink
|
|
// outline, at strength `amt`.
|
|
let pa_burst = fn(col: vec3, w: vec2, c: vec2, r0: float, r1: float, n: float, seed: float, fill: vec3, px: float, amt: float) -> vec3 {
|
|
let d = pa_burst_d(w, c, r0, r1, n, seed, px)
|
|
var f = mix(fill, pa_deep(fill), pa_screen(w - c, 2.6, 0.32 * smoothstep(r0, r1, length(w - c)), px))
|
|
f = mix(pa_ink(), f, Finish.cover(d + 1.3, px))
|
|
return mix(col, f, Finish.cover(d, px) * amt)
|
|
}
|
|
|
|
// THE FRAME. Round the page runs a thick black ink line, and outside it the
|
|
// comic's noise: a blue sky under a coarse dot screen all round, and along
|
|
// the top, in the caption band, speed lines, a pair of bursts, a racing
|
|
// stripe and a chequered flag in the corner -- kept off the middle, where
|
|
// the window's title stands, and off the window's buttons.
|
|
let pa_masthead = fn(w: vec2, sz: vec2, px: float) -> vec3 {
|
|
let W = sz.x
|
|
var col = mix(pa_col(1.0), vec3(0.02, 0.32, 0.68), pa_screen(w, 3.6, 0.30, px))
|
|
if w.y > 34.0 {
|
|
return col
|
|
}
|
|
let tx = abs(w.x - W * 0.5)
|
|
let quiet = max(1.0 - smoothstep(80.0, 100.0, tx), smoothstep(W - 168.0, W - 146.0, w.x))
|
|
let busy = 1.0 - quiet
|
|
// Speed lines: white streaks thinning to nothing, one row in two.
|
|
let row = floor(w.y / 3.4)
|
|
let x0 = Finish.hash(vec2(row, 3.0)) * W
|
|
let len = 60.0 + 180.0 * Finish.hash(vec2(row, 11.0))
|
|
let along = (w.x - x0) / len
|
|
let thick = 0.8 * clamp(1.0 - along, 0.0, 1.0) * step(0.0, along)
|
|
let sl = Finish.cover(abs(w.y - (row + 0.5) * 3.4) - thick, px) * step(0.5, Finish.hash(vec2(row, 7.0)))
|
|
col = mix(col, vec3(1.0, 1.0, 1.0), sl * busy * 0.9)
|
|
// A racing stripe leaning across the band: a red band between white
|
|
// pinstripes, inked at its edges.
|
|
let s = w.x + w.y * 0.6 - (W - 260.0)
|
|
let red = Finish.cover(abs(s) - 8.0, px)
|
|
let wh = Finish.cover(abs(abs(s) - 12.6) - 2.6, px)
|
|
let edges = Finish.cover(abs(abs(s) - 8.6) - 0.6, px) + Finish.cover(abs(abs(s) - 15.8) - 0.6, px)
|
|
col = mix(col, vec3(0.97, 0.96, 0.93), wh * busy)
|
|
col = mix(col, pa_col(2.0), red * busy)
|
|
col = mix(col, pa_ink(), clamp(edges, 0.0, 1.0) * busy)
|
|
let s2 = w.x + w.y * 0.6 - (W * 0.5 - 200.0)
|
|
col = mix(col, vec3(0.97, 0.96, 0.93), Finish.cover(abs(s2) - 3.2, px) * busy)
|
|
col = mix(col, pa_ink(), Finish.cover(abs(abs(s2) - 3.8) - 0.6, px) * busy)
|
|
// Lightning slashes: long thin wedges of yellow and red leaning across
|
|
// the band, inked.
|
|
var si = 0.0
|
|
loop {
|
|
if si > 5.5 { break }
|
|
let sx = W * (0.05 + 0.155 * si) + 37.0 * Finish.hash(vec2(si, 4.0))
|
|
let base = vec2(sx, 31.0)
|
|
let tip = vec2(sx + 46.0 + 20.0 * Finish.hash(vec2(si, 9.0)), -2.0)
|
|
let side = vec2(sx + 9.0 + 4.0 * Finish.hash(vec2(si, 2.0)), 31.0)
|
|
let dsl = pa_sd_tri(w, base, side, tip)
|
|
let sc = mix(pa_col(0.0), pa_col(2.0), step(0.5, fract(si * 0.5)))
|
|
let sf = mix(pa_ink(), sc, Finish.cover(dsl + 1.1, px))
|
|
col = mix(col, sf, Finish.cover(dsl, px) * busy)
|
|
si = si + 1.0
|
|
}
|
|
// The bursts.
|
|
col = pa_burst(col, w, vec2(150.0, 15.0), 13.0, 34.0, 11.0, 0.3, pa_col(2.0), px, busy)
|
|
col = pa_burst(col, w, vec2(150.0, 15.0), 6.5, 17.0, 9.0, 1.1, pa_col(0.0), px, busy)
|
|
col = pa_burst(col, w, vec2(W * 0.5 + 175.0, 14.0), 10.0, 27.0, 10.0, 2.0, pa_col(0.0), px, busy)
|
|
col = pa_burst(col, w, vec2(W * 0.5 + 175.0, 14.0), 4.5, 12.0, 7.0, 0.6, pa_col(2.0), px, busy)
|
|
// The chequered flag, waving, in the top left corner.
|
|
let fu = vec2(w.x, w.y + 2.2 * sin(w.x * 0.16 + 0.5))
|
|
let cs = 6.0
|
|
let qx = (abs(fract(fu.x / (2.0 * cs)) - 0.5) * 2.0 * cs) - cs * 0.5
|
|
let qy = (abs(fract(fu.y / (2.0 * cs)) - 0.5) * 2.0 * cs) - cs * 0.5
|
|
let cx = clamp(qx / px + 0.5, 0.0, 1.0)
|
|
let cy = clamp(qy / px + 0.5, 0.0, 1.0)
|
|
let chk = cx * cy + (1.0 - cx) * (1.0 - cy)
|
|
var fc = mix(vec3(0.97, 0.96, 0.93), pa_ink(), chk)
|
|
fc = mix(fc, vec3(0.62, 0.60, 0.56), pa_screen(w, 2.4, 0.16, px) * (1.0 - chk))
|
|
let fx = 62.0 + 3.0 * sin(w.y * 0.33)
|
|
col = mix(col, fc, Finish.cover(w.x - fx, px))
|
|
col = mix(col, pa_ink(), Finish.cover(abs(w.x - fx) - 0.9, px))
|
|
return col
|
|
}
|
|
|
|
mod.widgets.Window.show_bg = true
|
|
mod.widgets.Window.draw_bg.pixel = fn() {
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let sz = self.rect_size
|
|
let w = self.pos * sz + self.rect_pos
|
|
let lo = vec2(4.0, 31.0)
|
|
let hi = sz - vec2(4.0, 4.0)
|
|
let dp = Material.sd_box(w, (lo + hi) * 0.5, (hi - lo) * 0.5, 8.0)
|
|
var col = pa_page(w, sz, px)
|
|
let iw = max(Finish.snap(2.0, px), px)
|
|
col = mix(col, pa_masthead(w, sz, px), 1.0 - Finish.cover(dp - iw, px))
|
|
col = mix(col, pa_ink(), Finish.ring_out(dp, 0.0, iw, px))
|
|
// The window's own edge: a hairline of ink.
|
|
let de = Material.sd_box(w, sz * 0.5, sz * 0.5, 0.0)
|
|
col = mix(col, pa_ink(), Finish.band(de, 0.0, px, px))
|
|
return vec4(col, 1.0)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- screens
|
|
|
|
// A SCREEN: night-blue glass in a thick ink outline on its solid shadow,
|
|
// the readouts' and the meter's one housing; two short white strokes of a
|
|
// comic shine across its upper right corner. Its figures are the screen
|
|
// ink, yellow.
|
|
let pa_glass = fn(p: vec2, lo: vec2, hi: vec2, px: float, fill: vec3) -> vec4 {
|
|
let c = (lo + hi) * 0.5
|
|
let h = (hi - lo) * 0.5
|
|
let r = 6.0
|
|
let ow = max(Finish.snap(2.0, px), px)
|
|
let so = max(Finish.snap(2.6, px), px)
|
|
let d = Material.sd_box(p, c, h, r)
|
|
let sa = Finish.cover(Material.sd_box(p, c + vec2(so, so), h, r), px)
|
|
var res = vec4(pa_ink() * sa, sa)
|
|
let t = clamp((p.y - lo.y) / max(hi.y - lo.y, 1.0), 0.0, 1.0)
|
|
var col = mix(fill, fill * 0.6, pa_screen(p - lo, 2.6, 0.18 * smoothstep(0.35, 1.0, t), px))
|
|
col = mix(pa_ink(), col, Finish.cover(d + ow, px))
|
|
let a = Finish.cover(d, px)
|
|
return Finish.over(res, vec4(col * a, a))
|
|
}
|
|
mod.widgets.ScreenView.clip_x = false
|
|
mod.widgets.ScreenView.clip_y = false
|
|
mod.widgets.ScreenView.padding = mod.turtle.Inset{top: 9.0 right: 11.0 bottom: 9.0 left: 11.0}
|
|
mod.widgets.ScreenView.draw_bg.vertex = fn() {
|
|
let m = 6.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.ScreenView.draw_bg.pixel = fn() {
|
|
let m = 6.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(pa_snap(0.0, o.x, px), pa_snap(0.0, o.y, px))
|
|
let hi = vec2(pa_snap(self.rect_size.x, o.x, px), pa_snap(self.rect_size.y, o.y, px))
|
|
var fill = self.color.rgb
|
|
if self.scan > 0.0 {
|
|
fill = fill * mix(1.0, Finish.scan(p.y, px, 3.0 * px, self.scan), 0.6)
|
|
}
|
|
return pa_glass(p, lo, hi, px, fill) * self.color.a
|
|
}
|
|
mod.widgets.ScreenView.sheen = 0.9
|
|
// The shine: two short white strokes leaning across the upper right corner.
|
|
let pa_shine = fn(p: vec2, lo: vec2, hi: vec2, px: float, amt: float) -> vec4 {
|
|
let k = vec2(hi.x - 9.0, lo.y + 4.6)
|
|
let a1 = pa_seg(p, k + vec2(-2.4, 2.4), k + vec2(2.4, -2.4)) - 0.75
|
|
let a2 = pa_seg(p, k + vec2(1.4, 3.9), k + vec2(4.2, 1.1)) - 0.6
|
|
let a = Finish.cover(min(a1, a2), px) * amt
|
|
return vec4(a, a, a, a)
|
|
}
|
|
mod.widgets.ScreenView.draw_glass.pixel = fn() {
|
|
let p = self.pos * self.rect_size
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
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)) - self.rect_pos
|
|
return pa_shine(p, lo, hi, px, clamp(self.sheen, 0.0, 1.0))
|
|
}
|
|
|
|
// THE NEEDLE METER is a screen: the same outline and night-blue glass, its
|
|
// scale printed on the glass in the screen's yellow, the red zone a red band
|
|
// along the arc, the needle red outlined in ink, its root under a yellow
|
|
// disc outlined in ink.
|
|
mod.widgets.NeedleMeter.clip_x = false
|
|
mod.widgets.NeedleMeter.clip_y = false
|
|
mod.widgets.NeedleMeter.draw_bg.color_zone = uniform(#xff4b3e)
|
|
mod.widgets.NeedleMeter.draw_bg.color_needle = uniform(#xff4b3e)
|
|
mod.widgets.NeedleMeter.draw_bg.vertex = fn() {
|
|
let m = 6.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.NeedleMeter.draw_bg.pixel = fn() {
|
|
let m = 6.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let lo = vec2(pa_snap(0.0, o.x, px), pa_snap(0.0, o.y, px))
|
|
let hi = vec2(pa_snap(self.rect_size.x, o.x, px), pa_snap(self.rect_size.y, o.y, px))
|
|
var res = pa_glass(p, lo, hi, px, vec3(0.055, 0.106, 0.180))
|
|
let pv = self.pivot()
|
|
let rr = self.scale_radius()
|
|
let q = p - pv
|
|
let r = 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 ink = vec3(1.0, 0.824, 0.102)
|
|
let inside = Finish.cover(Material.sd_box(p, (lo + hi) * 0.5, (hi - lo) * 0.5 - vec2(2.0, 2.0), 4.0), px)
|
|
let arc = Finish.cover(abs(r - rr) - px * 0.85, px) * on_scale
|
|
let nn = 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) * nn + 0.5)
|
|
let ak = (k / nn - 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 - r, r - rr)
|
|
let tick = Finish.cover(perp - px * mix(0.7, 1.2, major), px) * Finish.cover(radial, px) * step(0.0, 0.0 - q.y * cos(ak) + q.x * sin(ak))
|
|
res = Finish.over(res, vec4(ink, 1.0) * max(arc, tick) * inside)
|
|
if self.zone < 0.999 {
|
|
let zone_t = Finish.cover((self.zone - t) * sweep * r, px) * Finish.cover((t - 1.0) * sweep * r, px)
|
|
let zone_r = Finish.cover(max(rr + px - r, r - rr - 3.0), px)
|
|
res = Finish.over(res, vec4(self.color_zone.rgb, 1.0) * zone_t * zone_r * inside)
|
|
}
|
|
// The needle: red, inked along both sides.
|
|
let na = self.needle_angle(self.value)
|
|
let nd = vec2(sin(na), 0.0 - cos(na))
|
|
let along = dot(q, nd)
|
|
let across = abs(q.x * nd.y - q.y * nd.x)
|
|
let nl = Finish.cover(along - (rr + 3.0), px) * Finish.cover(0.0 - along, px) * inside
|
|
res = Finish.over(res, vec4(pa_ink(), 1.0) * Finish.cover(across - 1.7, px) * nl)
|
|
res = Finish.over(res, vec4(self.color_needle.rgb, 1.0) * Finish.cover(across - 0.8, px) * nl)
|
|
// The pivot: a yellow disc outlined in ink.
|
|
res = Finish.over(res, pa_disc(p, pv, max(self.pivot_size, 3.2), px, pa_col(0.0), 0.0, 0.0, 0.0, 0.0, 0.0) * inside)
|
|
res = Finish.over(res, pa_shine(p, lo, hi, px, 0.9))
|
|
return res * self.color.a * self.opacity
|
|
}
|
|
|
|
// ---------------------------------------------------------------- switches
|
|
|
|
// THE SWITCHES are the toggle in their own inks: the rocker prints red when
|
|
// it is on, its key square; the slide switch prints green, its key round.
|
|
mod.widgets.ToggleRocker.draw_bg.size = uniform(18.0)
|
|
mod.widgets.ToggleSlide.draw_bg.size = uniform(18.0)
|
|
mod.widgets.ToggleRocker.draw_bg.pill_aspect = uniform(1.89)
|
|
mod.widgets.ToggleSlide.draw_bg.pill_aspect = uniform(1.89)
|
|
mod.widgets.ToggleRocker.label_walk.margin.left = 34.0
|
|
mod.widgets.ToggleSlide.label_walk.margin.left = 34.0
|
|
mod.widgets.ToggleRocker.draw_bg.pixel = fn() {
|
|
let m = 5.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let tw = self.size * self.pill_aspect
|
|
let th = self.size
|
|
let x0 = (self.rect_size.x - tw) * self.mark_at_end
|
|
let y0 = self.rect_size.y * 0.5 - th * 0.5
|
|
let lo = vec2(pa_snap(x0, o.x, px), pa_snap(y0, o.y, px))
|
|
let hi = vec2(pa_snap(x0 + tw, o.x, px), pa_snap(y0 + th, o.y, px))
|
|
let kt = mix(self.active, self.drag_pos, self.drag)
|
|
return pa_toggle(p, lo, hi, o, px, kt, self.active, self.hover, max(self.pressed, self.down), self.disabled, self.focus, pa_col(2.0), 0.0)
|
|
}
|
|
mod.widgets.ToggleSlide.draw_bg.pixel = fn() {
|
|
let m = 5.0
|
|
let px = pa_px(self.draw_pass.dpi_factor)
|
|
let o = self.rect_pos
|
|
let p = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
|
|
let tw = self.size * self.pill_aspect
|
|
let th = self.size
|
|
let x0 = (self.rect_size.x - tw) * self.mark_at_end
|
|
let y0 = self.rect_size.y * 0.5 - th * 0.5
|
|
let lo = vec2(pa_snap(x0, o.x, px), pa_snap(y0, o.y, px))
|
|
let hi = vec2(pa_snap(x0 + tw, o.x, px), pa_snap(y0 + th, o.y, px))
|
|
let kt = mix(self.active, self.drag_pos, self.drag)
|
|
return pa_toggle(p, lo, hi, o, px, kt, self.active, self.hover, max(self.pressed, self.down), self.disabled, self.focus, pa_col(4.0), 1.0)
|
|
}
|
|
|
|
// ---------------------------------------------------------------- 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.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.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.RadioButtonTabFlat.animator.hover.down.from = {all: Snap}
|
|
mod.widgets.RadioButtonTabFlat.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.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.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}}
|
|
true
|