Click here to Skip to main content
15,881,381 members
Please Sign up or sign in to vote.
3.00/5 (3 votes)
See more:
So I need my program to detect a horizontal/vertical swiping/dragging event inside a PictureBox.

I quite know about MouseUp, MouseDown and MouseMove, but I'm not sure how I will implement them, and how to detect the coordinates of the cursor to validate its position, whether it's dragging inside the PictureBox or not, whether to the right or to the left, upwards or downwards.

Can anyone drop a few hints? Thank you!

- Swiping and dragging in this question are synonymous.

- Yes, because the rule of the game is the user should drag the cursor to the same direction of the arrow shown. With regards to the criteria, that's the thing I'm not sure about; are you talking about what are the standard coordinates I will set for the game? Simply put, vertical would be the user dragging inside the arrow either up or down, and horizontal, either right or left, depending on the arrow shown.

- The dragging action from the user doesn't have to be in a perfectly straight line, but still it must be consistently going in the correct direction. I don't think I really have much need for keeping track of every point the cursor occupies, as long as it's being dragged to the correct direction, if that makes sense (Although now I'm trying to construct the code and I'm thinking if using the MouseMove would make it easier to make sure the user is dragging to the correct direction).
Posted
Updated 19-Sep-14 6:11am
v4
Comments
BillWoodruff 19-Sep-14 8:39am    
1. is there any difference between a "swipe" and a "drag" ?

2. are you saying you want to analyze what happens in a PictureBox between MouseDown and MouseUp IN THE PICTUREBOX and determine if the movement was vertical, or horizontal ? if so, what are the criteria you use to define "vertical" and "horizontal" ?

Can you decide the direction of movement based only on the start and end mouse-points, or do you need to keep track of everywhere the mouse is moved between mouse-down and mouse-up ?

More details please.
BillWoodruff 20-Sep-14 4:54am    
"it must be consistently going in the correct direction. I don't think I really have much need for keeping track of every point the cursor occupies, as long as it's being dragged to the correct direction, if that makes sense"

Yes, that makes sense :)

The key question here is how you want to test for "continuous:" what degree of accuracy do you need. If you don't need to sample every point in each call to the 'MouseMove Event, then how many do you want to sample, how frequently ? An obvious "lose" event for the game would be the mouse would be moved outside the PictureBox while it was down: yes ?

Also, what type of graphic, or shape, are you using to show the arrows: are they regions you've constructed, or just bitmaps in PictureBoxes ? If they are just bitmaps in PIctureBoxes, do you have an idea of how you will test to see if the mouse stays inside the arrow's area ?
kmllev 21-Sep-14 5:16am    
I put it as one of the mechanics to swipe inside the arrow. If they do it outside, they don't really lose, just that it doesn't add any point. :)

I'm simply in a state of deliberation right now. For example, the arrow is horizontal, to the right. If I drag vertically and slightly to the right, as if I'm starting to form an "x", it adds a point. Should I consider that a good move? Or not?

I implemented MouseUp and MouseDown to detect the directions ( if oldX > newX, then to the right, so on and so forth). I'm just unsure if even if the move was majorly vertical but moves to the right, it should still add a point or not, as what I have stated above.

I created a (.png) file for the arrows, and loaded them in the PictureBox.
BillWoodruff 21-Sep-14 6:01am    
I'll reply today at some point with some code and ideas.

Have you thought about how "intensely" you wish to monitor the mouse location (while it's down) during the game, and how you will define an "out of bounds" mouse in contrast to a "legal" move ?
kmllev 21-Sep-14 10:16am    
Hello, Bill! Thank you for your time and help. I've been doing test runs, and I decided that I'd really need that MouseMove implementation, since I never realized until just then that the user can drag back and forth (if he realizes he dragged in the wrong direction) without unclicking, and that can be considered a fault, right? However, I'm not sure what would be the best approach for that.

I suppose I'd need to monitor every move now, be more restrictive, so that if the user drags to the wrong direction, he won't have a chance to drag it back to the correct one.

"Out of bounds" would be simply dragging from any location outside the PictureBox. Or if by "out of bounds" you somehow meant an invalid move, then 1) dragging outside the PictureBox 2) dragging in the wrong direction (which is the thing about which I'm trying to be as specific as possible in my program)

I hope I explained clearly enough. :)

Use HitTest class to check if original click is within the picturebox. Use PointToScreen and/or PointToClient to detect where exactly is your Mouse pointer relative to the control or the screen.

