Topic: Graphics,Image and Chart Control

• 1.  Drawing the graph for any function
• 2.  Drawing Pie Chart
• 3.  Colored Pixels
• 4.  Color Gradient

One can place Graphics on three controls:

1. Form
2. PictureBox
3. ImageBox

     The main difference between these three controls is that the ImageBox is specially designed for displaying bitmaps, whereas the other two controls provide drawing methods, which let you design graphics at run time.

1. Project for Graphing any Function:

     Drag a Picture box, and two command button  in the form, size them, caption them and position them as shown in the figure 1.     Open the code window of the command button and enter the codes as shown in the figure 1a.  Save and run the project.   You will get the graph for the function cos(3x)*sin(5x).   You can try with different types of functions and see how the scale properties are calculated for each function and the graphs are drawn.   A typical output is shown in the figure 2. 

Private Sub Command1_Click()
Dim t, functionval As Double
Dim xmin, xmax, ymin, ymax As Double
ymin = 1E+33: ymax = -1E+33
xmin = 2: xmax = 10
Picture1.Cls
Picture1.ScaleMode = 3
xpixels = Picture1.ScaleWidth - 1
'calculate min and max for y axis
For i = 1 To xpixels
t = xmin + (xmax - xmin) * i / xpixels
functionval = functioneval1(t)
If functionval > ymax Then ymax = functionval
If functionval < ymin Then ymin = functionval
Next
'set a user defined scale mode
Picture1.Scale (xmin, ymin)-(xmax, ymax)
'plot the function
For i = 0 To xpixels
t = xmin + (xmax - xmin) * i / xpixels
Picture1.Line -(t, functioneval1(t))
Next
End Sub

Function functioneval1(ByVal x As Double) As Double
functioneval1 = Cos(3 * x) * Sin(5 * x)
End Function

Private Sub Command2_Click()
End
End Sub

    Figure 1a

                             Figure 1

                              Figure 2

2. Project for Drawing  a Piechart:

     The Piechart application uses the Circle method to draw pie charts with connected arcs.   Because a connected arc is a closed shape, it can also be filled with a pattern or a solid color as specified by the FillStyle and FillColor properties.

     The program generates 10 random numbers in the range 20 to 100, stores them in the piedata() array, and then calculates the arc that corresponds to each number.   Because the total must be a full circle, each element of the piechart() array corresponds to an arc of 2*pi*piedata()/total.   Each slice’s starting angle is the ending angle of the previous slice, and its ending angle is the starting angle plus the angle corresponding to the element in the piedata array.

     Drag two check boxes and three command buttons from the Toolbox, caption them, size them and position them as shown in the figure 3.   Open the code window of the command buttons and enter the codes as shown in the figure 4a..   Save and run the application.   The run mode window will appear as in the figure 4.

Private Sub Command1_Click()
Dim pieData(10) As Integer
Form1.Cls
For i = 0 To 9
pieData(i) = 20 + Rnd() * 100
Total = Total + pieData(i)
Next
Form1.DrawWidth = 3
For i = 0 To 9
arc1 = arc2
arc2 = arc1 + 6.28 * pieData(i) / Total
If Check1.Value Then
Form1.FillStyle = 2 + (i Mod 5)
Else
Form1.FillStyle = 0
End If
If Check2.Value Then
Form1.FillColor = QBColor(8 + (i Mod 6))
Else
Form1.FillColor = QBColor(9)
End If
Form1.Circle (Form1.ScaleWidth / 2, Form1.ScaleHeight / 2), Form1.ScaleHeight / 2.5, , -arc1, -arc2
Next
End Sub

Private Sub Command2_Click()
End
End Sub

Private Sub Command3_Click()
Form1.Cls
End Sub

    Figure 4a

              Figure 3

3. Colored Pixels:

     Pixels are created using the Pset method and they are colored randomly using the QB color function.   Drag two command buttons on the form and position them as shown in the figure 5.   Open the code window of the command buttons and enter the code as shown in the figure 6a.   Save and run the project.   You will find the pixels are created in random colors.   The output will look as in the figure 6.

Private Sub Command1_Click()
Dim cx, cy, msg, xpos, ypos
ScaleMode = 3
DrawWidth = 5
ForeColor = QBColor(4)
FontSize = 24
cx = ScaleWidth / 2
cy = ScaleHeight / 2
Cls
msg = "happy new year"
CurrentX = cx - TextWidth(msg) / 2
CurrentY = cy - TextHeight(msg)
Print msg
Do
xpos = Rnd * ScaleWidth
ypos = Rnd * ScaleHeight
PSet (xpos, ypos), QBColor(Rnd * 15)
DoEvents
Loop
End Sub

Private Sub Command2_Click()
End
End Sub

   Figure 6a

               Figure 5

                            Figure 6

4. Project for displaying color gradient:

     The program shown in the figure 7a is intended to display a gradient of colors in a picture box. The design window consists of one picture box and a command button as shown in the figure 7.  On executing this program you will find a color gradient filling the picture box as shown in the figure 8.   You can try with different starting and ending colors by changing the RGB values.

Private Sub Command1_Click()
Dim newcolor As Long
Dim ipixel, pwidth As Integer
Dim redinc, greeninc, blueinc As Single
Dim color1 As Long, color2 As Long
color1 = RGB(255, 255, 0)
color2 = RGB(0, 0, 0)
startred = getred(color1)
endred = getred(color2)
startgreen = getgreen(color1)
endgreen = getgreen(color2)
startblue = getblue(color1)
endblue = getblue(color2)
pwidth = Picture1.ScaleWidth
redinc = (endred - startred) / pwidth
greeninc = (endgreen - startgreen) / pwidth
blueinc = (endblue - startblue) / pwidth
For ipixel = 0 To pwidth - 1
newcolor = RGB(startred + redinc * ipixel, startgreen + greeninc * ipixel, startblue + blueinc * ipixel)
Picture1.Line (ipixel, 0)-(ipixel, Picture1.Height - 1), newcolor
Next
End Sub

Function getred(colorval As Long) As Integer
getred = colorval Mod 256
End Function

Function getgreen(colorval As Long) As Integer
tgreen = ((colorval And &HFF00FF) / 256&)
End Function

Function getblue(colorval As Long) As Integer
getblue = (colorval And &HFF0000) / (256& * 256&)
End Function

Figure 7a

              Figure 7

                           Figure 8