Customizer II prototype

Design exploration for the Angie layout editor. Nothing here talks to a device or to Casey; all data is example data and resets on reload.

Start here

Editor prototype (desktop)Widgets gallery, contextual pill, Edit card with source, bands and special settings, CAD dimensions, resize per widget type, smart guides, box selection, groups, off-screen area, simulator. BriefRequirements from the mails and the Casey palette.

Tablet and phone

Tablet portraitTouch editing: bottom sheet, larger pill, dimension chips. Phone: previewPreview, simulator, then limits or send. Best viewed in a narrow window or on a phone. Phone: limitsQuick limit and alarm edits with steppers. Phone: send to deviceChange summary, device choice, delivery status.

Control experiments

A Contextual pillFirst version of the pill under the selection. B Handles on the gaugeDrag band limits along the dial. C Command barType what the widget should do. D Radial menuKnob-friendly ring of actions. E Smart guidesSnap lines, distances and Tidy up. F Slot gridSnap-to-slot layout that re-flows per display.

Early layout concepts

1 WorkbenchFollows Aleš's sketch. 2 Parameter StudioParameters first. 3 Guided BuilderCanva-style templates. 4 Instrument LabSimulator-centric, dark. 5 Multi-Display BoardAll display variants side by side.

Best in a current Chrome, Edge or Firefox on a desktop. Fonts load from Google Fonts.