WPF 4 touch events getting the center of a pinch gesture - c#

I am using the .net 4 beta 2 touch libraries, and Im trying to implement a zooming feature in my WPF application.
I can get the zooming working just fine, but what I want is to zoom in on the center of the pinch gesture, and I cannot see anything in the API's about how to accomplish this.
Is there some methods or properties that expose the 2 contacts being using in the pinch gesture so that I can get the center of them?
EDIT:
I just investigated using the GetIntermediateTouchPoints method of TouchEventArgs which did not seem to give me what I want.
Thanks a lot
Mark

Assuming you are using the new TouchXxxxEvent routed events, they all take TouchEventArgs, which has TouchDevice property. If you call its GetTouchPoint() method, you can get the TouchPoint that represents the point of touch.
More details and sample code from Jaime Rodriguez.

Turns out that the properties I was after was right in front of me all along.
the Manipulation2DDeltaEventArgs class has OriginX and OriginX properties that specific the center point of the pinch gesture, so Im just using that and its all good :)

This answer is for .Net 4 release version.
In the case of using ManipulationDelta event the ManipulationDeltaEventArgs.ManipulationOrigin contains center point of the pinch gesture. The coordinates are relative to the ManipulationDeltaEventArgs.ManipulationContainer, which could be set in the handler of ManipulationStarting event.
Example code:
private void object_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
...
// If this was a multitouch gesture
// (like pinch/zoom - indicated by e.DeltaManipulation.Scale)
// the following line will get us point between fingers.
Point position = e.ManipulationOrigin;
...
}

Related

Disable pinch zoom in Windows Phone 8 Maps

i need to display some images on maps in WP8, that need to stay at their exact position and cover a specific area (these are pictures of buildings that are displayed on a Road Map) but
as far as i know there is no way to make that happen when zooming is allowed.
I can get rid of the Double Tap zooming by simply resetting the zoom level, but i have a problem with pinch zooming because this creates a very ugly jumpy effect.
private void MapTwo_ZoomLevelChanged(object sender, Microsoft.Phone.Maps.Controls.MapZoomLevelChangedEventArgs e)
{
MyMap.ZoomLevel=16;
}
I don't want to disable all user interaction though.
Any advice?

KinectRegion HandPointer Cursor as mouse cursor in Awesomium Browser

I would like to use the kinect hand cursor as 'normal' mouse cursor. In the specific I want to be able to interact with the Awesomium browser object.
The problem is that no Awesomium Browser event is raised when the kinect hand cursor is (for example) over a link, or I do a click, or any other typical mouse event.
I modified the Control Basics-WPF example program that you can find in the example directory of the Kinect SDK
I am using c# visual studio 2012, Kinect SDK 1.7, Awesomium 1.7.1.
It's been a month since this question's been asked, so perhaps you've already found your own solution.
In any case, I found myself in this scenario as well, and here was my solution:
Inside MainWindow.xaml, you'll need the Awesomium control inside a KinectRegion (from the SDK).
You'll have to somehow tell the SDK that you want a control to also handle hand events. You can do this by adding this inside MainWindow.xaml.cs on the Window_Loaded handler:
KinectRegion.AddHandPointerMoveHandler(webControl1, OnHandleHandMove);
KinectRegion.AddHandPointerLeaveHandler(webControl1, OnHandleHandLeave);
Elsewhere in MainWindow.xaml.cs, you can define the hand handler events. Incidentally, I did it like this:
private void OnHandleHandLeave(object source, HandPointerEventArgs args)
{
// This just moves the cursor to the top left corner of the screen.
// You can handle it differently, but this is just one way.
System.Drawing.Point mousePt = new System.Drawing.Point(0, 0);
System.Windows.Forms.Cursor.Position = mousePt;
}
private void OnHandleHandMove(object source, HandPointerEventArgs args)
{
// The meat of the hand handle method.
HandPointer ptr = args.HandPointer;
Point newPoint = kinectRegion.PointToScreen(ptr.GetPosition(kinectRegion));
clickIfHandIsStable(newPoint); // basically handle a click, not showing code here
changeMouseCursorPosition(newPoint); // this is where you make the hand and mouse positions the same!
}
private void changeMouseCursorPosition(Point newPoint)
{
cursorPoint = newPoint;
System.Drawing.Point mousePt = new System.Drawing.Point((int)cursorPoint.X, (int)cursorPoint.Y);
System.Windows.Forms.Cursor.Position = mousePt;
}
For me, the tricky parts were:
1. Diving into the SDK and figuring out which handlers to add. Documentation wasn't terribly helpful on this.
2. Mapping the mouse cursor to the kinect hand. As you can see, it involves dealing with System.Drawing.Point (separate from another library's Point) and System.Windows.Forms.Cursor (separate from another library's Cursor).

Dynamic-Data-Display / Getting x-coordinate of user input

