[RESOLVED] Converting voltage level into graphical display

[TokersBall_CDXX]

@TokersBall_CDXX

i believe its DC ? Because the solar cell is connected to a Analog-to-Digital board then this whole thing is connected to the power supply and its also connected to the comp via a RS-232 cable.

And i've heard that drawing a straight line for my project is much better and more sensible, but during my presentation of the project to the supervisors, they want me to do into waveform.

DC has no frequency, therefore there is no waveform. The line will always be flat across the horizontal plane.

with out a frequency you cannot display a sinewave/waveform

[boops boops]

DC has no frequency, therefore there is no waveform.

...the term 'waveform' is now also sometimes used to describe the shape of the graph of any varying quantity against time.

That could include a DC voltage which varies in time, such as the output of a solar cell when you wave your hand in front of it. So I think we can forgive Catherine's supervisors for (ab)using the term.

@Catherine. I'm glad you have a real voltage signal, but the question is: are you able to read it in your program yet? I suppose not, because otherwise you would have said.

I'll take a wild guess at how to could get the signal. In the designer, look for the SerialPort tool in the toolbox. (If it's not already there, right-click the toolbox and select Choose Items. Find SerialPort in the .Net Components tab and tick it.) Now drag a SerialPort onto your form and view its properties. Change the ReadBufferLength from 4096 to 1, but leave everything else as it is. Then (if it works) you can read the voltage on the RS232 port at any time like this:

volts = CSng(SerialPort1.ReadByte / 255)

You could put that in a timer Tick sub and take a reading say every 100 milliseconds. It will be nice if this works, but it's mainly guesswork and I don't have any way to try it out.

I can give you an example of how to turn a series of voltage readings into a "waveform" but I don't have time right now -- maybe later this evening or tomorrow (W.European time). You are on the right lines with the Graphics.DrawCurve statement.

BB

[Bruce Fox]

My two cents worth. By Waveform, I assume they mean fluctuations (of the DC level).

[Bruce Fox]

Back in the day, we would plot DC levels over time using a 'pen recorder'.

Anyhow, an example:

[catherine0136]

Thanks everyone for the suggestions / explanations. =)

@BB, i am able to read the real voltage in my program.

In the mean time, i'll try my best to look for solutions for the moving waveform.

[Bruce Fox]

In the mean time, i'll try my best to look for solutions for the moving waveform.

You would just sample the voltage (via digital the interface) and plot that new point (previous to current). Over time you would end up with a graph similar to the image I posted.

Good luck with your project.

[boops boops]

Hi Catherine,

OK, you need a variable to hold a voltage value (volts), a timer to sample the data at regular intervals (Timer1) and a data structure to collect enough data to draw a curve. I already suggested using a Queue (VoltsQ) to hold the data, because it's ideal for a periodically updated time series. I don't know what maximum positive or negative voltage you can expect but I suppose something like +/-5 volts will do (maxVolts).

You'll collect the data in the timer's Tick sub. I'll assume the timer is set to 100 ms. interval, and you want your curve to show about 4 seconds of data; in that case the queue needs to hold up to 40 readings. You can change these numbers to alter the display as you wish.

Dim volts As Single
Dim voltsQ As New Queue(Of Single)
Dim maxVolts As Single = 5
 
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
       'read the voltage:
       volts = 'get value from RS232 interface
 
        'add the new reading to the end of the queue:
        voltsQ.Enqueue(volts)
 
        'remove the old reading at the head of the queue, to keep max. 40 data points:
        If voltsQ.Count > 40 Then voltsQ.Dequeue()
 
        'update the display with the new data:
        Me.Refresh
    End Sub

In the last code you posted, you used a Graphics.DrawCurve state to draw a smooth line through an array of 4 predefined points. Instead, we want to draw the curve through the 40 data points collected in the queue. Since they are updated 10 times a second, it will appear as a moving waveform. The question is, how do you convert the Queue(Of Single) into the Array(Of Point) required by DrawCurve? In fact it is mainly arithmetic, based on the sizes of the the x and y axes of the graph. For example, you could put this in the Paint sub:

Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
 
        'Put your code for drawing the axes etc. here.
 
        'Details of the graph layout -- fill in your own values here!
        Dim Origin As New Point(200, 200)
        Dim xAxisLength As Integer = 300
        Dim yAxisLength As Integer = 150
 
        'Define an array of data points:
        Dim DataPoints(voltsQ.Count - 1) As Point
        Dim x, y As Integer
 
        'Fill in the array using the voltage readings:
        For i As Integer = 0 To voltsQ.Count - 1
            'Get the volts value from the queue:
            Dim v As Single = voltsQ.ElementAt(i)
            'Find the distance along the x axis:
            x = Origin.X + CInt(i * xAxisLength / 40)
            'find the height of the data point on the Y axis:
            y = Origin.Y + CInt(v * yAxisLength / maxVolts)
            'Put the point in the array
            DataPoints(i) = New Point(x, y)
        Next
 
        'Draw the waveform:
        e.Graphics.DrawCurve(Pens.Green, DataPoints)
 
    End Sub

