Panotour - Advanced - Different interfaces for different devices

Panotour - Advanced - Creating custom hotspots > Panotour - Advanced - Creating text hotspots > Panotour - Advanced - Creating a custom control bar > Panotour - Advanced - Skins Folder > Panotour - Advanced - Different interfaces for different devices

Intro

This page will show you how to have different interfaces for your tours, depending on the device. More specifically, it will demonstrate three different options for showing a different interface on mobile:

• Create a second interface from Panotour Pro.
• Create a secondary tour specially for mobiles, and how to detect and redirect to the mobile version
• Creating device specific plugins, to be used directly from Panotour Pro*

*These changes will only be available for the KrPano plugins in Panotour. HTML5 plugins can't be modified this way. The concerned HTML5 plugins are listed here.

Requirements and Notes

• You need Panotour Pro to install and use customised plugins or to the edit the XML of your built tour.
• You have to be able to modify XML files. Although no knowledge of XML syntax is required for this tutorial, you need to have no fear of editing such files. The use of editors such as Notepad ++ or Sublimetext is recommended to view XML files clearly.

Option 1 - Create a second interface for specific devices

Useful if you want to use a different menu on different devices (for example, a Panorama Menu on desktop, and a Combobox on mobile devices).

1. Build a tour for desktop
2. Save the project as PROJECTNAME_desktop.kpt
3. In the same project, do your modifications to the interface and spots for mobile, and build the tour in the same directory
4. Save the project as PROJECTNAME_mobile.kpt (in case you need to make edits later)
5. Rename the index_skin.xml file of the mobile tour to index_skin_mobile.xml
6. Load the _desktop project again, and build
7. Make sure your index_skin_mobile.xml is still there
8. Open the index.xml file of the tour
9. Find the include of the index_skin.xml file. It looks like this :

  <!-- Plugins and Spot Styles -->
  <include url="%FIRSTXML%/index_skin.xml"/>

And change that line to:

  <!-- Plugins and Spot Styles -->
  <include url="%FIRSTXML%/index_skin.xml" devices="desktop"/>
  <include url="%FIRSTXML%/index_skin_mobile.xml" devices="mobile|tablet"/>

Option 2 - Use the Device Check plugin to disable certain plugins depending on the platform

See Michael Brüning's plugin Device Check.

Option 3 - Two tours on the same server with redirection

Step One - Building the two tours

1. Create a virtual tour directory : ptp25demo
2. Create your desktop tour
3. Build the desktop tour into the created directory (step 1) with index as filename
4. Save your project kpt (ptp25demo.kpt) and back it up (and also generated data)
5. Save your project kpt file with the mobile keyword (ptp25demo_mobile.kpt)
6. Create your mobile tour based on the desktop tour
7. In the build screen add a mobile subdirectory to the folder path : your/path/ptp25demo/mobile
8. Build the mobile tour into it with index as filename (note: the flash fallback can be unchecked)

Step Two - Creating the redirection

1. Into a text editor, open the ptp25demo/index.html file
2. Paste this javascript code under the "jQuery( document ).ready(function() {" javascript line :

var mobilecheck = function() {
                  var check = false;
                  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|awa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})
(navigator.userAgent||navigator.vendor||window.opera);
                  return check;
                }
 
 
            if(mobilecheck()){
                    window.location = "mobile/index.html";
 
 
        }

• If you want to include tablets into your redirect, see the code here: http://www.kolor.com/forum/viewtopic.php?f=91&t=32009&p=183769#p184228

Optional - Using the desktop tiles for your mobile tour

If you want to save on server space, you can edit the xml of the mobile tour to use the desktop tiles, which will avoid taking up double the space for nothing.

1. In a text editor, open the ptp25demo/mobile/indexdata/index.xml file (and, if VR mode needed, open the ptp25demo/mobile/indexdata/index_vr.xml file too) to edit them.
2. In the first <krpano> tag add the basedir="./../indexdata/ attribute
3. Replace in each <scene> tag the thumburl="%FIRSTXML/path/to/thumbnail" by thumburl="%BASEDIR%/path/to/thumbnail"
4. Replace in each <preview> tag the url="%FIRSTXML/path/to/preview" by url="%BASEDIR%/path/to/preview"
5. Replace in each <image> tag the url="path/to/tile" by url="%BASEDIR%/path/to/tile"
6. Once that is done, you can remove all the folders linked to panorama scenes in the ptp25demo/mobile/indexdata directory

