Logo WIQQI
Pflegen. Wissen. Teilen.

Create a 360° tour

Create a 360° tour

Problem: The right terms are crucial for successful research - this makes it difficult to get started with new topics.
Objective: We want to anchor knowledge spatially and make it accessible regardless of the conceptual knowledge.
Method: Knowledge is anchored in 360° tours at real locations of cooperating partners.
tl;dr: WiQQi makes knowledge tangible
Keywords: 360°, spatial, marzipano, tour, VR, virtual reality

Backgrounds and selected examples

Why is WiQQi concerned with 360 ° photography?

360 ° documentation enables quick documentation in the consultation.


WiQQi deals with 360 ° technologies, also under the term "tele care". In the individual case consultation, we had taken 2D and 360 ° photos of a consultation object for research purposes and in consultation with the persons concerned. When the research raised the question of whether a floor-ceiling pole can be used, a glance at the 360 ° photo was sufficient to determine that the ceiling was neither suspended nor paneled. So we had a benefit from the implicitly documented information.

In our 360° tours we combine the knowledge from the WiQQi database with real rooms. This is how we make knowledge about spatial access tangible.

In addition to the ethical and technical questions and limits already known from 2D documentation, there are further ones that derive from the more extensive documentation of implicit knowledge.

Exaples for 360° Usecases:

360° example: visual signaling

360 ° technology makes it possible to relive situations - lamps tested here - regardless of location.

Using the example of visual signaling using a flash bell, we were able to compare different solutions regardless of location and thus advance the development of needs-based solutions.Show me the Study...

The video for visual signaling was viewed 54 times in the first 365 days. The total playback time is 1 hour (average: 1:09 minutes). The video saved several hours of driving time in the project team.

360° example: reflection

360° technologies can be used for comprehensive documentation and reflection. Here: Delayed communication.

Documentation using 360° technology enables a comprehensive reflection of what is happening. As part of the QuartrBack project, we implemented training in dealing with delayed communication.

The simulation of delayed communication was called up 31 times in the first 365 days. The total playback time is 0.7 hours (average: 1:37 minutes).

360° example: demonstration

360° technologies enable fast documentation and extensive documentation.

In the QuartrBack project, we documented the project idea with the implementation of the functional demonstrator in a 360° video.



The QuartrBack demonstration was viewed 18 times in the first 365 days. The total playback time is 0.4 hours (average: 1:14 minutes).

360° example: Developing implicit interest

Heatmaps allow conclusions to be drawn about implicit knowledge. They will no longer be offered by YouTube as of January 1, 2020

Implicit knowledge can be tapped into in 360 ° videos. The basis is the hypothesis that objects that arouse interest are also brought into focus optically. These impressions can be visualized and interpreted using heat maps. As a consequence, topics that are interpreted as inquiries or needs can be deepened. (Note from January 01, 2020: This function has been deactivated on YouTube)

The virtual tour of the ALADIEN model apartment was viewed 345 times in the first 365 days. The total playback time is 25.5 hours (average: 4:25 minutes).

Create 360° images

Create 360° images

The pictures of the ALADIEN model apartment were created with the Insta360 Pro (Version 1). We have paid attention to the following things:

  1. Check camera height (165cm): We tried different heights (160-170cm). The height of 165cm is the least likely to lead to the feeling of being too close to the ceiling or the floor for n = 2 people.
  2. Check camera tilt (the tilt can also be compensated in the stitcher using position data)
  3. Select camera position in the room.
  4. If necessary, check the north-south orientation of the camera. (For censored photos, make sure that the focus of the camera (center of the image) is on the censored area. Otherwise, the Gaussian blur creates a cut edge on the left and right edges of the image).


Alternatives:

  • Alternative 360 ° cameras: The YouTube channel The 360 Guy was particularly helpful for choosing a suitable camera
  • A 360 ° panorama head on the tripod allows you to take seamless pictures even with a 2D camera. (Moving objects here lead to undesirable effects more than with 360 ° cameras)
  • There are also apps that allow 360 ° photography. (Moving objects here lead to undesirable effects more than with 360 ° cameras)

Stitch 360° images

We use the insta360 Pro Stitcher.

  1. Select Images
  2. Settings:
    • 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

Alternatives:

  • Hugin Panorama (Open Source, Cross-Plattform) and many others
  • Stitching Apps

Create a 360° logo: Bottom / Top

