How to apply certain images per tour node

Q&A about the latest versions
Post Reply
Transforman
Posts: 18
Joined: Fri Oct 07, 2016 9:26 am

Hi there,

I have a tour with 12 nodes in which I would like to display a title image for each node (like in the attached screenshot).
I added all images to the skin editor and gave them distinctive IDs. How do I display for example the boardroom image in the boardroom node, the breakroom image in the breakroom node, etc.?
Capture.JPG
Capture.JPG (204.17 KiB) Viewed 4701 times
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

Once again I'm sure there are several ways to do this in Pano2VR but here's one you can try. Sample output below...

https://s3-ap-southeast-2.amazonaws.com ... index.html

Steps taken:

1. Load in 6 equirectangular images
2. Give each node a tag 'title1', 'title2' etc
3. Create a skin
4. Add a 'Previous/Next' component
5. Add a text box called 'Title Text'
6. Open the text box logic block and create 6 entries
7. Set the following for each entry: Trigger=Tags | Comparison=Contain | Value =title1 (2,3 etc) _ Text = <h1>This is node 1 (2,3 etc)</h1>

Image

8. Save the Skin
9. Save the Project
10. Output the Project

As the node changes the new tag triggers the new text.

Here's a link to download the assets for the project https://s3-ap-southeast-2.amazonaws.com ... roject.zip

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

Just realised you asked how to apply certain images not text!

So here's an updated sample using external images...

https://s3-ap-southeast-2.amazonaws.com ... index.html

All I did was modify the skin from the first version:

1. Copy the content of the text box logic block (to reuse in external images logic block)
2. Add an 'Draw External Image' element to the skin
3. Open the 'External URL' logic block and paste in the content from the text logic block
4. Change the Value to the url of the images e.g. Value=Numbers/1.png (2.png etc)

Image


5. Save the skin
6. Create an output folder and copy into it my 'Numbers' folder containing the graphics 1.png etc
7. Select the output folder in Pano2VR
8. Save the project file
9. Build the project

Here's a link to download the assets for the project https://s3-ap-southeast-2.amazonaws.com ... roject.zip

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

As I mentioned earlier there is usually more than one way to achieve your goals within Pano2VR. I was thinking about the project and wondered if there was an easier way to do it using Variables, and the answer was yes.

Here's a sample output...

https://s3-ap-southeast-2.amazonaws.com ... index.html

So in this version I've done away with the Tags completely and I'm using variables to trigger the logic block.

1. Create a variable with the Name=node_titles | Type=Number | Init Value=0

Image


2. Open the External Image/External URL: logic block
3. Change the Trigger from Tags etc to Trigger=node_titles | Comparison= | Value=0 (repeat for all images up to Value=5)

Image


4. Click on the 'Pano Next' button and add two more Mouse Click Actions
a. Source=Mouse Click | Action = Set Variable Value | Parameters=Add(+)/1 | Target=node_titles
b. Source=Mouse Click | Action = Set Variable Value | Parameters=Mod(%)/6 | Target=node_titles

Image


4. Click on the 'Pano Prev' button and add two more Mouse Click Actions
a. Source=Mouse Click | Action = Set Variable Value | Parameters=Add(+)/5 | Target=node_titles
b. Source=Mouse Click | Action = Set Variable Value | Parameters=Mod(%)/6 | Target=node_titles

Image


5. Save the skin
6. Output the project

Here's a link to download the assets for the project https://s3-ap-southeast-2.amazonaws.com ... roject.zip

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Transforman
Posts: 18
Joined: Fri Oct 07, 2016 9:26 am

Hi Tony,

wow, thank you so much for your extensive help and providing different solutions. Trying them out right now.
Transforman
Posts: 18
Joined: Fri Oct 07, 2016 9:26 am

