We Keep Coding

Zooming with mouse wheel breaks panning (scrolling) of real time data in ZedGraph

Windows Forms ZedGraph control in WPF application. The data points are auto-generated and attached to the chart every N seconds. When new data point is added to the chart I shift (pan) chart one point to the left, so there is always no more than last 50 points visible in the viewport. Overall, it works pretty good, except for two things.
Issues
If user tries to zoom in or out, the viewport stops following the last data point and chart goes outside of the screen, so panning stops working
I would like to pan or shift chart using mouse event, without scrolling, but when I press right mouse button and try to move it to the left, it tries to zoom chart instead of panning
protected void CreateChart(ZedGraphControl control)
{
_rand = new Random();
var curve = control.GraphPane.AddJapaneseCandleStick("Demo", new StockPointList());
curve.Stick.IsAutoSize = true;
curve.Stick.Color = Color.Blue;
control.AutoScroll = true; // Always shift to the last data point when new data comes in
control.IsEnableHPan = true; // I assume this should allow me to move chart to the left using mouse
control.IsEnableVPan = true;
control.IsEnableHZoom = true;
control.IsEnableVZoom = true;
control.IsShowPointValues = true;
control.IsShowHScrollBar = false;
control.IsShowVScrollBar = false;
control.IsAutoScrollRange = true; // Always shift to the last data point when new data comes in
control.IsZoomOnMouseCenter = false;
control.GraphPane.XAxis.Type = AxisType.DateAsOrdinal;
control.AxisChange();
control.Invalidate();
var aTimer = new Timer();
aTimer.Elapsed += new ElapsedEventHandler(OnTime);
aTimer.Interval = 100;
aTimer.Enabled = true;
}
protected XDate _xDate = new XDate(2006, 2, 1);
protected double _open = 50.0;
protected Random _rand = new Random();
// Auto generate data points
protected void OnTime(object source, ElapsedEventArgs e)
{
var control = FormCharts;
var x = _xDate.XLDate;
var close = _open + _rand.NextDouble() * 10.0 - 5.0;
var hi = Math.Max(_open, close) + _rand.NextDouble() * 5.0;
var low = Math.Min(_open, close) - _rand.NextDouble() * 5.0;
var pt = new StockPt(x, hi, low, _open, close, 100000);
_open = close;
_xDate.AddDays(1.0);
if (XDate.XLDateToDayOfWeek(_xDate.XLDate) == 6)
{
_xDate.AddDays(2.0);
}
(control.GraphPane.CurveList[0].Points as StockPointList).Add(pt);
control.GraphPane.XAxis.Scale.Min = control.GraphPane.XAxis.Scale.Max - 50; // Hide all points except last 50, after mouse zooming this line stops working
//control.GraphPane.XAxis.Scale.Max = control.GraphPane.XAxis.Scale.Max + 1;
control.AxisChange();
control.Invalidate();
}

Kind of solved it.
First issue with broken auto-scroll after zooming
It happens because zooming sets these parameters to FALSE.
area.XAxis.Scale.MinAuto = false;
area.XAxis.Scale.MaxAuto = false;
To fix it, either set it back to TRUE every time new data point comes. Another way to fix it, is to keep them always as FALSE and move chart manually
protected void MoveChart(GraphPane pane, int pointsToMove, int pointsToShow)
{
pane.XAxis.Scale.Max = pane.XAxis.Scale.Max - pointsToMove;
pane.XAxis.Scale.Min = pane.XAxis.Scale.Max - Math.Abs(pointsToShow);
}
...
// Example : shift one point to the left and show only 50 last points
MoveChart(control.MasterPane.PaneList["Quotes"], -1, 50);
Second issue, implementing custom panning without scrollbar using mouse events.
protected int _mouseX = -1;
protected int _mouseY = -1;
...
control.MouseUpEvent += OnMouseUp;
control.MouseDownEvent += OnMouseDown;
control.MouseMoveEvent += OnMouseMove;
...
// Example : remember X and Y on mouse down and move chart until mouse up event
protected bool OnMouseUp(object sender, System.Windows.Forms.MouseEventArgs e)
{
_mouseX = -1; // unset X on mouse up
_mouseY = -1;
return true;
}
protected bool OnMouseDown(object sender, System.Windows.Forms.MouseEventArgs e)
{
_mouseX = e.X; // remember last X on mouse down
_mouseY = e.Y;
return true;
}
protected bool OnMouseMove(ZedGraphControl sender, System.Windows.Forms.MouseEventArgs e)
{
if (_mouseX >= 0) // if X was saved after mouse down
{
foreach (var pane in sender.MasterPane.PaneList) // move synced chart panels
{
MoveChart(pane, _mouseX > e.X ? -1 : 1, 50); // if mouse move is increasing X, move chart to the right, and vice versa
}
_mouseX = e.X; // update X to new position
_mouseY = e.Y;
}
return true;
}

