Images, Timer and Scrollbars


Contents

#  What is Image control and how to load an image into it?
#  What is Timer control and how to use it?
#  How to use scrollbars?
#  Sample application using Timer, Image and Scrollbar control.

What Is 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.
Table  6.1: Properties that are specific to Image control.

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.

Option

Description

Filename
The name of the file from where the picture is to be taken. If no filename is given then picture is cleared. It may contain the complete path.
Size
Specifies the size in which cursor or icon is to be displayed. Valid options are:
0 – System small icon, 1 – System large icon and  4 – custom size, where width and height are specified by X and Y parameters.
ColorDepth
Specifies the desired color depth for icon and cursor files. The valid options are:
0- default, 1- 2 color (monochrome), 2 – 16 colors, 3 - 256 colors.
X, Y
Specify the size to be used for icon and cursor files when Size is set to 4 – Custom.

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

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

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

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

To unload picture from an image control, enter:

Image1.picture = LoadPicture()

What Is 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 

Note: Timer is the only event supported by Timer control.

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
Listing  6.1: Code for Timer event of Timer control

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
Listing 6.2: Code for Load event of the Form

Run the project using F5.

Note: Timer event doesn’t occur when either Interval property is set to 0 or when Enabled property of Timer is set to false.

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.
Table  6.2: Properties that are specific to Scrollbar control.

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.

Table  6.3: Scrollbar Events.

Note: You have to use Scroll event if you want to take any action during scrolling of scroll box.  Change event doesn’t occur during scrolling. Change event occurs only after the scrolling is completed.

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.

The usage of each control is given in the table 6.4.
 
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.
Table 6.4: Controls and their usage in sample project.

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

Note:  Height and Width properties of the form return the height and width of the form by including border, title bar and menu bar. Whereas Scalewidth and Scaleheight properties return the width and height of usable area, also called as client area or work area.

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
Listing 6.3: Code for Timer event of the Timer control, which is used to move image.

After writing the code given in listing, run the project. You should see picture moving from left to right.

That’s all that you have in this project.

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.

Exercises

1.      Enhance the sample project developed to move an image by providing support for bi-directional movement. Provide two options buttons. One labeled Left to right and the second one labeled Right to left.  When user selects Right to left option button, move image from right to left. Default is left to right. Ensure image never crosses the boundary.
2.      What are the ways to stop Timer event from occurring?
3.      Which  property of an Image control determines whether image is resized to control or control is resized to image.
4.      Which function can be used to load picture at runtime.
5.      How do you remove picture from image control at runtime?
6.      What is the difference between change event and scroll event of a scrollbar?
7.      Is it possible to set the size of Scroll box?
8.      How do you set the initial position of scroll box in a scrollbar?

No comments:

Images, Timer and Scrollbars


Contents

#  What is Image control and how to load an image into it?
#  What is Timer control and how to use it?
#  How to use scrollbars?
#  Sample application using Timer, Image and Scrollbar control.

What Is 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.
Table  6.1: Properties that are specific to Image control.

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.

Option

Description

Filename
The name of the file from where the picture is to be taken. If no filename is given then picture is cleared. It may contain the complete path.
Size
Specifies the size in which cursor or icon is to be displayed. Valid options are:
0 – System small icon, 1 – System large icon and  4 – custom size, where width and height are specified by X and Y parameters.
ColorDepth
Specifies the desired color depth for icon and cursor files. The valid options are:
0- default, 1- 2 color (monochrome), 2 – 16 colors, 3 - 256 colors.
X, Y
Specify the size to be used for icon and cursor files when Size is set to 4 – Custom.

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

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

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

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

To unload picture from an image control, enter:

Image1.picture = LoadPicture()

What Is 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 

Note: Timer is the only event supported by Timer control.

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
Listing  6.1: Code for Timer event of Timer control

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
Listing 6.2: Code for Load event of the Form

Run the project using F5.

Note: Timer event doesn’t occur when either Interval property is set to 0 or when Enabled property of Timer is set to false.

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.
Table  6.2: Properties that are specific to Scrollbar control.

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.

Table  6.3: Scrollbar Events.

Note: You have to use Scroll event if you want to take any action during scrolling of scroll box.  Change event doesn’t occur during scrolling. Change event occurs only after the scrolling is completed.

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.

The usage of each control is given in the table 6.4.
 
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.
Table 6.4: Controls and their usage in sample project.

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

Note:  Height and Width properties of the form return the height and width of the form by including border, title bar and menu bar. Whereas Scalewidth and Scaleheight properties return the width and height of usable area, also called as client area or work area.

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
Listing 6.3: Code for Timer event of the Timer control, which is used to move image.

After writing the code given in listing, run the project. You should see picture moving from left to right.

That’s all that you have in this project.

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.

Exercises

1.      Enhance the sample project developed to move an image by providing support for bi-directional movement. Provide two options buttons. One labeled Left to right and the second one labeled Right to left.  When user selects Right to left option button, move image from right to left. Default is left to right. Ensure image never crosses the boundary.
2.      What are the ways to stop Timer event from occurring?
3.      Which  property of an Image control determines whether image is resized to control or control is resized to image.
4.      Which function can be used to load picture at runtime.
5.      How do you remove picture from image control at runtime?
6.      What is the difference between change event and scroll event of a scrollbar?
7.      Is it possible to set the size of Scroll box?
8.      How do you set the initial position of scroll box in a scrollbar?

No comments: