Planoplan - Widget Integration

Ein Widget integrieren

Es gibt zwei Optionen ein Widget in die Webseite zu integrieren: durch iframe oder durch den Code.

Integration über iframe:

Für die Darstellung im Vollbildmodus muss im iframe unbedingt das Attribut allowfullscreen angegeben sein.

<iframe width="620" height="620"src="https://widget.planoplan.com/c5c7f3ebc36b1c9505f62defd963fb0b423cd8a8e092b5bfd83a3ad7de5d9879"frameborder="0" scrolling="no" allowfullscreen></iframe>

Integration mit einem Code:

Fügen Sie den unten stehenden Widget-Script auf der Seite ein*

<script src="https://widget.planoplan.com/etc/multiwidget/release/v4/static/js/main.js"></script>

*Beachten Sie, dass diese Option ein Browser-Caching der Datei zur Folge haben kann. Um dies zu vermeiden, kann bei der Integration der aktuelle timestamp zum Dateinamen eingefügt werden. Im Beispiel mit einem php-Template kann dies wie folgt umgesetzt werden:

<script src="https://widget.planoplan.com/etc/multiwidget/release/v4/static/js/main.js?<?=time()?>"></script>

Danach wird es initialisiert :

<div id="pop-widget"></div>
<script>    
Planoplan.init({
  uid: '__________',
  el: 'pop-widget'
 });
</script>

uid und el sind Pflichtparameter.

Es ist möglich mehrere Widgets zu initialisieren.

Parameter der Widget-Einfügung

Parameter	Beschreibung	Details
width	Breite	Falls keine Maßeinheiten angegeben sind, wird <=100 als % angegeben, >100 als px
height	Höhe	Falls keine Maßeinheiten angegeben sind, wird <=100 als % angegeben, >100 als px
primaryColor	Hauptfarbe	Der Rahmen von Widget-Symbol, Zeiger, Beschriftung der Schaltflächen, aktiven oder ausgewählten Schaltflächen
secondaryColor	Sekundärfarbe	Hintergrundfarbe für Symbol und Schaltflächen
textColor	Textfarbe	Textfarbe für 360°, virtuelle Tour und VR-Widgets
backgroundColor	Hintergrundfarbe	Hintergrundfarbe des Widgets. Beachten Sie, dass Renderings nicht immer transparent sind.
fontFamily	Schrift	Soll wie in css angegeben werden und funktioniert nur dann, wenn es für die Seite freigeschaltet ist. Damit das Widget die Schrift vom Admin-Dashboard nicht übernimmt (falls es für die Seite freigeschaltet ist), sollte es hier angegeben werden. Aktuell sind es Open Sans und Roboto
activeTab	StartTab	Verfügbare Werte sind plan, top, three_quarter, rotate_360, virtual_tour, vr. Falls es keinen Tab gibt, dann wird er aus den Admin-Einstellungen übernommen, ansonsten wird der erste verfügbare Tab genommen.
activeFloor	Startgeschoss	0 (Null) für das ganze Haus. Falls es kein Geschoss gibt, dann wird es aus den Admin-Einstellungen übernommen, ansonsten wird das erste verfügbare Geschoss genommen.
activeDesign	Startprojekt	Projekt-ID. Falls es kein Projekt gibt, dann wird es aus den Admin-Einstellungen übernommen, ansonsten wird das erste verfügbare Projekt genommen.
uid	Kennzeichnungs-nummer
el	Element zum Einfügen	Übernimmt die ID des Elements oder ein DOMElement
lang	Sprache	Im Moment sind ru/en/de verfügbar
initialCamera	Startkamera für VR-Tour	Übernimmt die Kameranummer für ein einstöckiges Widget oder ein Array für ein mehrstöckiges bzw. Multi-Widget, das aus Ansichtsobjekten besteht. Falls design oder floor nicht angegeben sind, werden die ersten aktiven Werte übernommen.

Beispiel eines Widgetcodes mit allen Parametern

<script src="https://widget.planoplan.com/etc/multiwidget/release/static/js/main.js"></script>

<div id="pop-widget"></div>
<script>    
Planoplan.init({
  width: '620px',
  height: '620px', 
  primaryColor: '#81AEE3',
  secondaryColor: '#F4F7F7',
  textColor: '#4A4A4A',
  backgroundColor: '#FFFFFF',
  fontFamily: 'Open Sans, sans-serif',
  activeTab: 'top',
  activeFloor: '0',
  activeDesign: '873032',
  uid: '94b725e8807b98d8bf38afa43e8b5eea726a9ffc06a3d06754530d658a010372',
  el: 'pop-widget',
  lang: 'ru'
  initialCamera: [
    {
      design: 873032,
      floor: 1,
      camera: 6
    }]
 });
</script>

Wiederdefinition von Parametern

Planoplan ist ein globales Objekt. Um die Widget-Parameter erneut zu definieren, kehrt die init()-Methode das Exemplar der PopWidget-Klasse, das die Methode reinit () benutzt, um. Sie stimmt mit der init () -Methode überein und alle Einstellungen müssen neu angegeben werden, ansonsten werden sie, mit Ausnahme der Parameter uid und el, zurückgesetzt.

Parameter el wird ignoriert Wenn Sie ein anderes uid angeben, wird ein anderes Projekt geladen.

Beispiel von Wiederdefinition von Parametern

var popWidget = Planoplan.init({
  width: '620px',
  height: '620px',
  uid: '94b725e8807b98d8bf38afa43e8b5eea726a9ffc06a3d06754530d658a010372',
  el: 'pop-widget',
  lang: 'de'
 });
 
 popWidget.reinit({width: '100%', height: '100%', lang: 'de'});

Wenn in diesem Beispiel die Sprache fehlt, dann wird sie aus den Admin-Einstellungen übernommen, sonst wird die erste verfügbare genommen.

Download–Ereignisse

PopWidget Objekt hat 2 Callbacks:

onload – wenn api-Daten erfolgreich geladen sind

onerror – beim Upload-FehlerSie übermitteln uid und api-Version (3 oder 4)

Beispiel

var popWidget = Planoplan.init({
  uid: '94b725e8807b98d8bf38afa43e8b5eea726a9ffc06a3d06754530d658a010372',
  el: 'pop-widget',
});
popWidget.on('load', (e) => {})
popWidget.on('error', (e) => {})

popWidget.onload((e) => {})
popWidget.onerror((e) => {})