Help Adding to VTour skin

Beginner

Thursday, January 2nd 2014, 6:18pm

Help Adding to VTour skin

I have never worked with modifying the skin control bar before so I could use a few pointers.

I want to add an additional option to the control bar for auto rotate. I noticed on the vtourskin.png there is an icon(spinning top) that looks like something I could use that will allow the user to turn the auto rotate on or off.
Here is were I need help. How do I go about adding an additional option to the control bar? I see skin_control_bar defined for both standard and mobile devices. For each option there is a line something like this:

<layer name="skin_btn_lt" style="skin_base|skin_glow" crop="0|192|64|64" align="bottom" x="-100" y="4" scale="0.5" ondown2="set(hlookat_moveforce,-1);" onup2="set(hlookat_moveforce,0);" />

How do I figure out what the crop numbers and the x and y settings would be if I want to add the spinning top from the vtourskin.png file?

I would like to also add an additional icon for 'Information'. Since there is not a corresponding icon on the vtourskin.png file how do I go about adding an option to the control_bar with something that is not an icon on the vtourskin.png file?

Any and all help is greatly appreciated.

Go to the top of the page

foutjo

Beginner

Posts: 39

Thursday, January 2nd 2014, 7:00pm

Another question I have is how would I add tool tips to the skin control bar options?
I tried replacing the skin_glow with skin_tooltips but this did not work.

<layer name="skin_btn_lt" style="skin_base|skin_tooltips" crop="0|192|64|64" align="bottom" x="-100" y="4" scale="0.5" skin_tooltip="TURN LEFT" ondown2="set(hlookat_moveforce,-1);" onup2="set(hlookat_moveforce,0);"/>

Thanks in advance.

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

Friday, January 3rd 2014, 7:58pm

Hi,

Quoted from "foutjo"

How do I figure out what the crop numbers and the x and y settings would be if I want to add the spinning top from the vtourskin.png file?

The 'crop' setting defines a rectangular area that should be 'cropped' or 'cut-out' of the given source image.
See here:
http://krpano.com/docu/xml/#layer.crop

The 'x' and 'y' settings are the alignment position relative to the 'align/edge' point and relative to the parent element.
See here:
http://krpano.com/docu/xml/#layer.x

Btw - that 'spinning' icon is the icon for enabling the gyroscope control, by default it will be only shown on devices which are support that (typically iOS). But it could be also used for an own autorotate button of course.

Quoted from "foutjo"

I would like to also add an additional icon for 'Information'. Since there is not a corresponding icon on the vtourskin.png file how do I go about adding an option to the control_bar with something that is not an icon on the vtourskin.png file?

Either extend the vtourskin.png or use an own image file.

Regarding own image file - see in the vtourskin.xml for the 'skin_base' style:

	Source code
1	<style name="skin_base" url="vtourskin.png" />

This style only declares the url to the vtourskin.png - that means if you want your own image, just remove the usage of that style and set the url directly - e.g.

	Source code
1	<layer name="skin_btn_autorotate" style="skin_glow" url="autorotate.png" align="bottom" x="180" y="4" scale="0.5" onclick="switch(autorotate.enabled);" />

Quoted from "foutjo"

Another question I have is how would I add tool tips to the skin control bar options?
I tried replacing the skin_glow with skin_tooltips but this did not work.
<layer name="skin_btn_lt" style="skin_base|skin_tooltips"
crop="0|192|64|64" align="bottom" x="-100" y="4" scale="0.5"
skin_tooltip="TURN LEFT" ondown2="set(hlookat_moveforce,-1);"
onup2="set(hlookat_moveforce,0);"/>

Your code is almost right - but the attribute name for the tooltip text would be just 'tooltip' - not 'skin_tooltip'.

Best regards,
Klaus