modifying SVG buttons for Webkit (HTML5) panos

[erik leeman]

If you would like the buttons in the simplex.ggsk skin for your Webkit ( = Safari HTML5 ) panos to be more subtle, than you can simply edit them using a text editor like Wordpad.

For instance, in button-image 'info.svg', look for the line that reads like this:

Code: Select all

<g fill="#FFFFFF" stroke="#000000" stroke-width="0.2">

and change it to this:

Code: Select all

<g fill="#cccccc" fill-opacity="0.5" stroke="#000000" stroke-width="0.2">

This will change the colour of the button graphic from white to light grey, AND it will make it 50% transparent.

If you leave button-image 'infoo.svg' unchanged, then the button will respond more clearly to mouse-overs.
Of course you should do this to all SVG button-images for a harmonious effect.
Especially on darker scenes this looks much better than the bright-white original ones.

Here's a screenshot:


Cheers!

Erik

[erik leeman]

Another tip for the simplex.ggsk skin as applied to Webkit panos:

If, like me, you think the position of the simplex-button captions below the buttons is a bit clumsy because your finger hides them on a touch screen, then you can change that too just using a text editor if you want.

For instance, in the file 'skin.js' look for these lines:

Code: Select all

		this.tt_zoomin=document.createElement('div');
		this.tt_zoomin.ggId='tt_zoomin'
		hs ='position:absolute;';
		hs+='left: -56px;';
		hs+='top:  35px;';

They are for the caption belonging to the zoom-in button.
When you change this like so:

Code: Select all

		this.tt_zoomin=document.createElement('div');
		this.tt_zoomin.ggId='tt_zoomin'
		hs ='position:absolute;';
		hs+='left: -56px;';
		hs+='top:  -40px;';

then the caption will appear well above the button, so that you can actually see it when your finger is on it.
As you can see hs+='top: 35px;'; is changed into hs+='top: -40px;';
All other buttons have similar lines of code, just look for the 'this.tt_' bits.

Cheers!

Erik

[anahum]

Hi Erik. Why not simply change the position of the texts using the standard skin editor instead of editing the skin.js file?

[erik leeman]

Hi Erik. Why not simply change the position of the texts using the standard skin editor instead of editing the skin.js file?

Simply because it was quicker : )

Cheers!

Erik