I hope the comments in the code explain everything. The important points for VB.Net are the way you use a For-Next loop to build the array. Note too that the maximum index is always Queue.Count-1 because collection indices start from 0 in VB.Net.

bye, BB

[catherine0136]

Okie. Thanks for the help once again !

I'll try it out tmr when i'm back to school.

[catherine0136]

 'Details of the graph layout -- fill in your own values here!
Dim Origin As New Point(200, 200)
Dim xAxisLength As Integer = 300
Dim yAxisLength As Integer = 150

I need to clarify my doubts. =)
For the above, you mentioned that i need to fill in my own values,
so as in:

>>

Dim Origin As New Point(200, 200).. 

i replace the ( , ) value to the values of where the x and y line intersect each other ?


>>

Dim xAxisLength As Integer = 300
Dim yAxisLength As Integer = 150

The code to draw the vertical and horizontal line is as shown below:

 ' Drawing a vertical and a horizontal line 
   g.DrawLine(BluePen, 50, 225, 50, 15)   'vertical line
   g.DrawLine(BluePen, 50, 120, 260, 120)  'horizontal line

So, i'll replace xAxisLength As Integer, yAxisLengthts into the values as shown above ?

[boops boops]

[CODE] i replace the ( , ) value to the values of where the x and y line intersect each other ?

Exactly.

g.DrawLine(BluePen, 50, 120, 260, 120)  'horizontal line

If that line is your X axis, it extends from point (50, 120) to point (260, 120), so must be 210 pixels long. You could fill in that 210 everywhere instead of xAxisLength, but it would be better to keep using the variable name instead:

Dim xAxisLength As Integer = 210
 
'and then, as before:
 
x = Origin.X + CInt(i * xAxisLength / 40)

The same obviously applies to the Y axis. This way there is just one place where you set the axis length. It will be easier to change you layout if you need to. After all, you may need to play around with these figures to get the graph looking right.

You realize of course that xAxisLength is just a name I made up. An important part of the art of programming is thinking up good names for variables. To come to think of it, it would be better to replace that "40" by a variable to represent the number of data points to be plotted. In that case you would have to declare (with Dim or Private) whatever name you have chosen for the variable. You should do it outside the sub, for example with other variables near the top of the form code, because it is also referred to in the timer Tick sub.

BB

[catherine0136]

I had this error :

'ElementAt' is not a member of 'System.Collections.Generic.Queue(Of Single)'

How do i resolve this?

[boops boops]

That must be because you are using an older version of Visual Studio than 2008. I hadn't thought of that. It means the Paint sub I posted in #47 needs a couple of small changes. Add this before line 10 of the sub:

'Turn the queue into an array:
Dim voltsQarray As Single() = voltsQ.ToArray

and change the present line 17 to this:

Dim v As Single = voltsQarray(i)

That should fix it. BB

[boops boops]

I just spotted another error in the Paint sub: the code will fail if voltsQ is empty. In fact there is not much sense in trying to draw the curve until there are at least 3 data points in the queue. So you should enclose all the code after drawing the axes in this If statement:

If VoltsQ.Count > 2
...
End If

BB

[catherine0136]

Thanks for helping ! =)

Am i right to place the VoltsQ.Count>2 as follows, please correct me if i'm wrong.

If VoltsQ.Count > 2

 'Put your code for drawing the axes etc. here.


            'Details of the graph layout -- fill in your own values here!
            Dim Origin As New Point(50, 119)
            Dim xAxisLength As Integer = 210
            Dim yAxisLength As Integer = -120

            'Turn the queue into an array:
            Dim voltsQarray As Single() = voltsQ.ToArray

            'Define an array of data points:
            Dim DataPoints(voltsQ.Count - 1) As Point
            Dim x, y As Integer

            'Fill in the array using the voltage readings:
            For i As Integer = 0 To voltsQ.Count - 1
                'Get the volts value from the queue:
                Dim v As Single = voltsQarray(i)
                'Find the distance along the x axis:
                x = Origin.X + CInt(i * xAxisLength / 40)
                'find the height of the data point on the Y axis:

                y = Origin.Y + CInt(v * yAxisLength / maxVolts)
                'Put the point in the array
                DataPoints(i) = New Point(x, y)

            Next
            'Draw the waveform:        
            e.Graphics.DrawCurve(Pens.Green, DataPoints)

        End If

