File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes GWT and the fly likes Is there a panel that allows scrolling a really large image? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Frameworks » GWT
Bookmark "Is there a panel that allows scrolling a really large image?" Watch "Is there a panel that allows scrolling a really large image?" New topic

Is there a panel that allows scrolling a really large image?

Dick Martin

Joined: Sep 15, 2011
Posts: 6
Google has a great viewport for viewing and manipulating the maps of the World. There is a grabber hand to move the maps, zoom and unzoom, and all sorts of special features, There are no scroll bars needed or used.

It occurs to me that this is an ideal solution to displaying any really large image, not just maps.

Is anyone aware of what I suppose would be called a ViewportLayoutPanel?

Maneesh Godbole
Saloon Keeper

Joined: Jul 26, 2007
Posts: 10825

Welcome to the Ranch.

This is a very interesting problem. I am imagining it on the lines of "image data pagination".

Purely from the usability perspective, I would say this is not really a user friendly feature. In case of maps, the end user does have an idea that something exists beyond the displayed map. So it is sort of intuitive to drag/move the map. I am not sure it would me similar for images. The only flip side would be you can save download times. But I think that is where the problems would start.

I am not aware of any library or build in GWT class which would allow you to do this, nor have I done anything like this previously. However this is how I would approach it, if it were my problem

1) Somehow find a way to tweak the graphics and canvas on the client side, and render the image data on it
2) Have some code on the server side which will accept the start x,y co-ordinates along with the view dimensions(width, height). Then it would extract the corresponding data from the big image and send it back to the client over the network (either as sub image or byte[] or whatever is convenient)
3) On the client side, obtain/convert the sub image and render it on the UI
4) Listen to user view/drags and keep updating the view.

I remember reading about some graphic/canvas manipulation libraries for GWT. A quick google gave me I am sure there might be more.
On the server side, you need to be careful on how you obtain the sub image from the big image. It could be a bottle neck if you load the big image everytime you want to obtain the sub image.
Caching might be a good idea both on server as well as clients. It would help performance when user drags back or overlaps.

[How to ask questions] [Donate a pint, save a life!] [Onff-turn it on!]
Dick Martin

Joined: Sep 15, 2011
Posts: 6
Thank you for your reply. As I am so aptly titled, I am a green horn.

My explanation was hazy. Let me add detail. I have an image of my Eclipse workbench that is about 1800px by 1600px. If I figure out what I want to do, the final image will probably be about 2400px by 1800px. It will be the center panel of a GWT SplitLayoutPanel, (Here is the cobbled up version at GWT (Google Web Toolkit) Click the "GWT (Google Web Toolkit)" tree item to display the image.) As you can see, moving around that image with the scroll bars is 2 kinds of painful.

It occurs to me that there must be a better way. A mouse grabber hand and zoom/unzoom features would be really useful.

(the panel is only visible with Firefox - ie and chrome do not display at all - another greenhorn problem to be solved, but that is for another day.)
salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 1138

I kinda thought about this idea for my website itself. Its like a map with a navigation area that is a smaller version of the map

For my site, I have used an AbsolutePanel. While I have not allowed the user to Drag around, i have given the provision of using buttons to move around.
The AbsolutePanel has overflow set to hidden.

For images, you could divide images into tiles and load only those images that are in the viewport just like google does.

For reference:
Hope this helps you.

Update: I am getting a javascript error at your url:

I agree. Here's the better link:

Dick Martin

Joined: Sep 15, 2011
Posts: 6
Just to follow through:

and navigate to GWT (Google Web Toolkit) and then to Click & Drag to see an image that can be dragged around under the viewport.

This site is really rough, as I am trying to put different simple ideas into practice, so don't be too harsh with me, OK?

I agree. Here's the link:
subject: Is there a panel that allows scrolling a really large image?
It's not a secret anymore!