loading different navigation buttons depending on device type

Apologies in advance if this has already been covered, I spent several hours looking through previous posts but could not find a definitive answer.

I currently use the following html code to load a different xml file for different devices:

if( viewer.isDevice("iPhone|Android") )
viewer.addVariable("xml", "pano-iphone.xml");
else
if( viewer.isDevice("iPad") )
viewer.addVariable("xml", "pano-ipad.xml");
else
viewer.addVariable("xml", "pano-pc.xml");
viewer.passQueryParameters();
viewer.embed();

Ideally I'd like to use the same xml file but load a different xml file 'inside' which had different buttons for various devices. For example zoom in/out for PC/flash but no button for iPad etc.

So I tried putting all the buttons into a separate xml file and adding:

<include url="buttons-pc1.xml" />

Which works fine, my problem is that I'd ideally like to have something like this in the xml file:

if isDevice("iPhone|Android") include phone-android-buttons.xml
else
if isDevice("iPad") include ipad-buttons.xml
else
include pc-buttons.xml

Now I know this can't be done with <include> as it is parsed when the xml is first read.

So my questions is what is the 'best practice' way of supporting different button layout 'skins' for different devices.

thanks in advance for help.

Tim

Hi Andrey

Thanks for your suggestion. I added the includes as below:

<krpano version="1.0.8" onstart="startup();">

<!-- Licensed to -->
<!-- Copyright Trek Wireless Ltd 2012 -->
<!-- -->

<action name="startup">

if(scenetoload === null, set(scenetoload,pano3));

loadscene(get(scenetoload),blend(4));

</action>

<action name="rotate-on">
set(autorotate.enabled,true);
set(plugin[rotate-on-button].visible,false);
set(plugin[rotate-off-button].visible,true);
</action>

<action name="rotate-off">
set(autorotate.enabled,false);
set(plugin[rotate-on-button].visible,true);
set(plugin[rotate-off-button].visible,false);
</action>

<!-- disable the progress bar -->
<progress showload="none" showwait="none" />

<!-- hotspot styles (for Flash and HTML5) -->

<!-- text style for hotspot hovering -->
<textstyle name="hotspottextstyle"
font="Arial" fontsize="16" bold="true" italic="true" textcolor="0xFFF7EF" background="false" border="false"
alpha="1" blendmode="layer" effect="glow(0x000000,0.5,4,3);dropshadow(4,45,0x000000,4,0.66);"
origin="cursor" edge="bottom" textalign="left" xoffset="0" yoffset="-3" noclip="true" showtime="0.1" fadetime="0.25" fadeintime="0.1"
/>

<!-- ** pano3 Entrance ********************************************************************************************** -->

<scene name="pano3" title="pano3">

<view limitview="offrange" hlookat="40" vlookat="0" vlookatmin="-90" vlookatmax="90" fovtype="MFOV" fovmax="85" maxpixelzoom="4.0" />

<preview url="../images/preview/pano3_preview.jpg" />

<image>
<left url="../images/pc-med-res/pano3_l.jpg" />
<front url="../images/pc-med-res/pano3_f.jpg" />
<right url="../images/pc-med-res/pano3_r.jpg" />
<back url="../images/pc-med-res/pano3_b.jpg" />
<up url="../images/pc-med-res/pano3_u.jpg" />
<down url="../images/pc-med-res/pano3_d.jpg" />
<mobile>
<left url="../images/iphone/pano3_l.jpg" />
<front url="../images/iphone/pano3_f.jpg" />
<right url="../images/iphone/pano3_r.jpg" />
<back url="../images/iphone/pano3_b.jpg" />
<up url="../images/iphone/pano3_u.jpg" />
<down url="../images/iphone/pano3_d.jpg" />
</mobile>
<tablet>
<left url="../images/ipad/pano3_l.jpg" />
<front url="../images/ipad/pano3_f.jpg" />
<right url="../images/ipad/pano3_r.jpg" />
<back url="../images/ipad/pano3_b.jpg" />
<up url="../images/ipad/pano3_u.jpg" />
<down url="../images/ipad/pano3_d.jpg" />
</tablet>
</image>

<include url="buttons-ipad.xml" devices="iphone" />
<include url="buttons-ipad.xml" devices="ipad" />
<include url="buttons-pc.xml" devices="flash" />

<autorotate enabled="true"
waittime="2.0"
accel="1.0"
speed="-3.0"
horizon="0.0"
tofov="off"
/>

</scene>

<!-- ******************************************************************************************************* -->

</krpano>

It looks like the last <include overwrites the previous ones. ie as above buttons-pc.xml get displayed, but if I put buttons-ipad.xml as the last entry instead then on both PC and iPad) buttons-ipad.xml gets displayed.

Any ideas as it looks like you cannot combine <include with devices=

thanks

Tim

Using krpano-1.0.8.14-2012-02-20

rgds

Tim

Hi Andrey

When I started testing I copied an old tour with the previous krpano version

Just copied across the latest krpano files and it is now working

Thanks for jogging my memory re versions

So for anyone else looking...

<include url="buttons-ipad.xml" devices="iphone" />
<include url="buttons-ipad.xml" devices="ipad" />
<include url="buttons-pc.xml" devices="flash" />

does work with krpano-1.0.8.14-2012-02-20

thanks again

Tim