User talk:Dapete/ImageMapEdit/old

Zoom and subsections

Hi Dapete!

Thanks for ImageMapEdit. Nice tool! Easy to use. "Import areas" is very nice!

Two really fun suggestions:

1. Zoom!
2. A very handy "extension" to ImageMap that alternatively could be accomplished in ImageMapEdit.

Given a larger image with defined area codes:

the user could specify a subsection;

ImageMapEdit displays that section (the user does a "Save image as ...");

ImageMapEdit displays the subset of the areas in the "code" section.

For example, from an ImageMap of the world, make a smaller ImageMap of central Africa.

Thanks. Saintrain 19:10, 2 April 2007 (UTC)

I've written some simple code to allow the image to be zoomed for higher-precision area grabbing. I've tested the "rect" areas in firefox 1.5.0.11 and IE6. I can't do php (so can't test) but I think all the code is in for "circle"s and "poly"s, also. Only ImageMapEdit.html and ImageMapEdit.js need be changed.

A small change to ImageMapEdit.html puts in the zoom buttons (the new stuff is un-indented): 

        <fieldset id="image" style="display:none">
          <legend>
            <span lang="en">Image</span>
            <span lang="de">Bild</span>
          </legend>
          <div id="previewContainer">
<a class="button" href="javascript:imgZoom( 'out' )">Zoom out</a>  
<span id="zoomed0">Zoom=1.0</span>
<a class="button" href="javascript:imgZoom( 'IN' )">Zoom IN</a>
            <div id="preview"></div>
          <img id="img" src="WhitePixel.png" alt="" usemap="#map" />
<br/>
<a class="button" href="javascript:imgZoom( 'out' )">Zoom out</a>  
<span id="zoomed1">Zoom=1.0</span>
<a class="button" href="javascript:imgZoom( 'IN' )">Zoom IN</a>
          </div>
        </fieldset>
  
  
Some new javascript (the target of the zoom buttons):

var imgScale = 1.0;   // current zoom scale value
var imgStep  = 1.25;  // zoom step factor
function imgZoom( io ) {
img = document.getElementById( 'img' );
if( 'IN' == io ) {
  img.width  *= imgStep;
  imgScale   *= imgStep;
  }
 else if( 'out' == io ) {
  img.width  /= imgStep;
  imgScale   /= imgStep;
  }
var zr = Math.round(imgScale*10)/10;  
document.getElementById( 'zoomed0' ).innerHTML = 'Zoom=' + zr;
document.getElementById( 'zoomed1' ).innerHTML = 'Zoom=' + zr;
updateMap();
}
  
  
Changed eventGetX() and eventGetY() to scale the mouse-click coords (added the "/imgScale"s:

function eventGetX(e) {
  if (typeof(e.layerX)!="undefined") {
    return Math.round(e.layerX/imgScale - 1);
  }
  if (typeof(e.offsetX)!="undefined") {
    return Math.round(e.offsetX/imgScale - 1);
  }
  else {
    return Math.round(e.x/imgScale - 1);
  }
}
function eventGetY(e) {
  if (typeof(e.layerY)!="undefined") {
    return Math.round(e.layerY/imgScale - 1);
  }
  if (typeof(e.offsetY)!="undefined") {
    return Math.round(e.offsetY/imgScale - 1);
  }
  else {
    return Math.round(e.y/imgScale - 1);
  }
}
  
  
Changed updateMap() to scale display coords (added the "imageScale*"s).  For "rect"s:

          div.style.left = imgScale*coords.left + "px";
          div.style.top = imgScale*coords.top + "px";
          div.style.width = imgScale*(coords.right - coords.left) + "px";
          div.style.height = imgScale*(coords.bottom - coords.top) + "px";
  
For "circle"s:
        div.style.left = imgScale*(coords.x - coords.radius) + "px";
        div.style.top = imgScale*(coords.y - coords.radius) + "px";
        div.style.width = imgScale*(coords.radius*2) + "px";
        div.style.height = imgScale*(coords.radius*2) + "px";
  
For "poly"s, add 2 lines:
        maxx *= imgScale;
        maxy *= imgScale;
  
  
Changed highlightMap().  For circles (added "*imgScale"s in the "circle.php" call):

          // background = (i==currentlyEditing) ? "url('circle.php?active=1&radius=" + area.coords.radius + "') no-repeat" : "url('circle.php?radius=" + area.coords.radius + "') no-repeat";
          background = (i==currentlyEditing) ? "url('circle.php?active=1&radius=" + coords.radius*imgScale + "') no-repeat" : "url('circle.php?radius=" + coords.radius*imgScale + "') no-repeat";

For polys (copied the coords, scaled them, passed the scaled copy to "poly.php")

          // background = (i==currentlyEditing) ? "url('poly.php?active=1&coords=" + area.coords.points.join("|") + "') no-repeat" : "url('poly.php?coords=" + area.coords.points.join("|") + "') no-repeat";
          var coords = area.coords;
          for( i in coords.points ) 
            coords.points[i] *= imgScale;
          background = (i==currentlyEditing) ? "url('poly.php?active=1&coords=" + coords.points.join("|") + "') no-repeat" : "url('poly.php?coords=" + coords.points.join("|") + "') no-repeat";

Thanks for writing ImageMapEdit. And more thanks for writing it so well! Saintrain 21:39, 4 April 2007 (UTC)

Thanks, I always thought of it as a mess with lots of bad and evil hacks ;) Actually, thanks to you for writing this. I haven't tested it yet, but it looks promising. Maybe I have the time to include it over easter, but certainly next week (I've taken the week off work). Re the subsections, I have to think about this more, but the problem is that if the ImageMap syntax does not have any support for this, I have no way to export/import that information. --Dapeteばか 07:08, 5 April 2007 (UTC)

