Question Dial Gauge Meters are not easy to make

[syed ali]

I am trying to make a dial meter.I am success full 75 present.I involve sine cosin values. and background pictures.this I am moving by a VScroll bar.For example my gauge is for measuring pressure.max. pressure is 250 Lbsmy gauge is circuler.I have one label also it shows a direct read out for the pressure.my problem and questionI am moving a line it moves correctly but every time a new line is made.How do I draw a new line by erasing the old one.by completing the this we will go further to complete the gauge.I am updating the dial gauge's needle new position by the timer-1 every time.I am drawing the dial gauge by a background less dial picture on picture box.Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick Timer1.Enabled = True Timer1.Interval = 100 Dim Myp As Pen = New Pen(Brushes.Red, 5) Dim x1 As Integer = (PictureBox1.Width / 2) + 3 Dim x2 As Integer Dim y1 As Integer = (PictureBox1.Height / 2) + 3 Dim y2 As Integer Dim g As Graphics = PictureBox1.CreateGraphics Dim angle As Integer = VScrollBar1.Value + 110 Dim needle_lenght As Integer = 95 Dim divisions As Integer = 50 x2 = x1 + needle_lenght * Math.Cos(angle / divisions) y2 = y1 + needle_lenght * Math.Sin(angle / divisions) g.DrawLine(Myp, x1, y1, x2, y2) Label1.Text = Val(VScrollBar1.Value) count = count + 1 If count > 250 Then count = 250 End If VScrollBar1.Value = count End Sub

 

[jmcilhinney]

Well, noone is going to read that code now, are they? Try copying your code directly from the IDE and pasting as plain text inside formatting tags, i.e.[xcode=vb]your code here[/xcode]

 

[Herman]

It amazes me every time how people can write code but fail completely at posting something simple on a forum.

 

[syed ali]

I didn't know this, I am sending my code again, hope it will be seen better.

I am trying to make a dial meter.I am success full 75 present.I involve sine cosin values. and background pictures.this I am moving by a VScroll bar.For example my gauge is for measuring pressure.max. pressure is 250 Lbsmy gauge is circuler.I have one label also it shows a direct read out for the pressure.my problem and questionI am moving a line it moves correctly but every time a new line is made.How do I draw a new line by erasing the old one.by completing the this we will go further to complete the gauge.I am updating the dial gauge's needle new position by the timer-1 every time.I am drawing the dial gauge by a background less dial picture on picture box.

Public Class Form1    Dim g As Graphics = Me.CreateGraphics
    Dim count As Integer = 1
    
    Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click


        Dim Myp As Pen = New Pen(Brushes.Red, 5)
        Dim x1 As Integer = PictureBox1.Width / 2
        Dim y1 As Integer = PictureBox1.Height / 2
        Dim y2 As Integer = y1
        Dim g As Graphics = PictureBox1.CreateGraphics


    End Sub


    Private Sub VScrollBar1_Scroll(ByVal sender As System.Object, ByVal e As System.Windows.Forms.ScrollEventArgs) Handles VScrollBar1.Scroll
        If VScrollBar1.Value > 100 Then
            OvalShape1.BackColor = Color.Red
        Else : OvalShape1.BackColor = Color.LightGray
        End If
    End Sub


    Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        Timer1.Enabled = True
        Timer1.Interval = 100
        Dim Myp As Pen = New Pen(Brushes.Red, 5)
        Dim x1 As Integer = (PictureBox1.Width / 2) + 3
        Dim x2 As Integer
        Dim y1 As Integer = (PictureBox1.Height / 2) + 3
        Dim y2 As Integer
        Dim g As Graphics = PictureBox1.CreateGraphics
        Dim angle As Integer = VScrollBar1.Value + 110
        Dim needle_lenght As Integer = 95
        Dim divisions As Integer = 50
        x2 = x1 + needle_lenght * Math.Cos(angle / divisions)
        y2 = y1 + needle_lenght * Math.Sin(angle / divisions)
        g.DrawLine(Myp, x1, y1, x2, y2)
        Label1.Text = Val(VScrollBar1.Value)
        count = count + 1
        If count > 250 Then
            count = 250
        End If
        VScrollBar1.Value = count


    End Sub


    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load


    End Sub
End Class

 

[VicJ]

