Plan view: interactive floor plans
A Plan view page shows a floor plan the user can tap. You draw colour-coded regions over the plan, one colour per room or zone, and give each colour an action: open a page, show a pop-up or send a command.
What you need
A floor plan image (PNG, JPEG, WebP or GIF), ideally cropped to the area and sized close to the panel's aspect ratio.
Pages for the rooms you want to open from the plan, if regions will navigate or pop up.
1. Create the plan page
Add a page with + and give it a name (for example Level 1).
In the Page tab, set Page type to Plan view.
Under Plan view settings, click Upload floor plan and choose the image.
Adjust the plan if needed:
| Setting | Effect |
|---|---|
| Floor plan selected opacity | Fades the plan image (0 to 100%) |
| Plan scale and position: Scale | Enlarges or shrinks the plan (%) |
| Plan scale and position: X / Y | Moves the plan horizontally / vertically (%) |
Change floor plan swaps the image later.
2. Draw the colour-coded overlay
Under Colour-coded overlay, click Draw overlay. The Draw overlay regions window shows your plan.
Pick a drawing tool: polygon (click points, then double-click or click near the start to close), rectangle (click and drag), ellipse or the eraser.
Pick a colour from the palette, then draw a region. Each colour is a separate region, so use a new colour for each room.
Use undo or clear to fix mistakes. The upload button lets you load a ready-made overlay image instead.
The region count shows under the drawing (for example 3 regions). Click Save overlay.
The overlay appears tinted over the plan. Edit overlay reopens the drawing; Remove overlay deletes it.
3. Map each colour to an action
Click Configure colour regions (0). The Colour mapping palette opens.
Click Pick colour from overlay, then click a region in the preview. Its colour shows under Selected colour.
Enter a Region name (for example Boardroom).
Choose an Action type:
| Action type | Settings | Result in use |
|---|---|---|
| Navigation | Target page | Tapping the region opens that page |
| Popup | Target page, Width %, Height % (default 60 x 60), Hide popup header bar and close button | Tapping shows that page as a pop-up over the plan |
| Command | Use my targets, then Switch type, Command preset, Long press and Release actions (as for a Command button), plus On or Active state colour | Tapping sends a command; the region highlights in the active colour when its state is on |
Click Save mapping. The region joins the Mapped regions list (for example Boardroom: Navigation > Lounge). Repeat for each colour, then click Done.
The button label shows how many regions are mapped, for example Configure colour regions (2).
4. Test it
Click Preview and tap each region. Navigation regions switch page, popup regions open the target page in a window with a close x, and command regions highlight when active.
Tips
Draw regions slightly inside the walls so neighbouring rooms don't touch.
Use strong, distinct palette colours; similar shades are harder to pick reliably.
A plan page can be the project's home page, with a menu to reach everything else.
