Develop Reference

Highlight winforms MS Chart line on hover

I'm trying to use MS Chart with custom controls. My purpose is to:
Highlight only a segment of the line that connects two neighboring points on mouse hover over that piece
Find indexes of those two neighboring points (I need that for being able to drag that line by moving two points simultaneously)
Kind of illustration:
For now I can detect a hover over a line on the chart by using the approach described here. But I'm stuck in finding indexes or at least coordinates of those two points.

So the original idea from this question was to find nearest points by x (assuming that all the series has x-values are indeed steadily increasing) and then calculate y-value. But I have a little improved that and added support for completely vertical lines. So here is my code for capturing the needed line:
private static GrippedLine? LineHitTest(Series series, double xPos, double yPos, Axis xAxis, Axis yAxis)
{
double xPixelPos = xAxis.PixelPositionToValue(xPos);
double yPixelPos = yAxis.PixelPositionToValue(yPos);
DataPoint[] neighbors = new DataPoint[2];
neighbors[0] = series.Points.Last(x => x.XValue <= xPixelPos);
neighbors[1] = series.Points.First(x => x.XValue >= xPixelPos);
DataPoint[] verticalMates;
foreach (DataPoint neighbor in neighbors)
{
if (Math.Abs(neighbor.XValue - xPixelPos) < LINE_GRIP_REGION)
{
verticalMates = series.Points.FindAllByValue(neighbor.XValue, "X").ToArray();
if (verticalMates.Length > 1)
{
if (verticalMates.Length > 2)
{
if (verticalMates[0].YValues[0] < verticalMates[verticalMates.Length - 1].YValues[0])
{
neighbors[0] = verticalMates.LastOrDefault(y => y.YValues[0] < yPixelPos);
neighbors[1] = verticalMates.FirstOrDefault(y => y.YValues[0] >= yPixelPos);
}
else
{
neighbors[0] = verticalMates.LastOrDefault(y => y.YValues[0] > yPixelPos);
neighbors[1] = verticalMates.FirstOrDefault(y => y.YValues[0] <= yPixelPos);
}
}
else
{
neighbors[0] = verticalMates[0];
neighbors[1] = verticalMates[1];
}
break;
}
}
}
double x0 = xAxis.ValueToPixelPosition(neighbors[0].XValue);
double y0 = yAxis.ValueToPixelPosition(neighbors[0].YValues[0]);
double x1 = xAxis.ValueToPixelPosition(neighbors[1].XValue);
double y1 = yAxis.ValueToPixelPosition(neighbors[1].YValues[0]);
double Yinterpolated = y0 + (y1 - y0) * (xPos - x0) / (x1 - x0);
int[] linePoints = new int[2];
// if mouse Y position is near the calculated OR the line is vertical
if (Math.Abs(Yinterpolated - yPos) < LINE_GRIP_REGION || neighbors[0].XValue == neighbors[1].XValue)
{
linePoints[0] = series.Points.IndexOf(neighbors[0]);
linePoints[1] = series.Points.IndexOf(neighbors[1]);
}
else
{
return null;
}
return new GrippedLine()
{
startLinePointIndex = linePoints[0],
endLinePointIndex = linePoints[1],
x0Correction = neighbors[0].XValue - xPixelPos,
y0Correction = neighbors[0].YValues[0] - yPixelPos,
x1Correction = neighbors[1].XValue - xPixelPos,
y1Correction = neighbors[1].YValues[0] - yPixelPos
};
}

C# Control Two Motors according to the Mouseclicks on a Picturebox

