Node responsive logo and URL

[Hopki]

Hil,
We have had a support mail about how to display different company logos depending on the panorama.
This has been cropping up a few times so decided to write up a post about it and how to build it.
I also took this to the next level and made the logos clickable opening their respective websites.

LINK

I have always said that Pano2VR is a multi-skill product. In other words, if you want to step in and do something quick you can, if you want to dive in a bit deeper you can do that too.

This project will show you what I mean.
I will be referring to the attached project so if you want to follow along please download and open. It's built with Pano2VR 6.0.6.
Once you see how this works you can easily adapt it to your own projects.

The objective, each group of panoramas to have its own company logo, the logo to open its corresponding company website.
Each company to have its own URL to open its Tour/Panorama first.

This project has five nodes, it also has three made-up companies, node 1 and 2 one company, node 3 another and nodes 4 and 5 yet another, the names I am using are:

• Yin and Yang
• Crown
• Pattern

Each company logo will open its own Wikipedia page.

To prepare the project file, this will walk you through how it was made.

• Open Pano2VR add the panoramas
• In the User Data panel add Custom Node IDs to the first panorama of each group of nodes, this needs to be a name to be used with the URL so keep it descriptive, short and lowercase. In the project nodes 1 and 2 are in the same group, but only node 1 needs the custom node ID, in this case, I am using "yinyang". The second company is a single node and I am using "crown". The last company which starts at node 4 is using "pattern"
• Still in the User Data panel add tags corresponding to the logo, in this case, I am using logo1 for nodes 1 and 2, logo2 for node 3 and logo3 for nodes 4 and 5.
• Add hotspots to link the nodes
• Add HTML5 output, then under the HTML tag select the Edit Template button for the Normal.ggt and select "Direct Node Access"
• For the skin, skin_variable.ggsk, you also need to add the logos as assets. Under the HTML5 output and Advanced tab, at the bottom, you will see assets, add the logos folder. On export, this will add a subfolder to the output called assets with the logos folder.
That's the project file done.

There are two skins, both have the same result but achieved in two different ways.

Starting with the skin, skin_stack.ggsk.
This is quite simple, the three logos are stacked on top of each other.
Under each logos properties, visible has been deselected and a visible logic block added.
Looking at element logo1 in the tree, the logic block says, if tags contain, logo1, visible: true.
Logo2, if tags contain, logo2, visible: true.
And finally logo3, if tags contain, logo3, visible: true.
Then each logo element has a Go To URL action to open its website.

To walk you through this, when the project opens, the active tag is logo1.
The image, logo1 will show using its visible logic block. When clicked it will open its website.

Nodes 1, 3 and 4 have custom node IDs and as Direct Node Access is enabled, if the company "Pattern" wanted to open its tour, the URL will be https://support.ggno.me/forum_projects/ ... ml#pattern
For the single node, node3 it would be https://support.ggno.me/forum_projects/ ... html#crown
Note, without the custom node ID on the end of the URL, the tour will open with the starting node, in this case, it is node1. So I do not have to use a custom node ID to open the tour "Yin and Yang".
However, if the starting node was not node 1 then I would need to use the custom ID.

When you analyse the task, it's quite straightforward.
The downside to this is the images are all in the skin, so if you have a lot of images you are bulking out the skin.
And when the project opens all the logo images will be downloaded at the start. As this project only has three images it's not a problem, but if it had 50 or 100 then this then starts to become an issue.

The second skin is a bit more advanced but more efficient, it downloads the logo images when required, not all at once at the start and none of the images is in the skin, here are the skin sizes for comparison:

skin_stack.ggsk = 11KB
skin_variable.ggsk = 1KB

Don't forget this skin, skin_variables requires the logos folder added as assets.

The skin, skin_variable.ggsk works using a text variable and a single external loader.
The text variable I am using is "url_logo" but can be anything, which is a text variable as said.
The external loader has an External URL logic block. Open the logic block and look at the top expression, it states if Tags contain logo1, then the External URL will be the path to the logo1.png image.
You can see that the next expression will use the Tag logo2 and point to logo2.png and so on.

The External Image Loader has four actions, the first three are almost the same:
Source: Node Changed
Action: Set Variable Value
Variable Name: url_logo
Operation: Set(=)
Value: https://en.wikipedia.org/wiki/Yin_and_yang
The other two are the same but set different web addresses to the variable.

So three actions all executing on Node Changed, how does that work?
Well, each action is using an action filter. Looking at the first action you will see it has an active action filter, the filter is:
Tags, contain, logo1.

The next action has a similar action filter but this time looking for logo2, and the last action and its filter is looking for logo3.
So depending on which tag is active will depend on which one of the Node Changed actions will be executed.

The last action is to open the URL, if you open this action you will see:
Source: Mouse Click
Action: Go To URL
URL: $(*url_logo)
Target: _blank

To walk you through this. When the first panorama opens, a Node Changed is detected.
The first node has the tag, logo1, The External Image Loaders logic block will set the path to logo1.png. Also, the first Node Changed action will execute as the action filter is looking for the tag node1 and the URL is set to the variable.

On click, the Go To URL action uses the placeholder $(*url_logo) to read the web address stored in the variable and open the web page. The target _blank means it will open a new page/tab in your browser.

When you change to node 2 which still has logo1 tag nothing will change.
Go to node 3 and the tag has changed to logo2.
So when you change nodes to node 3, the tag is now logo2, the External Image Loader will change the file path to load the image logo2.png.
The second Node Changed action will execute because of its action filter and change the web address in the variable.

In this project, I would say the first way is fine, but if your project is a very large shopping centre/Mall and there are many logos then the second skin makes far more sense.

Regards,
Hopki

[Laurent B]

thank you,
But with the skin_variable.ggsk there are no pictures

[Tony]

Hi Laurent,

In the skin_variable.ggsk Hopki is using an "External Image" element to load the images from the folder called 'logos'. This folder has been added to the 'Assets' section in the 'Advanced' panel in the 'Output' screen. When you build the project it creates the folder structure assets/logos/logo1.png etc

The "External Image" element has a logic block that determines which image is loaded and when. (see screenshot below)

grab44.jpg (420.61 KiB) Viewed 4845 times

What you need to do is;
1. Add the skin_variable.ggsk to the multi_logo_with_url.p2vr file,
2. In the Output Folder, create a new folder, say output-variable and
3. Re-publish the project.

This will create the Assets folder and the images will appear. The advantage here is that by simply changing the image you change the project without having to go into the skin.

cheers,

Tony

[Laurent B]

Hi Tony,
Yes, I do well this way.
But nothing to do.
I have the files in the directory.
I'm using version 6.1 beta3b pro 64bit on MacBook Pro.

Regards
Laurent

[Tony]

Hi Laurent,

Looks like it could be a bit of a bug in 6.1 beta3b in regard to the External Image panel options. In particular the option 'Content Scaling: None'. If you select Min or any of the other options the images show up, it's only when none is selected they don't show up. I've used the setting Min in the example below.

grab47.jpg (148.9 KiB) Viewed 4818 times

Here's an online example: https://p2vrlittlebits.s3-ap-southeast- ... index.html

Tony

[Laurent B]

Thank you Tony !

it works for me.

Laurent