screen center trigger hotspot hover on mobile

herrpedro · June 23, 2015 at 1:38 PM

is it possible to trigger "onhover" of some hotspot if the center of the screen is hovering it?
i'd like to show some additional info if the screen center is hovering a polygonal hotspot and i think that it would be a nice replacement for the mouse movement
kind of webvr cursor behavior but only for mobile/touch

thank you for your help

klaus.krpano · June 23, 2015 at 2:48 PM

Hi,

a full-shape hit-testing is not that easily possible this way, but when only checking the distance to the hotspots center - e.g. when its lower than 20 degrees, then it might be possible this way:

Here a quick example:

Code

<events name="checkhotspots" keep="true" onviewchange="checkhotspots();" />


<action name="checkhotspots">
  for(set(i,0), i LT hotspot.count, inc(i),
    copy(hs,hotspot[get(i)]);
    hs.getcenter(hs_h, hs_v);
    getlooktodistance(d, hs_h, hs_v);
    if(d LT 20,
       set(hs.hovering, true);
     ,
       set(hs.hovering, false);
      );
   );
</action>

Display More

See also these links:
https://krpano.com/docu/actions/#getlooktodistance
https://krpano.com/docu/xml/#hotspot.getcenter

Best regards,
Klaus

herrpedro · June 23, 2015 at 6:12 PM

thank you so much for the fast response
i added a variable dfov that shrinks with FOV so the center does not grow
initially i got a 120fov so 6º seems ok
with the initial 20 i had a "christmas tree" on my pc since i change the gama and they all lit up :D

.....
div(dfov , view.fov , 20);
if(d LT dfov, .... ...

in desktop the "onout" is not triggered.. added a trace and it shows in log

i'll add an aditional IF for a state change so it does changes hovering to true if already true or false if already false

and does not seem to work on my phone at all (the visual part)
i added a trace to the hs.hovering = true and it traces the hover hotspot correctly
is there any limitation for polygonal hotspots? when i click them it makes the zoom i programmed it to do.. but not hovering

thanks again

herrpedro · June 23, 2015 at 6:31 PM

my last code...
in desktop it starts hovering and visually i get the effect
but does not trigger the onout
in trace i see the start and the end correctly

Code

for(set(i,0), i LT hotspot.count, inc(i),
		copy(hs,hotspot[get(i)]);
		hs.getcenter(hs_h, hs_v);
		getlooktodistance(d, hs_h, hs_v);
		div(dfov , view.fov , 20);
		if(d LT dfov,
			if (!hs.hovering , 
				set(hs.hovering, true);
				trace('started hovering '  , hs.name);
			);
		 ,
			if (hs.hovering , 
				set(hs.hovering, false);
				trace('ended hovering '  , hs.name);
			);
		  );
	   );

Display More

i just cheched that my hover is not called on my phone siunce i see the start and ended hover but i dont see 'border alpha' entry
here is my style definition and my action

Code

<style name="info_area" handcursor="true" capture="false" alpha="0.1" fillcolor="0x222222" fillalpha="0" borderwidth="4" bordercolor="0xffffff" borderalpha="1" ondown="" onup="" onloaded="" keep="false" visible="true" enabled="true"	onover="tweencall(get(name) ,get(hsname) ,1,1);" onhover="tweencall(get(name) ,get(hsname),1,1);" onout="tweencall(get(name) ,get(hsname), 0.1 ,1);cleartext();" 	onclick="zoomtosubject(get(zoomspot) , get(hspot) , get(vspot));"	></style>


	<action name="tweencall">		tween(hotspot[%1].alpha, %3, %4);		trace('border alpha' , hotspot[%1].name );		showtext(get(data[%2].content) , InfoStyle);	</action>

herrpedro · June 24, 2015 at 5:06 PM

found out why it does not trigger the "onout"
because it is out of the center distance.... got to move that out of the "if" distance to center os less than....
but.. still does not work on mobile :(
i'll keep working on this but.. if any of you can help....

nicoclark · August 18, 2015 at 10:44 AM

Hi Klaus,

Many congratulations on the new version of the software. I'm so glad that I started working with KrPano because you have never stopped developing and improving it.

I noticed the webVR cursor that you created and realised that that sort of cursor is what I've been really looking for since going into mobile devices. The ability to hover over hotspots without the use of a mouse and communicate something about their function before actually using them gives back a lot of functionality that has been lost in the transition to mobile devices.

What you suggested here is perfect to use on a smart phone unfortunately the code doesn't seem to be transfer between platforms. If I test it on the desktop the trace comes back but if on the iPhone simulator there is no trace coming back. I'm sure there is something straightforward to address here but it would be so helpful if you could doublecheck it and see where the problem lies.

Many thanks,

Nico

Mudin · March 29, 2016 at 10:32 AM

Hello everyone,

Thanks for the code. This is what I needed to hide hotspots and show them when they are near center!
But I have an issue.
So I have got a question. Sorry if it is not reasonable. I am beginner ;)

I want to change alpha of the hotspot that I have created, not the arrows.
Hotspot names are like these: "h1", "h2", .....
I am using string plugin to find the character "h" from each hotspot name to check if it is hotspot I created or arrow

This is the part of the code:

Quote

<action name="checkhotspots">
for(set(i,0), i LT hotspot.count, inc(i),
copy(hs,hotspot[get(i)]);
hs.getcenter(hs_h, hs_v);
getlooktodistance(d, hs_h, hs_v);
plugin[string].txtfind(destVar,get(hs.name),'h');
if(destVar == 0,
if(d LT 20,
set(hs.alpha, "0.9");
,
set(hs.alpha, "0");
);
);
);
</action>

Display More

The condition (destVar == 0 ) is never true.

It would be great If I get solution.
Thanks a lot,
Mudin

peterpang · June 12, 2016 at 9:50 AM

Quote from herrpedro

thank you so much for the fast response
i added a variable dfov that shrinks with FOV so the center does not grow
initially i got a 120fov so 6º seems ok
with the initial 20 i had a "christmas tree" on my pc since i change the gama and they all lit up :D
.....
div(dfov , view.fov , 20);
if(d LT dfov, .... ...

in desktop the "onout" is not triggered.. added a trace and it shows in log
i'll add an aditional IF for a state change so it does changes hovering to true if already true or false if already false
and does not seem to work on my phone at all (the visual part)
i added a trace to the hs.hovering = true and it traces the hover hotspot correctly
is there any limitation for polygonal hotspots? when i click them it makes the zoom i programmed it to do.. but not hovering
thanks again

Display More

Hi herrpedro
I would like to do the same things, do you have simple example on this can share?
Many thanks

Participate now!