detect click and drag

viewinz

Fortgeschrittener

Beiträge: 145

Wohnort: Wellington, New Zealand

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

1

Mittwoch, 12. Mai 2010, 03:52

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.

Quellcode

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?

Zum Seitenanfang

pinsane

Schüler

Beiträge: 125

2

Mittwoch, 12. Mai 2010, 07:37

RE: detect click and drag

Zitat von »viewinz«

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

Zitat von »viewinz«

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:

Quellcode

<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

Zum Seitenanfang

viewinz

Fortgeschrittener

Beiträge: 145

Wohnort: Wellington, New Zealand

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

3

Mittwoch, 12. Mai 2010, 10:03

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:

	Quellcode
1	WARNING: unknown action command: null;set

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

4

Mittwoch, 12. Mai 2010, 10:48

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

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

Zum Seitenanfang

pinsane

Schüler

Beiträge: 125

5

Mittwoch, 12. Mai 2010, 15:21

Zitat von »viewinz«
I'm getting this error onmousedown:
Quellcode
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:

Quellcode

<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

Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von »pinsane« (14. Mai 2010, 19:39)

Zum Seitenanfang

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

6

Mittwoch, 12. Mai 2010, 19:31

Hi Pinsane *thumbup*

,

Zitat

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:

Quellcode

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

Quellcode

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:

Quellcode

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

Zum Seitenanfang

viewinz

Fortgeschrittener

Beiträge: 145

Wohnort: Wellington, New Zealand

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

7

Donnerstag, 13. Mai 2010, 05:44

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

Zum Seitenanfang

VN2009

Profi

Beiträge: 1 336

Wohnort: Duluth MN

8

Donnerstag, 13. Mai 2010, 07:03

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.

Zum Seitenanfang

pinsane

Schüler

Beiträge: 125

9

Freitag, 14. Mai 2010, 11:17

Zitat von »viewinz«

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:

Quellcode

<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):

Quellcode

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

Zitat von »michel«

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.

Zitat von »michel«

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:

Quellcode

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

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

Zitat von »michel«

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

Zitat von »VN2009«

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

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »pinsane« (14. Mai 2010, 19:38)

Zum Seitenanfang

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

10

Freitag, 14. Mai 2010, 17:01

Hi Steve

,

Zitat
So for now I use my own null test which I've included in the above example. Here's the relevant code:
Quellcode
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" the null status as the attribute action[isvarnull].return. So the usage is:
Quellcode
1
2
3
4
	isvarnull(events.onviewchange);
	if(action[isvarnull].return == true,
		blah blah blah
	);

Very clever and more appropriate solution, as always ;-)

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:

Quellcode

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

Zum Seitenanfang

pinsane

Schüler

Beiträge: 125

11

Freitag, 14. Mai 2010, 17:15

Zitat von »michel«

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

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

steve

Zum Seitenanfang

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

12

Freitag, 14. Mai 2010, 17:39

Honor

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

Zum Seitenanfang