360°-Rundgang erstellen (Insta360 Pro)

360°-Rundgang erstellen (Insta360 Pro)

Wie erstelle ich einen 360°-Rundgang mit Marzipano?

WiQQi hat inzwischen einen eigenen Editor, um die Datenbank besser anzubinden. Zuvor hat es sich für uns bewährt, den Inhalt über Tabellen zu aktualisieren.

Hintergründe und ausgewählte Beispiele

Weshalb beschäftigt sich WiQQi mit 360°-Fotografie?
WiQQi nutzt 360°-Technologie als Gedankenstütze und zum Wissenstransfer

WiQQi beschäftigt sich mit 360°-Technologien, auch unter dem Begriff der "Telepflege". In der Einzelfallberatung hatten wir zu Forschungszwecken und in Absprache mit den betroffenen Personen 2D und 360°-Fotos von einem Beratungsobjekt aufgenommen. Als bei der Recherche die Frage aufkam, ob eine Boden-Decken-Stange genutzt werden kann, genügte ein Blick auf das 360°-Foto, um festzustellen, dass die Decke weder abgehängt noch getäfelt war. Wir hatten also einen Nutzen von dem implizit dokumentierten Informationen.

In unseren 360°-Rundgängen verknüpfen wir das Wissen aus der WiQQi-Datenbank mit real existierenden Räumen. So machen wir Wissen über einen räumlichen Zugang greifbar.

Zu den bereits von der 2D-Dokumentation bekannten ethische und fachlichen Fragen und Grenzen kommen weitere, die sich aus der umfangreicheren Dokumentation impliziten Wissens ableiten.

Beispiele für 360°-Anwendungen:

Weiterlesen


360°-Bilder erstellen

360°-Bilder erstellen

Die Bilder der ALADIEN-Musterwohnung wurden mit der Insta360 Pro (Version 1) erstellt. Wir haben auf folgende Dinge geachtet:

  1. Kamera-Höhe überprüfen (165cm): Wir haben verschiedene Höhen (160-170cm) ausprobiert. Die Höhe von 165cm führt bei n=2 Personen übereinstimmend am wenigsten zu dem Gefühl, zu nah an der Decke bzw. am Boden zu sein.
  2. Kamera-Neigung überprüfen (Die Neigung kann auch im Stitcher mittels Lagedaten ausgeglichen werden)
  3. Kamera-Position im Raum wählen.
  4. ggf. Nord-Süd-Ausrichtung der Kamera überprüfen. (Bei Zensur-Fotos darauf achten, dass der Fokus der Kamera (Bildmitte) auf den Zensurbereich zeigt. Sonst erzeugt der Gauß-sche Weichzeichner an den Bildrändern Links und Rechts eine Schnittkante).

Alternativen:

  • Alternative 360°-Kameras: Hilfreich zur Auswahl einer passenden Kamera war für uns insbesondere der YouTube-Kanal The 360 Guy
  • Ein 360°-Panoramakopf auf dem Stativ erlaubt auch mit einer 2D-Kamera lückenlose Aufnahmen zu machen. (Bewegte Objekte führen hier eher zu unerwünschten Effekten als bei 360°-Kameras)
  • Darüber hinaus gibt es Apps, die die 360°-Fotografie erlauben. (Bewegte Objekte führen hier eher zu unerwünschten Effekten als bei 360°-Kameras)
Weiterlesen

360°-Bilder zusammenführen (stitchen)

Wir verwenden den insta360 Pro Stitcher.

  1. Bilder auswählen
  2. Einstellungen:
    • Content Type: Monoscopic
    • Stitching Mode: New Optical Flow
    • Sampling Type: Slow
    • Blender Type: Auto
    • use Default Circle Position
    • Gyroscopic Stabilisation
    • Resolution: 8K
  3. Add to Batch list + Start All

Alternativen:

  • Hugin Panorama (Open Source, Cross-Plattform) und viele andere.
  • Stitching Apps
Weiterlesen

360°-Logo erstellen: Bottom/Top

