GXT Image Viewer: w/Pan and zoom

[robertlight]

Has anyone created a GXT compatible Image viewer capable of pan and zoom? I don't really want a "tiled" approach...just something that I can load a 1000x1000 pixel image and then view it inside a 200x200 frame.

Many thanks for any input.

- Bob

[jeroni]

I did this class to manage images in an any-size content panel, it works for me...

[gammagec]

I have written a layout and plugins for this very purpose, I just asked my manager if I can post it and I'm waiting for him to discuss it with legal to see what I can post or not. I will start a new thread and link it here if they allow me to.

[gurpal2000]

is there a javacsript extjs version of this ;-)

[gammagec]

Since I haven't gotten a response on what I am or am not allowed to post from our code, here is my Suggestion on how to simply accomplish this pan and zoom image viewer.

you will likely have to build on this idea. (haven't tested this snippet either)
what you would do then, is create a LayoutContainer that is the same size ratio as your image you want to display,
set the layout to a PanZoomLayout, then set the zoom and position of your layout, call layout and it should do the trick.

/**
 * Copied from FitLayout mostly
 */
public class PanZoomLayout extends Layout {

  Point position = new Point(0, 0);
  float zoom = 1.0f;

  /**
   * Creates a new fit layout instance.
   */
  public PanZoomLayout () {
    monitorResize = true;
  }

  public void setPosition(Point position) {
    this.position = position;
    setLayoutNeeded(container, true);    
  }

  public void setZoom(float zoom) {
    this.zoom = zoom;
    setLayoutNeeded(container, true);
  }

  @Override
  protected void onLayout(Container<?> container, El target) {
    if (container.getItemCount() == 0) {
      return;
    }
    activeItem = activeItem != null ? activeItem : container.getItem(0);
    super.onLayout(container, target);

    Size size = new Size(target.getStyleSize().width, target.getStyleSize().height);    
    target.makePositionable();
    setItemSize(activeItem, size);
    activeItem.makePositionable(true);
    activeItem.el().setPagePosition(-position.x, -position.y);
  }

  protected void setItemSize(Component item, Size size) {
    if (item != null && item.isRendered()) {
      size.width -= getSideMargins(item);
      size.height -= item.el().getMargins("tb");
      setSize(item, size.width, size.height);
    }
  }

}

[gurpal2000]

thanks. A little futher searching and a found a place to start. above is useful nonetheless.

[naveen.kumar@accelrys.com]

Hi jeroni,
Whats the value of the constant that is used in the attached file ResourcePreview. That is IconStyle.ZOOM_IN, IconStyle.ZOOM_OUT....etc

Don mind plz...

Thanks
Naveen.

[jeroni]

Those are just CSS icon styles: IconStyle.ZOOM_IN is "icon-zoom-in". The CSS style is:

.icon-zoom-in {
background-image: url('images/zoom-in.png') !important;
}

use any icons you like (16x16 pixels)

[naveen.kumar@accelrys.com]

Thanks a lot, will try it out.