Cold Display Guard Web Industrial Console Design

Date: 2026-04-29

Goal

Redesign the existing management frontend as an industrial operations console for refrigerated display monitoring, while preserving the current Vite single-page app, management API contract, and calibration workflow.

Direction

Use a dense, production-oriented control-room interface. The application should feel like a tool used by operators who repeatedly calibrate zones, check runtime health, inspect alerts, and update camera settings. It should avoid a marketing-page layout and prioritize scanning, comparison, and fast action.

Information Architecture

The app keeps the existing three views:

区域标定: primary working view for RTSP capture and polygon editing.
事件数据: monitoring view for runtime metrics and recent JSONL events.
运行配置: configuration view for camera identity, RTSP URL, thresholds, and JSON preview.

The top bar becomes a compact console header with the product name, operational subtitle, connection/status message, and refresh action. Tabs remain visible but are styled as segmented navigation.

Calibration View

The captured camera frame is the visual center of the page. The region selector and point editing tools sit beside it as operator controls, while calibration completeness and per-region point counts sit in a right-side inspection panel.

The canvas keeps its current behavior:

RTSP snapshot must be captured before adding points.
Clicks add normalized polygon points to the active region.
Local draft storage is preserved.
Saved calibration uses PUT /api/manage/calibration.

Events View

Metrics appear as compact telemetry cards, with violation count and baseline state visually distinct. The event table remains the primary data surface, with rows styled for scanability and violation event names emphasized.

Settings View

Configuration uses a two-column control layout with an adjacent JSON preview. The UI should make production parameters easy to inspect without changing the existing PUT /api/manage/config payload.

Visual System

The console uses a cool industrial palette:

charcoal and steel for structure
white panels for data surfaces
cyan/green for ready or active state
amber for learning or pending state
red for violations and failures

Controls use restrained radius, clear focus states, high contrast, and predictable spacing. The design avoids purple gradients, oversized hero sections, decorative cards, and purely ornamental backgrounds.

Implementation Scope

Modify only the web frontend:

web/src/main.js
web/src/styles.css

Do not change API routes, backend behavior, deployment files, or existing unrelated workspace changes.

2.7 KiB Raw Permalink Blame History