Hi,
I´m quiet new to processing. I want to find solution for this problem:

I got a citiy map (54cmx82cm)as jpeg (300dpi, 11mb).

Now I want to realize two functions:
a) to move the map to see a special segmaent of the map on the screen and
b) I want to zoom in and out on the map because I´ve to draw lines in the map.

does anbody on the list already solved such a problem?

thanks!!

frank

Hi,
thanks to sw01.-
I did find 2 ways to move the map and to zomm in/out.-


Version 1 - Here´s my code:

PImage a;  // Declare variable "a" of type PImage
int updown = 0;
int leftright = 0;
int zoom = 1;

void setup(){
size(600,600);
smooth();
frameRate(10);
a = loadImage("kartec.jpg");
noStroke();
}

void draw () {
scale(zoom);
translate (leftright,updown);
image(a,0,0);
}


// Tastkommandos erkennen
 void keyPressed() {
     if (key == CODED) {
       if (keyCode == UP) {
       updown = updown-30;
   } else
       if (keyCode == DOWN) {
       updown = updown+30;
   } else
       if (keyCode == LEFT) {
       leftright = leftright-30;
  }  else
       if (keyCode == RIGHT) {
       leftright = leftright+30;
     }  
  }
   if(key == '+') {
   zoom = 2;
   println(zoom);
 } else if (key == '-') {
   zoom = 1;
   println(zoom);
 }
}

Version 2 - Matt Patey:

Well this one is OK - but the quiet big map-image is diplayed bad, if I push the buttons to move the image quickly.-

Now I found this solution from Matt Patey. It works fine, but the movement of the image is very slow.- Is there a possibility to change this? Or is this a problem of the hardware memory speed?

Thanks for any help!


/**
* PanDemo.pde
 * @author Matt Patey
*/
PImage imgBorealis;
PImage bufSlice;
PGraphics buf;
int copyOffsetX;
int copyOffsetY;
int copyWidth;
int copyHeight;
int zoom = 1;
void setup() {
 size(600, 600, P3D);
 // Load our image.
 imgBorealis = loadImage("kartec.jpg");
 
 // Create an off-screen buffer that will contain the entire image.
 buf = createGraphics(imgBorealis.width, imgBorealis.height, P3D);
 buf.beginDraw();
 buf.image(imgBorealis, 0, 0);
 buf.endDraw();
 copyOffsetX = 0;
 copyOffsetY = 0;
 copyWidth = width;
 copyHeight = height;
}

void draw() {
 background(0);
 scale(zoom);
 image(getBufSlice(), 0, 0);
}
/**
* Updates the copied version of the off-screen buffer.
*/
PImage getBufSlice() {
 return buf.get(copyOffsetX, copyOffsetY, copyWidth, copyHeight);
}

/**
* Handle key presses.
*/
void keyPressed() {
 switch(keyCode) {
   case LEFT:
     if(copyOffsetX < buf.width - width) {
       copyOffsetX++;
     }
   break;
   
   case RIGHT:
     if(copyOffsetX > 0) {
       copyOffsetX--;
     }
   break;
   
   case UP:
     if(copyOffsetY < buf.height - height) {
       copyOffsetY++;
     }
   break;
   
   case DOWN:
     if(copyOffsetY > 0) {
       copyOffsetY--;
     }
   break;    
 }
}

Hi,
thanks once again.-

1)speed
uhh, this I´ve had to find by my own.
Changing with updown-30 works grat

2)framerate
I did also delete the framerate with 10fps

3) break the map in pieces
This seems to be my next problem: breaking the map in pieces. Finally the goal is to get something like the "modest maps" project. But I don´t want to use open street maps or Google & Yahoo maps. Tom Carden did actually port this to processing:

http://www.tom-carden.co.uk/2008/02/18/modest-maps-vs-processing/

I just have a big file with 4000px*4500px as jpeg. The navigation works fine now in a window with 600px*600px.
The only thing, what´s missing bow is, how to find the absolute coorinate by selecting coordinates in the small window. hm.

thanks once again!