Drawing a straight line in visual studio C# by the user along with the line moving along with the mouse?

the user should be able to draw a straight line on a panel similar to drawing a straight line in paint .
the user clicks on the panel and when he moves the mouse the line should also move along with the mouse (i.e similar to drawing a staright line in paint) and when the user releases the mouse the line should have been drawn from the original point of click to this release point .
i.e not a free hand line.
is there any animation for this ?

How about this? :
public class LinePanel : Panel
{
public LinePanel()
{
this.MouseDown += (src, e) => { LineStartPos = LineEndPos = e.Location; Capture = true; Invalidate(); };
this.MouseMove += (src, e) => { if (Capture) { LineEndPos = e.Location; Invalidate(); } };
this.MouseUp += (src, e) => { if (Capture) { LineEndPos = e.Location; } Capture = false; Invalidate(); };
}
private Point LineStartPos, LineEndPos;
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
if (LineStartPos != LineEndPos)
e.Graphics.DrawLine(new Pen(Color.Black, 2), LineStartPos, LineEndPos);
}
}
To test you can just add a new LinePanel() to the Controls collection of your form, and set location/size or anchor / dock paramaters to size it.

Getting pinch-to-zoom x/y scale values independent of each other in Windows Store Apps

How do I get the pinch-to-zoom x and y scaling values independent of each other for a Windows Store App? I'm currently using ManipulationDeltaRoutedEventArgs's ManipulationDelta structure, but as you can see it only offers a single scale.
// Global Transform used to change the position of the Rectangle.
private TranslateTransform dragTranslation;
private ScaleTransform scaleTransform;
// Constructor
public MainPage()
{
InitializeComponent();
// Add handler for the ManipulationDelta event
TestRectangle.ManipulationDelta += Drag_ManipulationDelta;
dragTranslation = new TranslateTransform();
scaleTransform = new ScaleTransform();
TestRectangle.RenderTransform = this.dragTranslation;
}
void Drag_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
// Move the rectangle.
dragTranslation.X += e.Delta.Translation.X;
dragTranslation.Y += e.Delta.Translation.Y;
// Scaling, but I want X and Y independent!
scaleTransform.ScaleX = e.Delta.Scale;
scaleTransform.ScaleY = e.Delta.Scale;
}
XAML:
<Rectangle Name="TestRectangle"
Width="200" Height="200" Fill="Blue"
ManipulationMode="All"/>
Code mostly taken from here.

I ended up using Handling Two, Three, Four Fingers Swipe Gestures in WinRT App to grab the coordinates of the two fingers, calculated the initial difference between them, and then scaled accordingly as the distance changed.
int numActiveContacts;
Dictionary<uint, int> contacts;
List<PointF> locationsOfSortedTouches;
void myCanvas_PointerPressed(object sender, PointerRoutedEventArgs e) {
PointerPoint pt = e.GetCurrentPoint(myCanvas);
locationsOfSortedTouches.Add(new PointF((float) pt.Position.X, (float) pt.Position.Y));
touchHandler.TouchesBegan(locationsOfSortedTouches);
contacts[pt.PointerId] = numActiveContacts;
++numActiveContacts;
e.Handled = true;
}
void myCanvas_PointerMoved(object sender, PointerRoutedEventArgs e) {
var pt = e.GetCurrentPoint(myCanvas);
var ptrId = pt.PointerId;
if (contacts.ContainsKey(ptrId)) {
var ptrOrdinal = contacts[ptrId];
Windows.Foundation.Point currentContact = pt.Position;
locationsOfSortedTouches[ptrOrdinal] = new PointF((float) pt.Position.X, (float) pt.Position.Y);
//distance calculation and zoom redraw here
}
e.Handled = true;
}

How to arrange Thumbs with a Line for moving a line in a WPF custom Adorner

