standard hotspot vs component/skin hotspot

[wking10]

A couple of newbie questions:
1. How to create a standard hotspots that work independently from the component-based hotspot? e.g. if I have created a video hotspot component skin, can I still add a standard video hotspot not affected by behaviour set on the skin? I thought it can be done by changing the skin-ID of the standard hotspot to anything other than the component ID, but that didn't seem to work.
Another funny thing I found, I previously created a standard node hotspot without having any components/skin. Later after I added Video Popup Silhouette component, somehow the node hotspot had its icon changed to video hotspot and when being clicked it tried to launch video. To fix this I had to add a node hotspot component into the skin, and manually changed the skin-id for the broken node hotspot to match this component ID.
Not sure what's going on.

2. After added Web Link Silhouette component and create a URL hotspot, the website is still opened on a new tab. I must go to Edit Skin Configuration and check the "Open URL in iframe" for it to work. Is this an expected behaviour?
It also makes me wonder, would it be possible to have a URL hotspot that opens website in iframe and another which open website in separate tab? My workaround is to use the Web Link Silhouette to open web in iframe, and use Polygon hotspot to launch URL in new tab. I am sure there must be smarter way to achieve this?

thanks

[SMerriss]

Hey wking,

1. Not sure exactly what you are asking. You can create multiple hotspots in the skin that can be changed based on what kind of media you are showing, like having a hotspot used for video and another used for touring if that is what you are asking. I don't think I am understanding your question completely so if you can be more specific I can try my best to help you out.

2. I do not use the pre-made components so I do not know exactly what is happening with how the url is opening up but yes, having a hotspot or skin component linking to a url, it is expected for it to be opened in a new tab. for it to be viewed while still in your tour, you must make it an iframe. You also ask if it is possible to have both an iframe and having a url open in a new tab and the answer is yes. it's just a matter of how you are routing the inside of the skin to if you want to use two separate components that do two separate things, or one component that behaves according the the parameters you have set up for it.

If you have anymore questions or if this was helpful in anyway please let me know.

-Spencer

[Hopki]

Hi wking10,
You select which hotspot template you will use with what Hotspot using the Hotspot Viewer Mode properties.
As an example, if you added in the skin a Hotspot Template and gave it the ID: my_ht.
Then when setting hotspot in the Hotspot Viewer Mode you would select your template from the drop-down list.

1.png (37.6 KiB) Viewed 2676 times

The WebLink Component by default will open a new HTML page.
But using the Skin Configuration menu you can open the web page in an iframe within the panorama.
I must admit I am not getting that you want both to happen which I think is what you are saying.
Regards,

[wking10]

Hi Martin and Spencer,
Sorry for confusing both of you. In fact I confused myself while re-reading my own question. But despite all that, you still tried to answer. Much appreciated.
Let me try to elaborate.
For the first part of my question, what I did was:
1. Create new project and add 2 panorama nodes.
2. Add a point hotspot with type Tour Node and link it to second panorama. Inspecting the Property, I can see the type is Tour Node and skin-ID is ht_node (greyed out).
3. Generate output, I can see the point hotspot (with red circle/dot icon), and everything works as expected (take us to second panorama)
4. Go to Skin editor > Component Toolbox > add Video Popup Silhoutte (Youtube) from the built-in components
5. Close and save Skin Editor, then generate Output again without doing anything else
6. The hotspot icon changed from red dot to video player icon (comes from the skin component added above). When clicked, it popped up and tried to play Youtube video, as you would expect from the Video Popup Silhoutte template.
7. In hotspot properties I can confirm the type is still Tour Node and skin-ID is ht_node (greyed out).
8. To revert this I can either (a) delete the Video Popup Silhoutte Youtube from the skin or (b) add to the skin a new component with id ht_node, then under hotspot property configure the skin-ID to ht_node (no longer greyed-out)

Is this expected behaviour? If so, that's fine. It just means that once I apply any skin or template, I have to keep using template for every single hotspot created.

