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.

viewinz

Intermediate

  • "viewinz" started this thread

Posts: 145

Location: Wellington, New Zealand

Occupation: Trying to build an entire walkthrough of NZ for tourists

  • Send private message

1

Wednesday, May 12th 2010, 3:52am

detect click and drag

hi.

I'm trying to offer tips on use depending on user interaction, i.e. if a user doesn't click and drag the image give them some tips after a set time.

I've tried various combinations of checking for mousedown and mouseup etc and I don't get a favourable result.

Source code

1
2
3
4
5
6
7
8
set(events.onmousedown,checkdrag();set(dragging,on);trace(mousedown));
set(events.onmouseup,set(dragging,off);trace(mouseup));
set(events.onclick,trace(click));
set(dragged,false);

<action name="checkdrag">
delayedcall(5, if (dragging == on, set(dragged,done));trace(dragdone),trace(drag not));
</action>


I'm trying to check to see if a user has clicked and dragged the image basically and set a variable I can check later on.

Any ideas?


p.s. You have to click the image before you can start using the keyboard it seems, even for opening the trace window. Is this intentional?

2

Wednesday, May 12th 2010, 7:37am

RE: detect click and drag


I'm trying to offer tips on use depending on user interaction, i.e. if a user doesn't click and drag the image give them some tips after a set time.

I've been meaning to do something like this also. Basically, put up usage tips if the user has never dragged the pano, or zoomed, or used a particular feature...

I'm trying to check to see if a user has clicked and dragged the image basically and set a variable I can check later on.

Any ideas?

How about this:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<krpano version="1.0.8" >
	<events
		onmousedown="copy(events.orig_onviewchange,events.onviewchange);
				if(events.onviewchange === null,
					set(events.onviewchange,set(dragged,true);
						set(events.onmousedown,null);
						set(events.onmouseup,null);
						set(events.onviewchange,null););
				,
					txtadd(events.onviewchange,get(events.onviewchange),
						;set(dragged,true);
						set(events.onmousedown,null);
						set(events.onmouseup,null);
						copy(events.onviewchange,events.orig_onviewchange););
				);"
		onmouseup="copy(events.onviewchange,events.orig_onviewchange);"
	 />

	<preview type="grid(cube,16,16,512,0xCCCCCC,0x333333,0x999999);" details="16" />
</krpano>

This code adds an onviewchange event whenever the mouse button is down. Basically, if the user presses and drags, then the variable dragged is set to true (and then the drag-testing events are cleaned up). Otherwise the variable dragged is null (you can set it to false at startup if you like, but basically the test if (events.dragged == true will tell you if the user has ever dragged the mouse.)

Hope this helps

steve

viewinz

Intermediate

  • "viewinz" started this thread

Posts: 145

Location: Wellington, New Zealand

Occupation: Trying to build an entire walkthrough of NZ for tourists

  • Send private message

3

Wednesday, May 12th 2010, 10:03am

Hi Steve,

Cheers for that.

I don't seem to be able to get it working and can't exactly follow what's happening..

I'm getting this error onmousedown:

Source code

1
WARNING: unknown action command: null;set

Tuur

Sage

Posts: 3,235

Location: Netherlands

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

  • Send private message

4

Wednesday, May 12th 2010, 10:48am

Can't be "idle time" be a solution for this?

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

5

Wednesday, May 12th 2010, 3:21pm

I'm getting this error onmousedown:

Source code

1
WARNING: unknown action command: null;set


Sorry, my guess is you're using an earlier build of 10.0.8 beta 9 that doesn't support the === (strict comparison) operator, try this:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<krpano version="1.0.8" onstart="delayedcall(2,if (dragged != true,showtext(dude![br] this is an [u]interactive[/u] panorama[br] you can look around by clicking and dragging the mouse,infostyle)));" >
	<events
		onmousedown="set(events.onviewchange,set(dragged,true);
				set(events.onmousedown,null);
				set(events.onmouseup,null);
				set(events.onviewchange,null););"
		onmouseup="set(events.onviewchange,null);"
	/>
	<textstyle name="infostyle"
		origin="center"
		textalign="center"
		backgroundcolor="0x000000"
		fontsize="20"
		textcolor="0xFFFFFF"
		bold="false"
		showtime="2.0"
		fadetime="1.0"
	/>
	<preview type="grid(cube,16,16,512,0xCCCCCC,0x333333,0x999999);" details="16" />
</krpano>


I've eliminated the if statement (which was only there in case you happened to be using the onviewchange event already). I've added a delayed call onstart event which puts up a message if the user does not click and drag within 2 seconds (this is short for the purposes of this example, a longer period should be used for a tour). Note that if the user clicks without dragging, or moves the pano with the arrow keys on the keyboard, the message still comes up (which is I think what you wanted).

