Floor Plan

So funktioniert es.

Schritt 1 von 8 **Immer wissen, wo man ist** Das Panel in der Ecke zeigt das Erdgeschoss des Hotels, die Lounge und ein Radar, das dorthin zeigt, wohin der Besucher schaut.

Das Radar folgt der Ansicht — Schritt 1 von 8 **Immer wissen, wo man ist** Das Panel in der Ecke zeigt das Erdgeschoss des Hotels, die Lounge und ein Radar, das dorthin zeigt, wohin der Besucher schaut.

In einer Tour mit mehr als einer Handvoll Szenen verlieren Besucher die Orientierung und übersehen Räume. Floor Plan zeigt Ihr eigenes Grundrissbild für jede Etage mit einem Punkt für jede Szene und einem Radar, das sich mit der Ansicht dreht. Besucher klicken auf einen Punkt oder einen Raum, um dorthin zu gehen, zoomen und verschieben den Plan, öffnen ihn im Vollbild und sehen, welche Räume sie schon besucht haben. Ein Kalibrierungsmodus misst die Blickrichtung jedes Punkts für Sie, und jede Einstellung ist ein Attribut eines einzigen XML-Elements.

Installation.

1
Einen Ordner kopieren

Legen Sie den verschlüsselten Plugin-Ordner in Ihre Tour und fügen Sie Ihrer Tour-XML ein layer-Element hinzu.
2
Grundrisse eintragen

Tragen Sie Etagenbilder, einen Punkt pro Szene und optionale Räume in eine kleine floorplan.xml ein, die MAKE VTOUR übersteht.
3
Einmal kalibrieren

Schalten Sie calibrate="true" ein, klicken Sie auf den Kamerastandort und eine Tür in der Ansicht und kopieren Sie die ausgegebene Zeile in floorplan.xml.

Warum es den Unterschied macht.

Besucher wissen immer, wo sie sind

Der aktive Punkt, das Radar mit dem echten Sichtfeld und der hervorgehobene Raum folgen jedem Szenenwechsel und jeder Drehung der Ansicht.

Durch das Gebäude gehen

Ein Klick auf einen Punkt oder Raum öffnet diese Szene; mit jump_view="walk" schaut die neue Ansicht in die Richtung, in die der Besucher gegangen ist.

Passend auf jedem Bildschirm

Ein kompaktes Panel am Computer, eine Plan-Schaltfläche und ein Vollbild-Plan mit Los-Schaltfläche auf dem Smartphone und ein Mini-Plan beim Blick nach unten in VR.

Screenshots.

Demo ausprobieren

**Desktop** Das Grundriss-Panel über der Hotel-Lounge: Das Radar zeigt den Blick zu den Gartenfenstern.

**Smartphone** Der Vollbild-Plan auf einem Smartphone: ein angetippter Raum mit seiner Los-Schaltfläche.

**Detail** Der vergrößerte Plan des 1. Stocks mit Raumnamen, besuchten Punkten und dem Radar.

Einstellungen.

Als Attribute in der XML-Datei Ihrer Tour festlegen.

Einstellung	Typ	Standard	Beschreibung
`active`	Ja / Nein	`true`	Schaltet den Grundriss zur Laufzeit ein oder aus (Standard true).
`slot`	Liste	`top-right`	Bildschirmecke des Panels und der Plan-Schaltfläche: top-right (Standard), top-left, bottom-right oder bottom-left. `top-righttop-leftbottom-rightbottom-left`
`offset`	Zahl	`16`	Abstand von den Rändern dieser Ecke in Pixeln (0–200, Standard 16).
`panel_width`	Zahl	`260`	Breite des Panels auf breiten Bildschirmen in Pixeln (160–480, Standard 260).
`panel_height`	Zahl	`200`	Höhe des Panels auf breiten Bildschirmen in Pixeln, inklusive Kopfzeile (120–400, Standard 200).
`start_state`	Liste	`open`	Auf breiten Bildschirmen startet die Tour mit offenem Panel (open, Standard) oder mit der Plan-Schaltfläche (collapsed); Smartphones starten immer mit der Schaltfläche. `opencollapsed`
`orientation`	Liste	`plan`	plan (Standard) zeigt das Bild wie gezeichnet, north dreht den Plan mit Norden nach oben, heading dreht ihn mit der Ansicht. `plannorthheading`
`jump_view`	Liste	`scene`	Ansicht nach einem Sprung aus dem Plan: die Startansicht der Szene (scene, Standard) oder in Gehrichtung (walk). `scenewalk`
`blend`	Text	`BLEND(0.6)`	krpano-Übergang für Sprünge aus dem Plan, zum Beispiel BLEND(0.6) (Standard) oder NOBLEND.
`zoom_max`	Zahl	`4`	Größter Plan-Zoom als Vielfaches des eingepassten Plans (1–10, Standard 4).
`show_visited`	Ja / Nein	`true`	Blendet die Punkte der während dieses Besuchs besuchten Szenen ab (Standard true).
`labels`	Ja / Nein	`true`	Zeigt Raumnamen auf dem Plan, wo sie passen (Standard true).
`theme`	Liste	`dark`	Dunkles (Standard) oder helles Farbschema. `darklight`
`accent_color`	Farbe	`#3D8BFF`	Farbe des aktiven Punkts, des Radars, des aktiven Etagen-Reiters und des Fokusrahmens (Standard #3D8BFF).
`transition`	Ja / Nein	`true`	Öffnet, schließt und ändert den Plan mit kurzen, weichen Übergängen; false ändert ihn sofort. Besucher mit aktivierter reduzierter Bewegung sehen nie eine Bewegung.
`transition_duration`	Zahl	`280`	Dauer der Übergänge in Millisekunden (100–1000, Standard 280).
`vr`	Ja / Nein	`true`	Zeigt in VR einen Mini-Plan, wenn der Besucher nach unten schaut (Standard true); false blendet den Plan in VR nur aus.
`vr_pitch`	Zahl	`50`	Grad unter dem Horizont, ab denen der Mini-Plan in VR erscheint (30–80, Standard 50).
`calibrate`	Ja / Nein	`false`	Modus für Ersteller: öffnet den Plan mit einer Leiste, die Standort und Blickrichtung misst und die Punkt-Zeile ausgibt; in einer veröffentlichten Tour nie eingeschaltet lassen (Standard false).
`debug`	Ja / Nein	`false`	Gibt die Anzahl der Etagen, Punkte und Räume in der Browser-Konsole aus (Standard false).
`text_title`	Text	`Floor plan`	Name des Plans für die Schaltfläche, das Panel und den vergrößerten Plan (Standard „Floor plan“); ein <languages>-Schlüssel oder Text.
`text_floors`	Text	`Floors`	Screenreader-Name der Etagen-Reiter (Standard „Floors“).
`text_expand`	Text	`Expand plan`	Beschriftung der Schaltfläche zum Vergrößern (Standard „Expand plan“).
`text_collapse`	Text	`Collapse`	Beschriftung der Schaltfläche zum Einklappen (Standard „Collapse“).
`text_close`	Text	`Close`	Beschriftung der Schließen-Schaltfläche des vergrößerten Plans (Standard „Close“).
`text_go`	Text	`Go`	Schaltfläche, die auf dem Smartphone die angetippte Szene öffnet (Standard „Go“).
`text_zoom_in`	Text	`Zoom in`	Beschriftung der Schaltfläche zum Hineinzoomen (Standard „Zoom in“).
`text_zoom_out`	Text	`Zoom out`	Beschriftung der Schaltfläche zum Herauszoomen (Standard „Zoom out“).

Beispiel

<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" />

Funktionen

Ein Grundrissbild pro Etage (PNG, JPG, WebP oder SVG) mit Etagen-Reitern
Ein Punkt pro Szene mit eigener Blickrichtung und ein Radar mit Blickrichtung und Sichtfeld
Raumbeschriftungen, die erscheinen, wenn sie passen, und anklickbare Raumflächen mit Hervorhebung
Ausrichtung wie gezeichnet, Norden oben oder Blickrichtung oben
Sprung mit Gehrichtung: die neue Szene schaut in die Gehrichtung
Besuchte Punkte werden während des Besuchs abgeblendet
Zoomen und Verschieben mit Mausrad, Doppelklick, Ziehen, zwei Fingern und Tasten
Vergrößerter Plan am Computer, Vollbild-Plan mit Los-Schaltfläche auf dem Smartphone
Kalibrierungsmodus, der die fertige Punkt-Zeile ausgibt
Mini-Plan in VR beim Blick nach unten — getestet in der simulierten VR von krpano, noch nicht auf VR-Brillen
Weiche Übergänge, ausgeschaltet bei reduzierter Bewegung
Tastaturbedienung und Beschriftungen für Screenreader
Texte in mehreren Sprachen, dunkles und helles Design, Akzentfarbe und CSS-Variablen
Verschlüsselte Plugin-Datei, jede Einstellung als XML-Attribut