Btw, after placing all the code into the program, this is what i observe [ please see attached image ] Hmm.. its still a straight line though but it is varying quantity against time. So i believe its correct ?

[boops boops]

Thanks for helping ! =)
Am i right to place the VoltsQ.Count>2 as follows, please correct me if i'm wrong.

That should work, but it would be neatest to put it after drawing the axes. That way they will still show when there is no signal. It must come before you define voltsQarray.

Btw, after placing all the code into the program, this is what i observe [ please see attached image ] Hmm.. its still a straight line though but it is varying quantity against time. So i believe its correct ?

It's not what I would expect if everything is working properly. There might be something wrong in the code, but you should try to eliminate other possibilities. What happens when you change the light on the solar cell? What happens to the line when you disconnect the solar cell or the RS232 interface? And what happens when you type a different value in the textbox?

BB

[catherine0136]

It's not what I would expect if everything is working properly. There might be something wrong in the code, but you should try to eliminate other possibilities. What happens when you change the light on the solar cell? What happens to the line when you disconnect the solar cell or the RS232 interface? And what happens when you type a different value in the textbox?

Originally, it shows a straight line because it is taking the voltage from the "Average Voltage" textbox.

I edited so that i'll let the waveform follow the voltage from the "Voltage Level in Volts(V)" textbox, in which the voltages displayed in "Voltage Level in volts varies greatly from 2.30V to slightly above 3.0V, and the waveform will be like this (see attached image - Solar Cell).

When my hand is place over the solar cell, i am able to observe that the voltage level will decrease and the waveform will also move lower. (See attached image - Solar Cell 1)

Is it whole waveform correct?

I'll attached the coding which i insert into my program in the next thread.

[catherine0136]

Following is the code of PictureBox2, to display the waveform.