Here's how it works. The onstart event deploys a delayed call which waits for 2 seconds and then checks if the variable dragged is set to true. If so it puts up a message telling the user that they can navigate by clicking and dragging (you'll probably want to put up a graphic with a picture of a mouse with the left button highlighted for this message). If the mouse button if pressed, it defines an onviewchange event. This event fires whenever the view changes--which would occur if the mouse were dragged. If the mouse is dragged, then the dragged variable is set to true, and then the mousedown, mouseup and onviewchange events are all cancelled (the user already dragged, so no need to test further). If the mouse was clicked, but not dragged, then the onviewchange event never fires and when the mouseup event fires which cancels the onviewchange event so that autorotation, autotours or keyboard arrow presses will not set the dragged variable.

A sharp-eyed (or anal-retentive) programmer will note that if the user presses the mouse button, doesn't move the mouse, presses an arrow key, and then releases the mouse button then the dragged variable will be set even though the mouse wasn't dragged. This corner condition can be handled by tracking the mouse.x mouse.y values to see if they've changed but I thought that would be too confusing for this example.

steve

This post has been edited 4 times, last edit by "pinsane" (May 14th 2010, 7:39pm)


michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

6

Wednesday, May 12th 2010, 7:31pm

Hi Pinsane *thumbup* ,

Quoted

Sorry, my guess is you're using an earlier build of 10.0.8 beta 9 that doesn't support the === (strict comparison) operator...
First, sorry if I do not explain accurately... I will try to expose not to explain *rolleyes* ...
I think the use of === can be confusing..., also compare a value to null...
Consider this code:

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
<krpano version="1.0.8" onstart="showlog(); test();">

	<action name="test">
		tracing('--- test - 1 ---');
		set(events.onviewchange, null);
		tracing('--- test - 2 ---');
		set(events.onviewchange,);
		tracing('--- test - 3 ---');
	</action>
	
	<action name="tracing">
		trace(%1);
		trace('1 - get(events.onviewchange) returns - ',get(events.onviewchange));
		if(events.onviewchange === null,
			trace('2 - if events.onviewchange === null returns - TRUE')
			,
			trace('2 - if events.onviewchange === null returns - FALSE')
			);
		if(events.onviewchange == null,
			trace('3 - if events.onviewchange == null returns - TRUE')
			,
			trace('3 - if events.onviewchange == null returns - FALSE')
			);
	</action>
	
</krpano>

The resulting is:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
INFO: krpano 1.0.8.10 (build 2010-05-06)
INFO: Flashplayer WIN 10,0,32,18 PlugIn
WARNING: not local trusted - ExternalInterface disabled!
INFO: --- test - 1 ---
INFO: 1 - get(onviewchange) returns - null
INFO: 2 - if events.onviewchange === null returns - TRUE
INFO: 3 - if events.onviewchange == null returns - FALSE
INFO: --- test - 2 ---
INFO: 1 - get(onviewchange) returns - null
INFO: 2 - if events.onviewchange === null returns - FALSE
INFO: 3 - if events.onviewchange == null returns - TRUE
INFO: --- test - 3 ---
INFO: 1 - get(onviewchange) returns - 
INFO: 2 - if events.onviewchange === null returns - FALSE
INFO: 3 - if events.onviewchange == null returns - FALSE


In relacion to all this, did you remember your request what is the proper way to set a variable to null? ;-)

About your first example above, perhaps a way to manage better the null comparison could be:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<krpano version="1.0.8" >
	<events
		onmousedown="copy(events.orig_onviewchange,events.onviewchange);
				if(events.onviewchange === null, set(events.onviewchange,null));
				if(events.onviewchange == null,
					set(events.onviewchange,set(dragged,true);
						set(events.onmousedown,null);
						set(events.onmouseup,null);
						set(events.onviewchange,null););
				,
					txtadd(events.onviewchange,get(events.onviewchange),
						;set(dragged,true);
						set(events.onmousedown,null);
						set(events.onmouseup,null);
						copy(events.onviewchange,events.orig_onviewchange););
				);"
		onmouseup="copy(events.onviewchange,events.orig_onviewchange);"
	 />

	<preview type="grid(cube,16,16,512,0xCCCCCC,0x333333,0x999999);" details="16" />
</krpano>

note lines 4 and 5...

Hope this can help in a way *smile* ...

SAlut.

viewinz

Intermediate

  • "viewinz" started this thread

Posts: 145

Location: Wellington, New Zealand

Occupation: Trying to build an entire walkthrough of NZ for tourists

  • Send private message

7

Thursday, May 13th 2010, 5:44am

Steve and Michel,

Thanks so much for your help. The version was wrong as you suggested and with Michels changes it works well.

One little thing I'm trying to work out, is the amount (time) of drag. i.e. at the moment it triggers on a little bit of drag, but some users will be able to do that and won't realise they have dragged! So I want to only change the variable when someone has done a good second or more of dragging.

