Floor Plan

How it works.

Step 1 of 8 **Always know where you are** The panel in the corner shows the hotel's ground floor, the lounge and a radar pointing where the visitor looks.

The radar follows the view — Step 1 of 8 **Always know where you are** The panel in the corner shows the hotel's ground floor, the lounge and a radar pointing where the visitor looks.

In a tour with more than a handful of scenes, visitors lose their way and miss rooms. Floor Plan shows your own plan image for every floor with a spot for each scene and a radar that turns with the view. Visitors click a spot or a room to walk there, zoom and drag the plan, open it full screen and see which rooms they have already visited. A calibration mode measures each spot's heading for you, and every setting is an attribute of one XML element.

Installation.

1
Copy one folder

Put the encrypted plugin folder into your tour and add one layer element to your tour XML.
2
Add your plans

List your floor images, one spot per scene and optional rooms in a small floorplan.xml that survives MAKE VTOUR.
3
Calibrate once

Switch on calibrate="true", click where the camera stands and a door in the view, and copy the printed line into floorplan.xml.

Why it makes a difference.

Visitors always know where they are

The active spot, the radar with the real field of view and the highlighted room follow every scene change and every turn of the view.

Walk through the building

A click on a spot or a room opens that scene; with jump_view="walk" the new view faces the direction the visitor walked.

Right on every screen

A compact panel on computers, a plan button and a full-screen plan with a Go button on phones, and a mini plan when you look down in VR.

Screenshots.

Try the demo

**Desktop** The floor plan panel over the hotel lounge: the radar shows the view toward the garden windows.

**Phone** The full-screen plan on a phone: a tapped room with its Go button.

**Detail** The expanded plan of the 1st floor with room labels, visited spots and the radar.

Settings.

Set as attributes in your tour XML.

Setting	Type	Default	Description
`active`	Yes / No	`true`	Switches the floor plan on or off at runtime (default true).
`slot`	List	`top-right`	Screen corner of the panel and the plan button: top-right (default), top-left, bottom-right or bottom-left. `top-righttop-leftbottom-rightbottom-left`
`offset`	Number	`16`	Distance from the edges of that corner in pixels (0–200, default 16).
`panel_width`	Number	`260`	Width of the panel on wide screens in pixels (160–480, default 260).
`panel_height`	Number	`200`	Height of the panel on wide screens in pixels, header included (120–400, default 200).
`start_state`	List	`open`	On wide screens the tour starts with the open panel (open, default) or with the plan button (collapsed); phones always start with the button. `opencollapsed`
`orientation`	List	`plan`	plan (default) shows the image as drawn, north turns the plan so that north is up, heading turns it with the view. `plannorthheading`
`jump_view`	List	`scene`	View after a jump from the plan: the scene's own start view (scene, default) or facing the walking direction (walk). `scenewalk`
`blend`	Text	`BLEND(0.6)`	krpano transition of jumps from the plan, for example BLEND(0.6) (default) or NOBLEND.
`zoom_max`	Number	`4`	Largest plan zoom as a multiple of the fitted plan (1–10, default 4).
`show_visited`	Yes / No	`true`	Dims the spots of scenes visited during this visit (default true).
`labels`	Yes / No	`true`	Shows room titles on the plan where they fit (default true).
`theme`	List	`dark`	Dark (default) or light colour scheme. `darklight`
`accent_color`	Color	`#3D8BFF`	Colour of the active spot, the radar, the active floor tab and the focus ring (default #3D8BFF).
`transition`	Yes / No	`true`	Opens, closes and changes the plan with short, smooth transitions; false changes it at once. Visitors who turned on reduced motion never get the motion.
`transition_duration`	Number	`280`	Length of the transitions in milliseconds (100–1000, default 280).
`vr`	Yes / No	`true`	Shows a mini plan in VR when the visitor looks down (default true); false only hides the plan in VR.
`vr_pitch`	Number	`50`	Degrees below the horizon at which the VR mini plan appears (30–80, default 50).
`calibrate`	Yes / No	`false`	Creator mode: opens the plan with a bar that measures position and heading and prints the spot line; never leave it on in a published tour (default false).
`debug`	Yes / No	`false`	Prints the number of floors, spots and rooms to the browser console (default false).
`text_title`	Text	`Floor plan`	Name of the plan for the button, the panel and the expanded plan (default “Floor plan”); a <languages> key or literal text.
`text_floors`	Text	`Floors`	Screen reader name of the floor tabs (default “Floors”).
`text_expand`	Text	`Expand plan`	Label of the expand button (default “Expand plan”).
`text_collapse`	Text	`Collapse`	Label of the collapse button (default “Collapse”).
`text_close`	Text	`Close`	Label of the close button of the expanded plan (default “Close”).
`text_go`	Text	`Go`	Button that opens the tapped scene on phones (default “Go”).
`text_zoom_in`	Text	`Zoom in`	Label of the zoom-in button (default “Zoom in”).
`text_zoom_out`	Text	`Zoom out`	Label of the zoom-out button (default “Zoom out”).

Example

<include url="floorplan.xml" />

<layer name="z360_floor_plan"
       url="plugins/z360_floor_plan/z360_floor_plan.js"
       keep="true"
       jump_view="walk" />

<!-- floorplan.xml -->
<z360_floor_plan_floor name="ground" title="Ground floor" url="plans/ground.webp" />
<z360_floor_plan_spot name="scene_lounge" floor="ground" x="560" y="250" heading="-121" />
<z360_floor_plan_room name="lounge" floor="ground" title="Lounge"
                      points="410,228 670,228 670,530 410,530" scene="scene_lounge" />

Features

One plan image per floor (PNG, JPG, WebP or SVG) with floor tabs
A spot per scene with its own heading and a radar that shows the view direction and field of view
Room labels that appear when they fit and clickable room areas with a hover highlight
Orientation as drawn, north up or heading up
Walk jump: the new scene faces the walking direction
Visited spots dimmed during the visit
Zoom and pan with mouse wheel, double click, drag, pinch and keys
Expanded plan on computers, full-screen plan with a Go button on phones
Calibration mode that prints the finished spot line
Mini plan in VR when the visitor looks down — tested in krpano's simulated VR, not yet on VR headsets
Smooth transitions, off with reduced motion
Keyboard control and screen reader labels
Texts in several languages, dark and light theme, accent colour and CSS variables
Encrypted plugin file, every setting as an XML attribute