Irregular hotspot onover/onout behaviour when addding child elements (1.19 webgl behaviour)

nealshail · October 6, 2016 at 3:33 PM

I'm dynamically creating a plugin element and adding it as child element to a hotspot when i receive the hotspots onover event.
This is so I can display a text box as a 'hotspot popup'.

This was working fine in the 1.18 releases, and works in 1.19pr8 cssd3 mode,
however since 1.19 the webgl behaviour is behaving strangely after i add the plugin child element.

This is the correct behaviour (working in 1.18.4 and 1.19pr8 (css3d)).

(use the keys a/z to zoom in/out)
demo video:
https://test.fancam.com/hotspot_hover/…_compressed.m4v
live link:
https://test.fancam.com/hotspot_hover/?v=1184

And the buggy behaviour (1.19pr8 webgl)
demo video:
https://test.fancam.com/hotspot_hover/…_compressed.m4v
live link:
https://test.fancam.com/hotspot_hover/?v=119pr8

the essence of the xml:

Code

<action name="onStartup">


		addhotspot(hs);
        set(hotspot[hs].scale, 0.5);
        set(hotspot[hs].zoom, false);
        set(hotspot[hs].height, 'prop');
        set(hotspot[hs].zorder, 10);
        set(hotspot[hs].alpha, 0);
        set(hotspot[hs].enabled, true); 
        tween(hotspot[hs].alpha, 1, 1);
        set(hotspot[hs].ath, -63.26);
        set(hotspot[hs].atv, -5.12);
        set(hotspot[hs].url, 'tag.png');
        set(hotspot[hs].onout, onTagOut(hs, 'hs'));
        set(hotspot[hs].onover, onTagOver(hs, 'hs'));


</action>


<action name="onTagOut">
        trace('onTagOut: ',  %1);


        txtadd(tag_hover, 'th_', %1);
        removeplugin(get(tag_hover));
        trace('removing hover: ', get(tag_hover));
        set(hotspot[%1].zorder,10);
</action>




<action name="onTagOver">
        trace('onTagOver: ', %1);


        txtadd(tag_hover, 'th_', %1);
        trace('creating hover: ', get(tag_hover));
        addplugin(get(tag_hover));
        set(plugin[get(tag_hover)].url,"%HTMLPATH%/assets/swf/plugins/textfield.swf");
        set(plugin[get(tag_hover)].css,"text-align:left; vertical-align:top; color:#000000; font-family:Arial; font-size:18px;background-color:#ffffff;border-radius: 5px;padding-top:10px;padding-bottom:40px;padding-left:76px;padding-right:10px;min-width:204px;");
        set(plugin[get(tag_hover)].html,"someone");
        set(plugin[get(tag_hover)].align,top);
        set(plugin[get(tag_hover)].x,0);
        set(plugin[get(tag_hover)].y,35);
        set(plugin[get(tag_hover)].enabled,true);
        set(plugin[get(tag_hover)].alpha,1);
        set(plugin[get(tag_hover)].scale,1);
        set(plugin[get(tag_hover)].autosize,left);
        set(plugin[get(tag_hover)].autowidth,true);
        set(plugin[get(tag_hover)].wordwrap,false);
        set(plugin[get(tag_hover)].height,50);
        set(plugin[get(tag_hover)].background, false);
        set(plugin[get(tag_hover)].visible,true);
        set(plugin[get(tag_hover)].border,false);
        set(plugin[get(tag_hover)].parent, hotspot[%1]);
        set(plugin[get(tag_hover)].html, %2);    
        set(hotspot[%1].zorder, 11); 


</action>

Display More

It seems there are 2 problems here.

1. after the child element has been added and removed again the hittest area for the hotspot seems to stay at the zoom level when the child was added. i.e. onover is being triggered way outside the bounds of the hotspot when we are zoomed in.

2. onout is being triggered on the bounds of the original hotspot itself and is ignoring its newly added child element.

any ideas what might be causing this? or for a workaround?

ParallaxVT · October 7, 2016 at 3:42 PM

Hello,

That's a very weird behaviour indeed!

1. I know this sounds crazy, but try renaming the hotspot something different than 'hs'. For example:

Code

<action name="onStartup">
		addhotspot(newhs);

Once I experienced some problems because I named an action 'hs'. Krpano didn't like that. Maybe this is something similar.

2. Remove the following line, I don't think it's necessary.

Code

set(hotspot[hs].height, 'prop');

3. If I move the panorama and leave the marker near the top left corner, looks like the active area already a bit bigger that it should. Have you tried a different projection? The current one distorts the panorama very much on the edges.

4. The html attribute is dupplicated:

Code

set(plugin[get(tag_hover)].html,"someone");
        set(plugin[get(tag_hover)].html, %2);

Surely that didn't cause the problem but it helps get the code right.

5. Just curious. Why do you need to change the hotspot zorder?

I hope it helps.

nealshail · October 10, 2016 at 9:51 AM

Thanks a lot for your suggestions..!

1. tried changing the hotspot name to newhs, but i didn't see a change in behaviour in any way.

2. Thanks, i removed this and it seemed unnecessary as you suggested.

3. Again, i removed this and it was necessary.

4. The z-order is just so the popup will show on top of any other surrounding tags (if they happen to be near)..
In the real use cases there are literally thousands of tags shown all over the picture.

Despite your suggestions, I'm still getting the same symptoms though.. :(

For now the only option i have is to disable webgl for all browsers, but i'm afraid that the css3d support isn't equal supported across all browsers.

ParallaxVT · October 10, 2016 at 10:24 AM

Sorry to hear nothing of that worked.

I don't know why it behaves like that.

If you don't find a solution, you might consider using the showtext action.

Onhover Showtext

XML file

It's a different approach to what you've done. The text would be displayed in a text bubble following the mouse. This method would save you to apply the zorder trick, and also it feels like it shows the information quicker.

Cheers,

nealshail · October 10, 2016 at 3:26 PM

Thanks, thats a nice little solution, though the final solution has more info than just text, there are a number of clickable images as well..
Can i hang a more complicated plugin hierarchy from this hover box?

Also for mobile support I am using onclick to rather toggle the popup and not use onover/onout.. any ideas how this solution could work on mobile?

ParallaxVT · October 12, 2016 at 11:43 AM

Hello,

The showetxt plugin only displays text. You can format it by editing the textstyle and including HTML tags in brackets, but that's all. You can't include images.

You can trigger it by using onhover and onclick.

It can display text following the mouse (onhover), somewhere in the screen and full screen. Check the following link to see several examples

I hope it helps.

nealshail · October 18, 2016 at 10:51 AM

Hi, I've managed to successfully workaround the problem by simply adding the renderer="css3d" to the hotspot.
This way the bug in the webgl renderer is bypassed..

So far the workaround seems to work very well with no performance hit.

Participate now!