Historical prototype

Framed

Exploring a physical problem on a canvas

JavaScript / Konva / jQuery

Try this demoDrag the outlined frame. Watch all four measurements change.

FramedPlan a gallery wall

72 × 48 in wall11 × 14 in selected frame

left: 32 in
right: 40 in
top: 10 in
bottom: 38 in

From left From top

Move the frame · drag, use the sliders, or focus it and use arrow keys.Hanging-point distances · interactive concept

Interaction experiment

Arrange a wall before reaching for a hammer.

Framed is an earlier canvas-based wall-layout planner. It combines wall dimensions, preset frame sizes, background textures, and draggable groups to explore a practical spatial task.

Direct manipulation

Konva groups a rectangle and marker into a draggable frame. Position feedback connects the arrangement to measurements.

A separate panel supplies wall dimensions, backgrounds, and frame presets.

Where the prototype stops

The preserved source uses inconsistent unit conversions. Measurement accuracy is not established. The interactions are predominantly pointer-based, with no complete keyboard equivalent.

It is an interaction sample, not a precision installation tool. A next pass would unify the geometry and add numeric position controls before adding more decorative options.

Inspect the implementation

Frame factories, Konva grouping, and measurement tooltips are preserved in the original source.

View the canvas interaction source ↗