Option 4 - Creating device specific plugins to use in Panotour Pro

Step One: Copying a template

1. Open Panotour Pro.
2. Go to Edit > Open Template System Directory. This will open a file explorer containing all the plugins and content that is available by default in Panotour Pro.
3. Open the plugins folder, and select a plugin to copy. In this tutorial we will be editing the Panorama Combobox plugin, so copy (Ctrl+C) that folder.

• 
• 
• 

Step Two: Pasting and renaming the template

1. Back to in Panotour Pro
2. Go to Edit > Open User Directory. This will open a file explorer containing all the custom plugins and content that you have added to Panotour Pro.
3. Open the plugins folder, paste (Ctrl+V) your copied template plugin, and rename it. I'm going to call my edited version Mobile-PanoramaCombobox.

• 
• 
• 

Step Three: Editing the xml

You have to edit the plug_info.xml so that your plugin can be opened in Panotour, it's only a few simple edits though.
Open the file in a text editor.

ID and Name

You have to change the plugin ID and name (description is optional) so that your plugin can be opened and used in Panotour Pro.

• The first line of the plug_info.xml will be:

<plugin id="panoramacombobox" category="tr:Menu" name="tr:Panorama Combobox" version="1.5" isGraphical="true" multipleInstance="true" description="tr:Drop down list containing the panoramas">

• So, for my new plugin, after edits it becomes:

<plugin id="mobilepanoramacombobox" category="tr:Menu" name="tr:Mobile-Panorama Combobox" version="1.5" isGraphical="true" multipleInstance="true" description="tr:Drop down list containing the panoramas">

Optional: Category

This edit is optional, you can edit the category if you want all your mobile-only plugins to be stored in the same place. If you do want to make this change then edit the first line of the document:

<plugin id="mobilepanoramacombobox" category="tr:NEW CATEGORY NAME HERE" name="tr:Mobile-Panorama Combobox" version="1.5" isGraphical="true" multipleInstance="true" description="tr:Drop down list containing the panoramas">

Replace "NEW CATEGORY NAME HERE" with the name of your choice.

Step Four: Editing the tmpl

Now we have to edit the template file (comboboxpanoramalist.tmpl in this example) to change the behavior of the plugin so that it only show up on mobiles.
Open the file in a text editor.

Specific devices parameter

The next step is to find the Events tags of the plugin, where you will be adding the devices attribute. This will tell the plugin that it will only appear on the device you've set.

• Original

<events name="{{plugname}}StartTourEvents" 
	onTourStart="set(layer[{{plugname}}].isStarted, true);{% if not project.startWithControlsHidden %}if(layer[{{plugname}}].isLoaded,{{plugname}}Show(););{% else %}{% if not p.hideonhidecontrols.value %}if(layer[{{plugname}}].isLoaded,{{plugname}}Show(););{% endif %}{% endif %}" 
	keep="true" />

• Edited

<events name="{{plugname}}StartTourEvents" 
	devices="mobile" 
	onTourStart="set(layer[{{plugname}}].isStarted, true);{% if not project.startWithControlsHidden %}if(layer[{{plugname}}].isLoaded,{{plugname}}Show(););{% else %}{% if not p.hideonhidecontrols.value %}if(layer[{{plugname}}].isLoaded,{{plugname}}Show(););{% endif %}{% endif %}" 
	keep="true" />

Other common options for the devices parameter are:

• devices="mobile|tablet" - for a plugin that only appears on mobiles and tablets
• devices="desktop" - for a plugin that only appears on desktop
• devices="desktop|tablet" - for a plugin that only appears on desktop and tablets

For more information on the devices attribute, you can have a look at the KrPano documentation here.

BACK TO: Documentation / Panotour Documentation