Makepad Code (editor layout, selection, sidebar, early yield), the EN/ZH Translator with voice, Weather with a generated offline forecast, Amp playing its offline library, and fixes across the other apps and examples. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
211 lines
11 KiB
Text
211 lines
11 KiB
Text
// Orbital Lab — a 2001 / Moon station console: matte white moulded panels
|
|
// with soft seams and generous radii, flush keys whose edges glow through a
|
|
// light pipe, a black glass screen set deep into the white, and a single
|
|
// red-orange status light. Clinical, bright, calm.
|
|
//
|
|
// Assignments only, over the base templates in `src/hw.rs`
|
|
// (see local/agent_state/skeuomorph/music/STYLE_GUIDE.md).
|
|
use mod.prelude.widgets_internal.*
|
|
|
|
// ---- palette: black glass lists, the status red ----
|
|
mod.widgets.hw_palette.screen_bg = #x07080a
|
|
mod.widgets.hw_palette.screen_text = #xe9ecef
|
|
mod.widgets.hw_palette.screen_muted = #x8a929c
|
|
mod.widgets.hw_palette.accent = #xff4a22
|
|
|
|
// ---- the front: matte white moulding, soft panel seams ----
|
|
mod.widgets.HwChassis.draw_bg.ground = #xe9eae7
|
|
mod.widgets.HwChassis.draw_bg.light_ink = vec4(1.0, 1.0, 1.0, 1.0)
|
|
mod.widgets.HwChassis.draw_bg.shadow_ink = vec4(0.42, 0.44, 0.46, 1.0)
|
|
mod.widgets.HwChassis.draw_bg.pattern = vec4(6.0, 24.0, 0.0, 0.0)
|
|
mod.widgets.HwChassis.draw_bg.pattern_ink = vec4(0.70, 0.72, 0.72, 0.55)
|
|
mod.widgets.HwChassis.draw_bg.pattern_seam = vec4(680.0, 452.0, 0.8, 0.0)
|
|
mod.widgets.HwChassis.draw_bg.glow_ink = vec4(1.0, 0.30, 0.13, 1.0)
|
|
mod.widgets.HwChassis.draw_bg.spill = vec2(2.4, 0.6)
|
|
mod.widgets.Window.pass.clear_color = #xe9eae7
|
|
|
|
// Raised plates: whiter mouldings, big radii, a wide soft bevel.
|
|
mod.widgets.HwPlate.radius = 22
|
|
mod.widgets.HwPlate.depth = 2.5
|
|
mod.widgets.HwPlate.draw_bg.ground = #xefefec
|
|
mod.widgets.HwPlate.draw_bg.light_ink = vec4(1.0, 1.0, 1.0, 1.0)
|
|
mod.widgets.HwPlate.draw_bg.shadow_ink = vec4(0.52, 0.54, 0.56, 1.0)
|
|
mod.widgets.HwPlate.draw_bg.pattern = vec4(0.0, 1.0, 0.0, 0.0)
|
|
mod.widgets.HwPlate.draw_bg.sheen = vec4(0.03, 0.45, 0.30, 0.3)
|
|
mod.widgets.HwPlate.draw_bg.relief = vec4(7.0, 0.15, 2.5, 0.12)
|
|
mod.widgets.HwPlate.draw_bg.finish = vec4(0.45, 0.35, 0.18, 0.5)
|
|
mod.widgets.HwPlate.draw_bg.shadow = vec4(0.30, 18.0, 1.0, 0.22)
|
|
mod.widgets.HwPlate.draw_bg.glow_ink = vec4(1.0, 0.30, 0.13, 1.0)
|
|
mod.widgets.HwPlate.draw_bg.spill = vec2(2.6, 0.5)
|
|
|
|
// Recessed panels: black glass wells set into the white, like the
|
|
// screen; the lists float in them.
|
|
mod.widgets.HwPanel.radius = 18
|
|
mod.widgets.HwPanel.draw_bg.ground = #x111214
|
|
mod.widgets.HwPanel.draw_bg.light_ink = vec4(0.80, 0.86, 0.94, 1.0)
|
|
mod.widgets.HwPanel.draw_bg.shadow_ink = vec4(0.0, 0.0, 0.0, 1.0)
|
|
mod.widgets.HwPanel.draw_bg.pattern = vec4(0.0, 1.0, 0.0, 0.0)
|
|
mod.widgets.HwPanel.draw_bg.sheen = vec4(0.035, 0.30, 0.15, 0.5)
|
|
mod.widgets.HwPanel.draw_bg.relief = vec4(2.5, 0.4, 2.5, 0.50)
|
|
mod.widgets.HwPanel.draw_bg.finish = vec4(0.55, 0.55, 0.45, 0.08)
|
|
mod.widgets.HwPanel.draw_bg.inner = vec4(0.60, 12.0, 0.0, 0.55)
|
|
mod.widgets.HwPanel.draw_bg.glow_ink = vec4(1.0, 0.30, 0.13, 1.0)
|
|
mod.widgets.HwPanel.draw_bg.spill = vec2(1.2, 0.4)
|
|
|
|
// The screen's surround: a black glass panel set flush into the white,
|
|
// a hairline of light round its rim.
|
|
mod.widgets.HwBezel.radius = 24
|
|
mod.widgets.HwBezel.draw_bg.ground = #x0d0e10
|
|
mod.widgets.HwBezel.draw_bg.light_ink = vec4(0.80, 0.86, 0.94, 1.0)
|
|
mod.widgets.HwBezel.draw_bg.shadow_ink = vec4(0.0, 0.0, 0.0, 1.0)
|
|
mod.widgets.HwBezel.draw_bg.pattern = vec4(0.0, 1.0, 0.0, 0.0)
|
|
mod.widgets.HwBezel.draw_bg.sheen = vec4(0.06, 0.22, 0.20, 0.5)
|
|
mod.widgets.HwBezel.draw_bg.relief = vec4(2.5, 0.4, 3.0, 0.55)
|
|
mod.widgets.HwBezel.draw_bg.finish = vec4(0.55, 0.60, 0.50, 0.08)
|
|
mod.widgets.HwBezel.draw_bg.inner = vec4(0.60, 12.0, 0.0, 0.55)
|
|
mod.widgets.HwBezel.draw_bg.spill = vec2(1.0, 0.4)
|
|
|
|
// Black glass over the picture: a cool broad reflection, dark rim.
|
|
// No dark rim or bulge over the picture: it reads clean and bright.
|
|
mod.widgets.HwGlass.draw_bg.glass = vec4(0.0, 0.10, 0.0, 0.0)
|
|
mod.widgets.HwGlass.draw_bg.tint = vec4(0.86, 0.92, 1.0, 0.0)
|
|
mod.widgets.HwGlass.draw_bg.radius = 14.0
|
|
|
|
// ---- keys: flush white caps, a light pipe round the edge ----
|
|
mod.widgets.HwKey.radius = 11
|
|
mod.widgets.HwKey.depth = 1.2
|
|
mod.widgets.HwKey.press = -1.4
|
|
mod.widgets.HwKey.draw_bg.ground = #xf4f4f1
|
|
mod.widgets.HwKey.draw_bg.light_ink = vec4(1.0, 1.0, 1.0, 1.0)
|
|
mod.widgets.HwKey.draw_bg.shadow_ink = vec4(0.60, 0.63, 0.66, 1.0)
|
|
mod.widgets.HwKey.draw_bg.pattern = vec4(0.0, 1.0, 0.0, 0.0)
|
|
mod.widgets.HwKey.draw_bg.relief = vec4(2.4, 0.20, 1.5, 0.15)
|
|
mod.widgets.HwKey.draw_bg.finish = vec4(0.40, 0.30, 0.15, 0.5)
|
|
mod.widgets.HwKey.draw_bg.shadow = vec4(0.18, 6.0, 1.0, 0.15)
|
|
mod.widgets.HwKey.draw_bg.inner = vec4(0.72, 9.0, 0.0, 0.35)
|
|
mod.widgets.HwKey.draw_bg.glow_ink = vec4(1.0, 0.30, 0.13, 1.0)
|
|
mod.widgets.HwKey.draw_bg.spill = vec2(2.6, 0.45)
|
|
mod.widgets.HwKey.draw_bg.pipe_ink = vec4(0.52, 0.76, 1.0, 1.0)
|
|
mod.widgets.HwKey.draw_bg.pixel = fn() {
|
|
let p = self.pos * self.rect_size
|
|
var o = self.layer(self.key_face(p, self.ground.xyz))
|
|
// The light pipe: the moulding's gap round the cap glows, a thin
|
|
// bright line with a soft halo on the white either side.
|
|
let d = self.sd(p)
|
|
let lit = clamp(self.lit, 0.0, 1.0)
|
|
let ink = mix(self.pipe_ink.xyz, self.glow_ink.xyz, lit)
|
|
let line = 1.0 - smoothstep(0.3, 1.1, abs(d - 0.6))
|
|
let qe = min(min(p.x, p.y), min(self.rect_size.x - p.x, self.rect_size.y - p.y))
|
|
let halo_out = exp(-max(d - 0.6, 0.0) / 2.6) * step(0.6, d) * 0.40 * smoothstep(0.0, max(self.inset, 1.0), qe)
|
|
let halo_in = exp(-max(0.6 - d, 0.0) / 2.0) * step(d, 0.6) * 0.30
|
|
let a = clamp(line * 0.85 + (halo_out + halo_in) * self.pipe_ink.w, 0.0, 1.0)
|
|
let core = mix(ink, vec3(1.0, 1.0, 1.0), line * 0.35)
|
|
o = vec4(core * a, a) + o * (1.0 - a)
|
|
return vec4(o.xyz + self.dither() * step(0.002, o.w), o.w)
|
|
}
|
|
mod.widgets.HwKeyButton.draw_text.color = #x2a2d31
|
|
mod.widgets.HwKeyButton.draw_text.color_hover = #xff4a22
|
|
mod.widgets.HwKeyButton.draw_text.color_down = #xd8391a
|
|
mod.widgets.HwKeyText.draw_text.color = #x2a2d31
|
|
mod.widgets.HwKeyText.draw_text.color_hover = #xff4a22
|
|
mod.widgets.HwKeyText.draw_text.color_down = #xd8391a
|
|
|
|
// ---- lights: the status red-orange ----
|
|
mod.widgets.HwDash.radius = 3
|
|
mod.widgets.HwDash.emissive = vec4(1.0, 0.28, 0.10, 9.0)
|
|
mod.widgets.HwDash.draw_bg.glow_ink = vec4(1.0, 0.20, 0.05, 1.0)
|
|
mod.widgets.HwDash.draw_bg.ground = #x1a1b1d
|
|
mod.widgets.HwLed.emissive = vec4(1.0, 0.28, 0.10, 4.0)
|
|
mod.widgets.HwLed.draw_bg.glow_ink = vec4(1.0, 0.30, 0.12, 1.0)
|
|
|
|
// ---- knob: a white moulded dome, a red pointer, a fine LED arc ----
|
|
mod.widgets.HwKnobFace.depth = 6.0
|
|
mod.widgets.HwKnobFace.draw_bg.ground = #xf2f2ef
|
|
mod.widgets.HwKnobFace.draw_bg.light_ink = vec4(1.0, 1.0, 1.0, 1.0)
|
|
mod.widgets.HwKnobFace.draw_bg.shadow_ink = vec4(0.30, 0.32, 0.34, 1.0)
|
|
mod.widgets.HwKnobFace.draw_bg.relief = vec4(14.0, 0.9, 6.0, 0.18)
|
|
mod.widgets.HwKnobFace.draw_bg.knob = vec4(1.0, 0.62, 0.0, 0.0)
|
|
mod.widgets.HwKnobFace.draw_bg.cap_ink = vec4(0.07, 0.075, 0.08, 1.0)
|
|
mod.widgets.HwKnobFace.draw_bg.ptr_ink = vec4(0.78, 0.80, 0.83, 1.0)
|
|
mod.widgets.HwKnobFace.draw_bg.spill = vec2(0.7, 0.4)
|
|
mod.widgets.HwKnobFace.draw_bg.ring = vec4(25.0, 1.26, 1.2, 2.35619)
|
|
mod.widgets.HwKnobFace.draw_bg.led_off = vec4(0.72, 0.73, 0.72, 1.0)
|
|
mod.widgets.HwKnobFace.draw_bg.glow_ink = vec4(1.0, 0.30, 0.12, 1.0)
|
|
mod.widgets.HwKnobFace.draw_bg.shadow = vec4(0.40, 14.0, 1.0, 0.35)
|
|
mod.widgets.HwKnobFace.emissive = vec4(1.0, 0.28, 0.10, 0.45)
|
|
// The cap is the station's eye: a black lens with a red glow at its heart.
|
|
mod.widgets.HwKnobFace.draw_bg.surface = fn(p: vec2, base: vec3) -> vec3 {
|
|
let lum = dot(base, vec3(0.3, 0.59, 0.11))
|
|
if lum > 0.25 {
|
|
return base
|
|
}
|
|
let c = self.rect_size * 0.5
|
|
let r = (min(c.x, c.y) - self.inset) * self.knob.y
|
|
let t = length(p - c) / max(r, 1.0)
|
|
let g = exp(-t * t * 7.0)
|
|
let core = exp(-t * t * 40.0)
|
|
var col = base + vec3(0.85, 0.10, 0.03) * g * 0.95 + vec3(1.0, 0.72, 0.35) * core * 0.9
|
|
// A glassy lens ring and a small catch-light.
|
|
let ring = exp(-abs(t - 0.93) * 30.0) * 0.10
|
|
let hl = exp(-length((p - c) / max(r, 1.0) - vec2(-0.38, -0.42)) * 14.0) * 0.35
|
|
return col + vec3(ring + hl, ring + hl, ring + hl)
|
|
}
|
|
|
|
// ---- meter: a red ladder behind black glass ----
|
|
mod.widgets.HwMeterFace.radius = 10
|
|
mod.widgets.HwMeterFace.draw_bg.ground = #x08090a
|
|
mod.widgets.HwMeterFace.draw_bg.light_ink = vec4(0.9, 0.92, 0.95, 1.0)
|
|
mod.widgets.HwMeterFace.draw_bg.shadow_ink = vec4(0.25, 0.26, 0.28, 1.0)
|
|
mod.widgets.HwMeterFace.draw_bg.meter = vec4(0.0, 24.0, 0.9, 0.8)
|
|
mod.widgets.HwMeterFace.draw_bg.glow_ink = vec4(1.0, 0.30, 0.12, 1.0)
|
|
mod.widgets.HwMeterFace.draw_bg.hot_ink = vec4(1.0, 0.86, 0.72, 1.0)
|
|
mod.widgets.HwMeterFace.draw_bg.led_off = vec4(0.10, 0.07, 0.065, 1.0)
|
|
mod.widgets.HwMeterFace.emissive = vec4(1.0, 0.28, 0.10, 0.5)
|
|
|
|
// ---- the picture's light on the white ----
|
|
mod.widgets.HwSpectrum.light = 3.0
|
|
mod.widgets.HwMilk.light = 2.2
|
|
mod.widgets.HwMilk.light_knee = 1.0
|
|
|
|
// ---- type: quiet grey sans on white ----
|
|
mod.widgets.HwCaption.draw_text.color = #x6c7177
|
|
mod.widgets.HwTitle.draw_text.color = #x1d2024
|
|
mod.widgets.HwText.draw_text.color = #x4d5258
|
|
mod.widgets.HwPanelTitle.draw_text.color = #xeef1f4
|
|
mod.widgets.HwPanelText.draw_text.color = #x9aa2ab
|
|
mod.widgets.HwNavButton.draw_text.color = #xd6dadf
|
|
mod.widgets.HwDisplayText.draw_text.color = #xd6dadf
|
|
|
|
// Small black glass windows: the progress strip, the equalizer.
|
|
mod.widgets.HwDisplay.radius = 14
|
|
mod.widgets.HwDisplay.draw_bg.ground = #x0a0b0c
|
|
mod.widgets.HwDisplay.draw_bg.light_ink = vec4(1.0, 1.0, 1.0, 1.0)
|
|
mod.widgets.HwDisplay.draw_bg.shadow_ink = vec4(0.22, 0.23, 0.25, 1.0)
|
|
mod.widgets.HwDisplay.draw_bg.relief = vec4(3.0, 0.3, 2.0, 0.45)
|
|
mod.widgets.HwDisplay.draw_bg.inner = vec4(0.60, 10.0, 0.0, 0.55)
|
|
mod.widgets.HwDisplay.draw_bg.sheen = vec4(0.05, 0.30, 0.25, 0.4)
|
|
mod.widgets.HwDisplay.draw_bg.spill = vec2(0.6, 0.3)
|
|
|
|
// Choosers and the search field: black glass with a pale rim.
|
|
mod.widgets.HwDropDown.draw_bg.well = vec4(0.035, 0.04, 0.045, 1.0)
|
|
mod.widgets.HwDropDown.draw_bg.rim = vec4(0.62, 0.80, 0.98, 0.35)
|
|
mod.widgets.HwDropDown.draw_bg.arrow = vec4(1.0, 0.36, 0.16, 1.0)
|
|
mod.widgets.HwTextInput.draw_bg.well = vec4(0.035, 0.04, 0.045, 1.0)
|
|
mod.widgets.HwTextInput.draw_bg.rim = vec4(0.62, 0.80, 0.98, 0.35)
|
|
|
|
mod.widgets.HwSplitter.draw_bg.groove = vec4(0.30, 0.32, 0.34, 0.30)
|
|
mod.widgets.HwSplitter.draw_bg.glint = vec4(1.0, 1.0, 1.0, 0.8)
|
|
// The light pipe is the key's indicator: no LED dots.
|
|
mod.widgets.HwKey.draw_bg.led = vec4(8.0, 8.0, 2.0, 0.0)
|
|
// A light floor: dark type on the panels, a dark caption on the white title bar.
|
|
mod.widgets.hw_palette.caption_text = #x2a2d31
|
|
true
|
|
|
|
// ---- EQ (HwEqGraph: the graphic equalizer's era look, STYLE_GUIDE "Graphic EQ") ----
|
|
mod.widgets.HwEqGraph.draw_fader.fader = vec4(0.0, 0.58, 15.0, 4.0)
|
|
mod.widgets.HwEqGraph.draw_fader.cap_ink = vec4(0.93, 0.93, 0.92, 1.0)
|
|
mod.widgets.HwEqGraph.draw_fader.track_ink = vec4(0.04, 0.04, 0.05, 1.0)
|
|
mod.widgets.HwEqGraph.draw_curve.curve = vec4(0.0, 1.6, 6.0, 0.08)
|
|
mod.widgets.HwEqGraph.draw_grid.grid = vec4(2.0, 0.30, 0.30, 0.0)
|
|
mod.widgets.HwEqGraph.draw_spectrum.spectrum = vec4(0.16, 0.0, 0.3, 0.0)
|
|
true
|