Follow Mouse Plugin

klaus.krpano · March 17, 2009 at 9:06 AM

Hello,

I was asked about a follow mouse control mode,
such control mode doesn't exists currently in krpano,
but it would be very easy to implement it as plugin:

add a ENTER_FRAME handler
look for the mouse coordinates
modify the hlookat_moveforce / vlookat_moveforce values accordingly

here is an example plugin source code:

AS3 plugin code:

Code

package
{
  import flash.display.Sprite;
  import flash.events.Event;


  import krpano_as3_interface;




  public class followmouse extends Sprite
  {
    private var krpano : krpano_as3_interface = null;


    public function followmouse()
    {
      if (stage == null)
        this.addEventListener(Event.ADDED_TO_STAGE, startplugin);
    }


    private function startplugin(evt:Event):void
    {
      krpano = krpano_as3_interface.getInstance();


      if ( krpano.get("version") < "1.0.7" )
      {
        krpano.call("error(followmouse plugin - wrong krpano version! 1.0.7 or higher needed);");
        return;
      }


      // disable default mouse control
      krpano.set("control.mousetype", "off");


      // add frame listener
      addEventListener(Event.ENTER_FRAME, enterFrameHandler);
    }




    private function enterFrameHandler(event:Event):void
    {
      var mx:Number = stage.mouseX;
      var my:Number = stage.mouseY;
      var sx:Number = stage.stageWidth  * 0.5;
      var sy:Number = stage.stageHeight * 0.5;


      // calc motion vectors: -1.0 to +1.0
      var vx:Number = (mx - sx) / sx;
      var vy:Number = (my - sy) / sy;


      // advance it a little bit:
      // - make moving slower in the middle
      // - and faster in the outer regions
      vx = (vx < 0 ? -1.0 : +1.0) * Math.pow(Math.abs(vx), 2.0);
      vy = (vy < 0 ? -1.0 : +1.0) * Math.pow(Math.abs(vy), 2.0);


      // stop very slow moving
      if (Math.abs(vx) < 0.01)  vx = 0;
      if (Math.abs(vy) < 0.01)  vy = 0;


      // set move forces
      krpano.set("hlookat_moveforce", vx);
      krpano.set("vlookat_moveforce", vy);
    }
  }
}

Display More

here an online example with it:
Follow Mouse Plugin Example

download the plugin and source here:
followmouse_plugin.zip
followmouse_sourcecode.zip

best regards,
Klaus

Job.1 · March 17, 2009 at 7:27 PM

wahou !!!
a great one

tx a lot Klaus

housser · April 4, 2009 at 12:11 AM

Hi Klaus,

The plugin works great, and makes total sense.

One issue I'm having is disabling it... Here's my XML:

The reason I'm doing this, is because I don't want to enable it until my initial animation sequence has finished. Have I typoed in my XML, or is there a problem with disabling this plugin? This is the first time I've tried disabling a plugin, next step will be for me to figure out how to re-enable it

Thanks for the help,
John

klaus.krpano · April 4, 2009 at 1:12 AM

Hi,

with enabled="false" only the clicking possibility of an plugin will be disabled
to enable/disable it the plugin must be extended with an option for that,

or try to remove and add it dynamically with "removeplugin() " and "addplugin() "
this could also work,

best regards,
Klaus

kingtrush · May 21, 2009 at 5:37 PM

Hi Klauss !
I don't why but addplugin() and removeplugin() can't disenabled the followmouse ...
can u help me ????

klaus.krpano · May 27, 2009 at 10:19 AM

Hi, that's just because this plugin doesn't listen for removing, sorry

here is an updated plugin code with a remove event,
now removeplugin() will work:

AS3 plugin code:

Code