You're welcome. Not too hackey, but depends on the browser keeping the aspect ratio constant.

I put the code in ImageMapEdit.html and ImageMapEdit.js so you don't have to cut and paste. (There's some debug stuff in there, too, but not too much.)

About the sub-maps: I left a request on the imagemap talk page (no response) but wondered if it could be done in ImageMapEdit. I don't know the internals of imagemap but I'm guessing that cropping the image is not feasible. So ...

I've started on that in ImageMapEdit. Plan is to:

1. load an image (say, a map of the world) for which areas have already been defined;
2. define the "detail" sub-map (based on your "rect". The graphics part is done (I think)). Only problem is part-circles but I plan to make "poly"s out of the visible parts;
3. import the areas. If a "detail" is defined then the areas are cropped and translated to the detail and output in the usual way;
4. then the user has to make a new, cropped, detail image so the cropped areas correspond. That's messy but I don't think that's possible in javascript. Is cropping an image possible in php or other server-sides? perl? (I know those languages exist, but that's about it.)

Two bugs?

1. in .js: if (typeof(e.layerX)!="undefined") ..., there shouldn't be quotes?
2. in .html: the second 'label for="areaRectLeft"'& 'label for="areaRectTop"' should be Right and Bottom?

This is still fun :-) Saintrain 18:38, 5 April 2007 (UTC)

Oh, I had misunderstood your idea. The cropping idea is not bad (and PHP could do that), but now I have to think about that even more...

Re the bugs

1. No, this is correct, typeof() returns a string.
2. I've fixed it locally, if the zoom function works it'll probably go out today :)

--Dapeteばか 07:48, 6 April 2007 (UTC)

Hi Dapete. I've got the sub-map stuff "almost working".

One little bug that was very interesting to find is in importLines. Missing parseInt's; "80" is less than "90" but not "100". :-)

I'm using the wikimedia.de/.../ImageMapEdit for testing as I can't see circles and polys on my local copy (no php). I guess I can use a smaller image.

function importLines() {
  var text = document.form.importText.value;
  var lines = text.split("\n");

  for (var i=0; i<lines.length; i++) {
    var rectMatch = /rect +(\d+) +(\d+) +(\d+) +(\d+) +\[\[([^|]*)(|(.*))?\]\]/i;
    var detailMatch = /DETAIL +(\d+) +(\d+) +(\d+) +(\d+) +\[\[([^|]*)(|(.*))?\]\]/i;
    var circleMatch = /circle +(\d+) +(\d+) +(\d+) +\[\[([^|]*)(|(.*))?\]\]/i;
    var polyMatch = /poly +(.*?) +\[\[([^|]*)(|(.*))?\]\]/i;

    var line = lines[i];

    if (rectMatch.test(line)) {
      var results = rectMatch.exec(lines[i]);
      var area = new Area("rect");
      area.coords.left = parseInt( results[1] );
      area.coords.top = parseInt( results[2] );
      area.coords.right = parseInt( results[3] );
      area.coords.bottom = parseInt( results[4] );
      area.link = results[5];
      if (results[6]) area.title = results[6].substring(1);
      areas.push(area);
    }
    else if (detailMatch.test(line)) {
      var results = detailMatch.exec(lines[i]);
      var area = new Area("DETAIL");
      area.coords.left = parseInt( results[1] );
      area.coords.top = parseInt( results[2] );
      area.coords.right = parseInt( results[3] );
      area.coords.bottom = parseInt( results[4] );
      area.link = results[5];
      if (results[6]) area.title = results[6].substring(1);
      areas.push(area);
    }
    else if (circleMatch.test(line)) {
      var results = circleMatch.exec(lines[i]);
      var area = new Area("circle");
      area.coords.x = parseInt( results[1] );
      area.coords.y = parseInt( results[2] );
      area.coords.radius = parseInt( results[3] );
      area.link = results[4];
      if (results[5]) area.title = results[5].substring(1);
      areas.push(area);
    }
    else if (polyMatch.test(line)) {
      var results = polyMatch.exec(lines[i]);
      var area = new Area("poly");
      area.coords.points = results[1].split(" ");
      for(j in area.coords.points) 
        area.coords.points[j] = parseInt( area.coords.points[j] );
      area.link = results[2];
      if (results[3]) area.title = results[3].substring(1);
      areas.push(area);
    }
  }

--Saintrain 20:35, 8 April 2007 (UTC)

Hi Dapete. I've cleaned up the code I posted earlier to fix some errors. (I'm still a little new at javascript.) These include the fixes for parseInt() and scaled-coord-handling code for circles and polys. And I forgot to post the css file before. They're posted at ImageMapEdit.html, ImageMapEdit.css and ImageMapEdit.js.

