How To: CarouselViewer

How-To Set Up the rti.js CarouselViewer

Learn how to display a collection of Authentica visualizations with the rti.js CarouselViewer on any webpage.

By folowing this guide, you will create a viewer similar to this example viewer.

Preparation

  • Export your scenes from Authentica Creator using the 'Export for Web' button for each scene.
    This will produce a folder for each scene contaning configuration and data files.
  • Generate a thumbnail image for each exported scene. We recommend square sized images with a resolution in the range of 256x256 - 512x512 pixels.
  • In a text editor, create a JSON file - let's call it carouselConfig.json - with the following structure:
              [
  {
    "sceneURL": "/data/myWebExport1/fullConfig.json",
    "dataURL": "/data/myWebExport1/",
    "thumbnailURL": "/data/thumbnails/myWebExport1.jpg",
    "thumbnailName": "myWebExport 1"
  },
  {
    "sceneURL": "/data/myWebExport2/fullConfig.json",
    "dataURL": "/data/myWebExport2/",
    "thumbnailURL": "/data/thumbnails/myWebExport2.jpg",
    "thumbnailName": "myWebExport 2"
  },
  {
    "sceneURL": "/data/myWebExport3/fullConfig.json",
    "dataURL": "/data/myWebExport3/",
    "thumbnailURL": "/data/thumbnails/myWebExport3.jpg",
    "thumbnailName": "myWebExport 3"
  }
]
    For each exported scene, the following entries are expected:
    • sceneURL: The URL to the configuration file (fullConfig.json) of the exported scene.
    • dataURL: The URL to the data folder of the exported scene.
    • thumbnailURL: The URL to the thumbnail image of the exported scene.
    • thumbnailName: A name or title for the exported scene. This will be dispayed by the viewer as a tool-tip when hovering the thumbnail images.
    You may add any number of scenes to the array in the JSON file.
  • Download the newest version of the rti.js library from here, and unpack the .zip file.
  • Upload all the scene folders, the thumbnails, the carouselConfig.json file and the rti.js library files to your HTTP server, such that all folders and files can be accessed via the URLs defined in carouselConfig.json.

Minimal HTML example

      <!DOCTYPE html>
<html>
<head>

  <link href="/libs/rti.js/rtiCarouselViewer.v0.56.1.css" rel="stylesheet"></link>

  <script src="/libs/rti.js/rti.v0.56.1.min.js"></script>
  <script src="/libs/rti.js/rtiCarouselViewer.v0.56.1.min.js"></script>

</head>
<body>

  <div id="viewerContainer" style="width: 100%; height: 60vh;"></div>

  <script>

    var viewer = new RTICarouselViewer(
      {
        viewerContainer: "viewerContainer",
        configURL: "/data/carouselConfig.json"
      }
    );

  </script>

</body>
</html>