package
{
    import flash.display.Sprite;
    import flash.events.Event;


    import krpano_as3_interface;




    public class followmouse extends Sprite
    {
        private var krpano : krpano_as3_interface = null;


        private var control_mousetype_backup:String = null;


        public function followmouse()
        {
            if (stage == null)
            {
                this.addEventListener(Event.ADDED_TO_STAGE, startplugin);
                this.addEventListener(Event.REMOVED_FROM_STAGE, stopplugin);
            }
        }


        private function startplugin(evt:Event):void
        {
            krpano = krpano_as3_interface.getInstance();


            if ( krpano.get("version") < "1.0.7" )
            {
                krpano.call("error(followmouse plugin - wrong krpano version! 1.0.7 or higher needed);");
                return;
            }


            // save current control mode
            control_mousetype_backup = krpano.get("control.mousetype");
            
            // disable default mouse control
            krpano.set("control.mousetype", "off");


            // add frame listener
            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
        }
        
        private function stopplugin(evt:Event):void
        {
            // remove frame listener
            removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
                    
            // restore old controlmode
            krpano.set("control.mousetype", control_mousetype_backup);
        }


        private function enterFrameHandler(event:Event):void
        {
            var mx:Number = stage.mouseX;
            var my:Number = stage.mouseY;
            var sx:Number = stage.stageWidth  * 0.5;
            var sy:Number = stage.stageHeight * 0.5;


            // calc motion vectors: -1.0 to +1.0
            var vx:Number = (mx - sx) / sx;
            var vy:Number = (my - sy) / sy;


            // advance it a little bit:
            // - make moving slower in the middle
            // - and faster in the outer regions
            vx = (vx < 0 ? -1.0 : +1.0) * Math.pow(Math.abs(vx), 2.0);
            vy = (vy < 0 ? -1.0 : +1.0) * Math.pow(Math.abs(vy), 2.0);
            
            // stop very slow moving
            if (Math.abs(vx) < 0.01)    vx = 0;
            if (Math.abs(vy) < 0.01)    vy = 0;


            // set move forces
            krpano.set("hlookat_moveforce", vx);
            krpano.set("vlookat_moveforce", vy);
        }
    }
}

Display More

and here an updated swf:
followmouse_v2.zip

best regards,
Klaus

klaus.krpano · February 9, 2010 at 10:31 AM

Hi,

here another follow mouse plugin variant:

it follows the mouse only on the outer area of the pano,
and allows normal control in the center,
and as addition in this plugin the movement stops when the mouse leaves the screen/pano,

here the as3 code:

Code

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;


    import krpano_as3_interface;


    public class followmouse extends Sprite
    {
        private var krpano : krpano_as3_interface = null;


        public function followmouse()
        {
            if (stage == null)
            {
                this.addEventListener(Event.ADDED_TO_STAGE, startplugin);
                this.addEventListener(Event.REMOVED_FROM_STAGE, stopplugin);
            }
        }


        private function startplugin(evt:Event):void
        {
            krpano = krpano_as3_interface.getInstance();


            if ( krpano.get("version") < "1.0.7" )
            {
                krpano.call("error(followmouse plugin - wrong krpano version! 1.0.7 or higher needed);");
                return;
            }


            stage.addEventListener(Event.MOUSE_LEAVE,     mouse_out);
            stage.addEventListener(MouseEvent.MOUSE_MOVE, mouse_move);
        }


        private function stopplugin(evt:Event):void
        {
            stage.removeEventListener(Event.MOUSE_LEAVE,     mouse_out);
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouse_move);
        }


        private function mouse_move (event:MouseEvent):void
        {
            var mx:Number = stage.mouseX;
            var my:Number = stage.mouseY;
            var sx:Number = stage.stageWidth  * 0.5;
            var sy:Number = stage.stageHeight * 0.5;




            // calc motion vectors: -1.0 to +1.0
            var vx:Number = (mx - sx) / sx;
            var vy:Number = (my - sy) / sy;


            if ( event.buttonDown || (vx > -0.5 && vx < 0.5 && vy > -0.5 && vy < 0.5) )
            {
                // middle area - normal control


                krpano.set("hlookat_moveforce", 0);
                krpano.set("vlookat_moveforce", 0);
            }
            else
            {
                // outer area - automatic followmouse movement


                vx = 2.0 * (vx < 0 ? -1.0 : +1.0) * (Math.max(Math.abs(vx),0.5) - 0.5);
                vy = 2.0 * (vy < 0 ? -1.0 : +1.0) * (Math.max(Math.abs(vy),0.5) - 0.5);


                // stop very slow moving
                if (Math.abs(vx) < 0.01)    vx = 0;
                if (Math.abs(vy) < 0.01)    vy = 0;


                // set move forces
                krpano.set("hlookat_moveforce", vx);
                krpano.set("vlookat_moveforce", vy);
            }
        }


        private function mouse_out(event:*):void
        {
            krpano.set("hlookat_moveforce", 0);
            krpano.set("vlookat_moveforce", 0);
        }
    }
}

