Some graphics

1. Some graphics

2. Projects included • A slideshow • a dark moon moving • phases of the moon • billiards • Your own icons and bitmaps • Pie chart

3. 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

4. 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.

5. 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”

6. Timer Here’s code to start the timer clicking every 1 second: Timer1.Interval = 1000 ‘=1 sec Timer1.Enabled = True Timer1.Start() ‘start it

7. 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

8. 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).

9. 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

10. 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.

11. 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.

12. Timer tick code Private 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

13. 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

14. The moon’s phases: a moon that moves

15. Now let’s simulate phases of the moon

16. Phases of the moon

17. 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.

18. Here’s my new timer tick code Dim 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

19. 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?

20. 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.

21. 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

22. 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

23. Your own icon or bitmap • You can create your own icon files for use in vb projects

24. Your own icons

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

26. “draw” your icon or bitmap and save it

27. Then select it from your picturebox/properties/image dialog

28. A Pie chart

29. 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)

30. 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