Logo WIQQI
Pflegen. Wissen. Teilen.
Marzipano: Set and adjust content (via code)

Marzipano: Set and adjust content (via code)

We add the content and names to the code, which we generate automatically with a table.

Because we can implement corrections, additions and updates via the code better than in the graphical user interface of the Marzipano tool, we set the content by editing the following files:

  • data.js - naming the rooms in the side navigation bar, navigation points and information points,
  • index.html - Room-related text in the title bar, order of the rooms
  • index.js - functions like autorotation etc.
  • style.css - Optical appearance

We backup the original files in the specially created folder "originale".

  1. Header: Adjust the menu-list
    1. Open index.html. We use Notepad++ (or another HTML-capable text editor) because the code is easier to read through colored and structural highlights.
    2. Adjust the name and order of the rooms: <div id=“sceneList“>
    3. Change room name and date of admission between <li class="text"> and</li>
  2. Adjust the side navigation bar
    1. open data.js with Notepad++ (or another HTML-capable text editor) (if necessary, make a backup copy beforehand!)
    2. Change the name of the rooms in "name": "RAUMNAME", anpassen (umlauts from photos have been removed). The text is in quotation marks and is followed by a comma.
  3. Add or change info hotspots
    1. Open the Marzipano table (.xlsx) and add / adapt the content in the table
    2. Select and copy column M of the table.
    3. open data.js with Notepad++ (or another HTML-capable text editor) (if necessary, make a backup copy beforehand!)
      1. Replace content with the content of column M.
      2. Remove all quotation marks [„]: Search and replace [„] -> []; ALL
      3. Replace all [|] with [„]: Search and replace [|] -> [„]; ALL
      4. Save data.js


Result: ZTM 360° tour
Notes: There are still minor visual defects in the style.css, which may be adjusted as the occasion arises. [Status: 12/2018]

Explanation of the code

Individual information points are embedded with the following (exemplary) code column M in the table::

 { "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: means the left-right shift in the image (X-axis), can take values from -π to + π (-3.14 ... to +3.14 ...)
  • pitch: means the shift from top to bottom (Y-axis), can take the values from -½π to + ½π (-1.57 to +1.57)
  • title: Is the text that is in the title line of the info point
  • text: Is the text that is in the info box, we use the following structure:
    • <a href='https://...'>: Contains the link to the desired goal.
      • <img src='https://...'>: embeds an image as a click area
      • ...text... embeds text as a click area
    • </a>completes what can be clicked to lead to the link
© 2020 WiQQi