Logos oder Bilder an den Polen („Boden“, „Decke“) von VR-Filmen können als Overlay ins Rektangularvideo eingefügt werden, wenn sie im Vorfeld entsprechend verzerrt werden. Sie können genutzt werden, um das Stativ auszublenden. Schatten, die das Stativ wirft bleiben möglicherweise erhalten.

  1. Foto/Logo auswählen und mit GIMP öffnen.
  2. Inhalt mit der Kreisauswahl öffnen bzw. Freistellen
  3. Leere Leinwand (3840*1920 Pixel) mit Transparentem Hintergrund öffnen
  4. Filter>Verzerren>Polarkoordinaten
    1. Für Logos an der „Decke“:
      • Kreistiefe: 100%
      • Versatzwinkel: 0 (Rotiert das Bild und definiert „vorn“)
      • [x] Umgekehrt abbilden (Spiegelung links /rechts)
      • [x] Oben beginnen (legt den Mittelpunkt des Bildes fest)
      • [ ] Nach Polar
    2. Für Logos am „Boden“:
      • Kreistiefe: 100%
      • Versatzwinkel: 0 (Rotiert das Bild und definiert „vorn“)
      • [x] Umgekehrt abbilden (Spiegelung links /rechts)
      • [x] Oben beginnen (legt den Mittelpunkt des Bildes fest)
      • [ ] Nach Polar
    3. Größe des Bildes Anpassen: Skalieren (3840*200)
    4. Inhalt ganz oben („Decke“) oder unten („Boden“) anordnen.
    5. ggf. einen Farbigen Balken oder Transparenz als Abgrenzungslinie ergänzen (erscheint als Kreis).
    6. Datei>Exportieren als… (Als PNG exportieren)
Weiterlesen

360°-Overlay oder Logo einfügen (Bottom/Top)

  1. Boden- bzw. Deckenlogo im Rektangularformat erstellen
  2. Boden- bzw. Deckenlogo in GIMP öffnen
  3. Alle 360°-Bilder in den Dialog „Ebenen“ einfügen (Drag & Drop)
  4. Bilder ggf. zensieren.
  5. Bild exportieren als JPG… (ebene für Ebene)
Weiterlesen

Marzipano-Rundgang

Marzipano: 360°-Rundgang anlegen

Bilder hochladen

  1. Öffnen Sie das Marzipano-Tool
  2. Klicken Sie auf "Start"
  3. Ziehen Sie Ihre 360°-Bilder per Drag & Drop in das Feld (Beispielbilder von insta360)
  4. Warten Sie den Upload ab.

Einstellungen im Menü links

  1. Bearbeiten Sie "Project Title" - und verändern Sie zu
    1. "[Name ihrer Musterwohnung/Beratungsstelle], [ORT], ([DATUM des Fotos])
    2. z.B. "SimDeC, St. Gallen (08.05.2021)"
  2. Deaktivieren Sie "Autorotate" im Menü links.
  3. Lassen Sie die die "View control buttons" deaktiviert
  4. Aktivieren Sie "Fullscreen button"

Einzelne Bilder optimieren

  1. Benennen Sie die Bilder um (Stift in der Panorama List - linker Bildschirmrand). Dieser Titel wird später im Rundgang angezeigt.
  2. Drehen Sie den Bildausschnitt so, wie initial im 360°-Rundgang angezeigt werden soll.
  3. Klicken Sie auf "Set inital View"

Bildreihenfolge optimieren

  1. Löschen Sie Bilder, die nicht angezeigt werden sollen
  2. Verschieben Sie die Bilder in der Reihenfolge, in der Sie im Rundgang erscheinen sollen.
  3. Setzen Sie ggf. Link-Hotspots, falls Sie Navigationspfeile in Ihrem Rundgang haben möchten.
    1. Der Link-Hotspot wird immer in der Mitte der Ansicht platziert.
    2. Sie können ihn per Drag & Drop verschieben.
    3. Wählen Sie den Raum aus, in den der Hotspot führen soll.

Exportieren

  1. Klicken Sie auf "Export", um den Rundgang zu exportieren.
  2. Es lädt eine ZIP-Datei herunter.

Weiterlesen

Marzipano: Inhalte setzen und anpassen (via Code)

