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.