Emulate popup thumbnail preview feature with VFP9

[tamayok]

Hi!

I am trying to implement the feature of "popup thumbnail preview" that is becoming quite popular on the web (an example of the common behavior is at the center of the text messaging site

http://www.sms.ac

)

I have a grid in a VFP9 application with a column that specifies the full path to an image file. Ideally, the user mouses over the full file path specified in the grid on any given row and a small form would popup with a small preview of the target image.

Anyone has implemented this functionality?

 

[Scott24x7]

Haven't implemented, but understand you concept. You need to put some form activiation code in your MouseEnter and MouseLeave events. Just make a form, call it from the MouseEnter Event, with the picture field, and pass the This.Picture = <field or file name>. On the MouseLeave event, do a <YourForm>.Destroy()



Best Regards,
Scott

"Everything should be made as simple as possible, and no simpler."

 

[tamayok]

Thanks Scott,

I have tried a few ideas, placing a DO FORM x with MouseEnter and with the MouseMove methods. But there are a number of details I am not able to implement:

> How to dynamically place the preview with some visual proximity to the record that was just moused-over.

> How to make the newly created/invoked popup form so that when it is fired it acts similar to a Tooltip-Window where the focus of the originating object is maintained instead of forcing the user to manually close the popup form.

 

[Scott24x7]

Hmmm... first problem is a tricky one, I will think about that.

The second is easy. Name the window, reference the window by name. You can do something like:

IF WEXIST('ThumbnailPreview')
ThumbnailPreview.Destory()
ENDIF

On MouseLeave

I'll give the other some thought, and try a few things and see if I can make what you are trying to happen...
-S

Best Regards,
Scott

"Everything should be made as simple as possible, and no simpler."

 

[tamayok]

I realize that a tried/true approach consists of placing an image unto a general field and displaying it within the grid control, however, this trendy web-inspired feature looks good.

TheManiac, I don't know how ThumbnailPreview.Destroy() could be issued but the traditional means below does the job:

IF WEXIST("ThumbnailPreview")
   RELEASE WINDOW ThumbnailPreview
ENDIF

On another detail, I also have this issue to solve: only when the tab/cursor highlight is on a given record does the MouseEnter/MouseOver event fire.

 

[Mike Lewis]

Tamayok,

A few suggestions:

- In the form that holds the thumbnail, set the BorderStyle to none and swith off the TitleBar. Make the picture fill the form, as much as possible.

- Don't instantiate the form each time you want it to pop up. There's too much overhead in that. Instead, instantiate it the first time you want it, but keep it invisible. Create a custom form method that actually loads the Picture control and makes the form visible. Call that method from the MouseEnter, as Scott suggested.

- Ideally, you don't want the form to appear as soon as the mouse enters the control. If it did, when the user merely passes the mouse over the grid, the form would flash on and off many times. Instead, in the method that makes the form visible (see above), enable a timer; set it to, say, 800 ms. When the timer fires, that's when you want to make the form visible.

- In the MouseLeave, disable the timer and make the form invisible.

- To make the form appear close to the appropriate cell in the grid, see thread1254-1259960.

Hope this helps. Let us know how you get on.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

My Visual FoxPro site: www.ml-consult.co.uk

 

[tamayok]

Mike,

Thanks for your suggestions!

I am running into trouble in a few areas. The one I am concerned with at the moment is easily understood but I don't have the mechanics in place to fix it.

If I put the code to activate/show the thumbnail form in the Textbox that corresponds with the Grid Column and holds the file path to the image, the MouseOver/MouseEnter event will fire only if it has the focus/cursor. The same mechanics apply if the code resides on the MouseOver/MouseEnter event at the Column Level.

Seems, I need to implement a logic that makes the current record that one that is under the MouseOver in order to show the corresponding image instead of the image where the current RECNO() is.

...Is a show-stopper at the moment!

 

[Mike Lewis]

Tamayok,

I see your point. You can't use the Value property of the textbox, because that gives you the value of the currently selected cell, not the one that the mouse is over. For the same reason, you wouldn't be able to take the field straight from the underlying record.

This is a tough one. The only solution I can think of is to take the mouse co-ordinates (as shown by MROW() and MCOL()), and to use those to figure out which grid cell you are over. You'd need to factor in the location of the grid relative to the main VFP screen, the height of the row, the height of the header row, and other similar stuff.

I wouldn't care to have to do that. Maybe someone else here can suggest something simpler.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

My Visual FoxPro site: www.ml-consult.co.uk

 

[tamayok]

MikeLewis,

Thanks again for looking into this.

Thinking about it, I realize what we are trying to achieve is a "Tooltip for images". Not a native behavior.

Perhaps the obvious is to go the "IE-route" with like Calvin Hsia demonstrated in

http://blogs.msdn.com/calvin_hsia/archive/2004/08/20/217915.aspx

I also remember reading something by Craig Boyd that showed how one could run JavaScript from VFP.

Regards from San Juan, Puerto Rico

 

[Mike Lewis]

Tamayok,

I have to say that I can't see how using a web browser control (as per Calvin's post) or Javascript is going to solve the problem.

My inclination would be to basically stay with your original plan, but make the user click on a cell in the grid in order to see the thumbnail. They'll also be able to use the keyboard to select a cell.

If they are willing to accept that, rather than use a popup form, I would display the thumbnail in an adjacent image control in the same form. As a cell becomes active, update the control to show the image; as you move off the cell, remove the image.

Just a thought.

Mike


__________________________________
Mike Lewis (Edinburgh, Scotland)

My Visual FoxPro site: www.ml-consult.co.uk

 

[TamarGranor]

Will MROW() and MCOL() or maybe SYS(1270) help you, along with the grid properties that let you figure out where things are in the grid?

Tamar

 

[tamayok]

Thanks to all,

For the moment, I will keep the traditional image control in the grid with a click event to show the image in a larger size. This common approach is slow and relatively unpleasant to the eye but functional.

No doubt the web-concept - if convincingly developed - would make for a nice VFP FAQ, not to mention eye candy!

 

[Scott24x7]

Tamayok,
Still working on this... I know there is a good solution, I just need a bit of time to sit down and work through it. Will let you know what I come up with.


Best Regards,
Scott

"Everything should be made as simple as possible, and no simpler."

 

[tamayok]

Thanks Scott!

I will also work on this when time permits ("the devil is in the details") because it can be done. This is Visual FoxPro; Anything is possible!

Kenneth Tamayo
San Juan, PR USA

 

[Mike Lewis]

Well, let is know if you come up with anything. It sounds like a nice interface feature.

Mike


__________________________________
Mike Lewis (Edinburgh, Scotland)

My Visual FoxPro site: www.ml-consult.co.uk