Weil wir Korrekturen, Ergänzungen und Aktualisierungen über den Code besser umsetzen können als in der Grafischen Nutzeroberfläche des Marzipano-Tools, setzen wir die Inhalte durch die Bearbeitung der folgenden Dateien:

  • data.js - Benennung der Räume in der seitlichen Navigationsleiste, Navigationspunkte und Informationspunkte,
  • index.html - Raumbezogener Text in der Titelleiste, Reihenfolge der Räume
  • index.js - Funktionen wie Autorotation etc.
  • style.css - Optische Erscheinung

Wir sichern die Original-Dateien im eigens dazu erstellten Ordner "originale".

  1. Obere Titel-Liste der Marzipano-Website anpassen:
    1. index.html öffnen. Wir nutzen dazu Notepad++ (oder anderem HTML-fähigem Texteditor), weil durch farbige und strukturelle Hervorhebungen der Code besser lesbar ist.
    2. Namen und Reihenfolge der Räume unter <div id=“sceneList“> anpassen.
    3. Raumbezeichnung und Datum der Aufnahme zwischen <li class="text"> und</li> ändern.
  2. Seitliche Navigationsleiste anpassen
    1. data.js mit Notepad++ (oder anderem HTML-fähigem Texteditor) öffnen (ggf. vorher Sicherungskopie erstellen!)
    2. Namen der Räume in "name": "RAUMNAME", anpassen (Umlaute aus Fotos wurden entfernt). Der Text steht in Anführungszeichen und wird von einem Komma gefolgt.
  3. Info-Hotspots ergänzen oder verändern
    1. Marzipano-Tabelle (.xlsx) öffnen und Inhalte in der Tabelle ergänzen/anpassen
    2. Spalte M der Tabelle auswählen und kopieren.
    3. data.js mit Notepad++ (oder anderem HTML-fähigem Texteditor) öffnen (ggf. vorher Sicherungskopie erstellen!)
      1. Inhalt durch den Inhalt der Spalte M ersetzen
      2. data.js speichern


Ergebnis: ZTM 360°-Rundgang
Anmerkungen: In der style.css sind noch kleinere optische Mängel, die bei Gelegenheit noch angepasst werden. [Stand: 12/2018]

Erläuterungen zum Code

Einzelne Informations-Punkte sind mit folgendem (exemplarischen) Code eingebettet Spalte M in der Tabelle:

{
          "yaw": 0.896662903212087,
          "pitch": -0.226620095063639,
          "title": "Telemedizinische Voranmeldung",
          "text": "
	Digitale Vernetzung von Rettungsdienst, Krankenhaus und Leitstelle Digitale Vernetzung von Rettungsdienst, Krankenhaus und Leitstelle"
},

  • yaw: Bedeutet die Links-Rechts-Verschiebung im Bild (X-Achse), kann Werte von -π bis +π annehmen (-3,14... bis +3,14...)
  • pitch: Bedeutet die Verschiebung von Oben nach unten (Y-Achse), kann die Werte von -½π bis +½π annehmen (-1.57 bis +1.57)
  • title: Ist der Text, der in der Titelzeile des Info-Punkts steht
  • text: Ist der Text, der in der Info-Box steht, wir verwenden folgenden Aufbau:
    • <a href='https://...'>: Enthält den Link zum angestrebten Ziel.
      • <img src='https://...'>: bettet ein Bild als klickfläche ein
      • ...Text... bettet Text als Klickfläche ein
    • </a> schließt ab, was als angeklickt werden kann, um zum Link zu führen

Dankeschön!

Vielen Dank an Olaf für die Überarbeitung des Tabellencodes in Spalte M und Martin für den ersten Vorschlag, der dazu geführt hat. Die ursprüngliche Tabelle vom 28.12.2018 erforderte noch ein "Suchen und Ersetzen" im Code:

  • Alle Anführungszeichen [„] entfernen: Suchen und ersetzen [„] -> []; ALLE
  • Alle [|] durch [„] ersetzen: Suchen und ersetzen [|] -> [„]; ALLE

Jetzt kann direkt kopiert werden. Vielen Dank!

Weiterlesen

Marzipano: Audio einbetten

