Help creating custom navigation buttons.

  • I want to create my own custom navigation buttons to control up/down/left/right/zoom in/zoom out. Looking at the default buttons that came with krpano I am trying to figure out what I have to do and I am confused.

    I see that the buttons.png file has the size of w-440 h-120.
    The image actually has 3 rows of buttons and the one in the center looks darker than the other two.

    The xml file has the following code for each of the buttons displayed on the screen:

    <plugin name="in" align="top" x="-160" y="10"
    url="buttons.png"
    crop="160|0|40|40"
    onovercrop="160|40|40|40"
    ondowncrop="160|80|40|40"
    keep="true"
    onhover="showtext(Zoom In, buttonstyle);"
    ondown="set(movevectorz,-1);"
    onup="set(movevectorz,0);" />

    Here are the steps I think that I need to do.


    1. create a new png file with my new button layout.
    Do I have to create 3 rows of the buttons like the sample? Or can I just create one row?

    2. Replace all of the number from the sample code above. Here is where I get lost and I need some help.

    What do all of these number mean?
    Where do I get these numbers?

    For example the align attribute. I understand from the doc what it implies but how do I get this number from the screen?

    The crop attribute also confuses me. What is the easiest way to get these numbers from my new buttons image?

    As usual any help on this issue will be greatly appreciated.

    Thanks.

  • You don't I've to have all your buttons in one file. You could specify a separate image for each.
    The reason for the three sets here is for the look when you hover, click, and are not near it. Each layer looks slightly different. That could also be achieved in a different way with changing alpha or showing another image too. What I am trying to say is you don't need to use the crop settings if you have separate images.

    I have not taken the time to try but I assume you could use a grid and ruler settings of an image editor to show a grid and get your numbers from there if you wish to have all icons in one file.
    Te benefit of one file is that your icons are all loaded at once. There may be other benefits as well.

Participate now!

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