Tony, I'm sorry for saying this, especially after you went to great lengths to explain it to me, but I can't seem to figure out how to connect the individual images to their nodes. This is only my second project in pano2vr and i can't find the logic blocks that contains this function. Since the nodes don't link to each other (I'm navigating via floorplan only), all I need is to connect the description image to each of the nodes. I understand this is done via logic block, but I don't even know how to open a logic block. :oops:
So sorry for being so ignorant. Again, I haven't used pano2vr that much and I'm completely new to it.
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

No problem. The Skin Editor can take a little getting use to but hang in there.

For an overview of Logic Blocks I'd suggest you watch the video New in Pano2VR 5.0: Skin Editor - Logic Blocks & Timers on YouTube at https://youtu.be/MJkJ9BKiQVI
all I need is to connect the description image to each of the nodes
When you add a the 'Draw External Image' component to the skin the component is available across all of the nodes in your tour. Inside the component you link to each image and then use a trigger, either a Tag or Variable, to tell the component to load a particular image that corresponds to the node.

In the Variable example this is how you find the Logic Block for the 'Draw External Image' component.

1. Add the component to the skin if it's not already in there. (Click on the component you want and then click in the canvas area)

Image


2. Select it and the 'Properties Panel' select 'External Image' dropdown

Image


3. In the External Image dropdown click on the double arrow icon next to the name 'External URL:'

Image


4. This will open the 'External Image Logic Block'

Image


I hope this helps :)

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Transforman
Posts: 18
Joined: Fri Oct 07, 2016 9:26 am

Thanks again Tony for the great help!
For some reason, it just shows all the images at once, in every single panorama. Maybe I over-complicate everything and the solution is much simpler.
Here are 2 images with their respective title images: https://1drv.ms/f/s!AkZh5qxHIxiKgfUJnfd_6gPMa6gLfw

01.jpg is supposed to have the image Lounge.png at the center bottom and breakroom.png for 02.jpg. Neither of the 2 panoramas are supposed to have hotspots for navigation since the viewer is supposed to navigate through all the images via floorplan only.

When I draw the external image and add the external URL it just shows the white box but not the actual image. What am I missing? :cry:
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

Thanks for sending through the panoramic images. I've created a finished project with the two panoramas.

Image

You can see the project here...

https://s3-ap-southeast-2.amazonaws.com ... index.html

When I draw the external image and add the external URL it just shows the white box but not the actual image. What am I missing? :cry:
Not sure, make sure you check your relative path and make sure there are no issues with case sensitivity. (upper case letters vs lower case letters)

You can download a zip file of the finished sample project as well as all the project files. You can open it up in Pano2VR V6 and see what I've done. When you open it up you will have to relocate your two panoramic images. Also to keep the size to a minimum I've used cube images not multiresolution tiles so you may want to update that.

Titles-Floorplan-Project-Files.zip https://s3-ap-southeast-2.amazonaws.com ... -Files.zip

To manage the show/hide of the titles I've gone back to the Tag workflow.

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Transforman
Posts: 18
Joined: Fri Oct 07, 2016 9:26 am

Tony, I finally got it! Thanks again.

You sir are the most helpful and most patient forum member I have ever seen. You're a great asset to this community.

Thank you for all your help!
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,
Tony, I finally got it! Thanks again.
Congratulations, well done and thank you for the kind words, they are appreciated.

I enjoy solving issues as it helps me understand and expand my knowledge of Pano2VR and the skin editor. For example I never use floorplans and this exercise provided an opportunity to do so.

For other tutorials across a range of products check out my Tips & Tutorials at http://tonyredhead.com/tipsandtutorials

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Mark360
Posts: 39
Joined: Thu May 17, 2018 11:15 pm
Location: England and USA

Great info Tony. I went around this the hard way on a very large pano I created recently and used nodes and hotspost to do the same thing. If only I had known you could do it s a simpler way.

Well we live and learn! lol

Thanks for sharing.
If it looks impossible you just have not found the right angle to view it from.
Post Reply