Pano2VR Beta Flash/HTML5 hotspot inconsistencies

[tuesi]

I have about 20 different info popups that I've created in my Skin. The popup contains a picture and info about the picture.

I have one hs_popup hotspot template defined.
For each hotspot that I'm defining in the pano, I'm trying to use the $ht (target) or $hu (url) placeholders to "pass in" the popup that I want to show to the hotspot template.

In the skin: I have an action for OnClick to "Show Element" and the element is $ht. (I created a hotspot in the pano and I use "popup_cats" for the Target field, and of course hs_popup for the Skin-ID)

In Flash:
This works. The popup shows. So that means whatever I'm populating in the URL and the Target field is getting passed in to hotspot template.

In HTML5:
This doesn't work. When I look in the skin.js file, all I see is this for the OnClick function is a call to the me.skin.hotspotProxyClick function.

Code: Select all

if (hotspot.skinid=='hs_popup') {
			this.div=document.createElement('div');
			this.div.ggId='hs_popup'
			this.div.ggParameter={ rx:0,ry:0,a:0,sx:1,sy:1 };
			this.div.ggVisible=true;
			hs ='position:absolute;';
			hs+='left: 754px;';
			hs+='top:  80px;';
			hs+='width: 5px;';
			hs+='height: 5px;';
			hs+='-webkit-transform-origin: 50% 50%;';
			hs+='visibility: inherit;';
			this.div.setAttribute('style',hs);
			this.div.onclick=function () {
				me.skin.hotspotProxyClick(me.hotspot.id);
			}

But if I created a hotspot template specifically to show popup_cats, then it works and the skin.js file shows this.

Code: Select all

		if (hotspot.skinid=='hs_popup') {
			this.div=document.createElement('div');
			this.div.ggId='hs_popup'
			this.div.ggParameter={ rx:0,ry:0,a:0,sx:1,sy:1 };
			this.div.ggVisible=true;
			hs ='position:absolute;';
			hs+='left: 754px;';
			hs+='top:  80px;';
			hs+='width: 5px;';
			hs+='height: 5px;';
			hs+='-webkit-transform-origin: 50% 50%;';
			hs+='visibility: inherit;';
			this.div.setAttribute('style',hs);
			this.div.onclick=function () {
				me.skin.popup_cats.style.webkitTransition='none';
				me.skin.popup_cats.style.visibility='inherit';
				me.skin.popup_cats.ggVisible=true;
				me.skin.hotspotProxyClick(me.hotspot.id);
			}

Ideally I want a parameter driven way of triggering these 20 popups that I have...I want one hotspot template to be able to trigger any of the popups. The workaround is to created a new hotspot template for each popup that I want to launch. I want to avoid this because the Skin will be crowded with 20 hotspots templates.

[Hopki]

Hi
What may be better would be to use hotspot proxy IDs to open and close the popups. This would be much simpler and then you could either have the text as part of the popup or have the $ht for the title text.

All you need to do is set the ID of the hotspot in the hotspot editor to match the Hotspot Proxy ID of the popup.
Then give the popup the actions to hide and show.

In the hotspot editor: ID popup one.

Then image/popup in the skin set popup one in the Hotspot Proxy ID. as you click on the hotspot what ever actions are in the image/popup with be actioned.

As there is a bug (Apple not us) that causes strange things happening with html5/Css3 panos the solution/quick fix is to use scaling rather than hide/show or alpha.
With Hide/show or Alpha there is a delay from clicking the button to anything happening. Scaling works much faster.
Regards
Hopki

[tuesi]

That's a great tip/trick Hopki. Thanks!

However, I'm still up against a problem.

I'm using the hotspot proxy to trigger my popup. Inside the popup, two actions:
MouseClick -> Toggle Element Visibility -> $self
MouseClick -> Move To View -> $ht

This works in Flash but not in HTML5:

Here's the function in the skin.js:

Code: Select all

		this.in_store_pickup_popup.onclick=function () {
			flag=(me.in_store_pickup_popup.style.visibility=='hidden');
			me.in_store_pickup_popup.style.webkitTransition='none';
			me.in_store_pickup_popup.style.visibility=flag?'inherit':'hidden';
			me.in_store_pickup_popup.ggVisible=flag;
			me.player.moveTo(me.player.hotspot.target);
			alert(me.player.hotspot.target); //I put this here...
		}

When I first click on the hotspot, the javascript alert shows the right numbers that I want to use for Pan/Tilt/FoV. However, the view doesn't change. (I've tried this with the alert line commented out too)

When I click on the hotspot or the popup the popup disappears (as planned), but the alert shows blank, but then the view DOES move to the default starting view of the pano.