Cheers,

Ben

VN2009

Professional

Posts: 1,336

Location: Duluth MN

  • Send private message

8

Thursday, May 13th 2010, 7:03am

where would one call the graphic of the mouse? i think i see what is going on in there but i dont see what would trigger and call the ouse image.

9

Friday, May 14th 2010, 11:17am

One little thing I'm trying to work out, is the amount (time) of drag. i.e. at the moment it triggers on a little bit of drag, but some users will be able to do that and won't realise they have dragged! So I want to only change the variable when someone has done a good second or more of dragging.


Okay, here's an example where the mouse has to be dragged for a certain period of time before the dragged variable is set:

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
40
41
42
43
44
45
46
47
48
49
50
51
<krpano version="1.0.9"
	onstart="delayedcall(2,if (dragged != true,showtext(dude![br]this is an [u]interactive[/u] panorama[br]you can look around by clicking and dragging the mouse,infostyle)));" >
	<events
		clickcount="0"
		onmousedown="copy(events.orig_onviewchange,events.onviewchange);
				set(events.click1sec,false);
				txtadd(events.tmp,'if(events.clickcount LE ',get(events.clickcount),',set(events.click1sec,true););');
				delayedcall(1,get(events.tmp));
				isvarnull(events.onviewchange);
				if(action[isvarnull].return == true,
					set(events.onviewchange,
						if(events.click1sec == true,
							set(dragged,true);
							set(events.onmouseup,null);
							set(events.onviewchange,null);
							set(events.onmousedown,null);
						);
					);
				,
					txtadd(events.onviewchange,
						get(events.onviewchange),
						;if(events.click1sec == true,
							set(dragged,true);
							set(events.onmouseup,null);
							copy(events.onviewchange,events.orig_onviewchange);
							set(events.onmousedown,null);
						);
					);
				);"
		onmouseup="inc(events.clickcount);copy(events.onviewchange,events.orig_onviewchange);"
	 />

	<action name="_private_isvarnull">
		if('%2' == "'null'",set(%1,true));
	</action>
	<action name="isvarnull">
		set(action[%0].return,false);
		_private_isvarnull(action[%0].return,get(%1));
	</action>
	<textstyle name="infostyle"
		origin="center"
		textalign="center"
		backgroundcolor="0x000000"
		fontsize="20"
		textcolor="0xFFFFFF"
		bold="false"
		showtime="2.0"
		fadetime="1.0"
	/>
	<preview type="grid(cube,16,16,512,0xCCCCCC,0x333333,0x999999);" details="16" />
</krpano>


Just for fun, I'm also including a version that requires at least 10 degrees of view change for a given drag (versus requiring a minimum amount of time that the mouse must be dragged):

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<krpano version="1.0.9"
	onstart="delayedcall(2,if (dragged != true,showtext(dude![br]this is an [u]interactive[/u] panorama[br]you can look around by clicking and dragging the mouse,infostyle)));" >
	<events
		onmousedown="copy(events.orig_onviewchange,events.onviewchange);
				copy(events.mousedownv,view.vlookat);
				copy(events.mousedownh,view.hlookat);
				isvarnull(events.onviewchange);
				if(action[isvarnull].return == true,
					set(events.onviewchange,
						sub(events.mousedeltav,view.vlookat,events.mousedownv);
						mul(events.mousedeltav,events.mousedeltav,events.mousedeltav);
						sub(events.mousedeltah,view.hlookat,events.mousedownh);
						mul(events.mousedeltah,events.mousedeltah,events.mousedeltah);
						add(events.delta,events.mousedeltav,events.mousedeltah);
						if(events.delta GE 100,
							set(dragged,true);
							set(events.onmouseup,null);
							set(events.onviewchange,null);
							set(events.onmousedown,null);
						);
					);
				,
					txtadd(events.onviewchange,
						get(events.onviewchange),
						;sub(events.mousedeltav,view.vlookat,events.mousedownv);
						mul(events.mousedeltav,events.mousedeltav,events.mousedeltav);
						sub(events.mousedeltah,view.hlookat,events.mousedownh);
						mul(events.mousedeltah,events.mousedeltah,events.mousedeltah);
						add(events.delta,events.mousedeltav,events.mousedeltah);
						if(events.delta GE 100,
							set(dragged,true);
							set(events.onmouseup,null);
							copy(events.onviewchange,events.orig_onviewchange);
							set(events.onmousedown,null);
						);
					);
				);"
		onmouseup="copy(events.onviewchange,events.orig_onviewchange);"
	 />

	<action name="_private_isvarnull">
		if('%2' == "'null'",set(%1,true));
	</action>
	<action name="isvarnull">
		set(action[%0].return,false);
		_private_isvarnull(action[%0].return,get(%1));
	</action>
	<textstyle name="infostyle"
		origin="center"
		textalign="center"
		backgroundcolor="0x000000"
		fontsize="20"
		textcolor="0xFFFFFF"
		bold="false"
		showtime="2.0"
		fadetime="1.0"
	/>


	<preview type="grid(cube,16,16,512,0xCCCCCC,0x333333,0x999999);" details="16" />