I am developing a C# win form GUI for controlling a two-motor XY stage. I have drawn a 100 x 100 square grid pattern on a picturebox in which each square, when clicked, represents a coordinate that the two motors must move to. I have studied this link
PictureBox Grid and selecting individual cells when clicked on and this PictureBox- Grids and Filling in squares (Game of Life) for drawing a grid and marking the clicked positions.
Now I have to transform the series of randomly clicked points to actual movement of the two motors.
How shall I translate the click coordinates programmatically to give commands to control the motors?
I know how to move and control the motors without referring to the screen coordinates, i.e. by using eyes.
Thank you very much for your kind help.
Update1:
Hello... I think I am thinking too much in a confusing way to move the motors from one point to another despite Sebastien's great help. I wanted to try some logic below but I appreciate if somebody can enlighten me how best to implement this.
private void pictureBoxGrid_MouseClick(object sender, MouseEventArgs e)
{
//int x = e.X;
int x = cellSize * (e.X / cellSize);
int y = cellSize * (e.Y / cellSize);
int i = x / 8; // To limit the value to below 100
int j = y / 8;
// Reverse the value of fill_in[i, j] - if it was false, change to true,
// and if true change to false
fill_in[i, j] = !fill_in[i, j];
if (fill_in[i, j])
{
//Save the coordinate in a list
filledSq.Add(new Point(i, j));
using (Graphics g = Graphics.FromImage(buffer))
{
g.FillRectangle(Brushes.Black, x + 1, y + 1, 7, 7);
}
}
else
{
//Delete the coordinate in a list
filledSq.Remove(new Point(i, j));
Color customColor = SystemColors.ControlLightLight;
using (Graphics g = Graphics.FromImage(buffer))
using (SolidBrush shadowBrush = new SolidBrush(customColor))
{
g.FillRectangle(shadowBrush, x + 1, y + 1, 7, 7);
}
}
//pictureBoxGrid.BackgroundImage = buffer;
pictureBoxGrid.Invalidate();
}
private void buttonSavePoints_Click(object sender, EventArgs e)
{
// to be implemented...
}
private void buttonRun_Click(object sender, EventArgs e)
{
var noOfDots = filledSq.Count;
filledSq = filledSq.OrderBy(p => p.X).ThenBy(p => p.Y).ToList();
var motor = new Motor();
for (var i = 0; i < noOfDots; i++)
{
motor.Move(filledSq[i].X, filledSq[i].Y); //call the motor to move to X,Y here?
//do sth at each position
}
}

Since you wrote, that you know how to move the motors programmatically this answer will be more theoretical:
Each steppermotor has a predefined anglewidth per step (e.g. 1.8°).
And if you know where your Motors are (for example at a predefined starting point with limitswitches (0|0)) you can calculate where they need to be.
For the precision there are multiple factors like if you are using Belts or threaded rods.
An examplemethod could look like this:
private static float stepwidth = 1.8;
private static beltConverionPerDegree = 0.2; // Or rod
private float currentPositionX = 0;
private float currentPositionY = 0;
public Tuple<int, int> GetSteps(float x, float y) {
// calculate the position relative to the actual position (Vector between two points)
float relativeX = x - currentPositionX;
float relativeY = y - currentPositionY;
return new Tuple<int, int> (relativeX / (stepwidth * beltConverionPerDegree), relativeY / (stepwidth * beltConverionPerDegree));
}
beltConverionPerDegree means how much distance your motor moves the belt for each degree.

C# chart using crosshair cursor

i'm working with C# chart class to display a curve. the type of the series is spline.
the thing would i do is show a crosshair cursor in the chart area. the vertical line of this cursor should move with the mouse when the mouse enter the chart. but the horizontal line should move whit the curve line not with mouse movement.
the code which i typed is here:
private void chart1_MouseMove(object sender, MouseEventArgs e)
{
Point mousePoint = new Point(e.X, e.Y);
chart1.ChartAreas[0].CursorX.SetCursorPixelPosition(mousePoint,false);
chart1.ChartAreas[0].CursorY.SetCursorPixelPosition(mousePoint,false);
}
this code cause the cursor move whith the mouse and the result is like in this image:
to make the horizontal line of the cursor follow the curve line which is a sinusoidal signal here. i should know the Point of intersection between the vertical line of the cursor and the curve line. as this picture show:
is there any direct way to find this point? any help plz!.

You can get the y pixel-offset relative to the top of the chart area if you know the following:
height = Chart height in pixels
rangeMin/rangeMax = Chart range min/max (here -150/150)
value = function value (bottom image, approx. 75)
Taking the following formula:
yOffset = height * (rangeMax - value) / (rangeMax - rangeMin);
You should be able to plug yOffset into your MouseMove function like so:
private void chart1_MouseMove(object sender, MouseEventArgs e)
{
double yOffset = GetYOffset(chart1, e.X);
Point mousePoint = new Point(e.X, yOffset);
chart1.ChartAreas[0].CursorX.SetCursorPixelPosition(mousePoint,false);
chart1.ChartAreas[0].CursorY.SetCursorPixelPosition(mousePoint,false);
}
// ChartClass chart is just whatever chart you're using
// x is used here I'm assuming to find f(x), your value
private double GetYOffset(ChartClass chart, double x)
{
double yOffset;
// yOffset = height * (rangeMax - value) / (rangeMax - rangeMin);
return yOffset;
}