Hi Syed,
You should do the Graphics in the PictureBox Paint event handler, instead of in the Timer Tick event handler. Instead of using CreateGraphics, you get the Graphics object form the PaintEventArgs (e.Graphics). Assuming you want to draw the gauge in PictureBox1, this is how it will look:

Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint
        [COLOR=#ff0000]Dim g As Graphics = e.Graphics[/COLOR]
        Dim Myp As Pen = New Pen(Brushes.Red, 5)        
        Dim x1 As Integer = (PictureBox1.Width / 2) + 3
        Dim x2 As Integer
        Dim y1 As Integer = (PictureBox1.Height / 2) + 3
        Dim y2 As Integer

        Dim angle As Integer = VScrollBar1.Value + 110
        Dim needle_lenght As Integer = 95
        Dim divisions As Integer = 50
        x2 = x1 + needle_lenght * Math.Cos(angle / divisions)
        y2 = y1 + needle_lenght * Math.Sin(angle / divisions)
        g.DrawLine(Myp, x1, y1, x2, y2)
End Sub

As you can see, all the code except the first line has been copied from the Timer Tick sub, and the CreateGraphics line has been deleted.

Next make sure the Paint event fires when you need it to by Invalidating the PictureBox. Te best place to do that would be in the VScrollBar ValueChanged event handler:

Private Sub VScrollBar1_ValueChanged(sender As Object, e As EventArgs) Handles VScrollBar1.ValueChanged
     PictureBox1.Invalidate
End Sub

Next, let's start the Timer from the Button1 Click sub. That way you will be able to test your gauge every time you click the button. This is all the code you need:

Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
      TrackBar1.Value = 0
      count = 0
      Timer1.Interval = 100
      Timer1.Start
End Sub

Finally, what's left in your Timer Tick sub? It's job seems to be to test the VScrollBar and the Gauge. So it could be like this:

Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick        
   count = count + 1   
   If count > 250 Then
       Timer1.Stop
   Else
       VScrollBar1.Value = count
       Label1.Text = VScrollBar1.Value.ToString     
   End If
End Sub

I haven't had time to try this out, but see if you can get it going.

VicJ

 

[syed ali]

Thanks VicJ

I checked your advised modified program.It working fine with manual Vscroll bar but.
It doesn't work with auto timer tick when command button is pressed every time Vscroll bar start moving from zero also the label shows up the value changing of Vscroll bar/ dial gauge.
Track bar also come on zero when ever the command button is pressed if it already have changed its value. but the track bar have no relation with dial gauge I couldn't know it purpose of adding.
Every thing is fine it doesn't matter what is working what is not working at least needle is moving with manually this is our achievement and that's what I needed.
But we are 10 % on the way of our destiny, we should proceed further that what I said," Dial Gauge Meters are not easy to make"

See I am using the dial gauge picture in the back ground with all the big marks and sub division marks, and it is difficult for me to align the starting point and end point of dial gauge with the needle.
I want to draw the big outer circle and all the big and sub division mark by the software, with alignment needle pivot.
proper shape needle.
small circle in the centre.
To make the dial gauge more real and attractive.What I need further I am giving a reference image of dial gauge below.

 

[VicJ]

Thanks VicJ

I checked your advised modified program.It working fine with manual Vscroll bar but.
It doesn't work with auto timer tick when command button is pressed every time Vscroll bar start moving from zero also the label shows up the value changing of Vscroll bar/ dial gauge.
Track bar also come on zero when ever the command button is pressed if it already have changed its value. but the track bar have no relation with dial gauge I couldn't know it purpose of adding.

I just meant to give you an example. I tried my code and it works as I intended (I had to change TrackBar1 to VScrollBar1 but I hope you noticed that). You didn't say what the button was supposed to do. I'm not sure if I understand what you say, but I guess you want to start and stop the button needle. In that case you will need another button to reset the needle. Change the code in the Button1 Click sub to this:

    Timer1.Interval = 100
    If Timer1.Enabled Then Timer1.Stop() Else Timer1.Start()

and put these lines in the reset button (Button2) click sub:

    count = 0
    VScrollBar1.Value = 0
    Timer1.Stop()

See if it works the way you want!

Every thing is fine it doesn't matter what is working what is not working at least needle is moving with manually this is our achievement and that's what I needed.
But we are 10 % on the way of our destiny, we should proceed further that what I said," Dial Gauge Meters are not easy to make"

It's not all that difficult once you know the main Graphics techniques, but it takes a lot of work to get it to look right.

See I am using the dial gauge picture in the back ground with all the big marks and sub division marks, and it is difficult for me to align the starting point and end point of dial gauge with the needle.
I want to draw the big outer circle and all the big and sub division mark by the software, with alignment needle pivot.
proper shape needle.

For all these things, you need to get your understanding of angles sorted out. Angles for System.Drawing methods are in degrees and angles for System.Math methods are in radians. All angles in VB.Net are measured clockwise from the X axis. I suggest you use the variable divisions to represent the conversion factor (radians = degrees * Math.Pi / 180). And change its name to something sensible like radFactor (right-click on the present name and select Rename: it gets changed everywhere!). In other words, replace Dim divisions As Integer = 50 by this:

Dim radFactor As Double = 180/Math.Pi

Now the variable Angle will represent the number of degrees clockwise from the X-axis. It will make life easier.

small circle in the centre.

No problem. Use Graphics.DrawEllipse in the Paint sub.

To make the dial gauge more real and attractive.What I need further I am giving a reference image of dial gauge below.

Very nice. It's all possible in GDI+, but it will take a lot of work to get it looking right. I suggest you start off with a flat-coloured circle and a straight line for the needle. See if you can get all the angles sorted out the way you want them. The shadow and transparency effects can be added later.

BB