Home | Contact Us | FAQ | Search & Site Map | Link to Us
Sign In | Join | Other 45 Sites in Network
HomeAnnouncementsWhite Papers
Discussion GroupsFirst AidDatabasesJavaBeansGUIJava 3DVirtual MachineCORBASecurityToolsGeneral
Java DirectoryOpen Source ProjectsSample Book ChaptersUser GroupsWeb Resources
Related Topics
Databases.NETMore Topics ...

Java Forum / GUI / February 2004

Tip: Looking for answers? Try searching our database.

Using JViewport for an overview+detail map

Thread view: 
Tim Sohn - 27 Feb 2004 00:43 GMT
I'm trying to develop an overview+detail map, sort of like those you
see in games like Warcraft, starcraft. So basically i want to have a
thumbnail version of my map, and a rectangle that you can move around
on that thumbnail, and then the view of that rectangle is blown up and
shown in a separate pane.

JViewport seems to be the way to go, but I'm not entirely sure. Can
anyone point me in a helpful direction? Thanks

-Tim
ak - 27 Feb 2004 01:10 GMT
> I'm trying to develop an overview+detail map, sort of like those you
> see in games like Warcraft, starcraft. So basically i want to have a
[quoted text clipped - 4 lines]
> JViewport seems to be the way to go, but I'm not entirely sure. Can
> anyone point me in a helpful direction? Thanks

if I undestand you, there is no need for JViewport.
Just track where your rectangle is and then get load this rect at f?ll
resolution in separate pane.

____________

http://reader.imagero.com the best java image reader.
Tim Sohn - 27 Feb 2004 08:37 GMT
> > I'm trying to develop an overview+detail map, sort of like those you
> > see in games like Warcraft, starcraft. So basically i want to have a
[quoted text clipped - 8 lines]
> Just track where your rectangle is and then get load this rect at füll
> resolution in separate pane.

hmmmm ok. Any sort of direction or quick framework you might be able
to give me? Not quite sure how to start ths out. Thanks
ak - 27 Feb 2004 10:46 GMT
> hmmmm ok. Any sort of direction or quick framework you might be able
> to give me? Not quite sure how to start ths out. Thanks

hmmmm, I have new idea:

you can use simple JPanel instead of JViewport:
and you can have any shape - not only rectangular!

import javax.swing.*;
import java.awt.*;
import java.awt.image.RGBImageFilter;
import java.awt.image.FilteredImageSource;
import java.awt.geom.AffineTransform;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;

/**
* @author Andrei Kouznetsov
*         Date: 27.02.2004
*         Time: 11:29:17
*/
public class ThumbnailPane extends JPanel {

   ActionListener listener;

   Image thumbnail;
   Image thumbnail2; //better quality or color/grascale to draw inside
shape;
   Shape shape, translatedShape;

   private ZoomPane zoomPane;

   public ThumbnailPane(Image thumbnail, Image thumbnail2, Shape shape) {
       this.thumbnail = thumbnail;
       this.thumbnail2 = thumbnail2;
       this.shape = shape;
       zoomPane = new ZoomPane();
       listener = getZoomPane();
       translate(0, 0);
   }

   public Shape getCurrentShape() {
       return translatedShape;
   }

   public Dimension getPreferredSize() {
       return new Dimension(thumbnail.getWidth(null),
thumbnail.getHeight(null));
   }

   //use it to move your "Viewport"
   public void translate(int x, int y) {
       translatedShape = AffineTransform.getTranslateInstance(x,
y).createTransformedShape(shape);
       if (listener != null) {
           listener.actionPerformed(new ActionEvent(this,
ActionEvent.ACTION_PERFORMED, "moved"));
       }
   }

   public void paint(Graphics g) {
       g.drawImage(thumbnail, 0, 0, null);

       //use following if you want to draw thumbnail  inside viewport
       Graphics2D g2d = (Graphics2D) g;
       g2d.clip(translatedShape);
       g.drawImage(thumbnail2, 0, 0, null);
       g2d.clip(null);

       g.setColor(Color.blue);
       g2d.draw(translatedShape);
   }

   public ZoomPane getZoomPane() {
       return zoomPane;
   }

   class ZoomPane extends JPanel implements ActionListener {

       Image currentView;
       Shape shape;

       AffineTransform transform; //zoom factor

       //you have to implement it
       Image getImageTile(Shape shape) {
           return null;
       }

       public void actionPerformed(ActionEvent e) {
           shape = transform.createTransformedShape(translatedShape);
           currentView = getImageTile(shape);
           repaint();
       }

       public Dimension getPreferredSize() {
           if (shape != null) {
               Rectangle r = shape.getBounds();
               return new Dimension(r.width, r.height);
           }
           return super.getPreferredSize();
       }

       public void paintComponent(Graphics g) {
           g.setColor(getBackground());
           Dimension d = getSize();
           g.fillRect(0, 0, d.width, d.height);
           g.drawImage(currentView, 0, 0, this);
       }
   }

   public static void main(String[] args) {
       //create and load images here
       Image thumbnail2 =
Toolkit.getDefaultToolkit().createImage("imagename");
       RGBImageFilter filter = new GrayFilter(false, 50);
       FilteredImageSource source = new
FilteredImageSource(thumbnail2.getSource(), filter);
       Image thumbnail = Toolkit.getDefaultToolkit().createImage(source);
       Shape shape = new Rectangle(0, 0, 100, 100);

       ThumbnailPane tp = new ThumbnailPane(thumbnail, thumbnail2, shape);

       JFrame frame = new JFrame();
       frame.getContentPane().add(tp);
       JDialog dialog = new JDialog(frame, false);
       dialog.getContentPane().add(tp.getZoomPane());
       frame.pack();
       frame.show();
       dialog.pack();
       dialog.show();
   }
}

____________

http://reader.imagero.com the best java image reader.
Jonathan Fuerth - 27 Feb 2004 19:31 GMT
> I'm trying to develop an overview+detail map, sort of like those you
> see in games like Warcraft, starcraft. So basically i want to have a
> thumbnail version of my map, and a rectangle that you can move around
> on that thumbnail, and then the view of that rectangle is blown up and
> shown in a separate pane.

Put your detail map component in a JScrollPane (you can tell it to
never show scrollbars if you prefer that) and then call
scrollRectToVisible() on it whenever the user moves the rectangle in
the overview map.

If your detail map is a huge bitmapped image, this could be hard on
memory.  However, you're probably going to implement it as a matrix of
tiled images (and keep an internal representation of the world map as
a 2D matrix of tile types as bytes or what-have-you).  In that case,
it will not be hard on memory at all.

Read <http://java.sun.com/docs/books/tutorial/uiswing/14painting/practice.html>,
especially the part about optimising by explcitly checking the
clipping area in your paintComponent() method and you'll be all set.

-Jonathan Fuerth


Free Magazines

Get these publications absolutely FREE for up to 12 months. There are no hidden fees and no obligation. Simply choose a title, complete the application form and submit it. Read more ...

Oracle MagazineNetwork ComputingComputer WorldBio-IT WorldeWeekInformation WeekInfosecurity
 
Sign In
Join
My Latest Posts
My Monitored Threads
My Blog
My Photo Gallery
My Profile
My Homepage

Start New Thread
Enable EMail Alerts
Rate this Thread



©2008 Advenet LLC   Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.