html5 skin

[briarch]

I am perplexed!
http://www.brightonsarchitecture.com/ip
As you'll see, I hope, the navigation buttons are missing - when viewed locally, they are present, yet when the files are uploaded, the link seems to be broken.
I've run out of ideas - have anyone got any clues?

This is a version of http://www.brightonsarchitecture.com/pa ... index.html, and not having an iPhone/iPad, I'd be pleased to know if it's showing up!
Briarch

[k.ary.n]

No, your pano doesn't load on an iPhone.

Did you upload the images folder, XML, HTML, skin.js to the server?

I have a quick tutorial in the works on how to do this...

[briarch]

Oh yes - everything uploaded.
For some reason the link to the .svg files in the images folder is broken ...

I was using http://www.testiphone.com/as check, but clearly it's optimistic!

I look forward to your tutorial.
)

[briarch]

For what it's worth ...
After a while I decided to dump the preference file, and as a result the tiles folder was built.
As for the navigation buttons, a glance at the Activity page shows that the buttons ARE downloading - could this be a bug?

[k.ary.n]

Hmmm, that could be a bug - we'll take a look into it.

In the meantime, I wrote up a very quick how-to: http://gardengnomesoftware.com/wiki/Pan ... ML5_Export. You might be beyond this, but maybe it helps anyway.

A quick video tutorial is also coming...

[briarch]

Many thanks - an excellent guide, but that's what I was doing!!
Doubtless all will be revealed with the video.

[thomas]

I guess the problem is your web server. SVG images should have the mime type image/svg+xml but your server sends them as text/html which confuses Safari. If you don't have full control of the web server you can try to add the correct mime type in your .htaccess file with this line:

Code: Select all

AddType image/svg+xml svg

[briarch]

Many thanks for this - you are, of course, spot on!
and I think that the svg images are suitably subtle and discrete, a definite improvement - thanks for all your work in this beta - I look forward to porting all panos to the iPad ( but dread the work)

[anahum]

I guess the problem is your web server. SVG images should have the mime type image/svg+xml but your server sends them as text/html which confuses Safari. If you don't have full control of the web server you can try to add the correct mime type in your .htaccess file with this line:

Code: Select all

AddType image/svg+xml svg

Thomas, I don't know if it is a bug or not, but when using svg images in html5/css3 skins, all the images that are not created inside a square document (either with Illustrator or Inkscape) are distorted when the panorama plays (in PC Safari). For example, all your simplex skin elements are svgs created inside a square, but if you try to create a rectangular button, the displayed image when the panorama runs is expanded trying to fit a square with a side equal to the longest rectangle's side. If you open the same svg with Safary or Chrome browsers, their aspect ratio is OK. Any hint?

Another behaviour I can't understand is that in your provided simplex skin, when you enter the mouse on an image button, the image pops a bit, but if you look at the actions associated, the are no changes to the element's scale nor alpha. Why this happens?

[Hopki]

Hi Arturo
Looking at the skin, there are two sets of buttons, img_1_n.svg and an img_1_o.svg, o being the over state.

In the xml for the skin there is this instruction for mouse over.

<type>svg</type>
<image>img_1_n.svg</image>
<imageover>img_1_o.svg</imageover>

However I can not see the action in the skin editor.

I can only assume Thomas has done this because the SVG is not a button graphic therefore you can not have a hover and click state so he has coded it directly in the XML.

So the only way for us none XML coders to do it is to stack buttons.

You can set up 3 buttons to simulate an up, hover and click state.

Stack the buttons so you have:
Button 1 up state
Button 2 hover state
Button 3 click state

Have them in the above order in the file tree, then put a container around them and call button whatever. Make sure that the buttons are still in the correct order after putting them in the container.

Set button 1 visible and alpha 1
Set button 2, visible and alpha 0
Set button 3, visible and alpha .01

All the actions will be in button 3.

Mouse enter, change or set element alpha to 1, target button 2.
Mouse leave, change or set element alpha to 0, target button 2.
Mouse Down, change or set element alpha to 1, target $self
Mouse Click, change or set element alpha to .01, target $self
Mouse click, do what ever you want it to do.

This will simulate, up, hover and click.
Regards
Hopki

[anahum]

Hi Arturo
Looking at the skin, there are two sets of buttons, img_1_n.svg and an img_1_o.svg, o being the over state.

In the xml for the skin there is this instruction for mouse over.

<type>svg</type>
<image>img_1_n.svg</image>
<imageover>img_1_o.svg</imageover>

However I can not see the action in the skin editor.

I can only assume Thomas has done this because the SVG is not a button graphic therefore you can not have a hover and click state so he has coded it directly in the XML.

So the only way for us none XML coders to do it is to stack buttons.

You can set up 3 buttons to simulate an up, hover and click state.

Stack the buttons so you have:
Button 1 up state
Button 2 hover state
Button 3 click state

Have them in the above order in the file tree, then put a container around them and call button whatever. Make sure that the buttons are still in the correct order after putting them in the container.

Set button 1 visible and alpha 1
Set button 2, visible and alpha 0
Set button 3, visible and alpha .01

All the actions will be in button 3.

Mouse enter, change or set element alpha to 1, target button 2.
Mouse leave, change or set element alpha to 0, target button 2.
Mouse Down, change or set element alpha to 1, target $self
Mouse Click, change or set element alpha to .01, target $self
Mouse click, do what ever you want it to do.

This will simulate, up, hover and click.
Regards
Hopki

Hi Hopki and thanks for your reply. If I open the simplex.ggsk skin with the skin editor, I do not see the 2 sets of svgs you mention (over and normal states). I can only see one instance for each image (up, left, right, etc.) On the other hand, after generating the pano, the images folder contains those 2 sets for each svg (normal and over). How is this achieved? Where is located the skin xml you mention?

On the other hand, have you tried to create non-square svgs ? Do they retain their rectangular aspect ratio when displayed inside a pano? In my case, no

Thanks in advance for your tips.

Thanks in advance for your tips.

[brianwatson]

Hi Thomas,
I have what looks like the same problem, but with a different cause.

I'm using the Simplex skin, which has worked perfectly until recently on iPod, iPad, and on my iMac both locally and on my web site: now the buttons appear as generic 'missing images' question marks on iDevices (but appear correctly on my iMac).

With the Web Inspector in Safari on my iMac (OS X 10.6.7) the SVG images appear as 32 x 32 images with the MIME type "image/svg+xml", so the answer for me may not be the wrong MIME type. I have not changed anything recently, and everything worked perfectly before. Example links below.

Any suggestion?

Thanks,

Brian

OK on iMac, no buttons on iDevices:
http://www.brianwatsonphoto.co.uk/360/pages/ferns.html
http://www.brianwatsonphoto.co.uk/360/pages/gmc.html

[Hopki]

Hi
Can you post your project, inc skin html page etc.
I would like to upload on our server to see if it is a serving issue.
Regards
Hopki

[brianwatson]

Hi Hopki,
Sorry, not sure how I do that: do I zip it and upload it as an attachment?
Brian

[Hopki]

Hi Brian
Yes zip up all you files, try and reduce image quality and try to keep the files as small as possible.
Then when you click reply, you will see a tab at the bottom called "Upload attachment"
Regards
Hopki