Timer, Image controls

Image Control:

Image control is one of the intrinsic controls. It is used to display an image that is in any of the graphics formats supported by it (listed below)

Image control is a lightweight control, means occupies less amount of system resources, used to display a graphics image from any of the following types of files:

Bitmap (.bmp), Icon  (.ico), Metafile (.wmf), GIF file, JPEG file

Properties of Image Control

The following are the important properties of an Image control.

Property	Meaning
Picture	Specifies a graphic. You can load the graphic from the Properties Window at design time.  At run time, you can also set this property using the LoadPicture function by passing either .bmp, .ico, .wmf, .gif or .JPEG file as parameter.
Stretch	If it is set to true, then graphic resizes to fit the size of an image control otherwise control is resized to the size of the graphic.

Loading a picture at design time

Follow the procedure given below to load a picture into an Image control at design time.

1.      Place an Image control on the Form

2.      If you want the picture of Image control to be resized to the size of the Image control then set Stretch property to true.

3.      Select Image control and invoke Properties Windows using F4.

4.      Select Picture property in Properties Window and click on “…”  (three dots) displayed at the right corner.

5.      Visual Basic displays Load Picture dialog box allowing you to select a picture file.

6.      Select picture file and then click on Open button to load the picture into image control.

Visual Basic loads the picture that is in the selected file. If you have set Stretch property to true, then image us resized to the size of the control. If Stretch property is false then image control is resized to the size of the picture.

Loading a picture at runtime

You can also place a picture into an image control at runtime using LoadPicture function.

The following is the syntax of this function.

LoadPicture([filename], [size], [colordepth],[x,y])

The meaning of each option is discussed below.

To load a picture from  file srikanth.bmp, enter:

Image1.picture = LoadPicture( “srikanth.bmp”)

To load picture which is in a different directory, enter:

Image1.picture = LoadPicture( “c:\pictures\srikanth.bmp”)

To unload picture from an image control, enter:

Image1.picture = LoadPicture()

Timer Control:

Timer control is one of the standard controls. Unlike other standard controls, Timer control is not used to build user interface. Timer control is always invisible at runtime. Timer control is used to generate Timer event at regular interval. It is very useful control if you ever have to perform certain operation at regular interval such as for every second or every minute etc.

Interval Property of Timer control

For Timer control there is only one unique property – INTERVAL. This property contains interval in milliseconds. Timer control generates TIMER event after the given number of milliseconds elapsed.

To get TIMER event for every one second, enter:

Timer.interval = 1000 

Displaying a digital clock using Timer control

Let us develop a small program to display a running digital clock using Timer control. The following are the required steps:

1.      Start a new project using File->New Project

2.      Change Caption property of form to “Digital Clock”

3.      Place a Label at the center of the form

4.      Place a Timer on the form

5.      Change the following properties of the label control

Name	Lbltime
Caption	“” (Null string)
Autosize	True
Borderstyle	1-Fixed Single
Fontsize	14

6.      Set Interval property of Timer1 to 1000.

7.      Write the following code for Timer event of Timer1

Private Sub Timer1_Timer()

   'change time for every second

   lbltime = Time

End Sub

8.      Place current time in label control at Load event of form so that as soon as the form starts time is displayed in label control. If it is not done, label will be empty for one second since form starts.

Private Sub Form_Load()

   lbltime = Time

End Sub

 

Scrollbar control

Scrollbar is used to represent a number internally. Scrollbar may be any of the two types:

¨         Horizontal

¨         Vertical

Properties and events are same for both the scrollbars. The only difference is in the way they are displayed. Horizontal scrollbar is displayed horizontally and vertical scrollbar is displayed vertically.

A scrollbar represents a number between given minimum and maximum values. The position of the scroll box represents the number. If the scroll box is at the extreme left, it represents the minimum value, if it is at right most, it represents maximum value. User can move scroll box right and left (or up and down if it is vertical scrollbar) using arrow displayed at each edge of the control. 

User can also drag scroll box or click on the scrollbar to move scroll box.

The following are the important properties of scrollbar control.

Property	Meaning
Min	Specifies the minimum value. Default is 0.
Max	Specifies the maximum value. Default is 32767.
Value	Sets or returns the current position of the scrollbar. The Value property must be between Min and Max values.
Smallchange	Sets the increment value that is to be used when user moves scrollbar using scroll arrows.
LargeChange	Set the increment value that is to be used when user clicks on the area between scroll box and scroll arrow.

Scrollbar Events

The following are important events related to Scrollbar control

Event	When does it occur?
Change	Occurs when the user scrolls the scroll box or when you change the Value property setting through code.
Scroll	Occurs when user is dragging the scroll box.

Sample Project using Image, Timer and Scrollbar controls

Now, let us develop a sample application that uses all three controls that we have discussed so far in this chapter. This sample project moves an image from left corner of the form to right corner. User is allowed to control the speed of movement using a scrollbar. The movement is automatic and handled by a timer.  Timer control generates Timer event for every 200 milliseconds and at that event Image control is moved by the specified number of units.

Controls being used

The following are the controls being used in this project.

Control	What it does?
Image	Displays an image. I have loaded my son’s picture. You load any picture that is available to you. You will find some pictures in windows folder.
Scrollbar	Allows user to specify by how much the picture should move. As the labels suggest, the more you move towards right the faster the movement will be. This scrollbar effects the number of units by which image is moved.
Timer	Generates Timer event for every 200 milliseconds. The actual code goes in Timer event. Picture is also moved in Timer event.
Labels	Two labels are used to indicate to user that the more the scroll box moves right the faster the movement will be.

Steps to create project

The following are the steps to create sample project.

1.      Start a new project using File-> New Project.

2.      Place an Image control, Timer, horizontal scrollbar and two labels on the form.

3.      Place control as show in figure 6.2.

4.      Change properties as follows.

Object	Property	Value
Form1	Caption	Move Picture
Label1	Caption	Slow
Lable2	Caption	Fast
Hscroll1	Min	100
	Max	1000
	Smallchange	25
	LargeChange	100
	Value	200
Timer1	Interval	200
Image1	Stretch	True

Load a picture into Image control. For details please see Loading a picture at design time section earlier in this chapter.

Writing code for Timer event

Timer event is the event where the image is moved. To move the image (or any control) horizontally, change the value of Left property. Because Left and Top properties identify the position of the form at which the control is placed. So by changing either of the properties you can change the physical location of the control.

As we go on moving at some point the control will go out of the boundaries of the form. So we check whether image will be within the boundaries of the form using ScaleWidth property of the form. ScaleWidth returns the width of the form and Scaleheight returns height of the form.

Writing Code

Here is the code for Timer event of Timer control.

Private Sub Timer1_Timer()

  With Image1

    newleft = .Left + hscroll.value

    ' move image right if space is sufficient otherwise display it

    ' extreme left

    If newleft + .Width <= Me.ScaleWidth Then

         Image1.Left = newleft

    Else

         Image1.Left = 0

    End If

  End With

   

End Sub

 Picture control could also be used to display an image but picture control is too powerful to use it just to display an image. Picture control is a container that means it can host an other control, and has properties & methods that are available for form.