• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

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

 
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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?


 
Bartender
Posts: 11497
19
Android Google Web Toolkit Mac Eclipse IDE Ubuntu Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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 http://gwtcanvasdemo.appspot.com/ 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.

 
Dick Martin
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.)
 
Bartender
Posts: 2911
150
Google Web Toolkit Eclipse IDE Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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: http://www.salvin.in
Hope this helps you.

Update: I am getting a javascript error at your url: http://www.martinvt.com/GWT/
 
Dick Martin
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Just to follow through:

http://www.martinvt.com/GWT/

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?

reply
    Bookmark Topic Watch Topic
  • New Topic