Changing image depending on device

VinzVideo · July 13, 2015 at 3:48 PM

Yes, I'm new, and getting headaches trying to understand code.
I have a tour with hotspots...these hotspots display still images instead of loading a new pano. I want to use different sized images depending on the device. Here's what I'm doing...

Code

<layer url="martin.jpg" keep="true" name="martin" y="-10" align="center" x="0" state="small" accuracy="1" capture="false" visible="false"  onclick="set(layer[martin].visible, false);"  />if(device.mobile, martin.url="martin_sm.jpg" );if(device.tablet, martin.url="martin_sm.jpg" );

Where "martin.jpg" is the large image, and "martin_sm.jpg" is a smaller version.
I'm testing on an Android tablet, but the smaller image doesn't display, only the large one. I honestly don't know what to try next.

Thank you!

Sudarchikov Andrey · July 13, 2015 at 4:07 PM

Hi!

Code

<hotspot
   ...
   linkedimg.mobile="someIphoneImageUrlHere"
   linkedimg.tablet="someIphoneImageUrlHere"
   linkedimg.desktop="someIphoneImageUrlHere"
   onclick="myOpenImageAction(get(linkedimg));
   ...
/>


<action name="myOpenImageAction">
    ... do something to open image ....
    ... where %1 will be url of image to open ...
    ... set(layer[img].url,%1); for example ...
</action>

Display More

VinzVideo · July 13, 2015 at 5:19 PM

Thank you.
I'm afraid to waste your time since I'm struggling with the code.
I tried what you suggested, putting it in tour.xml, using the tour editor...

Code

<!-- place your scene hotspots here -->		<hotspot name="spot1" style="skin_hotspotstyle" ath="-0.329" atv="0.554" linkedscene="martin"    linkedimg.mobile="martin_sm.jpg"   linkedimg.tablet="martin_sm.jpg"   linkedimg.desktop="martin.jpg"   onclick="myOpenImageAction(get(linkedimg)); />
<action name="myOpenImageAction">    switch(layer[get(linkedscene)].visible);    set(layer[get(linkedscene)].url,%1);</action>


	</scene>

I get an unterminated attribute error, but I don't see it.
Thanks.

VinzVideo · July 13, 2015 at 6:12 PM

OK, I found the syntax error, and there's no more parsing error.

However, it doesn't show the small image, it always shows the large one.
I changed the definition of all 3 device types to use the small image, so I can tell on my desktop if the code is working, without going to an Android device. But it is not working.
I couldn't figure out why my first coding attempt didn't work. I can't figure out why this doesn't work either.

Thanks.

VinzVideo · July 13, 2015 at 6:47 PM

Not sure if this is any progress...

I removed the hotspot style click event found in vtourskin.xml. I had that set to make the image layer visible.

Now when I click on the hotspot, I get a "download of (image) failed". And the image name is correct. The images are in the skin folder, right along with the xml files, so I don't know why it would fail.

t

VinzVideo · July 13, 2015 at 7:12 PM

OK, GOT IT!

It is absolutely necessary to remove the Hotspot Style click event in the vtourskin.xml file.
Also, the hotspot call is in tour.xml, which is in the root level, so that's why my images didn't download.

With the click even removed from vtourskin.xml, I won't be able to use a hotspot for a pano right now. For the time being, that's OK.

Thank you, Sudarchikov. It's a struggle, but it's the only way to learn.
But I still don't understand why my very first attempt wouldn't work.

Vinz

Sudarchikov Andrey · July 13, 2015 at 7:32 PM

Yes, you are right, style always rewrite attributes.
So, use it carefully
small advice, use different images for each case, for testing period.
Clear cash (it's often reload old code)
Glad i helps you a bit
good luck in krpano xml coding

Andrey

klaus.krpano · July 14, 2015 at 10:26 AM

Quote from Sudarchikov Andrey

style always rewrite attributes.

Just as quick side note - this will be changed in the next release.

Sudarchikov Andrey · July 14, 2015 at 8:41 PM

Quote from klaus.krpano

Just as quick side note - this will be changed in the next release.

Hm.. interesting...
how it will work?

klaus.krpano · July 15, 2015 at 10:26 AM

Hi,

it works as it originally should have worked and is often expected to work - the attributes defined at the xml element itself will overwrite the attributes defined in the <style>.

Additionally it will be possible to use style="..." for all xml elements (not just <plugin>, <layer> and <hotspot>).

Internally this works by moving the style resolving a level down to the xml parsing/resolving level. The style attribute and the <style> element are now an universal feature of the xml parser and not of the plugin/layer/hotspots elements.

Best regards,
Klaus

Sudarchikov Andrey · July 15, 2015 at 11:25 AM

Hi!
Ok i understand, but what if i want to "refresh" tag?
For example
layer[name].loadstyle(somestyle);
after some attributes changed
Is it rewrite attributes or leave as it is.
If rewrite with force reload style then Ok, but if not then it's a problem.
loadstyle method is very usefull
so, my opinion is
if style defined in attribute before tag parsed like <layer style="somestyle" ... />
then attributes will NOT be rewrited by style, BUT if used loadstyle method then rewrite attributes anyway.
That's is just first thoughts.

Andrey

klaus.krpano · July 15, 2015 at 12:03 PM

Hi,

loadstyle() will still work as it is.

From backward-compatibility-side the only the change is that the attributes that are defined at the xml element itself will overrule the attributes defined at the style element. In the most cases this change shouldn't make problems with existing code as the opposite way of defining the attributes wasn't working anyway.

The style resolving itself will only happen at xml parsing time (like now).

The order where the <style> element will be defined doesn't matter - the krpano xml parser takes care about all these relations, also when using get: or calc: values in the <style> or the xml element.

Best regards,
Klaus

sachagriffin · July 17, 2015 at 5:07 PM

That's great to hear. I always thought it was a little bit backwards when you compare it to how CSS works.

On thing that may be a good idea, is a way to have a way to have concatenated styles for ondown,onup,onclick.. basically action attributes

Examples:
You can have tooltips actions not interfere with other onovers.
Analytics calls don't replace your onclicks.
You can build a library of effects using styles. effects to scale up, move up, change backgrounds and be able to chain them all together.

Now of course you can do all these now, but you need some helper actions.

So basically a way to set in a style a way that existing attributes don't overwrite the style, but are simple added. And I guess you need to force and check for trailing semi-colons to prevent errors in existing attributes since it's not necessary to use semicolons for only one function call.

Participate now!