Some graphics

Projects included

• A slideshow

• a dark moon moving

• phases of the moon

• billiards

• Your own icons and bitmaps

• Pie chart

Timer & pictures

• Using a timer, you can create a slideshow.

• Set the timer to some interval & enable, and start the timer in formload

• Also, put some picture into a picturebox.

• Count mod the number of pictures.

• For example, if there are 8 pictures, count mod 8 in your timer code. The timer code needs to also change the picture

Timer

• The timer may be covered in another (later?) slideshow.

• You add a timer to a project from the toolbox.

• It does not go “on” your application like most controls we have used.

• Like a printer-capability, a timer goes in the component “tray”, an area displayed “under” your design view.

Timer

• You must enable the timer to let it start clicking, or disable it to turn it off.

• You must set the timing interval (in milli seconds)• You must start or stop the timer.• Instructions to do these things must appear in an

appropriate place in your code.• Starting the timer might go in formload, or a

buttonhandler for “start slideshow” or “new Slideshow”.• Stopping the timer might go in a button handler for “stop

slideshow”

Timer

Here’s code to start the timer clicking every 1 second:

Timer1.Interval = 1000 ‘=1 sec

Timer1.Enabled = True

Timer1.Start() ‘start it

The slideshow code: formload

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

Timer1.Interval = 1000 ‘=1 sec

Timer1.Enabled = True

Timer1.Start() ‘start it