Private Sub PictureBox2_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox2.Paint

        Dim g As Graphics = e.Graphics
        Dim vertFont As New Font("Verdana", 10, FontStyle.Bold)
        Dim horzFont As New Font("Verdana", 10, FontStyle.Bold)
        Dim vertBrush As New SolidBrush(Color.Blue)
        Dim horzBrush As New SolidBrush(Color.Blue)
        Dim horzBrush1 As New SolidBrush(Color.Blue)

        Dim BluePen As New Pen(Color.Blue)

        ' Drawing a vertical and a horizontal line 
        g.DrawLine(BluePen, 50, 225, 50, 15)   'vertical line
        g.DrawLine(BluePen, 50, 120, 260, 120)  'horizontal line


        'Details of the graph layout 
        Dim Origin As New Point(50, 119)
        Dim xAxisLength As Integer = 210
        Dim yAxisLength As Integer = -120

        If voltsQ.Count > 2 Then

            'Turn the queue into an array:
            Dim voltsQarray As Single() = voltsQ.ToArray

            'Define an array of data points:
            Dim DataPoints(voltsQ.Count - 1) As Point
            Dim x, y As Integer

            'Fill in the array using the voltage readings:
            For i As Integer = 0 To voltsQ.Count - 1
                'Get the volts value from the queue:
                Dim v As Single = voltsQarray(i)
                'Find the distance along the x axis:
                x = Origin.X + CInt(i * xAxisLength / 40)
                'find the height of the data point on the Y axis:

                y = Origin.Y + CInt(v * yAxisLength / maxVolts)
                'Put the point in the array
                DataPoints(i) = New Point(x, y)

            Next
            'Draw the waveform:        
            e.Graphics.DrawCurve(Pens.Green, DataPoints)

        End If


        'Draw vertical strings 
        Dim vertStrFormat As New StringFormat()
        vertStrFormat.FormatFlags = StringFormatFlags.DirectionVertical
        g.DrawString("-", horzFont, horzBrush, 49, 113, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 49, 113, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 59, 113, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 69, 113, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 79, 113, vertStrFormat)
        g.DrawString("--", horzFont, horzBrush, 89, 106, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 99, 113, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 109, 113, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 119, 113, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 129, 113, vertStrFormat)
        g.DrawString("--", horzFont, horzBrush, 139, 106, vertStrFormat)

        g.DrawString("-", horzFont, horzBrush, 149, 113, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 159, 113, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 169, 113, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 179, 113, vertStrFormat)
        g.DrawString("--", horzFont, horzBrush, 189, 106, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 199, 113, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 209, 113, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 219, 113, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 229, 113, vertStrFormat)
        g.DrawString("--", horzFont, horzBrush, 239, 106, vertStrFormat)


        ' y-axis drawing 

        g.DrawString("  4 --", vertFont, vertBrush, 25, 12)
        g.DrawString("    --", vertFont, vertBrush, 25, 12)
        g.DrawString("     -", vertFont, vertBrush, 25, 17)
        g.DrawString("     -", vertFont, vertBrush, 25, 22)
        g.DrawString("     -", vertFont, vertBrush, 25, 27)
        g.DrawString("     -", vertFont, vertBrush, 25, 32)

        g.DrawString("  3 --", vertFont, vertBrush, 25, 37)
        g.DrawString("    --", vertFont, vertBrush, 25, 37)
        g.DrawString("     -", vertFont, vertBrush, 25, 42)
        g.DrawString("     -", vertFont, vertBrush, 25, 47)
        g.DrawString("     -", vertFont, vertBrush, 25, 52)
        g.DrawString("     -", vertFont, vertBrush, 25, 57)

        g.DrawString("  2 --", vertFont, vertBrush, 25, 62)
        g.DrawString("    --", vertFont, vertBrush, 25, 62)
        g.DrawString("     -", vertFont, vertBrush, 25, 67)
        g.DrawString("     -", vertFont, vertBrush, 25, 72)
        g.DrawString("     -", vertFont, vertBrush, 25, 77)
        g.DrawString("     -", vertFont, vertBrush, 25, 82)

        g.DrawString("  1 --", vertFont, vertBrush, 25, 87)
        g.DrawString("    --", vertFont, vertBrush, 25, 87)
        g.DrawString("     -", vertFont, vertBrush, 25, 92)
        g.DrawString("     -", vertFont, vertBrush, 25, 97)
        g.DrawString("     -", vertFont, vertBrush, 25, 102)
        g.DrawString("     -", vertFont, vertBrush, 25, 107)
        g.DrawString("  0", vertFont, vertBrush, 25, 112)

        g.DrawString("     -", vertFont, vertBrush, 25, 117)
        g.DrawString("     -", vertFont, vertBrush, 25, 122)
        g.DrawString("     -", vertFont, vertBrush, 25, 127)
        g.DrawString("     -", vertFont, vertBrush, 25, 132)
        g.DrawString("    --", vertFont, vertBrush, 25, 137)
        g.DrawString(" -1--", vertFont, vertBrush, 25, 137)

        g.DrawString("     -", vertFont, vertBrush, 25, 142)
        g.DrawString("     -", vertFont, vertBrush, 25, 147)
        g.DrawString("     -", vertFont, vertBrush, 25, 152)
        g.DrawString("     -", vertFont, vertBrush, 25, 157)
        g.DrawString("    --", vertFont, vertBrush, 25, 162)
        g.DrawString(" -2--", vertFont, vertBrush, 25, 162)

        g.DrawString("     -", vertFont, vertBrush, 25, 167)
        g.DrawString("     -", vertFont, vertBrush, 25, 172)
        g.DrawString("     -", vertFont, vertBrush, 25, 177)
        g.DrawString("     -", vertFont, vertBrush, 25, 182)
        g.DrawString("    --", vertFont, vertBrush, 25, 187)
        g.DrawString(" -3--", vertFont, vertBrush, 25, 187)

        g.DrawString("     -", vertFont, vertBrush, 25, 192)
        g.DrawString("     -", vertFont, vertBrush, 25, 197)
        g.DrawString("     -", vertFont, vertBrush, 25, 202)
        g.DrawString("     -", vertFont, vertBrush, 25, 207)
        g.DrawString("    --", vertFont, vertBrush, 25, 212)
        g.DrawString(" -4--", vertFont, vertBrush, 25, 212)

        ' Dispose of objects 
        vertFont.Dispose()
        horzFont.Dispose()
        vertBrush.Dispose()
        horzBrush.Dispose()
        BluePen.Dispose()

        'Display text in Y-axis
        Dim Font1 As New Font("Comic Sans MS", 10, FontStyle.Bold)
        g.TranslateTransform(30, 148)
        g.RotateTransform(180)
        g.DrawString("Volts (V)", Font1, _
          Brushes.Blue, 0, 0, New StringFormat(StringFormatFlags.DirectionVertical))

    End Sub

