We Keep Coding

How to draw a line between PointF in a list

I'm just starting out with xamarin for android. I'm building an app where a person can see the track they walked on a map. The map is handwritten with a bitmap (this is a requirement as it's a school assignment). I need to save points (which I did in a list) and draw dots and lines between the dots to create a track.
The problem is that I have a foreach method to draw all the dots, I just need to draw lines between the dots. I don't know how to make sure I have a registry of the previous points and the new points so I can put the coordinates in the drawLine method.
The track is a list which adds the current GPS location to the list. Since I use a bitmap for the map I needed to implement myself what coordinates of the map are corresponding with the coordinates of the real-life area. this is what the Proportion is referring to.
paint.Color = Color.Magenta;
PointF previousPoint;
foreach (PointF p in track)
{
Console.WriteLine("works");
// p is a track-point in RD-meters
// calculates distance to centre bitmap
float bpx = (p.X - centrePos.X) * 0.4f;
float bpy = (centrePos.Y - p.Y) * 0.4f;
// converter to screen pixels
float sx = bpx * this.Proportion;
float sy = bpy * this.Proportion;
// calculate to absolute scherm-pixels
float x = this.Width / 2 + sx;
float y = this.Height / 2 + sy;
canvas.DrawCircle(x, y, 10, paint);
previousPoint = p;
//draws the lines between the points
canvas.DrawLine(previousPoint.X, previousPoint.Y, x, y, verf);
}
so now previousPoint and p are the same, and it should be more like p1 and p2, but calculated to match the same centre as described in the code.

How to display X-Axis and Y-Axis values when move the mouse?

How can I display the values of X-Axis and Y-Axis when the mouse is moved
anywhere within the chart area (like the picture)?
The HitTest method can not be applied for moving or it can only be applied for clicking on the chart?
Please help me. Thanks in advance.
The tooltip shows data outside the real area data drawn

Actually the Hittest method works just fine in a MouseMove; its problem is that it will only give a hit when you are actually over a DataPoint.
The Values on the Axes can be retrieved/converted from pixel coordinates by these axis-functions:
ToolTip tt = null;
Point tl = Point.Empty;
private void chart1_MouseMove(object sender, MouseEventArgs e)
{
if (tt == null ) tt = new ToolTip();
ChartArea ca = chart1.ChartAreas[0];
if (InnerPlotPositionClientRectangle(chart1, ca).Contains(e.Location))
{
Axis ax = ca.AxisX;
Axis ay = ca.AxisY;
double x = ax.PixelPositionToValue(e.X);
double y = ay.PixelPositionToValue(e.Y);
string s = DateTime.FromOADate(x).ToShortDateString();
if (e.Location != tl)
tt.SetToolTip(chart1, string.Format("X={0} ; {1:0.00}", s, y));
tl = e.Location;
}
else tt.Hide(chart1);
}
Note that they will not work while the chart is busy laying out the chart elements or before it has done so. MouseMove is fine, though.
Also note that the example displays the raw data while the x-axis labels show the data as DateTimes. Use
string s = DateTime.FromOADate(x).ToShortDateString();
or something similar to convert the values to dates!
The check for being inside the actual plotarea uses these two useful functions:
RectangleF ChartAreaClientRectangle(Chart chart, ChartArea CA)
{
RectangleF CAR = CA.Position.ToRectangleF();
float pw = chart.ClientSize.Width / 100f;
float ph = chart.ClientSize.Height / 100f;
return new RectangleF(pw * CAR.X, ph * CAR.Y, pw * CAR.Width, ph * CAR.Height);
}
RectangleF InnerPlotPositionClientRectangle(Chart chart, ChartArea CA)
{
RectangleF IPP = CA.InnerPlotPosition.ToRectangleF();
RectangleF CArp = ChartAreaClientRectangle(chart, CA);
float pw = CArp.Width / 100f;
float ph = CArp.Height / 100f;
return new RectangleF(CArp.X + pw * IPP.X, CArp.Y + ph * IPP.Y,
pw * IPP.Width, ph * IPP.Height);
}
If you want to you can cache the InnerPlotPositionClientRectangle; you need to do so when you change the data layout or resize the chart.

Charting - Set grid above the graph

I'm working with the System.Windows.Forms.DataVisualization.Charting library of C# in Visual Studio.
Creating the graphs themselves is no problem, however, since I'm using SeriesChartType.StackedArea100 for my serieses (which always fills the vertical graph space 100%), the grid (X & Y) is completely covered by the graphs.
However, I want the X-grid to be above the graphs, so it's easier to see which point belongs to what.
Am I missing something obvious here?

Gridlines are always drawn under the DataPoints.
One option is to make the Colors of the DataPoints semi-transparent.
Here is an example:
chart1.ApplyPaletteColors(); // necessary to access the original colors
if (checkBox1.Checked)
{
foreach (Series s in chart1.Series) s.Color = Color.FromArgb(192, s.Color);
}
You can raise alpha to 224 and still see the lines.
Or you could owner-draw GridLines in one of the xxxPaint events; but that of course is a little more complicated. OK, a lot more..
The drawing itself is regular GDI+ drawing with DrawLine calls in two loops.
But to get the loops and the coordinates right you need to :
Make sure you know/control the Minimum, Maximum & Interval for the axes. If they are not set but still on their auto-values you need to find a way to get at them.
know the Rectangle of the InnerPlotPosition in pixels(!). See here for two functions that will help you !
Here is an example:
private void chart1_PostPaint(object sender, ChartPaintEventArgs e)
{
if (checkBox1.Checked) return;
ChartArea ca = chart1.ChartAreas[0];
RectangleF ipar = InnerPlotPositionClientRectangle(chart1, ca);
Axis ax = ca.AxisX;
Axis ay = ca.AxisY;
Color gc = ax.MajorGrid.LineColor;
Pen pen = new Pen(gc);
double ix = ax.Interval == 0 ? 1 : ax.Interval; // best make sure to set..
double iy = ay.Interval == 0 ? 50 : ay.Interval; // ..the intervals!
for (double vx = ax.Minimum; vx <= ax.Maximum; vx+= ix)
{
int x = (int)ax.ValueToPixelPosition(vx) + 1;
e.ChartGraphics.Graphics.DrawLine(pen, x, ipar.Top, x, ipar.Bottom);
}
for (double vy = ay.Minimum; vy <= ay.Maximum; vy += iy)
{
int y = (int)ay.ValueToPixelPosition(vy) + 1;
e.ChartGraphics.Graphics.DrawLine(pen, ipar.Left, y, ipar.Right, y);
}
pen.Dispose();
}
You should disable the GridLines and maybe even make the the Axes transparent:
chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
chart1.ChartAreas[0].AxisY.MajorGrid.Enabled = false;
chart1.ChartAreas[0].AxisX.LineColor = Color.Transparent;
chart1.ChartAreas[0].AxisY.LineColor = Color.Transparent;

Drawing sets of coordinates to pixels so they mutually scale

So I have a List<object> of longitude and latitude coordinates of two points, and I need to connect the line between them. The trick is to display all of the lines within a panel so that they are scaled within the panel's dimensions (converting coordinate numbers to match the pixels) and I almost got it. However I'm confounded by some unknown problem. The code is:
int canvasWidth = panel1.Width,
canvasHeight = panel1.Height;
var minX1 = tockeKoordinate.Min(x => x.startX);
var minX2 = tockeKoordinate.Min(x => x.endX);
var minX = Math.Min(minX1, minX2);
var maxX1 = tockeKoordinate.Max(x => x.startX);
var maxX2 = tockeKoordinate.Max(x => x.endX);
var maxX = Math.Max(maxX1, maxX2);
var maxY1 = tockeKoordinate.Max(x => x.startY);
var maxY2 = tockeKoordinate.Max(x => x.endY);
var maxY = Math.Max(maxY1, maxY2);
var minY1 = tockeKoordinate.Min(x => x.startY);
var minY2 = tockeKoordinate.Min(x => x.endY);
var minY = Math.Min(minY1, minY2);
double coordinatesWidth = Math.Abs(maxX - minX),
coordinatesHeight = Math.Abs(maxY - minY);
float coefWidth = (float)coordinatesWidth / canvasWidth,
coefHeight = (float)coordinatesHeight / canvasHeight;
Basically I check the List for minimum and maximum XY coordinates, so I know what the extreme values are. Then I use a coeficient value to recalculate the coords in pixels so that are within the panel. When I use this:
drawLine(Math.Abs((float)(line.startX - minX) / coefWidth),
Math.Abs((float)(line.startY - minY) / coefHeight),
Math.Abs((float)(line.endX - maxX) / coefWidth),
Math.Abs((float)(line.endY - maxY) / coefHeight));
which is in foreach loop that iterates trough all the elements from the List . The drawline() method is as follows:
private void drawLine(float startX, float startY, float endX, float endY)
{
PointF[] points =
{
new PointF(startX, startY),
new PointF(endX, endY),
};
g.DrawLine(myPen, points[0], points[1]);
}
WHen all of this is put together, I get this picture:
I know for a fact that the "lines" should be connected and form shapes, in this case they represent roads in a suburban area.
I figured that it treats every coordinate set like it is the only one and then scales it to the panel dimensions. Actually it should scale it in reference to all of the other coordinates
It should "zoom" them out and connect with each other, because that is the way I defined the panel dimensions and everything else.
EDIT: ToW's solution did the trick, with this line of code changed to use my List:
foreach (var line in tockeKoordinate)
{
gp.AddLine((float)(line.startX), (float)(line.startY), (float)(line.endX), (float)(line.endY));
gp.CloseFigure();
}
End result when working properly:

As far as I can see your best bet would be to add all those lines to a GraphicsPath.
After it is complete you can look at its bounding rectangle and compare it to the size your Panel offers.
Then you can calculate a scale for the Graphics object to draw with and also a translation.
Finally you draw the lines with Graphics.DrawPath.
All with just 2 division on your side :-)
Here is an example:
private void panel1_Paint(object sender, PaintEventArgs e)
{
Graphics G = e.Graphics;
Random R = new Random(13);
GraphicsPath gp = new GraphicsPath();
for (int i = 0; i < 23; i++)
{
gp.AddLine(R.Next(1234), R.Next(1234), R.Next(1234), R.Next(1234));
gp.CloseFigure(); // disconnect lines
}
RectangleF rect = gp.GetBounds();
float scale = Math.Min(1f * panel1.Width / rect.Width,
1f * panel1.Height / rect.Height);
using (Pen penUnscaled = new Pen(Color.Blue, 4f))
using (Pen penScaled = new Pen(Color.Red, 4f))
{
G.Clear(Color.White);
G.DrawPath(penUnscaled, gp);
G.ScaleTransform(scale, scale);
G.TranslateTransform(-rect.X, -rect.Y);
G.DrawPath(penScaled, gp);
}
}
A few notes:
The blue lines do not fit onto the panel
The red lines are scaled down to fit
The Pen is scaled along with the rest of the Graphics but won't go under 1f.
To create connected lines do add a PointF[] or, more convenient a List<PointF>.ToArray().
I really should have used panel1.ClientSize.Width instead of panel1.Width etc..; now it is off a tiny bit at the bottom; bad boy me ;-)