PictureBox1.Image = Image.FromFile("C:\" & names(picnum) & ".jpg") ‘load first picture

End Sub

The timer-tick sub event handler• The timer tick sub handles what you wish to do each time the timer

ticks.• This might be to move an image on a panel or a picturebox on an

application or load/display a new image in a picture box, or several of the above instructions.

• A common way to “cycle around” a set of images is to get the next one mod picturecount… If there are 4 pictures named pic0.jpg, pic1.jpg,pic2.jpg,pic3.jpg then

• Picbox.image=image.fromfile(“p:\pic” & num & “.jpg”) would get another picture from the p drive. Num must be incremented

mod 4.• The pictures will all need to be the same type (jpg, gif, bmp,

whatever).

The slideshow code: timer tick sub

Dim picnum As Integer = 0 Dim names() As String = {"dog", "tish", "keely",

"shan"} ‘a bunch of picnames Dim piclen As Integer = names.Length Private Sub Timer1_Tick(ByVal sender As

System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick

picnum = (picnum + 1) Mod piclen PictureBox1.Image = Image.FromFile("C:\" &

names(picnum) & ".jpg") End Sub

Moving things

• We have already learned how to display a picture on the screen using a picture box and setting the image by selection, or retrieving the image at run time using a file name.

• We also used a timer object in our microwave simulation.

• We can put the two pieces together to make something move across the screen.

• The “x” coordinate will measure in from the left on your form, “y” will measure down from the top, a sort of flipped over 1st quadrant of the cartesian coordinate plane.

components

• Put a picture box in your form and set its image to one of the moon icons. (I found these in Visual Studio.Net\common7\graphics\elements but any image will do.

• Add a timer control to your component tray by double clicking this control from the toolbox.

• Timers (and printers, too, for example) are not visible components, so they go into a component tray and are manipulated & programmed from there.

Timer tick codePrivate Sub Timer1_Tick(ByVal sender As System.Object,

ByVal e As System.EventArgs) Handles Timer1.Tick Static xint As Integer = PictureBox1.Left Static yint As Integer = PictureBox1.Top Static widthint As Integer = PictureBox1.Width Static heightint As Integer = PictureBox1.Height With Me xint -= 10 If xint <= 0 Then xint = .Width End If .PictureBox1.SetBounds(xint, yint, widthint,

heightint)End With End Sub

Timer tick code

• The code picturebox.setbounds moves the picture box as the timer ticks. I decrement the x (measure of distance in from left) value to move the moon to the left.

• When it gets to 0 (zero) I start in again from the right.• Code form load as follows: Private Sub form1_Load(ByVal sender As System.Object,

ByVal e As System.EventArgs) Handles MyBase.Load Timer1.Enabled = True Timer1.Start() End Sub

The moon’s phases: a moon that moves

Now let’s simulate phases of the moon

Phases of the moon

Phases of the moon

• I found 8 moon icons (moon01 to moon08).

• I have a counter declared globally• Each time the timer clicks I count mod 8

and add 1, yeilding an integer 1…8• Then I set the picture box image to the

particular image. (“moon0” & count &”.ico”)• Remember, in debug, you need a “bin” in

front of the name.

Here’s my new timer tick codeDim filename As String Static xint As Integer = PictureBox1.Left Static yint As Integer = PictureBox1.Top Static widthint As Integer = PictureBox1.Width Static heightint As Integer = PictureBox1.Height With Me xint -= 10 If xint <= 0 Then xint = .Width End If .PictureBox1.SetBounds(xint, yint, widthint, heightint) ' filename = Directory.GetCurrentDirectory & "moon0" + count & ".ico" 'filename = filename.Substring(3) .PictureBox1.Image = Image.FromFile(Directory.GetCurrentDirectory &

"moon0" & count & ".ico") count = (count + 1) Mod 8 + 1 End With

Some exercises

• You can make the image move faster or slower by changing the amount you add to the xint or by changing the timer tick interval.

• You can make it move up (or down) by using the y value.

• How about making a “billiard ball” bounce around the form?

Bouncing an image around the form

• If you define an fixed value to increment the x and y coordinates of your picture, you can create an effect like bouncing against walls.

• Whenever the x coordinate of the topleft of the picturebox is less than zero, flip the increment value’s sign.

• Do the same if the x coord gets too big.• Ditto for the y coordinates.

Assuming xint, yint, xinc and yint are all defined…

• This code flips a sign:xinc=-xinc• You can get or set your form’s width. It will start at 0 and go to

some value.• Similar for the height.• This code checks if xint is a legal value for a 0 by 300 width form:If xint <= 0 Or xint + xinc > 300 Then xinc = -xinc xint += xinc End If• Xint, yint, xinc and yinc are all filed values and need to be initialized

at compile time or in formload

Here’s timer code to bounce a picture

(assuming fixed form size 300X300) Static xint As Integer = PictureBox1.Left Static yint As Integer = PictureBox1.Top Static widthint As Integer = PictureBox1.Width Static heightint As Integer = PictureBox1.Height With Me xint += xinc yint += yinc If xint <= 0 Or xint + xinc > 300 Then xinc = -xinc xint += xinc End If If yint <= 0 Or yint + yinc > 300 Then yinc = -yinc yint += yinc End If .PictureBox1.SetBounds(xint, yint, widthint, heightint) End With

Your own icon or bitmap

• You can create your own icon files for use in vb projects

Your own icons

Under project select add new item, then select bitmap, icon or whatever

“draw” your icon or bitmap and save it

Then select it from your picturebox/properties/image dialog

A Pie chart

Pie chart

• Refresh method calls (form) paint event

• Pie chart requires you pick the circle center and each color

• You determine the start angle and sweep angle of each section (for a total of 360 degrees)

Pie chart- form paint Private Sub Form1_Paint(ByVal sender As Object, ByVal e As

System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint Dim xcent, ycent As Integer xcent = 140 ycent = 180 With Me .CreateGraphics.FillPie(Brushes.Blue, xcent, ycent, 100, 100, 0, 50) .CreateGraphics.FillPie(Brushes.Red, xcent, ycent, 100, 100, 50, 30)

.CreateGraphics.FillPie(Brushes.Green, xcent, ycent, 100, 100, 80, 70) .CreateGraphics.FillPie(Brushes.Beige, xcent, ycent, 100, 100, 150, 90)

.CreateGraphics.FillPie(Brushes.Coral, xcent, ycent, 100, 100, 240, 120) 'start angle, sweep angle

End With End Sub