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.

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


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


    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

  • I'm getting this error onmousedown:

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

    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

    Edited 4 times, last by pinsane (May 14, 2010 at 7:39 PM).

  • Hi Pinsane *thumbup* ,

    Quote

    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:


    The resulting is:

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

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


    note lines 4 and 5...

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

    SAlut.

  • 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

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

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

    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? *wink*
    [/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:

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

    Code
    isvarnull(events.onviewchange);
    	if(action[isvarnull].return == true,
    		blah blah blah
    	);

    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

    Edited 2 times, last by pinsane (May 14, 2010 at 7:38 PM).

  • Hi Steve *smile* ,

    Quote

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

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

    Code
    isvarnull(events.onviewchange);
    	if(action[isvarnull].return == true,
    		blah blah blah
    	);

    Very clever and more appropriate solution, as always *wink* *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:

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

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

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!