Multiple distorted hotspot pixelhittest - Call for quick brainstorming

Umalo

Hi

Started on project where I have to align multiple distorted hotspots. All goes fine with "perfect pixel alignement tutorial" steps but than I realised that pixelhittest is confused
This is the call for brainstorming as I can't find quick solution by my own.

Here is the link on test I prepared for this topic:
link to test example
Code is available here: link to code
Complete project folder can be downloaded: here 700k

Quick info:
- hotspots have pixelhitest and distorted attribute set to true
- zorder2 is not of use here as I have only distorted hotspot
- normal zorder is also not of much help
- seams that pixelhitest is confused the most on the areas where my images are intersecting. Have prepared outlined image to get a feeling what I'm talking about here:

- Right leg of purple and green image, right arm of purple image....are the areas where you can easy see what area are not triggering onmouse over event properly.

Any help of idea is appreciated.
Regards
Umalo

sachagriffin

I have an idea.
These are supposed to be invisible I guess.
Here's my crappy idea. I just did two. The problem is onout for re-entering the SAME hotspot. I would set a delayedcall to reset all scales to 1. With this method, going from a pixelhittest overlap to overlap should work.

Code

<hotspot name="hotspot_igrac_01" style="style_hotspot" url="hotspots/hotspot_igrac_01.png" zorder="1" onloaded="calc_pos_from_hfov_yaw_pitch_roll(19,94.9474,-0.6264,12.8793);" 	       
		onover="
		set(hotspot[hotspot_igrac_01].scale,1);
		set(hotspot[hotspot_igrac_02].scale,0.5);
		set(hotspot[hotspot_igrac_03].scale,0.5);
		set(hotspot[hotspot_igrac_04].scale,0.5);
		copy(layer[tooltip].html,nk[popis_igraca].podaci[get(name)].ime);set(layer[tooltip].visible, true);tween(layer[tooltip].alpha, 1.0, 0.5);asyncloop(hovering, copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );"
	    onout="
	    set(hotspot[hotspot_igrac_01].scale,0.5);
		set(hotspot[hotspot_igrac_02].scale,1);
		set(hotspot[hotspot_igrac_03].scale,1);
		set(hotspot[hotspot_igrac_04].scale,1);
	    tween(layer[tooltip].alpha, 0.0, 0.25, default, set(layer[tooltip].visible,false), copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );"	  />
	<hotspot name="hotspot_igrac_02" style="style_hotspot" url="hotspots/hotspot_igrac_02.png" zorder="1" onloaded="calc_pos_from_hfov_yaw_pitch_roll(19,82.562,2.5783,13.7965);" 		       
		onover="
		set(hotspot[hotspot_igrac_02].scale,1);
		set(hotspot[hotspot_igrac_01].scale,0.5);
		set(hotspot[hotspot_igrac_03].scale,0.5);
		set(hotspot[hotspot_igrac_04].scale,0.5);
		copy(layer[tooltip].html,nk[popis_igraca].podaci[get(name)].ime);set(layer[tooltip].visible, true);tween(layer[tooltip].alpha, 1.0, 0.5);asyncloop(hovering, copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );"
	    onout="
   	    set(hotspot[hotspot_igrac_02].scale,0.5);
		set(hotspot[hotspot_igrac_01].scale,1);
		set(hotspot[hotspot_igrac_03].scale,1);
		set(hotspot[hotspot_igrac_04].scale,1);
	    tween(layer[tooltip].alpha, 0.0, 0.25, default, set(layer[tooltip].visible,false), copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );"	  />

Alles anzeigen

Umalo

WOW, I like your out of the box thinking. There are no crappy ideas. Same with questions. Only answers can be stupid
I can make your idea dynamic but there is a flood:
- at start all hotspots should be scale = 1. This is fine.
- when onover on first hotspot all other hotspot goes to scale 0.5 (it can be even 0) and there is the catch. Again I have areas of hotspots that are not capturing the mouse event properly due to pixelhittest confused with overlaping. So it might happend that even I have mouse over hotspot2 if I hit exactly the area that is not active I can't trigger other hotspot scaling to 0.5. Take a look at image of green hotspot. I left mouse at this position by purpose. On this position (almost whole leg) is not catching onover event so I can't reliably use your solution and be sure that it works 100%.

Maybe this will tickle some other ideas.

Umalo

Decided to go with narrowed images and to avoid overlapping but still question is open at least for Klaus to think if something is possible as people will have designs like mine for sure.
This way I can't get all areas covered ;( There are minor gaps between images which I tried to avoid but no idea for now how to solve this.
Umalo

sachagriffin

What about instead of images... Use polygons.

Umalo

that was also my initial idea but as still not sported on HTML5 rejected.
Workaround with narrowed images in this project I'm doing now is acceptable so I can go with it now.

Hope we will all find or some solution or Klaus will jump in with some already implemented not tested/documented attribute like transparency_overlapping="true"

Multiple distorted hotspot pixelhittest - Call for quick brainstorming

Jetzt mitmachen!

Benutzer online in diesem Thema