Vielen Dank für die inspirierende Nachfrage, wie Audio eingebettet werden kann. Dies ist möglich durch eine Einbettung folgender Argumente im „text:“-Bereich des Info-Hotspots. Die Darstellung erscheint wie folgt:

  • Verzeichnis "audio" erstellen (in dem Pfad, in dem auch die index.html ist. Auf gleicher ebene wie die Ordner "img", "tiles" und "vendor")
  • Audiodatei in den ordner "audio" Kopieren (Beispiel: "FILENAME.WAV", "FILENAME.MP3", "FILENAME.OGG")
  • Das Audio-Argument je nach Datei-Typ im "text:"-Bereich ergänzen:

MP3-Dateien:

<audio controls><source src=’audio/FILENAME.MP3′ type=’audio/mp3′>Your browser does not support the audio element.</audio>

WAV-Dateien:

<audio controls><source src=’audio/FILENAME.WAV‘ type=’audio/wav‘>Your browser does not support the audio element.</audio>

OGG-Dateien:

<audio controls><source src=’audio/FILENAME.OGG‘ type=’audio/ogg‘>Your browser does not support the audio element.</audio>


Der komplette Code für den Info-Hotspot lautet:

{
	„yaw“: 0.896662903212087, 
	„pitch“: -0.226620095063639, 
	„title“: „Telemedizinische Voranmeldung<br />„, 
	„text“: „<audio controls><source src='audio/FILENAME.WAV' type='audio/wav'>Your browser does not support the audio element.</audio>„
},

Weiterlesen

Marzipano: Bilddaten aktualisieren

Bilddaten mussten wir mit der Anschaffung des Vertikalbeets in der ALADIEN-Musterwohnung aktualisieren. Der Prozess beschreibt das Vorgehen, wenn Bilder mit anderem Standort und/oder anderer Nord-Süd-Ausrichtung erstellt wurden.

  1. Datensicherung: Im bestehenden Marzipano-Rundgang den Ordner "app-files/tiles" sichern, z.B. kopieren nach "app-files/tiles_2020-01-01"
  2. 360°-Bilder erstellen, stitchen ggf. zensieren und vorbereiten
    1. Szenario 1: Die Bilder erhalten den gleichen Namen wie im Ursprünglichen Rundgang, z.B. "Bad.jpg" oder werden im Marzipano-Rundgang angepasst.
    2. Szenario 2: Die Bilder erhalten einen neuen Namen, z.B. "Bad_2020-05-12"
  3. Marzipano-Rundgang erstellen und herunterladen.
  4. Zusammenführen: die Inhalte des aktuellen "tiles" Ordners in den bestehenden "tiles"-Ordner kopieren.
    1. Szenario 1: Bestehende Unterordner und Dateien werden ersetzt und überschrieben. Die Bilder sind im Rundgang sofort aktualisiert.
    2. Szenario 2: Neue Unterordner und Dateien werden ergänzt. Die Unterordner müssen in den Rundgang eingetragen werden:
      1. in data.js nach "id": "
      2. in index.html nach <a href="#" class="scene" data-id="
  5. Aktualisieren der Informations-Punkte über die Marzipano-Tabelle (.xlsx).

Weiterlesen

Marzipano: Logo

1) Logo (z.B. „Logo.png“) in den Ordner „/img“ kopieren.

2) style.css am Dateiende ergänzen:

/* Von uns ergänztes Logo */
	

.Logo { position: absolute; bottom: 30px; right: 30px; width: 60px; height: 60px; }

  • /* ... */: Markiert Kommentare im Code
  • bottom/top: Abstand von oben bzw. unten
  • right/left: Abstand von links bzw. rechts
  • width/heigt: Größe des Logos

3) Index.html am Dateiende vor </body> ergänzen

	< !--Logo von WiQQi eingefügt--- >
	< a href="https://www.wiqqi.de" target="_blank" >< img class="Logo" src="img/Logo.png" >< /a >

  • Die Leerzeichen nach bzw. vor "<" ">" müssen in der Original-Datei entfernt werden.

Ergebnis: Das Logo (unten rechts) ist immer an der gleichen Stelle des Bildschrims und führt als Link zu www.wiqqi.de


Weiterlesen


1) Datei data.js öffnen

