loading different navigation buttons depending on device type

trek · April 15, 2012 at 11:32 PM

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:

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

Sudarchikov Andrey · April 16, 2012 at 5:41 AM

Hi!
better use devices attribute in include tag.
example:
include url="iphones_kin.xml" devices="iphone"
include url="ipad_kin.xml" devices="ipad"
include url="default_kin.xml" devices="flash"

docu https://krpano.com/docu/xml/#devices-notes

Regards
Andrey

trek · April 16, 2012 at 9:47 AM

Hi Andrey

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

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>

<progress showload="none" showwait="none" />

<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"
/>

</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

Sudarchikov Andrey · April 16, 2012 at 11:58 AM

What krpano version?
It must work as in your xml, all is right.

trek · April 16, 2012 at 12:08 PM

Using krpano-1.0.8.14-2012-02-20

rgds

Tim

Sudarchikov Andrey · April 16, 2012 at 12:16 PM

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

it must work.
Check your XML files.

Or share test example.

Andrey

trek · April 16, 2012 at 12:29 PM

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...

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

thanks again

Tim

Participate now!