For second part of my question:
What I am trying to achieve was to have 2 point hotpots on same panorama, first hotspot will launch a website on new tab and second hotspot will open another website as iframe.
What I did was:
1. Add to the skin a Web Link Simplex (ht_url) template
2. Create a point hotspot, and specify website to launch at LinkTargetURL
3. Click Edit Skin Editor and tick "Open URL hotspot in iframe"
4. The hotspot will open website on iframe.
5. Now with "Open URL hotspot in iframe" taking effect, I am not sure how to create another point hotspot that will open a different website in new tab. Any idea?
As work around for now instead of using point hotspot I used a Polygon hotspot, then specify website to open at LinkTargetURL and that seemed to do the trick.

Sorry for the long question and thanks again.

[SMerriss]

Hey wking,

This is perfect how you described it.

For the first part of your question, you are confusing Pano. Because you are placing the Video Popup Silhouette in the skin, it is probably naming itself as ht_node. This is expected but super easy to work around so that you can have a hotspot for a 'Video Popup' and a hotspot for changing nodes. You have to create hotspots that have different actions in the skin editor and give them unique names so that in the tour, you can choose what hotspot to display. Here are some screenshots of the names of my hotspots, how to choose which hotspot to display in your tour, and two of them together on the same node but doing two different things.

Screen Shot 2020-12-01 at 11.05.37 AM.png (162.45 KiB) Viewed 2650 times

Screen Shot 2020-12-01 at 11.06.09 AM.png (5.18 MiB) Viewed 2650 times

Screen Shot 2020-12-01 at 11.06.45 AM.png (1.79 MiB) Viewed 2650 times

The second part of your question is the same as the first part, you have to create a new hotspot for that specific action so that you can have one hotspot that opens in an iframe, and another hotspot that opens in a new tab.

This may take you some time but there are some great tutorials online to help you work it out. If this helps solve your problem or if you are still confused, please let me know.

-Spencer

[wking10]

Hi Spencer,
Thanks for the prompt reply.
I can confirm Video Popup Silhouette is always naming itself "ht_video_youtube" in the skin, and not "ht_node". But that's ok. I got your point.

As for the launching URL in iframe, which part of the point hotspot template is controlling this? Is that under the template properties --> Actions > Source: Mouse Click, Action: <iframe src="$(hu)" width="100%" height="100%" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder= "0"></iframe>

What I found is for the iframe to work we also need to tick Edit Skin Configuration> Open URL hotspot in iframe. But then once it is ticked, any URL hotspot will always pop in iframe regardless.
I don't know how to make another point hotspot that can open webpage in new browser tab (other than using Polygon hotspot instead). Your guidance will be much appreciated.

Since I already have you here, I remember seeing in one of Martin webinar about how to handle a Youtube Live link but I couldn't find it now. What is the best way to include Live youtube video, given the URL will always change?

thanks

[wking10]

Actually regarding how to add live link videos, I think I found the webinar that talks about this: Webinar: Pano2VR 101 | Video Popups at timestamp 25:10
If I understood him correctly, Martin said to create a webpage which has the live link embedded and then we can create a hotspot to call this webpage within Pano.
Hope I got it right.

[SMerriss]

Hey wking,

To be completely honest, I am the wrong person to give guidance on using iframes because I don't use them and I hate them. The reason being is that I find them confusing and never work on the first try, I always have to tinker with them and waste time when I could be working on something else. I instead use and recommend using the 'Draw Video' element in the skin, and having the hotspot communicate with it, telling it to play whatever video you want. You can link videos from youtube, vimeo, or load a video file into a Video element. As for the youtube live feature you are asking about, iframe is probably the way to go. I have never done this so I would say to watch the webinar you mentioned a few times to try and get a better understanding.

For launching a url in an iframe, what you have looks about right but what I would do/recommend is way to long and confusing to explain through text, so I'm just going to tell you to check out this blog post by Tony Redhead who explains how to use iframes.

https://tonyredhead.com/pano2vr/hotspot ... nd-iframes

Sorry I am not much help with this topic, but I will try my best to explain anything else if it comes up.

-Spencer

[wking10]

hi Spencer,
You've been a big help and given me guidance where otherwise I would have stuck. Thank you very much for spending time on answering. Really appreciated.