Welcome To The Home Of The Visual FoxPro Experts  
home. signup. forum. archives. search. google. articles. downloads. faq. members. weblogs. file info. rss. print.
AN ALTERNATIVE TO KODAK IMAGE EDIT SCROLLBARS

I use Kodak Imaging Toolkit (KIT) whenever my app requires image handling. So far, my users sincerely tell me that they can live with the quirks of Kodak Image Edit scrollbars which was mentioned in my first article and was also discussed in the forum for some time ago. The bug doesn't show when you are using the actual Imaging application but it's apparent in VFP as an active-x control. To be honest, to fix that bug is beyond me but the thought of finding a solution lingered in my mind day in and day out. I could not just simply console my users to accept it for the rest of their lives without finding a total solution or an alternative. So one night, or maybe that was already morning, I went back to my drawing board…


Since the problem is the Kodak Image Edit scrollbar, I zeroed-in to it. I turned the thing off through the control's ScrollBar property. Obviously, the problem readily disappeared but it's also obvious that you could not scroll the image within the frame. I tried to replace it with Microsoft Flat Scrollbar control but the problem with the latter was, I could not catch the event triggered when the arrows were pressed. The Scroll event was called only when the "thumb" was pressed or moved. Hmmm… so I employed the UpDown active-x control to pair it with the Flat Scrollbar but they got more tangled up due to their intricacies. In the end, I threw them both away and replaced the two controls with one, the MS-Slider control.

I have used the Slider before and found it pretty simple. Besides, it has one feature that the scrollbar doesn't have: the label that pops when you scroll the "thumb" to any sides (see Figure 2).
 
The Steps
First, choose the Kodak Image Edit (KIE) and the MS-Slider control through Tools\Options menu under Controls tab as shown in Figure 1.



Create a form and drop the KIE control slightly off the center of the form. Adjust KIE to a good size and rename it ImageViewer. Drop two Sliders into the form. Their sizes and positions are not important since we will arrange them at run-time. Name one of them as SliderVert and the other as SliderHoriz. It doesn't matter which is which.

We are going to simulate a television, so for aesthetics sake, add a rectangle or a square shape control and an image control from the standard control library of VFP. Rename them as Border and GetPic, respectively. Again, their sizes and coordinates will be set at run-time except for the Picture property of GetPic. You can use the icon that I bundled together with this write-up or you can have your own choice. Last but not the least, add two command buttons to zoom in and out our image and name them as btnZoomIn and btnZoomOut accordingly. Make them disabled by default and put them in the right positions this time.
The underlying codes are the following:


** Form's INIT method **
With ThisForm 
    .ShowTips = .T.
    .ImageViewer.Scrollbars = .F.
    .ImageViewer.AutoRefresh = .T.
    Store 1 To .SlideVert.Max,.SlideHoriz.Max
    Store 2 To .SlideVert.TickStyle,.SlideHoriz.TickStyle
    Store 40 To .SlideVert.Width,.SlideHoriz.Height
    .SlideVert.Orientation = 1 &&Vertical
    .SlideVert.Left = .ImageViewer.Left + .ImageViewer.Width + 2
    .SlideVert.Top = .ImageViewer.Top - 13
    .SlideVert.Height = .ImageViewer.Height + 25
    .SlideHoriz.Left = .ImageViewer.Left - 12
    .SlideHoriz.Width = .ImageViewer.Width + 25
    .SlideHoriz.Top = .ImageViewer.Top + .ImageViewer.Height + 2
    .Border.SpecialEffect = 0 &&3d
    .Border.Top = .ImageViewer.Top - 24
    .Border.Left = .ImageViewer.Left - 24
    .Border.Height = .SlideHoriz.Top + .SlideHoriz.Height
    .Border.Width = .SlideVert.Left + .SlideVert.Width
    Store 32 To .GetPic.Height,.GetPic.Width
    .GetPic.Stretch = 1
    .GetPic.Top = .SlideVert.Top + .SlideVert.Height
    .GetPic.Left = .SlideHoriz.Left + .SlideHoriz.Width
    .GetPic.ToolTipText = 'Click to get pics'
EndWith
** END of Form's INIT method **

** GetPic Click method **
Local lcPicFile
lcPicFile = GetPict('VFP6 supported graphic files:JPG,BMP,GIF,DIB;JPG;BMP;GIF;DIB',;
'Get Picture','OK')
With ThisForm
    .ImageViewer.Image = lcPicFile
    Store 0 To .SlideVert.Value,.SlideHoriz.Value
    If !Empty(lcPicFile)
        .ImageViewer.Display
        Store .T. To .btnZoomOut.EnAbled,;
        .btnZoomIn.EnAbled
        .SlideVert.Max = .ImageViewer.ImageScaleHeight
        .SlideHoriz.Max = .ImageViewer.ImageScaleWidth
    Else
        .ImageViewer.ClearDisplay 
        Store .F. To .btnZoomOut.EnAbled,;
        .btnZoomIn.EnAbled
        Store 1 To .SlideVert.Max,.SlideHoriz.Max
    EndIf
EndWith
** END GetPic Click method **

** SliderVert Scroll Event ***
If !Empty(Thisform.ImageViewer.Image)
    Thisform.ImageViewer.ScrollPositionY = This.Value
EndIf
** END SliderVert Scroll Event ***

** SliderHoriz Scroll Event ***
If !Empty(Thisform.ImageViewer.Image)
    Thisform.ImageViewer.ScrollPositionX = This.Value
EndIf
** END SliderHoriz Scroll Event ***

** btnZoomOut Click method**
With ThisForm
    With .ImageViewer
        .Zoom = IIf((.Zoom - 10) > 2,.Zoom - 10,2)
    EndWith
    .SlideVert.Max = .ImageViewer.ImageScaleHeight
    .SlideHoriz.Max = .ImageViewer.ImageScaleWidth 
    .SlideVert.Scroll
    .SlideHoriz.Scroll
EndWith 
** END btnZoomOut Click method**

** btnZoomIn Click method**
With ThisForm
    With .ImageViewer
        .Zoom = IIf((.Zoom + 10) < 6554,.Zoom + 10,6553)
    EndWith 
    .SlideVert.Max = .ImageViewer.ImageScaleHeight
    .SlideHoriz.Max = .ImageViewer.ImageScaleWidth
    .SlideVert.Scroll
    .SlideHoriz.Scroll
EndWith
** END btnZoomIn Click method**

That's it. The codes are pretty short. Hope you'll enjoy.

The output looks like Figure 2.



Fox and Theories
The settings of the preceding controls are done at run-time so that you can cut-and-paste the code if you want to use them on your applications. If it is possible to wrap up all these active-x and standard controls into one object class, it can be better. By then you can play easy drag and drop.

Before I Retreat Graciously Towards My Foxhole…
Allow me to repeat it: before I retreat graciously towards my foxhole, let me smile… just like my users.

Download code
Click here to download the code that is discussed in this article. The download is a zipfile. Its size is 146.593 bytes.

ABOUT THE AUTHOR: DALE DEDOROY

Dale Dedoroy Dale is a poor boy who finds joy in programming. He is currently the I.T. Officer of C.W. Mosser Environment Corporation.

FEEDBACK


Your Name: 
Your Feedback: 

Spam Protection:
Enter the code shown: