Kanardia · Casey · Angie

Customizer II: what the mails ask for

Screen-layout editor for customers, used rarely, so it must be simple. Produces a human-readable JSON file imported into Angie (later Indu II, Horis II).

Devices and displays

  • Pick device at start, one project = one device
  • Widget palette depends on device
  • 7" (dev target), ~4.3" (likely main), 80 mm round, 57 mm round
  • Landscape and portrait, plus unknown future sizes
  • Knob first (rotate, push, long push), touch optional

Editor layout (Aleš's sketch)

  • Top: flat menu / toolbar, no sub menus
  • Left: widget palette, drag source, tree later
  • Center: screen canvas, several screens
  • Bottom tabs: Align/Distribute, Simulator
  • Right tabs: Geometry, one per parameter, Special

Widgets

  • Decoration: label, line, image, rect
  • Parameter: arc, h-bar, v-bar, value
  • Composite: heli RPM (engine + rotor), power
  • Widgets are views; many can share one parameter
  • "Widget" needs a better name

Parameters (the hard part)

  • CAN id, names long / medium / short
  • Filter time constant (ms), attributes key/value
  • Bands: low + ordered stops with colour and scale
  • Alarm per band: text, audio, conditions, delay
  • Special alarms (IAS, rotor/engine RPM, engine type)

Units

  • System units on CAN, user units on screen
  • Chosen per unit group, globally for the project
  • Function fixed per parameter, implies unit group
  • Bands edited in user units, stored in system units

Tech and priorities

  • Maintainability, then function, then looks
  • Pure web + C/C++ bindings (WASM), no Qt
  • No duplicated parameter logic in JS
  • Embedded in Casey (iframe + postMessage today)
  • Simulator: live values, widgets react (new)

Casey palette (casey.kanardia.eu, MDB / Bootstrap 5, Roboto, Material Icons)

Kanardia orange
#FF9900
Kanardia red
#C93D12
Dark orange
#CE7501
Light orange
#FFB74D
Text primary
#212121
Text body
#424242
Text secondary
#757575
Page / divider
#FAFAFA / #E0E0E0
Info
#1976D2 · bg #E3F2FD
Success
#2E7D32 · bg #E8F5E8
Danger
#C62828 · bg #FFEBEE
Warning bg
#FFF8E1
Instrument band colours (ParamColors.h)
#E00A0A red
#F9DE01 yellow
#3BAE13 green
blue
white

What the old Customizer tells us

  • Qt/wasm (16 MB), embedded in Casey "Instrument Layouts" via iframe
  • postMessage: load, getData → dataResponse, getThumbnail, export
  • Output is XML: <indu instrument="Digi"> with <panel> per screen
  • Bands flattened to red/yellow/green min-max fields, static test-value
  • Widgets: arc, horizontal-bar, bar-compact, bar-fuel, g-meter, glider-vario, clock, slider, line, label, image

Open questions for Aleš and Rok

  1. A better name for "widget" (gauge, element, indicator?)
  2. Does the layout define knob focus order?
  3. Line between Customizer-only and on-device editing
  4. JSON schema generated from C++ or hand-defined?
  5. Device descriptor (size, shape, touch) data-driven?
  6. Keep iframe + postMessage, or native Casey page?