# UI Controls Gallery — context for an AI assistant You are looking at the source of **ui.digitalview.com**, a small static website by **Digital View** (an LCD controller-board manufacturer — https://www.digitalview.com). This file explains what the site is, why it exists, and how to extend it, **purely in the context of Digital View controller boards**. Read it before editing anything here. --- ## 1. The idea in one paragraph Digital View's LCD controller boards can be controlled over **RS-232** — a serial command set for adjusting a display's functions (brightness, contrast, input source, colour temperature, power, and so on). Because those functions are reachable by command, a display developer doesn't have to rely on the board's physical buttons and on-screen-display (OSD) menu — they can build their **own on-screen user interface** that sends the commands. This gallery is a showcase of such interfaces: lots of different, often playful, UI "skins" that all do the same real job. The hook is fun/visual design; the serious point underneath is "you can drive a real Digital View display from a UI you design." ## 2. Why it matters (the value proposition) - A custom UI can replace or augment the OSD — better UX, branding, touch-friendliness. - It enables a **closed-loop control system**: the UI sends a command, the panel acts, status can be read back. - On a board like the **ALC-4096**, the RS-232 link runs over **USB-C alongside the video and the touch signal** — so a *single cable* from a PC to the display carries everything. Other boards do the same with separate cables (RS-232 serial + USB for touch + HDMI/DP for video). Same capability, different cabling. ## 3. RS-232 on Digital View boards — and the big caveat Typical serial settings: **9600 baud, 8 data bits, no parity, 1 stop bit (8N1)**, on the **CN8** connector (a 6-pin JST). Commands can also be sent over USB-C (as a serial device) or over Ethernet (via an AI-50 board) on boards that support it. Control methods seen on the ALC-4096: OSD buttons, IR remote, DDC/CI (over the video cable), and RS-232 (CN8 / USB-C / Ethernet). Real command examples (verified): - **ALC-4096** — Brightness (backlight level) = byte `0xE0`; Contrast = `0x82`; Black Level = `0x81`. - **SVX-4096** — backlight on/off = `0xE1` then ASCII `'1'`/`'0'`. > ⚠️ **Per-model variation is the rule, not the exception.** The Digital View range has many > controller boards. **Do not assume they share commands, functions, or value ranges.** > Notice that SVX brightness-ish control is `0xE1` while ALC brightness is `0xE0` — the > opcodes already differ. Not every board offers every function, and some functions have > different ranges by necessity. **Always confirm against the specific board's user guide / > RS-232 command list** before treating a command as real. When an opcode isn't confirmed > for the board in question, mark it as a placeholder rather than inventing one. **Where the authoritative command list lives:** the specific commands and values for a controller board are in **that board's product manual, on its own product page** at https://www.digitalview.com/controller-summary — that is the source of truth, not this file. General reference (protocol, wiring, worked example) — Digital View RS-232 application note: https://www.digitalview.website/downloads/application-notes/appnote-rs-232.pdf **Value encoding.** Values go out as *ASCII-coded hex*, not as a raw byte: 60% → `"3C"` → bytes `33 43`; 100% → `"64"` → bytes `36 34`. So a full brightness frame is `E0 33 43`. The gallery's brightness controls and `demo/demo1.html` both use this format. ## 4. How this site is built Plain static HTML/CSS/JS — no framework, no build step. Hosted on Hostinger (LiteSpeed); deploy = upload the files to `public_html/`. ``` UI/ ├── index.html # the gallery shell: site header + intro + filter bar + grid + footer ├── controls.js # the manifest: window.CONTROLS = [ {…}, … ] ← the only file you edit to add a control ├── .htaccess # forces no-cache on html/js so uploads show immediately (LiteSpeed defaults to a 7-day cache) ├── assets/ # digital-view-logo-green.png (header), digital-view-logo.webp (footer, white) ├── controls/.html # one self-contained control per FILE (flat; no per-control folders) └── demo/ # full-page demos: demo1.html (live control panel) + demo2.html (telemetry dashboard) ``` Filenames are meaningful, not `index.html` — only the site root is `index.html`. - **Each control is its own complete HTML page** and is embedded in the gallery via an ` ``` Height is per control — most are 340, but a few are taller (the steampunk gauge is 500, the pump 520). The `h` value in `controls.js` is the right height for each; `?hint=0` saves roughly another 40–60px. Nothing here needs CORS: the page is plain HTML in an iframe, not a script include. **Rules.** `?board=` changes a *label*, not behaviour — it does not verify that the named board supports that command. Whoever embeds it must confirm the pairing against that board's manual (see §3). Pass `?cmd=` alongside `?board=` whenever the opcode differs; `backlight-toggle` sends `0xE1`, which is documented for the SVX-4096 and not verified for other boards. **When adding a control:** if it has a hint row, give it `class="hint"`, and do not reuse that class for anything else. `brightness-terminal` originally used `hint` for its console log lines, which `?hint=0` would have blanked; those are `class="sys"` now. ## 5. How to add or edit a control 1. Create `controls/.html` — a **self-contained** page (inline CSS/JS; external fonts are fine). It must work standalone *and* look right inside a card box of roughly **320–360 px wide × ~340 px tall** (use responsive units; set a custom `h` in the manifest if it needs to be taller, e.g. the pump tile is 520). 2. Make it a real, working control for one **function** (currently everything is *brightness*). Show a small **`RS-232 ▸ TX …`** read-out so the serial intent is visible. For a brightness control, copy the `txFrame()` helper the existing ones use — it renders the real frame (`0xE0` + the value as ASCII-coded hex, e.g. `E0 33 43`) — and badge it with the board it's confirmed for. For any *other* function, if the opcode for the target board isn't confirmed, show the value truthfully and label the opcode "per board guide" — **don't fabricate it** (see §3). 3. The file name must equal the kebab-case of `name` (e.g. "Brightness Dial" → `brightness-dial.html`). 4. Add one entry to `controls.js`. Nothing else in the shell needs to change. 5. If you changed `controls.js` or any HTML and the site is live, re-upload it. With `.htaccess` in place a normal refresh shows the change. Adapting an externally-authored control (they're often built full-screen): drop its big in-page `
`/title (the card already supplies the heading), tighten body padding, then copy it under `controls/`. ## 6. Conventions, honesty - **Controls are value emitters.** The demo's RS-232 read-out is illustrative; this static site does not actually open a serial port. (A fuller design — a shell that collects every control's value, shows a master read-out, and owns the real transport — is sketched in `UI Gallery/backlight-gallery-SPEC.md`, using a `postMessage` bridge. Not built yet.) - **backlight == brightness.** On these panels brightness *is* the backlight level; they are not separate functions. The on/off toggle is a brightness control, filed under `useCase: 'brightness'`. ## 7. Pointers - Main site: https://www.digitalview.com - Controller boards / products: https://www.digitalview.com/controller-summary - ALC-4096 (the single-cable USB-C example): https://www.digitalview.com/controller-alc-4096 - CSG (match a panel to a controller): https://csg.digitalview.com - Reference matrix of ALC-4096 control methods × functions: `~/Downloads/Claude-DV-controller-dev/alc-4096-control-matrix.html`