# 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/<slug>.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
  `<iframe>`. The iframe is deliberate: it isolates each control's CSS / global JS / IDs so
  drop-in pages never collide. A control can therefore use any styles/fonts it likes.
- **`controls.js` drives the grid.** Each entry:

  ```js
  {
    id:   'brightness-slider-neumorphic',     // unique slug
    name: 'Brightness Slider · Neumorphic',   // card heading (file name = kebab-case of this + .html)
    type: 'slider',                            // perspective 1: the kind of control
    useCase: 'brightness',                     // perspective 2: the RS-232 FUNCTION it drives
    style: 'neumorphic',                       // perspective 3: the visual aesthetic
    path: 'controls/brightness-slider-neumorphic.html',
    h: 360,                                     // OPTIONAL per-tile iframe height (default 340)
    desc: 'Soft-UI treatment — extruded, tactile, monochrome.'
  }
  ```

- The gallery offers **three filter perspectives** built from those tags: `type`,
  `useCase` (labelled "Function"), and `style`. One control appears under all three.
- Brand: Digital View green `#3C8A3F`. Header/footer mirror digitalview.com (logo + nav +
  office contacts). Axis colours: type = green, function = purple `#7C5CFF`, style = amber
  `#E0892E`.

## 5. How to add or edit a control

1. Create `controls/<slug>.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 `<header>`/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`