HTML customization

Lvilleneuve · Fri Aug 17, 2012 3:58 pm

I have to create a set of panos. I will have to publish them as they are produced. It's going to be an ongoing process. The skin will evolve according to the new images published (list of images on a slider).

I would like to create a "common" folder in my hierarchy to place skin images and the skin.js file. I changed the Image Output Path for the images of the skin to my common folder.

I would like to generate the skin.js also in that common folder so it can be shared. The goal is that as soon as I generate a new version of the skin, all the panos are updated automatically.

How can I do that?

Lvilleneuve · Tue Aug 21, 2012 3:40 pm

Hi Martin,

Did you saw my post? Is there a solution?

Tue Aug 21, 2012 4:34 pm

Hi,
It is possible but you have to modify the HTML page to look for the skin.js file.
Regards,
Hopki

Lvilleneuve · Tue Aug 21, 2012 4:45 pm

There is 2 places in the HTML template where I can find a reference to skin.js. I have no idea on where to code this in the HTML file. Typically, I have to move up 2 directory and place the file in a common folder. I guess that somewhere I need to add...

For the French version of my skin
../../common/skin/fr/skin.js

And for the English version
../../common/skin/en/skin.js

I know that I will have to create 2 templates one for each language.

These are the 2 places where I found refecrence to "skin.js

<?ggs } ?>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title><?ggs document.writeEncoded(document.expandVariables(config.userdata.title)); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<?ggs
addFlashFallback=(formvalue['swf']!='');
if (addFlashFallback) {
document.addfile("../3rdparty/swfobject/swfobject.js","swfobject.js");
manifest+="swfobject.js\n";
document.writeln('\t\t<script type="text/javascript" src="swfobject.js">');
document.writeln('\t\t</script>');
}
if (output.skinFile!="") {
manifest+="skin.js\n";

The second one.

</head>
<body onorientationchange="hideUrlBar();">
<?ggs if (formvalue["fullscreen"]=="false") { ?>
<h1><?ggs document.writeEncoded(document.expandVariables(config.userdata.title)); ?></h1>
<br>
<?ggs } ?>
<script type="text/javascript" src="pano2vr_player.js">
</script>
<?ggs if (output.skinFile!="") { ?>
<script type="text/javascript" src="skin.js">
</script>

Tue Aug 21, 2012 5:15 pm

Hi,
I am out and about now and back late tomorrow, so if no one else has chipped in I will take a look at this then.
Regards
Hopki

Lvilleneuve · Tue Aug 21, 2012 5:27 pm

OK, I will wait until tomorrow. Luc

Wed Aug 22, 2012 3:55 pm

Hi Luk,
Please find attached a project which has a folder called Luk, then two sub folders, pano and skin.
In the pano folder are two more sub folders called park and pavilion.
Each have a HTML5 output in a sub folder called output.

In teh Output folder of each there is an HTML page which is looking for the skin in the directory

Code: Select all

../../../skin/skin.js

Of course when you output choose the location of the skin graphics, which is easy enough.
The when you output the skin.js will be in the same location as the HTML page.

Copy the skin.js file to the folder where the skin graphics are and change the path in the HTML page.
I would not use the cache manifest file when doing this, in fact I would not use it at all. Not a big fan of forcing people to download files they don't need.
Regards,
Hopki

Lvilleneuve · Wed Aug 22, 2012 9:36 pm

Thanks Hopki!

Lvilleneuve · Thu Aug 23, 2012 4:46 pm

It worked perfectly. The missing link was to move the skin.js file into the skin images folder.
Thanks! Great support as usual.
Luc