</krpano>


Hope one of these can be of some use to you Ben. Good luck!


I think the use of === can be confusing..., also compare a value to null...


Hey Michel! Actually when Klaus introduced the === operator, I thought it would solve all of my problems regarding null comparison... Unfortunately as you point out, it is not a panacea.


In relacion to all this, did you remember your request what is the proper way to set a variable to null? ;-)
[/code]


I sure do! I used the strict comparison operator in my earlier example because it worked for the latest build of 1.0.9 and I wanted to keep the example as simple as possible. Unfortunately, until the === works for variables that have been set to null, I can't use it. So for now I use my own null test which I've included in the above example. Here's the relevant code:

Source code

1
2
3
4
5
6
7
	<action name="_private_isvarnull">
		if('%2' == "'null'",set(%1,true));
	</action>
	<action name="isvarnull">
		set(action[%0].return,false);
		_private_isvarnull(action[%0].return,get(%1));
	</action>

This code allows me to pass a variable name or node.attribute or array[index].attribute to the action and it "returns" *thumbdown* the null status as the attribute action[isvarnull].return. So the usage is:

Source code

1
2
3
4
	isvarnull(events.onviewchange);
	if(action[isvarnull].return == true,
		blah blah blah
	);



About your first example above, perhaps a way to manage better the null comparison could be:
[code if(events.onviewchange === null, set(events.onviewchange,null));
if(events.onviewchange == null,
........snipped............
);"
[/code]


Whoa. Very clever solution as usual Michel. I'm not surprised you came up with a working solution. I'm still hoping we get a fixed version of the === operator from Klaus (one that recognizes variables that have been set to null). I haven't checked out 1.0.10 yet, but you can bet I'll be jumping on it soon (and I hope it's fixed there).

where would one call the graphic of the mouse? i think i see what is going on in there but i dont see what would trigger and call the ouse image.


I didn't include the code to display a graphic, but basically you would create a textfield plugin where the html calls the graphic and set the visible flag to false. Then replace the showtext command with an action that sets the alpha to 0, sets the visible flag to true, tweens the alpha to 1, and then makes a delayed call to reverse the process and fades the graphic out.

steve

This post has been edited 2 times, last edit by "pinsane" (May 14th 2010, 7:38pm)


michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

10

Friday, May 14th 2010, 5:01pm

Hi Steve *smile* ,

Quoted

So for now I use my own null test which I've included in the above example. Here's the relevant code:

Source code

1
2
3
4
5
6
7
	<action name="_private_isvarnull">
		if('%2' == "'null'",set(%1,true));
	</action>
	<action name="isvarnull">
		set(action[%0].return,false);
		_private_isvarnull(action[isvarnull].return,get(%1));
	</action>

This code allows me to pass a variable name or node.attribute or array[index].attribute to the action and it "returns" *thumbdown* the null status as the attribute action[isvarnull].return. So the usage is:

Source code

1
2
3
4
	isvarnull(events.onviewchange);
	if(action[isvarnull].return == true,
		blah blah blah
	);
Very clever and more appropriate solution, as always ;-) *smile* *thumbsup*
Your efforts to give accurate code and give elaborate explanation are much appreciated *attention* Thank you for that. This is not so usual as to be noted *thumbup* .

I would like to add a little contribution to your isvarnull action *rolleyes* ...
Consider the case of a variable with value "" (empty string) (this is the case when the editor plugin is used for example)... It can be considered as a null value... So, to take in account this, the code could be:

Source code

1
2
3
4
5
6
7
8
	<action name="_private_isvarnull">
		if('%2' == "'null'",set(%1,true));
	</action>
	<action name="isvarnull">
		set(action[%0].return,false);
		_private_isvarnull(action[isvarnull].return,get(%1));
		if(%1 == "",set(action[isvarnull].return,true);
	</action>

Hope this can help in a way *smile* ...

SAlut.

11

Friday, May 14th 2010, 5:15pm

Hi Steve *smile* ,
I would like to add a little contribution to your isvarnull action *rolleyes* ...

I would consider it an honor.... Thanks Michel!

steve

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

12

Friday, May 14th 2010, 5:39pm

Honor *wacko* ? No... The honour must be mine if so *squint* ... It is just for fun and good time in trying to learn and share... And I learn a lot reading your posts.
At least for me , krpano is like a great PlayStation game, more than a tool to make money...
Thank you Steve *smile* .

SAlut.

Similar threads