For the general movement detection you need three points:
1st: original click point - saved in MouseDown, timer for polling the position start

2nd: last poll point (changing every couple of milliseconds - set the timer to around 50-100 ms if you expect slow mouse movement, less for quick movements)

3rd point is current point in mousemove where you compare this position with the last saved (2nd) - this determines the direction of the movement - compare it with the original point to see how far from the original point your mouse is.


Alternative to the timer: determine some fixed distance (say 5px) and every time your mouse movement point (3rd, current one) changes for that distance, save new point (2nd).


No concrete code as you didn't specify what you need, but these are hints :)
 
Share this answer
 
My goal here is to give you some ideas, and a smidgen of code, that I hope will help you write the game yourself.

A quick sketch of strategies for monitoring the mouse movement during the game. I'll assume:

0. you define the variance threshold the determines how far the mouse can vary on the horizontal and vertical axes when the game is being played. in a variable of type int: 'threshold

1. you'll record the initial mouse down x,y position in variables mdX, and mdY, and the final mouse-position on mouse-up in muX, and muY.

1.a. you'll create a boolean flag to indicate if the current game is being played vertically, or horizontally: isUpDown

1.b. you'll create a boolean flag to indicate if the current game is over: isGameOver

1.c. you'll create a boolean flag to indicate if mouse is up: isMouseUp

1.d. you'll record the DisplayRectangle of the PictureBox in the variable 'pictureRectangle

2. you'll write an end of game function called 'gameOver(boolean completionState that gets called whenever the game ends, and, if 'completionState is true, you'll do what you need to do figure out if the user won; if 'completionState is false, the game is lost.

3. I assume there are three ways the user can lose the game:

a. moving the mouse outside the PictureBox while the Mouse is down and the game is in play.

b. moving the mouse too far right or left in the horizontal axis when the game is being played down-up, or up-down

c. moving the mouse too far up or down in the vertical axis when the game is being played left-right, or right, left
C#
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    // ignore mouse events if the game is not in play, or is over
    if (isMouseUp || isGameOver) return;

    // is the mouse now outside the PictureBox ?
    if (! pictureRectangle.Contains(e.Location)) gameOver(false);

    // tolerance testing code goes here ...
    if (isUpDown)
    {
        // test for horizontal variance
        if (Math.Abs(mdX - e.X) > threshold) gameOver(false);
    }
    else
    {
        // test for vertical variance
        // for you to write
    }
}
Here's a quick (again, deliberately incomplete) sketch of how you might structure the 'gameOver function:
C#
private void gameOver(bool completionState)
{
    isGameComplete = true;
    isGameOver = true;

    bool isAWin = false;

    if (completionState)
    {
        // left for you to write
        // possible win
        // isAWin = true ... if ... for you to figure out
    }

    // status report
    if(isAWin)
    {
        // left for you to write
        // definite win
    }
    else
    {
       // left for you to write
       // definite loss
    }
}
 
Share this answer
 
v2
Comments
kmllev 21-Sep-14 11:14am    
WOW. Thank you, Bill for being so helpful, patient, and elaborate! This DOES clear up a lot of the cobwebs in my head. Thank you. I'm good with gameOver(). Hopefully, when more questions start to pile up, you'll be available to help. Thanks again, Bill!
BillWoodruff 21-Sep-14 11:53am    
Glad you found the ideas useful ! If you don't want to sample every MouseMove event, you might think of using either a counter variable that's incremented every time the event is called, and then you test for the value of the counter modulo some sampling interval == 0 and then evaluate the event. Or you could use a Timer to set some boolean variable to true which you would then test for in the MouseMove event to perform the position analysis.
Each of the mouse events passes you a MouseEventArgs parameter which provides you the Location property to find where the mouse was when the event was fired. If you compare this to teh previous location, you know in which direction it has moved.

If the mouse leaves the PictureBox, you will no longer get the events in the PictureBox handlers...
 
Share this answer
 
Comments
BillWoodruff 21-Sep-14 6:12am    
If the mouse is held down (the drag is continuous), and the mouse moves outside the PictureBox, the PictureBox's MouseMove EventHandler will continue to get updated, and, of course, MouseLeave is not fired.
OriginalGriff 21-Sep-14 6:20am    
:doh:
Brain failure strikes again... :O
BillWoodruff 21-Sep-14 10:21am    
Knowing you are not perfect gives me the courage to persist in madness.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900