I am working on a Adorner for a Line in a drawing program using WPF. The Line is drawn in code-behind and then adorned with my custom Adorner called LineAdorner. I've managed to use a Thumb for the start and end point of the Line. It's working fine for resizing. My problem is i cant able to move (drag & drop) the line, how to do that?
public class ResizingAdorner : Adorner
{
// Resizing adorner uses Thumbs for visual elements.
// The Thumbs have built-in mouse input handling.
//Thumb topLeft, topRight, bottomLeft, bottomRight;
private Thumb startThumb;
private Thumb endThumb;
private Line selectedLine;
private Point startPoint;
private Point endPoint;
// To store and manage the adorner's visual children.
VisualCollection visualChildren;
bool IsControlModeOn = false;
// Override the VisualChildrenCount and GetVisualChild properties to interface with
// the adorner's visual collection.
protected override int VisualChildrenCount { get { return visualChildren.Count; } }
protected override Visual GetVisualChild(int index) { return visualChildren[index]; }
// Initialize the ResizingAdorner.
public ResizingAdorner(UIElement adornedElement)
: base(adornedElement)
{
visualChildren = new VisualCollection(this);
selectedLine = AdornedElement as Line;
startThumb = new Thumb { Cursor = Cursors.Hand, Width = 8, Height = 8, Background = Brushes.Green };
endThumb = new Thumb { Cursor = Cursors.Hand, Width = 8, Height = 8, Background = Brushes.BlueViolet };
startThumb.DragDelta += StartDragDelta;
endThumb.DragDelta += EndDragDelta;
startThumb.DragCompleted += new DragCompletedEventHandler(startThumb_DragCompleted);
endThumb.DragCompleted += new DragCompletedEventHandler(endThumb_DragCompleted);
visualChildren.Add(startThumb);
visualChildren.Add(endThumb);
}
public event EndDragDeltaEvent endDragDeltaEvent;
public delegate void EndDragDeltaEvent(object obj, DragCompletedEventArgs e, bool isEnd);
void startThumb_DragCompleted(object sender, DragCompletedEventArgs e)
{
if (endDragDeltaEvent != null)
endDragDeltaEvent(selectedLine, e, false);
}
void endThumb_DragCompleted(object sender, DragCompletedEventArgs e)
{
if (endDragDeltaEvent != null)
endDragDeltaEvent(selectedLine, e, true);
}
// Arrange the Adorners.
protected override Size ArrangeOverride(Size finalSize)
{
selectedLine = AdornedElement as Line;
double left = Math.Min(selectedLine.X1, selectedLine.X2);
double top = Math.Min(selectedLine.Y1, selectedLine.Y2);
var startRect = new Rect(selectedLine.X1 - (startThumb.Width / 2), selectedLine.Y1 - (startThumb.Width / 2), startThumb.Width, startThumb.Height);
startThumb.Arrange(startRect);
var endRect = new Rect(selectedLine.X2 - (endThumb.Width / 2), selectedLine.Y2 - (endThumb.Height / 2), endThumb.Width, endThumb.Height);
endThumb.Arrange(endRect);
return finalSize;
}
private void StartDragDelta(object sender, DragDeltaEventArgs e)
{
Point position = Mouse.GetPosition(this);
selectedLine.X1 = position.X;
selectedLine.Y1 = position.Y;
}
// Event for the Thumb End Point
private void EndDragDelta(object sender, DragDeltaEventArgs e)
{
Point position = Mouse.GetPosition(this);
selectedLine.X2 = position.X;
selectedLine.Y2 = position.Y;
}
protected override void OnRender(DrawingContext drawingContext)
{
if (AdornedElement is Line)
{
selectedLine = AdornedElement as Line;
startPoint = new Point(selectedLine.X1, selectedLine.Y1);
endPoint = new Point(selectedLine.X2, selectedLine.Y2);
}
}
}

You'll need to handle the MouseDown, MouseMove and MouseUp events on the line to be able to do that:
Add handlers for those events in the constructor
selectedLine.MouseLeftButtonDown += SelectedLineOnMouseLeftButtonDown;
selectedLine.MouseMove += SelectedLineOnMouseMove;
selectedLine.MouseLeftButtonUp += SelectedLineOnMouseLeftButtonUp;
And the implementation is something like this
private Point origin;
private void SelectedLineOnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
Line line = (Line) sender;
line.CaptureMouse();
startPoint = new Point(line.X1, line.Y1);
endPoint = new Point(line.X2, line.Y2);
origin = e.GetPosition(line);
base.OnMouseLeftButtonDown(e);
}
private void SelectedLineOnMouseMove(object sender, MouseEventArgs e)
{
base.OnMouseMove(e);
Line line = (Line) sender;
if (e.MouseDevice.LeftButton == MouseButtonState.Pressed)
{
Point position = e.GetPosition(this);
e.Handled = true;
double horizontalDelta = position.X - origin.X;
double verticalDelta = position.Y - origin.Y;
line.X1 = startPoint.X + horizontalDelta;
line.X2 = endPoint.X + horizontalDelta;
line.Y1 = startPoint.Y + verticalDelta;
line.Y2 = endPoint.Y + verticalDelta;
InvalidateArrange();
}
else
{
line.ReleaseMouseCapture();
}
}
private void SelectedLineOnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Line line = (Line) sender;
line.ReleaseMouseCapture();
e.Handled = true;
base.OnMouseLeftButtonUp(e);
}
I also added some InvalidateArrange() calls in the StartDragDelta and EndDragDelta handlers to makes sure the Thumbs move when being dragged.

