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.

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

  • Hi,

    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:
    https://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:
    https://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.


    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:

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

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


    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

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!