You are not logged in.

Changing image depending on device

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

VinzVideo

Beginner

  • "VinzVideo" started this thread

Posts: 37

  • Send private message

1

Monday, July 13th 2015, 3:48pm

Changing image depending on device

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

Source code

 
1

<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

Professional

Posts: 1,082

Location: Russia, Kaliningrad

  • Send private message

2

Monday, July 13th 2015, 4:07pm

Hi!

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<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>
VRAP - desktop VR content player based on krpano.
Common tasks in one place in one click! Discussion thread
DOWNLOAD for MAC
DOWNLOAD for WIN

VinzVideo

Beginner

  • "VinzVideo" started this thread

Posts: 37

  • Send private message

3

Monday, July 13th 2015, 5:19pm

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

Source code

 
1
2
3
4

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

Beginner

  • "VinzVideo" started this thread

Posts: 37

  • Send private message

4

Monday, July 13th 2015, 6:12pm

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

Beginner

  • "VinzVideo" started this thread

Posts: 37

  • Send private message

5

Monday, July 13th 2015, 6:47pm

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

Beginner

  • "VinzVideo" started this thread

Posts: 37

  • Send private message

6

Monday, July 13th 2015, 7:12pm

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

Professional

Posts: 1,082

Location: Russia, Kaliningrad

  • Send private message

7

Monday, July 13th 2015, 7:32pm

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
VRAP - desktop VR content player based on krpano.
Common tasks in one place in one click! Discussion thread
DOWNLOAD for MAC
DOWNLOAD for WIN

klaus.krpano

Administrator

Posts: 13,432

  • Send private message

8

Tuesday, July 14th 2015, 10:26am

Quoted from "Sudarchikov Andrey"

style always rewrite attributes.
Just as quick side note - this will be changed in the next release.

Sudarchikov Andrey

Professional

Posts: 1,082

Location: Russia, Kaliningrad

  • Send private message

9

Tuesday, July 14th 2015, 8:41pm

Quoted from "klaus.krpano"

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

Hm.. interesting...
how it will work?
VRAP - desktop VR content player based on krpano.
Common tasks in one place in one click! Discussion thread
DOWNLOAD for MAC
DOWNLOAD for WIN

klaus.krpano

Administrator

Posts: 13,432

  • Send private message

10

Wednesday, July 15th 2015, 10:26am

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

Professional

Posts: 1,082

Location: Russia, Kaliningrad

  • Send private message

11

Wednesday, July 15th 2015, 11:25am

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
VRAP - desktop VR content player based on krpano.
Common tasks in one place in one click! Discussion thread
DOWNLOAD for MAC
DOWNLOAD for WIN

klaus.krpano

Administrator

Posts: 13,432

  • Send private message

12

Wednesday, July 15th 2015, 12:03pm

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

Master

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

13

Friday, July 17th 2015, 5:07pm

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.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Similar threads