You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Zephyr

Professional

  • "Zephyr" started this thread

Posts: 994

Location: Netherlands

Occupation: Web developer

  • Send private message

1

Friday, February 5th 2010, 12:56am

Side scrolling

Hey all,

A few months back I added sidescrolling to my tours. I had 2 plugins on the left and right of the screen, when people put their mouse over it, they scrolled to the left or right. This was for the people that didnt grasp the concept of click and drag, to view a panorama.

Source code

1
2
3
4
5
6
  <plugin name="left" url="../images/whitemask.png" keep="true" visible="true" alpha="0" handcursor="false" zorder="98" align="left" width="10%" height="100%" 
onover="tween(plugin[left].alpha, 0.1);set(movevectorx,-0.2);" 
onout="tween(plugin[left].alpha,0);set(movevectorx,0);" />
  <plugin name="right" url="../images/whitemask.png" keep="true" visible="true" alpha="0" handcursor="false" zorder="98" align="right" width="10%" height="100%"
 onover="tween(plugin[right].alpha, 0.1); set(movevectorx,+0.2);
"onout="tween(plugin[right].alpha, 0);set(movevectorx,0);" />


Now I want to take this 1 step further. I want those things alsoo on the top and bottom. That's an easy fix, just turn m around I hear you say. But thats not all. I want them to respond more precisely. If someone puts his mouse in the topleft corner, he should pan and tilt to the top left. I could create an 8 way grid (topleft, topcenter, topright, left, right, bottom left, bottom center, bottom right). But before I do that, Is there an easier way to accomplish this?
Can't I just create a rectangle with nothing in the center, and when the user goes with the mouse over the border, krpano puts mousefollow on true or someting? But just for those edges. And drag for the rest of the area.

I think i've seen an example somewhere (the guy had a black border that showed up when mouse whent over, with an arrow in all directions)

This is for the childrens game I'm making.
3d childrens game using krpano Game
Minify your xml with my krpano XML Compressor
Krpano XML Parsing Error Checklist
Available for hire (krpano xml, javascript, actionscript, flash, php and ipad plugins).

2

Friday, February 5th 2010, 9:07am

RE: Side scrolling

.....If someone puts his mouse in the topleft corner, he should pan and tilt to the top left.....
I do not clearly understand that part which i think is the most important. If you want the pano to move to the left and the top, then you can use movevectory along with movevectorx .

Tourvista

Intermediate

Posts: 257

Location: Leicester UK

  • Send private message

3

Friday, February 5th 2010, 10:37am

Something like this?

EXAMPLE

I haven't tested but you could try the following:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
<plugin name="topleft" url="../images/whitemask.png" 
    keep="true" 
    visible="true" 
    alpha="0" 
    handcursor="false" 
    zorder="98" 
    align="left" 
    width="10%" 
    height="100%" 
    onover="tween(plugin[left].alpha, 0.1);set(movevectorx,-0.7);set(movevectorx,0.7);" 
    onout="tween(plugin[left].alpha,0);set(movevectorx,0);" 
/>


The other three corners are very similar, just choose 0.7 or -0.7 as x and y coordinates.

I am very used to click and drag, so the first time I tried this navigation method I was completely confused. Now I think it is fine. Although that zoom button in the middle of the screen is really annoying *confused*

Tuur

Sage

Posts: 3,124

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

4

Friday, February 5th 2010, 11:11am

Hi,

maybe followmouse plugin?

i'm not so fan of it though..

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

Zephyr

Professional

  • "Zephyr" started this thread

Posts: 994

Location: Netherlands

Occupation: Web developer

  • Send private message

5

Friday, February 5th 2010, 6:00pm

Yes something like that. But thats just 8 directions. What if you want to do that in all 360 degrees... It's possible with the followmouse plugin, but the plugin reacts as soon as you leave the center. I want it to react as soon its 90% of the center (near the edge). So I was thinking about enabling/disabling the mousefollow plugin as it reaches the border or something...
3d childrens game using krpano Game
Minify your xml with my krpano XML Compressor
Krpano XML Parsing Error Checklist
Available for hire (krpano xml, javascript, actionscript, flash, php and ipad plugins).

6

Tuesday, February 9th 2010, 10:34am

It's possible with the followmouse plugin, but the plugin reacts as soon as you leave the center. I want it to react as soon its 90% of the center (near the edge). So I was thinking about enabling/disabling the mousefollow plugin as it reaches the border or something...
Hi,

yes, that would be possible by modifying the followmouse plugin,
the plugin code is pretty simple, just check the mouse position and
set the movement accordingly,

have a look here - I have quickly build a modified plugin for that now:
Follow Mouse Plugin

best regards,
Klaus

Zephyr

Professional

  • "Zephyr" started this thread

Posts: 994

Location: Netherlands

Occupation: Web developer

  • Send private message

7

Tuesday, February 9th 2010, 2:52pm

Awesome Klaus :)

I've tested it, and it works like intended! Just one more thing. It seems that it respects the boundries of the stage. What if you have an bigger stage, but a small area?

Would I just alter these:

Source code

1
2
 var sx:Number = stage.stageWidth  * 0.5;
 var sy:Number = stage.stageHeight * 0.5;


To area? iow krpano.get(area.width) ?
3d childrens game using krpano Game
Minify your xml with my krpano XML Compressor
Krpano XML Parsing Error Checklist
Available for hire (krpano xml, javascript, actionscript, flash, php and ipad plugins).

8

Tuesday, February 9th 2010, 3:06pm

To area? iow krpano.get(area.width) ?
the pixel size and position (from left top) from the area can be readed via these variables:
"area.pixelx"
"area.pixely"
"area.pixelwidth"
"area.pixelheight"

note - in the of case of area usage, you also need to correct the mouse offset (position),
e.g.

Source code

1
2
3
4
var mx:Number = stage.mouseX - krpano.get("area.pixelx");
var my:Number = stage.mouseY - krpano.get("area.pixely");
var sx:Number = krpano.get("area.pixelwidth")  * 0.5;
var sy:Number = krpano.get("area.pixelheight") * 0.5;


best regards,
Klaus

Zephyr

Professional

  • "Zephyr" started this thread

Posts: 994

Location: Netherlands

Occupation: Web developer

  • Send private message

9

Wednesday, February 10th 2010, 10:35pm

Thanks Klaus,

Another question. i'm trying to figure out the formule used.

Source code

1
2
            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);


This seems to be the formule that decides how strong the vector force reacts. How would I adjust the area it responds too? The edges still seem to big for my taste. Alsoo If you move your mouse outside the area (in the black stage) It still rotates. How can I fix this?
3d childrens game using krpano Game
Minify your xml with my krpano XML Compressor
Krpano XML Parsing Error Checklist
Available for hire (krpano xml, javascript, actionscript, flash, php and ipad plugins).

Zephyr

Professional

  • "Zephyr" started this thread

Posts: 994

Location: Netherlands

Occupation: Web developer

  • Send private message

10

Tuesday, February 23rd 2010, 1:53am

Ok I seem to have it working.

Source code

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
			private function mouse_move (event:MouseEvent):void
		{
			var mx:Number = stage.mouseX - krpano.get("area.pixelx");
			var my:Number = stage.mouseY - krpano.get("area.pixely");
			var sx:Number = (krpano.get("area.pixelwidth") - 250)  * 0.5;
			var sy:Number = krpano.get("area.pixelheight") * 0.5;

			// calc motion vectors: -1.0 to +1.0
			var vx:Number = (mx - sx) / sx;
			var vy:Number = (my - sy) / sy;
			
			//if mouse button is down or mouse is in the center, stop movement
			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. -1 to 1

				vx = 2.0 * (vx < 0 ? -1.0 : +1.0) * (Math.max(Math.abs(vx),0.75) - 0.75);
				vy = 2.0 * (vy < 0 ? -1.0 : +1.0) * (Math.max(Math.abs(vy),0.75) - 0.75);
			
				// stop very slow moving
				if (Math.abs(vx) < 0.01)	vx = 0;
				if (Math.abs(vy) < 0.01)	vy = 0;
				
				// stop moving when in black.
				if (Math.abs(vx) > 1)	{vx = 0; vy = 0;}				
				if (Math.abs(vy) > 1)	vy = 0;

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


I added a 250px offse in sx because I have a menu on the left and dont want the mouse to move when I hover over the menu.
I alsoo hadded 2 limits. If either vx or vy goes above 1 (the area size). It will stop moving. Alsoo when vx > 1, I set vy to 0 to, because else you could still tilt up and down when hovering in the menu.

Now there is only 1 thing I'm struggling with. It seems it ignores the mousespeed, mousefriction, mouseaccellerate settings etc. it feels too fast for me. I can fix this quickly in a sloppy way:

Source code

1
2
3
				// set move forces
				krpano.set("hlookat_moveforce", vx * 0.5);
				krpano.set("vlookat_moveforce", vy * 0.5);


But I want the regular mousespeed of dragging the panorama match the maximum mousespeed of the followmouse area.
Iow
mousespeed = 2.0
the max mousespeed (either vx/vy = 1 or -1) is 2.0 too. But too know that, I need to know what the default value is of mousespeed when vx/vy = 1 / -1
3d childrens game using krpano Game
Minify your xml with my krpano XML Compressor
Krpano XML Parsing Error Checklist
Available for hire (krpano xml, javascript, actionscript, flash, php and ipad plugins).

11

Wednesday, February 24th 2010, 2:46pm

Hi,

Quoted

Now there is only 1 thing I'm struggling with. It seems it ignores the mousespeed, mousefriction, mouseaccellerate settings
originally the "hlookat_moveforce" and "vlookat_moveforce" variables were used only internally for keyboard control,
therefore the movement speed when using this variables was be controlled by the <control> keyboard settings
like "keybaccelerate", "keybspeed" and "keybfriction":
http://krpano.com/docu/xml/#control

best regards,
Klaus

Similar threads