Summary
In this tutorial I will demonstrate how to set up an HTML block that detects whether or not the device is online and based on that detection either display a still image, in this case a call to action, or a live interactive map.
Download the Assets files at http://tonyredhead.photography/magplus/conassets.zip
Video Tutorial
Step-by-Step
1. Detection Code
To manage the detection download the Open Source code OnlineJS. A demo is online at http://pixelscommander.com/polygon/onlinejs and there is a link to download the latest version, OnlineJS-master at https://github.com/PixelsCommander/OnlineJS/archive/master.zip The file is only 98kb.
Once it's downloaded, extract the contents to a folder. Once extracted there will be a folder called "OnlineJS-master" which in turn contains 4 folders and some individual files. Rename this folder to Connection Status.
The extracted files in the OnlineJs-Master folder
Test the files by opening the index.html file in a browser. If you are connected an image of a green traffic light and the words 'YOU ARE ONLINE' will be displayed. Turn off or disable your internet connection and the traffic light will turn red and the word 'YOU ARE OFFLINE' will be displayed.
The OnlineJS page with Wifi turned on
The OnlineJS page with Wifi turned off
2. How does it work
It's very simple. Every so often the 'online' javascript checks to see it it can find a file hosted on the internet. There is a block of code in the index.html file that performs different functions based on the connection information passed on by the javascript code, if the connection is detected an image called "traffic_green.png" and the words 'YOU ARE ONLINE' are displayed. Alternatively if a connection can not be detected an image called "traffic_red.png" and the words 'YOU ARE OFFLINE' are displayed.
3. Set up the files
The only file that will be used from the download is the online.js file in the src folder. Create a new folder in Connection Status and name it Korsakov Map. Move the online.js file into Korsakov Map and delete all of the other files and folders.
Renamed Connection Status folder with Korsakov Map folder containing online.js
4. Applying OnlineJS to a Project
A perfect use for detection is the deployment of interactive maps in a project. If the device is connected then there isn't an issue displaying the map, but if there isn't a connection then nothing is displayed.
This simple project contains a single vertical with a Bing map. The source code has been obtained from www.bing.com/maps by searched on Korsakov and then the code sourced by selecting share and copying the embed code.
Sharing a Bing map
In this example I've modified the Bing map code to provide a simpler interface on the map itself so copy the korsakov_map.html file in the Assets folder to the Korsakov Map folder in Connection Status.
Korsakov Map folder containing korsakov_map.html and online.js
Test the file by opening it in a browser such as Safari or Chrome.
Testing the korsakov_map.html
5. Adding the Map to the Vertical
Open InDesign and select Open
In the Assets folder there is a project folder InDesign, containing a sample Korsakov.indd and Korsakov.idml file. Open the appropriate version into InDesign.
Apple iPad Mag+ Template
Select the rectangle on the A-Main Tower layer and open the Mag+ Object panel . Set the Object Type to HTML, point the URL to the korsakov_map.html in the Connection Status/Korsakov Map folder and check the 'Scale Contents to Fit Block' checkbox.
Mag+ Object window with URL link
In the Mag+ Vertical panel select Fast Review and preview the vertical on the iOS Simulator or iPad. The vertical loads and the map is displayed, Pinch and zoom can be used to see more detail. However if you disable the connection on the device all you will see is a blank hole where the map should display. (In some cases it may display a low resolution cached version of the map)
Reviewing the vertical on iOS Simulator showing initial view
Review on iOS Simulator showing pinch and zoom view
The same view on iOS without Internet connection
6. Detecting Connection
The best user experience is to display an image or message letting the viewer know that additional information is available to them if they connect their device to the internet. The following is a simple example and can be accomplished by using the code from OnlineJS.
Example of a simple message indicating that a connection is required.
By creating an image and configuring some files the map will be displayed if there is a connection and the "please connect" image there isn't a connection.
Using the files in the Assets/Finished Project folder follow the steps below.
Step 1: Copy the noconnect.png in the Finished Project to the Korsakov Map folder in Connection Status folder.
Alternative an image can be designed in InDesign and exported as a .png or created using other software, then savedinto the Korsakov Map folder and named noconnect.png
Step 2: Copy connectoff.html file in the Finished Project to the Korsakov Map folder in Connection Status folder.
The folder should contain the following files.
Completed project folder
Step 3: Open InDesign and review the file again on iOS Simulator or iPad. Turning on and off the internet connection will prompt the change in the page.
The files have been tested on both an iPad 3 and Nexus 7.