ILNumerics plot a plane at specific location

I'm currently playing around with the ILNumerics API and started to plot a few points in a cube.
Then I calculated a regression plane right through those points.
Now I'd like to plot the plane in the same scene plot but only with the same size than the point cloud.
I got the paramters of the plane (a,b,c): f(x,y) = a*x + b*y + c;
I know that only z is interesting for plotting a plane but I've got no clue how pass the right coodinates to the scene so that the plane size is about the same size than the maximum and minimum area of the points.
Could you guys give me a simple example of plotting a plane and a little suggetion how to set the bounds of that plane right?
Here is what I got so far:
private void ilPanel1_Load(object sender, EventArgs e)
{
// get the X and Y bounds and calculate Z with parameters
// plot it!
var scene = new ILScene {
new ILPlotCube(twoDMode: false) {
new ILSurface( ??? ) {
}
}
};
// view angle etc
scene.First<ILPlotCube>().Rotation = Matrix4.Rotation(
new Vector3(1f, 0.23f, 1), 0.7f);
ilPanel1.Scene = scene;
}
I hope that someone can help me ...
Thanks in advance !!!

You could take the Limits of the plotcube.Plots group and derive the coords from the bounding box from it. This gives you the min and max x and y coord for the plane. Use them to get the corresponding z values by evaluating you plane equation.
Once you have x,y and z of the plane, use them with ILSurface to plot the plane.
If you need more help, I can try to add an example.
#Edit: the following Example plots a plane through 3 arbitrary points. The planes orientation and position is computed by help of a plane function zEval. Its coefficients a,b,c are computed here from the 3 (concrete) points. You will have to compute your own equation coefficients here.
The plane is realized with a surface. One might as well take the 4 coords computed in 'P' and use an ILTriangleFan and an ILLineStrip to create the plane and the border. But the surface already comes with a Fill and a Wireframe, so we take this as a quick solution.
private void ilPanel1_Load(object sender, EventArgs e) {
// 3 arbitrary points
float[,] A = new float[3, 3] {
{ 1.0f, 2.0f, 3.0f },
{ 2.0f, 2.0f, 4.0f },
{ 2.0f, -2.0f, 2.0f }
};
// construct a new plotcube and plot the points
var scene = new ILScene {
new ILPlotCube(twoDMode: false) {
new ILPoints {
Positions = A,
Size = 4,
}
}
};
// Plane equation: this is derived from the concrete example points. In your
// real world app you will have to adopt the weights a,b and c to your points.
Func<float, float, float> zEval = (x, y) => {
float a = 1, b = 0.5f, c = 1;
return a * x + b * y + c;
};
// find bounding box of the plot contents
scene.Configure();
var limits = scene.First<ILPlotCube>().Plots.Limits;
// Construct the surface / plane to draw
// The 'plane' will be a surface constructed from a 2x2 mesh only.
// The x/y coordinates of the corners / grid points of the surface are taken from
// the limits of the plots /points. The corresponding Z coordinates are computed
// by the zEval function. So we give the ILSurface constructor not only Z coordinates
// as 2x2 matrix - but an Z,X,Y Array of size 2x2x3
ILArray<float> P = ILMath.zeros<float>(2, 2, 3);
Vector3 min = limits.Min, max = limits.Max;
P[":;:;1"] = new float[,] { { min.X, min.X }, { max.X, max.X } };
P[":;:;2"] = new float[,] { { max.Y, min.Y }, { max.Y, min.Y } };
P[":;:;0"] = new float[,] {
{ zEval(min.X, max.Y) , zEval(min.X, min.Y) },
{ zEval(max.X, max.Y) , zEval(max.X, min.Y) },
};
// create the surface, make it semitransparent and modify the colormap
scene.First<ILPlotCube>().Add(new ILSurface(P) {
Alpha = 0.6f,
Colormap = Colormaps.Prism
});
// give the scene to the panel
ilPanel1.Scene = scene;
}
This would create an image similar to this one:
#Edit2: you asked, how to disable the automatic scaling of the plot cube while adding the surface:
// before adding the surface:
var plotCube = scene.First<ILPlotCube>();
plotCube.AutoScaleOnAdd = false;
Alternatively, you can set the limits of the cube manually:
plotCube.Limits.Set(min,max);
You probably will want to disable some mouse interaction as well, since they would allow the user to rescale the cube in a similar (unwanted?) way:
plotCube.AllowZoom = false; // disables the mouse wheel zoom
plotCube.MouseDoubleClick += (_,arg) => {
arg.Cancel = true; // disable the double click - resetting for the plot cube
};