Following is the coding for the timer.
I included this line, Single.TryParse(TextBoxVoltage.Text, volts1), so that the waveform will move according to the voltage shown in the "Voltage Level in Volts(V)", and not follow the average voltage(which will produce the straight line).

 Private Sub Timer3_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer3.Tick

        'read the voltage and get value from RS232 interface
        Call OpenPORT1()

        Single.TryParse(TextBoxVoltage.Text, volts1)
        'add the new reading to the end of the queue
        voltsQ.Enqueue(volts1)

        'remove the old reading at the head of the queue, to keep max. 40 data points    
        If voltsQ.Count > 40 Then voltsQ.Dequeue()

        'update the display with the new data     
        Me.Refresh()

    End Sub

As for Call OpenPORT1(),

 Private Sub OpenPORT1()
        If SerialPort1.IsOpen Then
            SerialPort1.Close()
        End If

        SerialPort1.PortName = "COM1"
        SerialPort1.BaudRate = 9600
        SerialPort1.Parity = System.IO.Ports.Parity.None
        SerialPort1.DataBits = 8
        SerialPort1.StopBits = System.IO.Ports.StopBits.One

        SerialPort1.RtsEnable = True
        SerialPort1.Open()

    End Sub

I hope everything is correct.

[catherine0136]

And as for the following:

' Drawing a vertical and a horizontal line
g.DrawLine(BluePen, 50, 225, 50, 15) 'vertical line
g.DrawLine(BluePen, 50, 120, 260, 120) 'horizontal line

 'Details of the graph layout 
        Dim Origin As New Point(50, 119)
        Dim xAxisLength As Integer = 210
        Dim yAxisLength As Integer = -120

I replaced it with a negative value. If i were to follow yours to put a positive value, the waveform will be at the negative side. I hope everything is correct. =)

[boops boops]

[catherine0136]

[boops boops]

When my hand is place over the solar cell, i am able to observe that the voltage level will decrease and the waveform will also move lower. (See attached image - Solar Cell 1)

Is it whole waveform correct?

--- and ---

I don't know what's "correct", but now the output does look like what I would have expected if everything is working as intended. Presumably you can see the waveform scrolling from right to left. And it seems you are getting a grip on the programming side of it. Is there something not to your liking?

I'm glad you posted your code anyway. I'll take a good look at it this evening (W. Eu. time).

BB

[catherine0136]

When my hand is place over the solar cell, i am able to observe that the voltage level will decrease and the waveform will also move lower.

Actually whenever i place my hand over the solar cell, i'll get to observe that the voltage level will decrease, just informing you in case you may think that this isn't something right. Lol.

I don't know what's "correct", but now the output does look like what I would have expected if everything is working as intended. Presumably you can see the waveform scrolling from right to left. And it seems you are getting a grip on the programming side of it. Is there something not to your liking?

Yup, i get to see the waveform scrolling from right to left. And nope, there isn't something that is not to my liking. The program seems fine to me =)
Once again, thanks!

[Bruce Fox]

If I could make a suggestion, add the actual time scale to the X axis of the "Graphical Display".

[catherine0136]

@Bruce Fox

I actually thought of that too, as it will look nicer. But, ..erm.. i've got to do more research on that, as i've got no idea how to allow to add real time scale whereby the time will move with the waveform. Haha.
But thanks for the suggestion!

[Bruce Fox]

You don't have to animate the scale, as it is just that - a scale. Each large tick for example may represent 2 Seconds. So, you may have 2, 4, 6, 8 etc displayed on the X axis. In that example the sample will take 8 seconds to reach the right hand edge of the display. Then the sample starts again from 0.

One option would be to draw the first sample (0 to 8 seconds for example) then draw a new sample of back at 0 in a different colour. That way you would be continuing to display trend. Then on the third pass remove the first sample line (so two are always displayed) - for example.

[catherine0136]

@Bruce Fox

Will consider about your suggestion.
But i am still hoping to allow a real time to move along with the waveform. Still researching on that though, and hopefully i'm able to do so.


In the mean time, if anyone have any idea on how to do that, i would really appreciate if you can post your suggestions for my reference.

Thanks in advance!

[Bruce Fox]

Just outa curiosity, how long would this application be up and running, showing elapsed time?

BTW, it may be time to create a new (unresolved) tread to tackle the new issue

Cheers,

[catherine0136]

Just outa curiosity, how long would this application be up and running, showing elapsed time?

Sorry, but i dont really understand what you mean. =x
Alrights. Will create a new thread. =)