2) nach "autorotoate" suchen (im Dateiende

  "name": "Project Title",
"settings": {
"mouseViewMode": "drag",
"autorotateEnabled": false,
"fullscreenButton": false,
"viewControlButtons": true
}


  • "autorotateEnabled": false, : Das Bild dreht, bis die Rotation deaktiviert wird.
  • "autorotateEnabled": false, : Das Bild muss zum drehen manuell aktiviert werden.

Offene Frage:

Kann das Autorotate-Bedienelement auch ausgeblendet werden? In der index.js ist dazu folgende Code-Zeile:

 var autorotateToggleElement = document.querySelector('#autorotateToggle');




Weiterführend:

Das Icon der Schaltfläche ist in der index.html verlinkt
<a href="#" id="autorotateToggle">
<img class="icon off" src="img/play.png">
<img class="icon on" src="img/pause.png">
</a>



Das Design der Autorotate-Schaltfläche ist in der style.css hinterlegt

#autorotateToggle {
display: block;
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
padding: 5px;
background-color: rgb(0,192,243);
background-color: rgba(0,192,243,1.0);
}

.mobile #autorotateToggle {
width: 50px;
height: 50px;
}

/* If there is a fullscreen button, autorotate must placed a bit to the left */
body.fullscreen-enabled #autorotateToggle {
right: 40px;
}

body.fullscreen-enabled.mobile #autorotateToggle {
right: 50px;
}

#autorotateToggle .icon {
position: absolute;
top: 5px;
right: 5px;
width: 30px;
height: 30px;
}

.mobile #autorotateToggle .icon {
top: 10px;
right: 10px;
}

#autorotateToggle .icon.on {
display: none;
}

#autorotateToggle .icon.off {
display: block;
}

#autorotateToggle.enabled .icon.on {
display: block;
}

#autorotateToggle.enabled .icon.off {
display: none;
}

Weiterlesen

Marzipano: Video einbetten

Danke an Banu für den folgenden Code:

Ich habe zusätzlich in index.html diese eingefügt, dann funktionierte alles.

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<myWebView.settings.domStorageEnabled = true>

<myWebView.settings.javaScriptCanOpenWindowsAutomatically = true>

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-">



Vide einbetten: Demo & Code von Marzipano

Weiterlesen

Fehler

Marzipano: Schwarzer Bildschrim (lokal)

Das in den Tutorials demonstrierte lokale Ansehen des Marzipano-Rundgangs führt inzwischen zu einem Fehler. Die Bildinhalte werden nicht dargestellt, sie sind schwarz. Steuerungselemente, Infopunkte und Menüleiste werden angezeigt.

  • Hintergrund ist offenbar (wenn Fehler durch eigene Veränderungen ausgeschlossen werden können) in erster Linie eine Veränderung der Sicherheitsstandards im Browser: WebGL kann nicht mehr lokal abgerufen werden (Quelle: gitmemory).
  • Lösungsoptionen:
    • Microsoft-Edge-Browser verwenden: Hier tritt das Problem nicht auf.
    • Microsoft Internet Explorer verwenden: "Geblockte Inhalte zulassen" ("Das Ausführen von Scripts bzw. ActiveX-Steuerelementen wurde für diese Website eingeschränkt") (Danke an Alex via YouTube)
    • Dateien auf einen Server zu Laden. Updates in data.js etc. werden dann direkt im Web-Editor umgesetzt. Alternativ werden genau diese veränderten Dateien hochgeladen.
    • Besser und bequemer ist es, einen LocalHost zu installieren. Eine Möglichkeit hierzu ist XAMPP oder Ähnliche (wir haben das bisher noch nicht getestet - Über WiQQi haben wir die Rückmeldung bekommen, dass das Funktioniert)
  • "XAMPP-Folgefehler": Veränderungen im Code werden nicht sofort erkannt - XAMPP muss frisch gestartet werden, um Veränderungen zu übernehmen.
    • Das könnte auch unabhängig von XAMPP am Browser-Cache liegen. Ein erzwungenes Neuladen (z.B. durch SHIFT+F5, SHIFT+Reload-Taste etc.) könnte den Neustart von XAMPP beheben.
    • Wir freuen uns über Erfahrungen und Empfehlungen, dieses Problem zu lösen.
Weiterlesen