Prerequisite knowledge

  • A working knowledge of folio creation and using DPS interactive overlays in InDesign along with familiarity with JavaScript.

User level: All

Required Adobe products (retail)

Additional products (third-party/labs/open source)

  • HTML editor of choice

Sample files

By downloading software from the Adobe website you agree to the terms of our license agreement. Please read it before downloading.

 

Introduction

Many of our customers ask how to use DPS folios in kiosk mode, where the Custom Viewer app automatically resets itself to the page 1 of the first article of the desired folio after a period of inactivity. Some possible applications include:

  • Retail stores
  • Trade shows
  • Car dealerships
  • Art museums

In each of these cases, iPad is usually mounted in a stand that prevents the user from tapping the home button. Once the DPS app starts, the user cannot leave the context of the Viewer. Resetting the folio on a schedule has been a challenge. A previous article provided a method of resetting a folio using the Custom Viewer app’s CustomURL scheme, but there was no way to test it outside of a Custom Viewer app, and it was susceptible to timing issues. In R32, a new navigational directive has been added to navto:// that makes this process much easier.

 

Get Started with Slide Shows

The simplest way to control the delay before resetting your folio is to use the delay and interval settings in a Slide Show Overlay. In our example, we combine timing from a Slide Show Overlay with a simple JavaScript call in a Web Content Overlay that resets the folio. Also, JavaScript alone can be used to handle the timing, which would be required for an HTML article. We will show an example of that technique later in this article.

The basic timing obeys the following pattern:

  • Delay the start of the Slide Show.
  • Play the blank state(s) of the Slide Show with a delay and optionally with a cross fade.
  • Optionally delay the start of the web overlay using the Web Overlay delay.

When you add up all of those delays and slide intervals, you have a flexible and easy to manage the timer that requires little overhead and can be copied from article to article, or even stored in a library or as a Snippet to make it easy to re-use.

To use this technique, you will start by setting up the slideshow. The simplest Slide Show Overlay structure uses a two-state MSO comprised of two empty frames. The two states will be invisible to the reader and they can be small and tucked into a corner of the page.

Set the Slide Show to autoplay, and you can choose to delay the start of the Slide Show by up to 60 seconds. You can set the Interval to be up to 60 seconds as well, so that it gives you up to 2 minutes before the start of the second state of the Slide Show. You can also get some additional time by adding more states with empty frames to your MSO and by using the Cross Fade, which adds time for each state transition.

Next, you will add the reset code to your MSO timer. Keep the first state(s) of your MSO as an empty frame and the last state will contain the reset code in a Web Content overlay. If you have added more states to the MSO to extend the timer, make sure that you always have the HTML code on the last state of the MSO.

 

CrossFadeScreen
Figure 1. The MSO has three blank states with the reset code as its last state. The Slide Show overlay delays 4 seconds before firing the reset code: 1 second for the initial delay and 1 second for each of the three blank slides. Enabling cross fade adds that amount of time to the slide interval.
 
 

 

Setup the Web Content Overlay on your last state to point at an HTML file in a folder or use Object>Insert HTML… If you use an HTML file, put the JavaScript all by itself into the text file and save it to its own folder. You can find a sample HTML file called “SlideShowTimer.html” in the sample files at the top of this article. You only need one copy of the folder for your entire folio, but you can certainly make copies of the folder and its index.html file if necessary. If you use Object>Insert HTML… then ensure that the resulting Web Overlay’s transparency is set to 0 to prevent it from being visible prior to starting.

 

Java script with insert HTML
Figure 2. Example reset code using Object>Insert HTML…
 
 
Opacity
Figure 3. Set the opacity of the Web Overlay if you use Object>Insert HTML…
 
 

 

