Sie sind nicht angemeldet.

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

nealshail

Anfänger

  • »nealshail« ist der Autor dieses Themas

Beiträge: 11

Wohnort: Brighton, UK

  • Nachricht senden

1

Donnerstag, 6. Oktober 2016, 15:33

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

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/ta…_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/ta…_compressed.m4v
live link:
https://test.fancam.com/hotspot_hover/?v=119pr8

the essence of the xml:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<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>


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

Anfänger

Beiträge: 21

Beruf: Photographer

  • Nachricht senden

2

Freitag, 7. Oktober 2016, 15:42

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:

Quellcode

 
1
2

<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.

Quellcode

 
1

        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:

Quellcode

 
1
2

        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.

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »ParallaxVT« (7. Oktober 2016, 15:55)

nealshail

Anfänger

  • »nealshail« ist der Autor dieses Themas

Beiträge: 11

Wohnort: Brighton, UK

  • Nachricht senden

3

Montag, 10. Oktober 2016, 09:51

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

Anfänger

Beiträge: 21

Beruf: Photographer

  • Nachricht senden

4

Montag, 10. Oktober 2016, 10:24

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

Anfänger

  • »nealshail« ist der Autor dieses Themas

Beiträge: 11

Wohnort: Brighton, UK

  • Nachricht senden

5

Montag, 10. Oktober 2016, 15:26

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

Anfänger

Beiträge: 21

Beruf: Photographer

  • Nachricht senden

6

Mittwoch, 12. Oktober 2016, 11:43

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

Anfänger

  • »nealshail« ist der Autor dieses Themas

Beiträge: 11

Wohnort: Brighton, UK

  • Nachricht senden

7

Dienstag, 18. Oktober 2016, 10:51

workaround

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.

Ähnliche Themen