My program is basically about analyzing videos.
A major part is to plot a diagram showing (f.e.) brightness per frame on y-axis and every frame number on x-axis. Because the program is written in C# and uses WPF, D³ was the way to go for plotting.
Now the user might see a peak signal in the diagram and wants to look on that single frame to understand why it's so bright (it might be just natural, or an encoding-artifact).
There comes my question: The most intuitive way for the user to click on the diagram where the peak is, which jumps the video preview (other GUI element) right to that frame. So I need the x-coordinate (=frame number) of the user click on the diagram.
It is possible to manually analyze the mouse-input event, but that would take much work (because the x-axis is different for each video and the entire diagram can be resized, so absolute coordinates are a no go).
But maybe something similar is already implemented by D³. I searched the documentary, but didn't find anything useful. The only piece of information was using a "DraggablePoint", but that's where the trail goes cold.
Does someone of you know how to get the x-coordinate without much work?
It sure is possible! The way that I have done it in the past is to add a CursorCoordinateGraph object to my plotters children, and it automatically tracks the mouse position on the graph in relation to the data. You can turn off the visual features of the CursorCoordinateGraph and use it for tracking only. Here's what it would look like:
CursorCoordinateGraph mouseTrack;
plotter.Children.Add(mouseTrack);
mouseTrack.ShowHorizontalLine = false;
mouseTrack.ShowVerticalLine = false;
And your mouse click event would look like this:
private void plotter_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Point mousePos = mouseTrack.Position;
var transform = plotter.Viewport.Transform;
Point mousePosInData = mousePos.ScreenToData(transform);
double xValue = mousePosInData.X;
}
You can then use xValue and manipulate it however you would like to achieve your desired effect.

C# Drag and Drop Effect with Overlay/Opaque Image

I think this would be simple question and should be asked in the pas few years but unable to google around and dont know if there is a specific keyword.
In c# WinForm I want to do drag and drop but I dont want the image of DragDropEffects Move, Copy or whatever. I want to display an image with half opaque. Just like Firefox when dragging an image, you would see the image folowing the mouse pointer like a ghost :)
I already Implement DoDragDrop, DragEnter and DragDrop events. I just want to customize the dragging effects with overlay image.
Might be 9 years too late to the party 😄
I always liked Drag&Drop interactions but found it complicated to use in WinForms. Especially if you want it to look professional with overlays.
I made my own library for WinForms the last time I needed Drag&Drop. You can find it here or on NuGet:
https://github.com/awaescher/FluentDragDrop
Here's everything you need to implement Drag&Drop like shown above:
private void picControlPreviewBehindCursor_MouseDown(object sender, MouseEventArgs e)
{
var pic = (PictureBox)sender;
pic.InitializeDragAndDrop()
.Copy()
.Immediately()
.WithData(pic.Image)
.WithPreview().BehindCursor()
.To(PreviewBoxes, (target, data) => target.Image = data);
// Copy(), Move() or Link() to define allowed effects
// Immediately() or OnMouseMove() for deferred start on mouse move
// WithData() to pass any object you like
// WithPreview() to define your preview and how it should behave
// BehindCursor() or RelativeToCursor() to define the preview placement
// To() to define target controls and how the dragged data should be used on drop
}

mouse followed drawing in C#

I want to to make a shared drawing board in C#. This means that two people connected via a TCP connection can draw on this board. The idea (for now) is that people can click on the screen and draw. What do you think is the best method for this?
It's easy enough to draw a dot when the user clicks on a certain spot, but it gets a little more complicated when the user drags the mouse, where you need to draw a line between the last point and the current. Also that doesn't work so well, so I draw a dot where the line starts to improve things a bit, but it's not that good.
Lastly, I need to also send this over TCP, so I need to distinguish between the two. I hoped that I could just send points and have it draw it on the other side, but it seems it wouldn't work. Any ideas except also sending the type?
drawing http://img193.imageshack.us/img193/9697/drawingw.png
EDIT:
ok, I'm going with a IDrawingArgument interface that has Dispatch(myForm), and basically does double dispatch, so it solves the TCP problem (going to serialize/deserialize it).
Lines are still a bit bulky.
One little tip... on your mousemove event. keep a flag that wont fire the event again until the last event that set the flag turns it off. i.e.:
bool isDrawing = false;
public void myCanvas_MouseMove(object sender, EventArgs e)
{
if(!isDrawing)
{
isDrawing = true;
// Do drawing here
isDrawing = false;
}
}
This helped me a lot when doing drawing in a mousemove event.
Dots:
(x,y),(x2,y2),(x3,y3)
Lines:
(x,y,x2,y2),(x3,y3,x4,y4)
Thus, the format is a list of tuples. Tuples of size 4 are lines, of size 2 are points. Note that if your system gets more complicated, you'll really regret not just doing something like:
Dots:
D(x,y),D(x2,y2),D(x3,y3)
Lines:
L(x,y,x2,y2),L(x3,y3,x4,y4)

Categories

Resources