The 'detail' stuff seems to be working OK; hard to test. I've applied for a tools account so you won't get bugged so much.  :-) --Saintrain 01:06, 10 April 2007 (UTC)

Detail done?

Hi Dapete!

Swell! Three more languages on the ol' resume. swell

I think I've got the 'Detail' part done. If you light up http://digimeas.com/ImageMapEdit/ImageMapEdit.html, and load

Lake_Tanganyika_map.png

(it's on the server) and then import

poly 580 1235 583 1210 572 1191 574 1171 545 1144 470 1006 478 982 462 955 470 911 384 814 360 822 314 773 314 737 357 715 316 627 333 580 303 534 291 512 302 449 245 328 248 251 215 245 211 302 201 328 206 330 190 423 206 429 225 377 220 456 200 479 200 567 255 661 242 696 217 718 220 749 230 751 259 823 269 825 272 853 327 924 382 954 402 1003 396 1025 413 1055 413 1066 473 1126 468 1152 448 1173 448 1189 468 1193 461 1207 486 1187 552 1244 [[Lake Tanganyika|Lake Tanganyika]]

poly 519 0 528 13 517 42 519 59 506 71 491 63 483 75 473 72 464 76 434 56 422 67 406 63 390 78 353 59 357 91 348 100 348 123 341 140 330 144 323 139 316 147 307 149 300 144 279 152 262 147 247 152 243 117 192 108 188 135 162 123 158 96 158 77 175 66 195 51 216 17 209 0 [[Rwanda|Rwanda]]
poly 254 447 314 452 375 415 416 348 484 257 515 234 512 174 458 168 435 158 460 122 440 122 465 78 438 54 403 69 361 59 345 133 284 152 251 152 240 122 196 111 194 135 182 146 226 193 216 243 226 344 [[Burundi|Burundi]]
poly 0 1300 65 1337 176 1215 165 1183 505 1136 404 900 303 790 259 449 223 245 230 188 190 147 165 120 157 89 189 54 212 21 209 1 0 1 [[DRC|DRC]]
poly 725 1290 698 1257 673 1264 646 1245 641 1218 586 1205 569 1209 503 1141 391 894 311 820 287 758 289 681 276 613 241 496 254 443 312 453 373 411 428 325 514 234 512 173 457 169 437 156 461 123 441 121 465 74 481 73 489 61 503 68 520 55 517 39 527 11 518 0 725 1 [[Tanzania|Tanzania]]
poly 725 1372 723 1287 660 1215 575 1208 506 1131 159 1180 170 1211 61 1339 98 1372 [[Zambia|Zambia]]

DETAIL 100 100 670 1280 [[Detail|Detail]]

you will notice on the "preview" panel several areas denoting the countries surrounding Lake Tanganyika, You might also notice an unusual green rectangle. This is the "detail"; a sub-map of the image.

At the bottom of the window are 2 more boxes: the "detail code" and the "detail image". The detail code is the cropped imagemap data and the detail image is the cropped image. If you examine Lake Tanganyika map you will find the original, and then below, the detail imagemap. Cool, No?

As you know (or figured out already)

1. "DETAIL" is not acceptable to the imagemap extension, so it's commented
2. I changed the name of the detail image link by hand

I still have a few things to work out:

1. the detail border is fixed at 8px. This doesn't work for small images. It will probably just go away.
2. I've changed the nature of "imageName" and "imageDescription" a little
3. there should be "default"-tag (area?) inputs

If you wouldn't mind trying to break this thing? I'd appreciae it.

Thanks again for writing this great program and writing it so well! --Saintrain 05:15, 17 April 2007 (UTC)

circle.php and poly.php

How might I get a hold of these PHP scripts so that the script can run behind a firewall with no remote access?

--66.11.173.122 05:16, 20 April 2010 (UTC)