In this function I get the position of cursor X with the method GetXOfCursor();
after that I take the series point with this statement:
points = _theChart.Series[i].Points;
After with the last if statement I see the point that matches with the position X of the cursor
and I calculate the mean value of Y of this 2 Point because the point intercepted with the cursor is an interpolation line made by the windows chart control
public string GetPointInterceptedCursorX()
{
string values = string.Empty;
// Far uscire le etichette ai punti intercettati
var xPosCursor = GetXOfCursor();
DataPointCollection points = null;
for (int i = 0; i < _theChart.Series.Count; i++)
{
if (_theChart.Series[i].BorderWidth == ChartConst.THICKNESS_LINE_ENABLED)
{
points = _theChart.Series[i].Points;
break;
}
}
if (points == null) return "No Curve Selected";
for (int i = 0; i < points.Count - 1; i++)
{
if ((xPosCursor > points[i].XValue & xPosCursor < points[i + 1].XValue) | xPosCursor > points[i + 1].XValue & xPosCursor < points[i].XValue)
{
var Yval = (points[i].YValues[0] + points[i + 1].YValues[0]) / 2;
values += $"Y= {Yval} {Environment.NewLine}";
}
}
values += "X=" + " " + String.Format("{0:0.00}", xPosCursor);
return values;
}

How to correctly position a "X" in a rectangle?

I have the next problem: I have rectangle with 10 lines and 10 columns. When I press on a square I have to draw the "X" letter. Well, when I press on the right half, or on bottom half of the square, the "X" is drawn in the next right square, respectively in the below square. What should I do so when I press wherever on a square, the "X" to be drawn on the respective square?
My code is:
private void panel2_MouseClick(object sender, MouseEventArgs e)
{
txtX.Text = Convert.ToString(e.X);
txtY.Text = Convert.ToString(e.Y);
var data = File.ReadAllLines(handleClinet.GetPath().Replace("Client","Server"));
if (e.X >= 20 && e.Y >= 20 && e.X <= 220 && e.Y <= 220)
{
var graph = (sender as Panel).CreateGraphics();
const int redInt = 255; //255 is example, give it what u know
const int blueInt = 255; //255 is example, give it what u know
const int greenInt = 255; //255 is example, give it what u know
var p = new Pen(Color.FromArgb(redInt, blueInt, greenInt));
var newEx = (int)Math.Round(
(e.X / (double)20), MidpointRounding.AwayFromZero) * 20;
var newEy = (int)Math.Round(
(e.Y / (double)20), MidpointRounding.AwayFromZero) * 20;
RectangleF rectF1 = new RectangleF(newEx, newEy, 20,20);
graph.DrawString("X", new System.Drawing.Font("Arial", 16), Brushes.Blue, rectF1);
}
}
And my rectangle is like:
Many thanks in advance!

It seems like the issue is where you are using your MidpointRounding.AwayFromZero
It seems to me that if the sum you have to calculate the position you want to draw the 'X' gives the result 6.6, you want to have it in position 6, not position 7, so realistically you would want to replace that line with:
int newEx = Math.Floor((e.X / (double)20)) * 20;
... And then do the same for the Y calculation too
This should ensure that whatever the result it gives, it should not jump to the next box.

Iteratively smooth a curve

I've been trying to do this the whole day. Basically, I have a line and a point. I want the line to curve and pass through that point, but I don't want a smooth curve. I wan't to be able to define the number of steps in my curve, like so (beware crude mspaint drawing):
And so on. I tried various things, like taking the angle from the center of the initial line and then splitting the line at the point where the angle leads, but I have a problem with the length. I would just take the initial length and divide it by the number of steps I was at, but that wasn't quite right.
Anyone knows a way to do that?
Thanks.

You could go the other way around : first find a matching curve and then use the points on the curve to draw the lines. For example:
This plot was obtained in the following way:
Suppose you have the three starting points {x0,0},{x1,y1},{x2,0}
Then you find two parabolic curves intersecting at {x1,y1}, with the additional condition of having a maxima at that point (for a smooth transition). Those curves are:
yLeft[x_] := a x^2 + b x + c;
yRight[x_] := d x^2 + e x + f;
Where we find (after some calculus):
{c -> -((-x0^2 y1 + 2 x0 x1 y1)/(x0 - x1)^2),
a -> -(y1/(x0 - x1)^2),
b -> (2 x1 y1)/(-x0 + x1)^2}
and
{f -> -((2 x1 x2 y1 - x2^2 y1)/(x1 - x2)^2),
d -> -(y1/(x1 - x2)^2),
e -> (2 x1 y1)/(x1 - x2)^2}
so we have our two curves.
Now you should note that if you want your points equally spaced, x1/x2 should be a rational number.and your choices for steps are limited. You may chose steps passing by x1 AND x2 while starting from x0. (those are of the form x1/(n * x2))
And that's all. Now you form your lines according to the points {x,yLeft[x]} or {x,yRight[x]} depending upon on which side of x1 you are.
Note: You may chose to draw only one parabolic curve that pass by your three points, but it will result highly asymmetrical in the general case.
If the point x1 is in the middle, the results are nicer:

You would probably need to code this yourself. I think you could do it by implementing a quadratic bezier curve function in code, which can be found here. You decide how fine you want the increments by only solving for a few values. If you want a straight line, only solve for 0 and 1 and connect those points with lines. If you want the one angle example, solve for 0, 0.5, and 1 and connect the points in order. If you want your third example, solve for 0, 0.25, 0.5, 0.75, and 1. It would probably be best to put it in a for loop like this:
float stepValue = (float)0.25;
float lastCalculatedValue;
for (float t = 0; t <= 1; t += stepValue)
{
// Solve the quadratic bezier function to get the point at t.
// If this is not the first point, connect it to the previous point with a line.
// Store the new value in lastCalculatedValue.
}
Edit: Actually, it looks like you want the line to pass through your control point. If that is the case, you don't want to use a quadratic bezier curve. Instead, you probably want a Lagrange curve. This website might help with the equation: http://www.math.ucla.edu/~baker/java/hoefer/Lagrange.htm. But in either case, you can use the same type of loop to control the degree of smoothness.
2nd Edit: This seems to work. Just change the numberOfSteps member to be the overall number of line segments you want and set the points array appropriately. By the way, you can use more than three points. It will just distribute the total number of line segments across them. But I initialized the array so that the result looks like your last example.
3rd Edit: I updated the code a bit so you can left click on the form to add points and right click to remove the last point. Also, I added a NumericUpDown to the bottom so you can change the number of segments at runtime.
public class Form1 : Form
{
private int numberOfSegments = 4;
private double[,] multipliers;
private List<Point> points;
private NumericUpDown numberOfSegmentsUpDown;
public Form1()
{
this.numberOfSegmentsUpDown = new NumericUpDown();
this.numberOfSegmentsUpDown.Value = this.numberOfSegments;
this.numberOfSegmentsUpDown.ValueChanged += new System.EventHandler(this.numberOfSegmentsUpDown_ValueChanged);
this.numberOfSegmentsUpDown.Dock = DockStyle.Bottom;
this.Controls.Add(this.numberOfSegmentsUpDown);
this.points = new List<Point> {
new Point(100, 110),
new Point(50, 60),
new Point(100, 10)};
this.PrecomputeMultipliers();
}
public void PrecomputeMultipliers()
{
this.multipliers = new double[this.points.Count, this.numberOfSegments + 1];
double pointCountMinusOne = (double)(this.points.Count - 1);
for (int currentStep = 0; currentStep <= this.numberOfSegments; currentStep++)
{
double t = currentStep / (double)this.numberOfSegments;
for (int pointIndex1 = 0; pointIndex1 < this.points.Count; pointIndex1++)
{
double point1Weight = pointIndex1 / pointCountMinusOne;
double currentMultiplier = 1;
for (int pointIndex2 = 0; pointIndex2 < this.points.Count; pointIndex2++)
{
if (pointIndex2 == pointIndex1)
continue;
double point2Weight = pointIndex2 / pointCountMinusOne;
currentMultiplier *= (t - point2Weight) / (point1Weight - point2Weight);
}
this.multipliers[pointIndex1, currentStep] = currentMultiplier;
}
}
}
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
Point? previousPoint = null;
for (int currentStep = 0; currentStep <= numberOfSegments; currentStep++)
{
double sumX = 0;
double sumY = 0;
for (int pointIndex = 0; pointIndex < points.Count; pointIndex++)
{
sumX += points[pointIndex].X * multipliers[pointIndex, currentStep];
sumY += points[pointIndex].Y * multipliers[pointIndex, currentStep];
}
Point newPoint = new Point((int)Math.Round(sumX), (int)Math.Round(sumY));
if (previousPoint.HasValue)
e.Graphics.DrawLine(Pens.Black, previousPoint.Value, newPoint);
previousPoint = newPoint;
}
for (int pointIndex = 0; pointIndex < this.points.Count; pointIndex++)
{
Point point = this.points[pointIndex];
e.Graphics.FillRectangle(Brushes.Black, new Rectangle(point.X - 1, point.Y - 1, 2, 2));
}
}
protected override void OnMouseClick(MouseEventArgs e)
{
base.OnMouseClick(e);
if (e.Button == MouseButtons.Left)
{
this.points.Add(e.Location);
}
else
{
this.points.RemoveAt(this.points.Count - 1);
}
this.PrecomputeMultipliers();
this.Invalidate();
}
private void numberOfSegmentsUpDown_ValueChanged(object sender, EventArgs e)
{
this.numberOfSegments = (int)this.numberOfSegmentsUpDown.Value;
this.PrecomputeMultipliers();
this.Invalidate();
}
}