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
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.
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.
2. How does it work
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.
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.
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.
Test the file by opening it in a browser such as Safari or Chrome.
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.
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.
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)
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.
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.
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.