In either case, the Web Overlay should be set to Autoplay, and you can choose to delay it by up to 60 seconds. As a result, the maximum time that you can delay the reset without adding more empty states to the MSO or resorting to a JavaScript timer is 180 seconds, or 3 minutes. You can extend your timer to beyond 3 minutes by adding additional empty states in your MSO. You can see an example of using a slide show to control timing in the example files, in an InDesign file called “Sample page Slide Show.indd” or “Sample page Slide Show.idml.”

There are any number of options for what happens once the Web Overlay starts and the resetting begins. Here are two examples.

Reset to the first page of the first article of the folio:

<script> window.onload = function resetFolio(){ window.location.href = "navto://relative/reset"; } </script>

For a multi-folio app, you might want to reset to the App Library:

<script> window.onload = function resetFolio(){ window.location.href = "goto://ApplicationViewState/library"; } </script>

 

You can also use the goto:// syntax to open a custom store slot. Learn more about how to use navto:// and goto:// at the following help articles: 

natvo:// Help Article

goto:// Help Article

Place the Slide Show Overlay on the first page of every article to start the timer when the article is accessed. You need not put a copy on every page unless you are using button navigation to jump to a specific page on a specific article. In that case, you would need to include a copy of the Slide Show Overlay on each target page of any button that you include that’s not the first page of an article. For example, if your Table of Contents included a link to page 5 of an article, then you should include the Slide Show on page 5 of that article in addition to page 1 of that article in order to ensure that the timer will activate.

 

Use Web Content Overlays and JavaScript for More Advanced Options

If you need more robust timing options, then you can forgo the SlideShow options and use a Web Content Overlay with some JavaScript. Again, you can use a text file in its own folder or use Object>Insert HTML… to create the Web Content overlay. The following example code will delay 5000 milliseconds before resetting the folio.

 

<script> window.onload = setTimeout(function resetFolio(){ window.location.href = "navto://relative/reset"; },5000); </script>

 

The setTimeout function takes two arguments: the code you want to execute after the delay and the delay time (in milliseconds). For 200 seconds, for instance, you would adjust the delay parameter to 200000.

You can get really fancy with timers that automatically reset when you turn a page. In this case, you need to include a variable that keeps track of the time and a method to reset the timer when the overlay loads. The following example uses the setInterval function to increment a timer every second. You set the time limit in the timerLimit variable, and it counts in seconds, not milliseconds. This function can reside on every page of your article, so that it will reset the counter when the reader goes to the next page of an article. If you include it on every page in your folio, then the timer will reset on every page turn and article swipe. In order to ensure that the timer resets on every page turn, you need to ensure that the autostart of the Web Content overlay is set to zero. You can see an example of this code in an HTML file called “timer.html” in the example files. It is used in a Web Content Overlay in the example file called “Sample page HTML 1.indd” or “Sample page HTML 1.idml,” also in the example files.

 

<head> <script> timerLimit = 10000; // enter time in milliseconds function resetFolio() { window.location.href = "navto://relative/reset"; } window.onAppear = function() { var myTimer = window.setTimeout(function(){resetFolio();}, timerLimit); // You can remove the next line in production. It's a diagnostic tool to let you know the timer is working document.getElementById("Counter").value="Timer is running"; running = 1; }; window.onDisappear = function() { window.clearTimeout(myTimer); // You can remove the next line in production. It's a diagnostic tool to let you know the timer is working document.getElementById("Counter").value="Timer is stopped"; running = 0; }; </script> </head> <body> <!-- You can remove the next line in production. It's a diagnostic tool to let you know the timer is working--> <textarea cols="50" rows="2" id="Counter" placeholder="000"></textarea> </body>

 

Where to go from here

Kiosk type apps depend on the app taking some action when the app is idle. With the methods in this article, it is possible for a designer to create a kiosk experience in InDesign for their DPS folios. Once deployed, the folio will reset itself after a predetermined period of time, so that the next reader gets the full experience that the designer intended.

Comments are currently closed as we migrate to a new commenting system. In the interim, please provide any feedback using our feedback form. Thank you for your patience.