How to rotate a png image to indicate a value?

Question

I'm trying to make my own gauges that interface with x plane 11. So far i have managed to figure out how to get the values into my program such as speed. I then created a second form which consists of 2 png images, the background and the needle. I want to rotate the needle to display the relevant value.

Ive looked at this How do I rotate a picture in WinForms but the solutions seem to save the new image and non of them work as is and its beond my current scope with out any good understanding on image manipulation. What im looking for is a simple process to rotate the needle by say 1 degree for example:

Rotationfunction(picturebox2, 1)

In terms of the gauge itself there isnt much code so far:

private void airspeed_Load(object sender, EventArgs e)
{
    pictureBox1.Controls.Add(pictureBox2);
    pictureBox2.BackColor = Color.Transparent;
}

Now i have used one of the examples and got it to work however it is behaving strangley. the images show whats happening best.

https://i.stack.imgur.com/39IH2.jpg

Thanks to taw for finding this:

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    using (Bitmap needle =  new Bitmap("D:\\needle3.png" )  )
    {
        int angle = trBar_angle.Value;
        label1.Text = angle.ToString("###0°");

        // this is the offset after the translation
        Point targetPoint = new Point(-needle.Width / 2, needle.Width / 2);

        // shortcuts for the sizes
        Size nSize = needle.Size;
        Size pSize = pictureBox1.ClientSize;

        // this is the translation of the graphic to meet the rotation point
        int transX = pSize.Width / 2;
        int transY = pSize.Height - nSize.Width / 2;

        //set the rotation point and rotate
        e.Graphics.TranslateTransform( transX, transY );
        e.Graphics.RotateTransform(angle + 90); 

        // draw on the rotated graphics
        e.Graphics.DrawImage(needle, targetPoint);

        //reset everything
        e.Graphics.RotateTransform( -angle - 90); 
        e.Graphics.TranslateTransform( -transX, -transY );

    }

}

however i dont know how to implement it into my code? ive added the trackbap and the label but noting happens when i move the trackbar.

Where do you see the [accepted answer on your link](https://stackoverflow.com/a/2163854/1070452) saving the altered image? All of the top three simply return the new image. You absolutely want to return a copy and hold onto the original to make it easy to draw/create a new version — Ňɏssa Pøngjǣrdenlarp, Aug 11 '19 at 16:33
You cant rotate a picture box which is not the same as the image it displays anyway. If you could and the plane was going 120 would it make sense for that image to be upside down??? You need 2 images - the background gauge and a needle. Rotate and redraw the needle and overlay it on the background as needed. Be sure to dispose of your old images so your app does not leak. [Something like this](https://stackoverflow.com/a/40432838/1070452) — Ňɏssa Pøngjǣrdenlarp, Aug 11 '19 at 16:50
There are 2 images. The needle and the background. how would you update the contents of the picturebox to the new needle? Its very annoying you cant simple totate the image instead of messing around creating a new image then replacing it. — , Aug 11 '19 at 16:56
[Matrix.RotateAt](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.drawing2d.matrix.rotateat). The angle is expressed in degrees.. Sample: [Arc graphic quality](https://stackoverflow.com/a/54139910/7444103). It includes a PasteBin of the gauge you see there. Sample2: [Transparent Overlapping Circular Progress Bars](https://stackoverflow.com/a/53379442/7444103) — Jimi, Aug 11 '19 at 17:14
[Like so](https://stackoverflow.com/questions/24721646/gauge-needle-pivot-point/24746389#24746389)? — TaW, Aug 11 '19 at 21:38

score 0 · Answer 1 · answered Aug 12 '19 at 13:30

namespace xp_11_test_3
{
public partial class asiwindow : Form
{
    float angle = 15 * 1.59f;
    float aspd = 15;
    public asiwindow()
    {
        InitializeComponent();
    }

    private void asiwindow_Load(object sender, EventArgs e)
    {
        pictureBox1.Invalidate();
        pictureBox1.Paint += new System.Windows.Forms.PaintEventHandler(this.pictureBox1_Paint);

    }
    public void updatereqd()
    {
        //label1.Text = "tried to update";
          aspd = float.Parse(Form1.airspeed);
          pictureBox1.Invalidate();
    }
    private void pictureBox1_Paint(object sender, PaintEventArgs e)
    {
        using (Bitmap needle = new Bitmap(xp_11_test_3.Properties.Resources.needle_2))
        {
            try
            {
                //aspd = (int.Parse(textBox1.Text));
                if (aspd < 15) { aspd = 15; }
                if (aspd > 200) { aspd = 200; }
                angle = (aspd * 1.59f) - 7.95f;


            }
            catch { }
            //label1.Text = angle.ToString("###0°");

            // this is the offset after the translation
            Point targetPoint = new Point(-needle.Width / 2, needle.Height / 2 - needle.Height);

            // shortcuts for the sizes
            Size nSize = needle.Size;
            Size pSize = pictureBox1.ClientSize;

            // this is the translation of the graphic to meet the rotation point
            int transX = pSize.Width / 2;
            int transY = pSize.Height / 2;

            //set the rotation point and rotate
            e.Graphics.TranslateTransform(transX, transY);
            e.Graphics.RotateTransform(angle);

            // draw on the rotated graphics
            e.Graphics.DrawImage(needle, targetPoint);
        }

    }
}

}

How to rotate a png image to indicate a value?

1 Answers1