Marzipano: Inhalte setzen und anpassen (via Code)

Marzipano: Inhalte setzen und anpassen (via Code)

Wir ergänzen die Inhalte und Namen über den Code, den wir mit einer Tabelle automatisiert erzeugen.

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!