Logos or images on the poles ("floor", "ceiling") of VR films can be inserted as an overlay in the rectangular video if they are distorted accordingly in advance. They can be used to hide the tripod. Shadows cast by the tripod may remain.

  1. Select photo / logo and open with GIMP.
  2. Open content with the circle selection or cut out
  3. Open empty canvas (3840 * 1920 pixels) with a transparent background
  4. Filters> Distort> Polar Coordinates
    • For logos on the "ceiling":
      1. Circle depth: 100%
      2. Offset angle: 0 (rotates the image and defines "front")
      3. [x] Show vice versa (reflection left / right)
      4. [x] Start at the top (defines the center of the picture)
      5. [ ] According to Polar
    • For logos on the "floor":
      1. Circle depth: 100%
      2. Offset angle: 0 (rotates the image and defines "front")
      3. [x] Show vice versa (reflection left / right)
      4. [x] Start at the top (defines the center of the picture)
      5. [ ] According to Polar
  5. Resize Image: Scale (3840 * 200)
  6. Arrange the contents at the top ("ceiling") or at the bottom ("floor").
  7. If necessary, add a colored bar or transparency as a demarcation line (appears as a circle).
  8. File> Export as ... (Export as PNG)

Insert 360° overlay or logo (bottom/top)

  1. Create floor or ceiling logo in rectangular format
  2. Open the floor or ceiling logo in GIMP
  3. Insert all 360 ° images in the "Layers" dialog (drag & drop)
  4. If necessary, censor images
  5. Export image as JPG ... (layer by layer)

Marzipano tour

Marzipano: create a 360° tour

  1. Open the Marzipano-Tool Website.
  2. Add 360° images using drag & drop (Sample images von insta360)
  3. Set Initial Views
  4. Export

Marzipano: Set and adjust content (via code)

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

Marzipano: Embed audio

Thank you for the inspiring question about how audio can be embedded. This is possible by embedding the following arguments in the "text:" area of the info hotspot. The representation appears as follows:

  • Create directory "audio" (in the same path as index.html. On the same level as the folders "img", "tiles" and "vendor")
  • Copy the audio file to the "audio" folder (example: "FILENAME.WAV", "FILENAME.MP3", "FILENAME.OGG")
  • Add the audio argument in the "text:" area depending on the file type:

MP3 files:

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

WAV files:

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

OGG files:

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


The complete code for the info hotspot is:

 { „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>„ }, 

Marzipano: Update image data

We had to update image data with the purchase of the vertical bed in the ALADIEN model apartment. The process describes the procedure when images with a different location and/or a different north-south orientation were created.

  1. Backup: Back up the "app-files/tiles" folder in the existing Marzipano tour, e.g. copy to "app-files/tiles_2020-01-01"
  2. create, stitch, censor possibly and prepare 360° images
    1. Scenario 1: The pictures are given the same name as in the original tour, e.g. "Bad.jpg" or are adapted in the Marzipano tour.
    2. Scenario 2: The images are given a new name, e.g. "Bad_2020-05-12"
  3. Create and download the marzipano tour.
  4. Merge: copy the contents of the current "tiles" folder into the existing "tiles" folder.
    1. Scenario 1: Existing subfolders and files are replaced and overwritten. The photos are immediately updated in the tour.
    2. Scenario 2: New subfolders and files are added. The subfolders must be entered in the tour:
      1. in data.js after "id": "
      2. in index.html after <a href="#" class="scene" data-id="
  5. Aktualisieren der Informations-Punkte über die Marzipano-Tabelle (.xlsx).

Marzipano: logo

1) Copy the Logo (e.g. „Logo.png“) into the „/img“ folder.

2) Add to style.css at the end of the File

 /* Logo added by WiQQi */ 

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

  • /* ... */: Marks comments in the code
  • bottom/top: distance from top or bottom
  • right/left: distance from left or right
  • width/heigt: size of the logo

3) Add to index.html at the end of the file before </body>

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

  • The spaces after or before "<" ">" must be removed from the original file.

Result: The logo (bottom right) is always in the same place on the screen and leads to www.wiqqi.de as a link


Errors

Marzipano: Black View Error (locale)

The local reputation of the Marzipano tour demonstrated in the tutorials has now led to an error. The image content is not shown, it is black. Control elements, info points and menu bar are displayed.

  • The background is obviously (if errors can be excluded by own changes) primarily a change in the security standards in the browser: WebGL can no longer be accessed locally (source: gitmemory).
  • Solution options:
    • Use Microsoft-Edge-Browser: The problem does not occur.
    • Use Microsoft Internet Explorer: "Allow Blocked Content" (Thanks to Alex via YouTube)
    • Upload the files to a server. Updates in data.js etc. are then implemented directly in the web editor. Alternatively, exactly these modified files are uploaded.
    • It is better and more convenient to install a LocalHost. One way to do this is XAMPP or similar (we have not tested this yet - but it is confirmed by a WiQQi-User).
  • "XAMPP consequential error": Changes in the code are not recognized immediately - XAMPP must be restarted in order to apply changes.
    • This could also be due to the browser cache, regardless of XAMPP. A forced reloading (e.g. by SHIFT + F5, CTRL + R, SHIFT + Reload key etc.) could fix the restart of XAMPP.
    • We look forward to experiences and recommendations to solve this problem.

We look forward to experiences and recommendations to solve this problem.

© 2020 WiQQi