Had this request in the support e-mail but thought this would make a good forum post.
There are a few ways to do this but I thought it would be a good opportunity to describe two ways.
The attached project has two HTML5 outputs, the first is “skin” the other is “loader”.
The project is a three node Pano2VR 6 pro beta 4 tour with hotspots linking the panos together.
Also what I suggest to do is turn on Show internal node ID, this can be found under Settings/Preferences and Advanced tab.
What this does is show you what the Node ID is of any of the images in the Tour Browser just by mouse overing the image and the Node ID will be displayed in the tool tip.
Open the Project, you will see the output “Skin” with a down arrowing showing. Click this to show the other output, “loader”.
This is how to switch between the two outputs. You can add as many outputs as you wish including Transformations and Animations.
The “Skin” HTML5 output:
Open the skin editor and you will see three images that have been added to the skin editors Tree, image 1 to 3.
Image 1 and 2 are small PNG files which are the same size with the dimensions, 130 x 90px
Image 3 is a JPG and is 300 x 150px. I used the Reset /2 button to make it smaller in the skin editor which reduced it to 150 x 75, but you can also hold down “Shift” and drag one of the corners of the image to make it smaller keeping the aspect ratio.
Under each of the images properties Visible has been deselected and Permeable has been selected. Permeable makes the image visible but not active so you can click and drag the pano even when the mouse is over the image.
Looking at Image 1 you will see next to the deselected Visible property an Active Logic block, you can see has an active logic block due to its two tone orange colour.
Opening this you will see it has the logic: Node ID, =, node1, Visible True.
The trigger Node ID is found under the Tour (Pro) heading.
So when you are in Node 1 the image will show.
This same setting will be found in each of the images in the skin, but each is set to show in different nodes.
The “loader” HTML5 output.
This uses the add Assets feature which is found under the HTML5 outputs Advanced tab.
In the projects folder is a sub folder called logo, all three images are in here.
So selecting the add folder here means Pano2VR will add a folder to the output with the images.
The path will be assets/logo/ then file names.
Open the skin and you will see one element, the External Image Loader.
You will see that it has a Logic block set next to External URL, as well as also having its Permeable selected.
The External URL is working in a very similar way to the Skin HTML5 output.
Except this time when node 1 is detected it loads the image with the file path: assets/logo/fish_logo.png
Then when node 2 is detected it will load assets/logo/dog_logo.png
Then node 3 it will load the JPG, assets/logo/arrow_logo.jpg
The External Image Loader has the setting so the the content is scaled to the size of the loader so you don't have to worry about resizing images.
So two different ways, which one should you use?
Well it depends on how many images you have and their file size.
Images in the skin will get loaded when the project is first opened.
So if you have lots of images in the skin this can make for longer load times.
Images displayed in the external loader are only loaded when called.
So in the case of the “loader” output only the node 1 image will get loaded on open.
When you change nodes then the image will be called from the server and get loaded.
Also new to Pano2VR 6 is what we do with small images.
If an image is 5KB or smaller it is placed inline in the skin.js file and will not appear in the images folder.
The makes loading more efficient.
Hope you find this of interest.
Special forum to share and discuss skins for Pano2VR and Object2VR
1 post • Page 1 of 1
- Posts: 10165
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK