Sie sind nicht angemeldet.

Side scrolling

Zephyr

Profi

  • »Zephyr« ist der Autor dieses Themas

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

1

Freitag, 5. Februar 2010, 00:56

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.

Quellcode

 
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.

srisa

Schüler

Beiträge: 143

  • Nachricht senden

2

Freitag, 5. Februar 2010, 09:07

RE: Side scrolling

Zitat von »Zephyr«

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

Fortgeschrittener

Beiträge: 260

Wohnort: Leicester UK

  • Nachricht senden

3

Freitag, 5. Februar 2010, 10:37

Something like this?

EXAMPLE

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

Quellcode

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

360 Virtual tours

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

4

Freitag, 5. Februar 2010, 11:11

Hi,

maybe followmouse plugin?

i'm not so fan of it though..

Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zephyr

Profi

  • »Zephyr« ist der Autor dieses Themas

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

5

Freitag, 5. Februar 2010, 18:00

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

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

6

Dienstag, 9. Februar 2010, 10:34

Zitat von »Zephyr«

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

Profi

  • »Zephyr« ist der Autor dieses Themas

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

7

Dienstag, 9. Februar 2010, 14:52

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:

Quellcode

 
1
2

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


To area? iow krpano.get(area.width) ?

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

8

Dienstag, 9. Februar 2010, 15:06

Zitat von »Zephyr«

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.

Quellcode

 
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

Profi

  • »Zephyr« ist der Autor dieses Themas

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

9

Mittwoch, 10. Februar 2010, 22:35

Thanks Klaus,

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

Quellcode

 
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?

Zephyr

Profi

  • »Zephyr« ist der Autor dieses Themas

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

10

Dienstag, 23. Februar 2010, 01:53

Ok I seem to have it working.

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

			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:

Quellcode

 
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

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

11

Mittwoch, 24. Februar 2010, 14:46

Hi,

Zitat

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

Ähnliche Themen