Shooting game Help

I'm making a shooting game like Space Invaders. Every time I launched the missile, it's always on the same position. How will I change it depending on the place where the spaceship is.
Here's my codes for now.
class GraphicsApplication
{
private Form f;
private PictureBox pb;
private PictureBox pb1;
private PictureBox pb2;
private Boolean bMove;
Timer Clock = new Timer();
Timer Missile = new Timer();
int x = 0;
public GraphicsApplication()
{
f = new Form();
pb = new PictureBox();
pb1 = new PictureBox();
pb2 = new PictureBox();
bMove = false;
}
public void Launch()
{
f.Size = new Size(600, 600);
f.StartPosition = FormStartPosition.CenterScreen;
f.KeyDown += new KeyEventHandler(f_KeyDown);
f.KeyPress += new KeyPressEventHandler(f_KeyPress);
pb.SetBounds(300, 470, 70, 70);
pb.Image = new Bitmap("spaceship.png");
pb.SizeMode = PictureBoxSizeMode.StretchImage;
f.Controls.Add(pb);
pb1.Image = Image.FromFile("spacedisc.png");
pb1.SetBounds(20, 20, 130, 80);
pb1.SizeMode = PictureBoxSizeMode.StretchImage;
f.Controls.Add(pb1);
pb2.Image = Image.FromFile("missile.png");
pb2.SetBounds(pb.Location.X, pb.Location.Y, 25, 40); //pb2 missile //pb spaceship
pb2.SizeMode = PictureBoxSizeMode.StretchImage;
Clock = new Timer();
Clock.Interval = 40;
Clock.Start();
Clock.Tick += new EventHandler(Clock_Tick);
Missile = new Timer();
Missile.Interval = 40;
Missile.Tick += new EventHandler(Missile_Tick);
f.ShowDialog();
}
private void f_KeyDown(object sender, KeyEventArgs e)
{
if (e.KeyCode == Keys.Space)
{
Missile.Start();
}
}
public void Missile_Tick(object sender, EventArgs e)
{
if (bMove == true)
{
f.Controls.Add(pb2);
pb2.Top = pb2.Top -= 5;
}
}
private void f_KeyPress(object sender, KeyPressEventArgs e)
{
if (e.KeyChar == 'd')
{
pb.Left = pb.Left += 5;
}
if (e.KeyChar == 'a')
{
pb.Left = pb.Left -= 5;
}
}
public void Clock_Tick(object sender, EventArgs e)
{
if(x == 400)
{
bMove = true;
}
else if (x == 30)
{
bMove = false;
}
if (bMove == false)
{
x += 5;
pb1.Location = new Point(20 + x, 20);
}
else
{
x -= 5;
pb1.Location = new Point(x - 20, 20);
}
}
}
}

You probably want something like
pb2.Location.X = pb.Location.X;
pb2.Location.Y = pb.Location.Y;
in your f_KeyDown() function, so that the missile starts in the same location as the spaceship.

You have to position your bullets, rockets...etc. relative to your space ship's gun.
Imagine a gun that is mounted on the ship. You could represent this gun with an object.
For example:
public class Gun
{
private ISpaceshipDesign _spaceshipDesign;
public Gun(ISpaceshipDesign spaceshipDesign)
{
this._spaceshipDesign = spaceshipDesign;
}
public void Fire()
{
//...
}
}
Pass in a reference to your spaceship when creating the gun, so that you know onto which spaceship the gun is mounted.
The spaceship should always know where it is in the 2D-plane (X, Y coördinates). It should also know where on the spaceship the gun is mounted.
public interface ISpaceshipDesign
{
public Point GunLocation { get; }
}
The GunLocation property must return the gun's location relative to the ship's current position. For example:
public Point GunLocation
{
get
{
double x = (double) this.GetValue(Canvas.LeftProperty) + 21;
double y = (double) this.GetValue(Canvas.TopProperty) + 17;
return new Point(x, y);
}
}
You can then access this data in the Gun's Fire() method.
For example:
public void Fire()
{
Point gunLocation = _spaceshipDesign.GunLocation;
// Position your missle using the gun's current coördinates (X, Y).
}
About a year ago I wrote a 10-series part about creating a similar game (Asteroids) in Silverlight. One article discusses how to make the gun fire. You can find it here:
https://github.com/geersch/SilverlightAsteroids/blob/master/src/part-6/README.md
You can choose to mount several guns on the ship, one that fires regular bullets, another one for missles...etc. Each gun would have a different location on the ship. You can alter the Fire() method to be triggered by different keys (A = missle, space = bullets).
Hope this helps.