Display More

and here as download: (.swf and .as)
followmouse_v3.zip

best regards,
Klaus

AGRID · February 24, 2010 at 3:52 PM

Thanks Klaus, it's great!!!

weirk · April 23, 2010 at 10:43 PM

Klaus,

I have a map that slides out from the side on hover, and I was wondering if there was a way to disable this plug in
when the mouse is hovered over the map

thanks so much for the help

you truly are the pano king

-K

maaike · May 13, 2010 at 7:09 PM

Nice plugin! Tried it with the area-tag, but that doesn't work. Any ideas how to get that working?

maaike · May 19, 2010 at 12:05 PM

var mx:Number = stage.mouseX;
var my:Number = stage.mouseY;
var sx:Number = stage.stageWidth * 0.5;
var sy:Number = stage.stageHeight * 0.5;

Maybe 'stage' must be something else when using an area. area instead of stage? Don't think so?

Tuur · May 19, 2010 at 2:33 PM

maybe stupid but did you try parent="area" ?
if that's possible in the first place..

Tuur

maaike · May 19, 2010 at 3:03 PM

parent area not found (ofzoiets). Doesn't work :(.

klaus.krpano · May 20, 2010 at 1:22 PM

Hi,

Quote from maaike

var mx:Number = stage.mouseX;
var my:Number = stage.mouseY;
var sx:Number = stage.stageWidth * 0.5;
var sy:Number = stage.stageHeight * 0.5;
Maybe 'stage' must be something else when using an area. area instead of stage? Don't think so?

right, to get it working with area you need to use also the area size and position,

e.g.

Code

var area:Object = krpano.get("area");


var mx:Number = stage.mouseX - area.pixelx;
var my:Number = stage.mouseY - area.pixely;
var sx:Number = area.pixelwidth  * 0.5;
var sy:Number = area.pixelheight * 0.5;

best regards,
Klaus

maaike · May 20, 2010 at 1:35 PM

Thank you. Does this also work with a non-fixed pixelheight/width? So with percentages?

I'll try later @ home. Thanks!

klaus.krpano · May 20, 2010 at 1:49 PM

Hi,

yes, the area.pixel* values are the calculated pixels values,

best regards,
Klaus

Pauli Bauer · June 13, 2010 at 8:19 AM

klaus, danke nochmals für die hilfe!
funktioniert jetzt und ich kann im panorma nur durch kopfbewegung navigieren (mittels track-ir und diodenkappe).
allerdings ist die bewegung sehr schnell.kann man die geschwinkdigkeit, trägheit etc. auf einfachen weg gut einstellen, ansonsten dreht es viel zu schnell, wenn ich nur ein bißchen denkopf bewege. stelle es mir so vor, wie beim ms-flight-simulator, da funktionioerts perfekt mit der kopfdrehung/bilddrehung (aussicht aus dem flugzeug z.b.).
danke
lg pauli

Tuur · June 13, 2010 at 11:55 AM

He Pauli,

do you use those virtual goggles??

Which ones? i'm looking forward to use those as well..

can you provide some info??

I think you can probably change the turning with the settings with the plugin where you also can see the lookto etc ..
have a play with that..

I think it's the options plugin.. else the editor..

Cheers

Tuur

milotimbol · July 8, 2010 at 2:02 AM

Nice plugin! I'm trying to create a toggle on/off mouse follow option on my tour. However when I do this

Code

<action name="mouseFollowOff">
		removeplugin(mousefollow);
	</action>

the player wont stop looking at the sky. The plugin is disabled but when I try to drag the view back to the center, it would go back looking at the sky.

Here's how i declared the plugin.

Code

<plugin name="mousefollow" 
		url="%SWFPATH%/plugins/followmouse.swf" 
		keep="true"
		enabled="true"
	/>

Here's how i am removing it, just removed the unnecessary middle section like alpha, blendmode, etc.

Code

plugin name="mouseFollowOffBtn" url="mouse-follow-off.png" alpha="0.9"  y="-4" x="695" onclick="action(mouseFollowOff);"/>

Is there a way to fix this?

thanks,
Milo

Zephyr · July 9, 2010 at 9:10 AM

try resetting the moveforce

Code

set(hlookat_moveforce, 0);
set(vlookat_moveforce, 0);

Participate now!