index.html

<style>
body { font-family: helvetica neue, sans-serif; font-size: 14px; margin: 18px; }
table th, table td { padding-right: 18px; vertical-align: top; }
#world-settings { float: right; }
#world-settings, #world-settings input { font-family: andale mono, monospace; font-size: 20px; }
.view { position: relative; }
.canvas { position: relative; cursor: none; }
.cursor { position: absolute; cursor: none; z-index: 1; }
.pin { position: absolute; cursor: none; }
.message { font-family: andale mono, monospace; font-size: 24px; }
#photo-image { position: absolute; left: 0; bottom: 0; image-rendering: pixelated; }
#world-rect { position: absolute; border: 1px solid black; }
th { text-align: left; font-weight: bold; padding-bottom: 6px; }
</style>

<table cellspacing=0 cellpadding=0>
  <tr>
    <th>Photo</th>
    <th>World
      <div id="world-settings">
        (<input id="world-x-offset" value="0" size=5>,
        <input id="world-y-offset" value="0" size=5>)

        <input id="world-width" value="400" size=5> x
        <input id="world-height" value="400" size=5><span id="unit"></span>
      </div>
    </th>
  </tr>
  <tr>
    <td id="photo" class="view">
      <div id="photo-canvas" class="canvas">
        <img id="photo-image" src="blank.png">
      </div>
      <img id="photo-cursor" class="cursor" src="cursor.png">
    </td>
    <td id="world" class="view">
      <div id="world-canvas" class="canvas">
        <div id="world-rect"></div>
      </div>
      <img id="world-cursor" class="cursor" src="cursor.png">
    </td>
  </tr>
  <tr>
    <td>
      <pre id="photo-status" class="message"></pre>
      <pre id="photo-help" class="message"></pre>
      <button id="load-photo">Load a photo</button>
      <button id="reset-pins">Reset pins</button>
      <input id="image-selector" type="file" style="display: none">
    </td>
    <td>
      <pre id="world-status" class="message"></pre>
      <pre id="transform" class="message"></pre>
      <button id="save-transform">Save transform.json</button>
      <button id="load-transform">Load a transform file</button>
      <input id="file-selector" type="file" style="display: none">
    </td>
  </tr>
</table>

<script src="jquery-1.5.1.min.js"></script>
<script src="projection.js"></script>
<script src="filesaver.js"></script>
<script>
var CANVAS_WIDTH = 640;
var CANVAS_HEIGHT = 512;
var CURSOR_WIDTH = 17;
var CURSOR_HEIGHT = 17;
var PIN_WIDTH = 27;
var PIN_HEIGHT = 27;
var PIN_HIT_RADIUS = 10;
var UNIT = " in";
var DIST_DECIMALS = 0;

$('#unit').text(UNIT);
var photo = $('#photo')[0];
var photoCanvas = $('#photo-canvas')[0];
var photoCursor = $('#photo-cursor')[0];
var world = $('#world')[0];
var worldCanvas = $('#world-canvas')[0];
var worldCursor = $('#world-cursor')[0];
var worldRect = $('#world-rect')[0];

photoCanvas.style.width = CANVAS_WIDTH + 'px';
photoCanvas.style.height = CANVAS_HEIGHT + 'px';
worldCanvas.style.width = CANVAS_WIDTH + 'px';
worldCanvas.style.height = CANVAS_HEIGHT + 'px';

var photoWidth = CANVAS_WIDTH;
var photoHeight = CANVAS_HEIGHT;
var photoScale = 1;

$('#photo-image').load(function() {
  photoWidth = $('#photo-image')[0].naturalWidth;
  photoHeight = $('#photo-image')[0].naturalHeight;
  photoScale = Math.min(CANVAS_WIDTH / photoWidth, CANVAS_HEIGHT / photoHeight);
  $('#photo-image')[0].style.width = (photoWidth * photoScale) + 'px';
  $('#photo-image')[0].style.height = (photoHeight * photoScale) + 'px';
  updateWorldRect();
});

$('#reset-pins').click(function() {
  resetPins();
  updateWorldRect();
});

$('#load-photo').click(function() {
  $('#image-selector').click();
});

$('#image-selector').change(function() {
  console.log(this.files[0]);
  $('#photo-image')[0].src = URL.createObjectURL(this.files[0]);
});

var hoveredPin = null;
var grabbedPin = null;
var xLeft = Math.floor(photoWidth * 0.1);
var xRight = Math.floor(photoWidth * 0.9);
var yTop = Math.floor(photoHeight * 0.1);
var yBottom = Math.floor(photoHeight * 0.9);
var pins = [
  {'photo': [0, 10], 'world': [0, 0]},
  {'photo': [10, 10], 'world': [10, 0]},
  {'photo': [0, 0], 'world': [0, 10]},
  {'photo': [10, 0], 'world': [10, 10]},
];
var photoToWorld;
var worldToPhoto;

for (var i = 0; i < pins.length; i++) {
  pins[i].photoImg = $('<img class="pin" src="pin.png">')[0];
  pins[i].worldImg = $('<img class="pin" src="pin.png">')[0];
  $('#photo').append(pins[i].photoImg);
  $('#world').append(pins[i].worldImg);
}

function resetPins() {
  var xLeft = Math.floor(photoWidth * 0.1);
  var xRight = Math.floor(photoWidth * 0.9);
  var yTop = Math.floor(photoHeight * 0.1);
  var yBottom = Math.floor(photoHeight * 0.9);
  pins[0].photo = [xLeft, yBottom];
  pins[1].photo = [xRight, yBottom];
  pins[2].photo = [xLeft, yTop];
  pins[3].photo = [xRight, yTop];
}

function showPin(pinImg, canvas, x, y) {
  pinImg.style.left = (canvas.offsetLeft + x - (PIN_WIDTH - 1)/2) + 'px';
  pinImg.style.top = (canvas.offsetTop + y - (PIN_HEIGHT - 1)/2) + 'px';
  pinImg.style.width = PIN_WIDTH + 'px';
  pinImg.style.height = PIN_HEIGHT + 'px';
}

function toDecimals(n, decimals) {
  return n.toFixed(decimals).replace(/\.?0+$/, '').replace(/^-0$/, '0');
}

function updatePins() {
  for (var i = 0; i < pins.length; i++) {
    var pcx = pins[i].photo[0]*photoScale;
    var pcy = CANVAS_HEIGHT - (photoHeight - pins[i].photo[1])*photoScale;
    showPin(pins[i].photoImg, photoCanvas, pcx, pcy);
    var wcx = worldOriginX + (pins[i].world[0] - worldXOffset)*worldScale;
    var wcy = worldOriginY - (pins[i].world[1] - worldYOffset)*worldScale;
    showPin(pins[i].worldImg, worldCanvas, wcx, wcy);
  }
  var result = computeTransforms(pins);
  photoToWorld = result[0];
  worldToPhoto = result[1];

  var c = [];
  for (var i = 0; i < photoToWorld.length; i++) {
    c.push(toDecimals(photoToWorld[i], 6));
  }
  $('#transform').text(
    'd = ' + c[6] + ' x + ' + c[7] + ' y + 1' +
    '\nwx = (' + c[0] + ' x + ' + c[1] + ' y + ' + c[2] + ') / d' +
    '\nwy = (' + c[3] + ' x + ' + c[4] + ' y + ' + c[5] + ') / d'
  );
}

function highlightPin(pin) {
  for (var i = 0; i < pins.length; i++) {
    pins[i].photoImg.src = pins[i].worldImg.src =
        (pins[i] === pin) ? 'highlighted-pin.png' : 'pin.png';
  }
}

var worldXOffset;
var worldYOffset;
var worldWidth;
var worldHeight;

var worldOriginX;
var worldOriginY;
var worldScale;

function updateWorldRect() {
  worldXOffset = $('#world-x-offset').val() - 0;
  worldYOffset = $('#world-y-offset').val() - 0;
  worldWidth = $('#world-width').val() - 0;
  worldHeight = $('#world-height').val() - 0;
  worldScale = Math.min((CANVAS_WIDTH * 0.8) / worldWidth,
                        (CANVAS_HEIGHT * 0.8) / worldHeight);
  worldOriginX = (CANVAS_WIDTH / 2) - (worldWidth*worldScale / 2);
  worldOriginY = (CANVAS_HEIGHT / 2) + (worldHeight*worldScale / 2);
  worldRect.style.left = worldOriginX + 'px';
  worldRect.style.top = (worldOriginY - worldHeight*worldScale) + 'px';
  worldRect.style.width = (worldWidth*worldScale - 1) + 'px';
  worldRect.style.height = (worldHeight*worldScale - 1) + 'px';
  pins[0].world = [worldXOffset, worldYOffset];
  pins[1].world = [worldXOffset + worldWidth, worldYOffset];
  pins[2].world = [worldXOffset, worldYOffset + worldHeight];
  pins[3].world = [worldXOffset + worldWidth, worldYOffset + worldHeight];
  updatePins();
}

hideCursors();
resetPins();
updateWorldRect();
$('#world-settings input').change(updateWorldRect);

function showCursor(cursor, canvas, cx, cy) {
  cursor.style.display = 'block';
  cursor.style.left = (canvas.offsetLeft + cx - (CURSOR_WIDTH - 1)/2) + 'px';
  cursor.style.top = (canvas.offsetTop + cy - (CURSOR_HEIGHT - 1)/2) + 'px';
  cursor.style.width = CURSOR_WIDTH + 'px';
  cursor.style.height = CURSOR_HEIGHT + 'px';
}

function showPhotoCursor(px, py) {
  var cx = px*photoScale;
  var cy = CANVAS_HEIGHT - (photoHeight - py)*photoScale;
  if (cx >= 0 && cx < CANVAS_WIDTH && cy >= 0 && cy < CANVAS_HEIGHT) {
    showCursor(photoCursor, photoCanvas, cx, cy);
  } else {
    photoCursor.style.display = 'none';
  }
}

function showWorldCursor(wx, wy) {
  var cx = worldOriginX + (wx - worldXOffset)*worldScale;
  var cy = worldOriginY - (wy - worldYOffset)*worldScale;
  if (cx >= 0 && cx < CANVAS_WIDTH && cy >= 0 && cy < CANVAS_HEIGHT) {
    showCursor(worldCursor, worldCanvas, cx, cy);
  } else {
    worldCursor.style.display = 'none';
  }
}

function updateCursors(photoXy, worldXy) {
  var px = photoXy[0], py = photoXy[1];
  var wx = worldXy[0], wy = worldXy[1];
  showPhotoCursor(px, py);
  showWorldCursor(wx, wy);
  $('#photo-status').text('x = ' + px.toFixed(1) + '\n' +
                          'y = ' + py.toFixed(1));
  $('#world-status').text('wx = ' + wx.toFixed(DIST_DECIMALS) + UNIT + '\n' +
                          'wy = ' + wy.toFixed(DIST_DECIMALS) + UNIT);
}

function hideCursors() {
  $('#photo-status').text(' \n ');
  $('#world-status').text(' \n ');
  photoCursor.style.display = 'none';
  worldCursor.style.display = 'none';
}

photo.addEventListener('click', function(event) {
  if (grabbedPin) {  // drop it
    var px = grabbedPin.photo[0], py = grabbedPin.photo[1];
    var cx = px*photoScale;
    var cy = CANVAS_HEIGHT - (photoHeight - py)*photoScale;
    grabbedPin = null;
    updatePhotoCursor(cx, cy);
  } else if (hoveredPin) {  // grab it
    grabbedPin = hoveredPin;
    var px = grabbedPin.photo[0], py = grabbedPin.photo[1];
    var cx = px*photoScale;
    var cy = CANVAS_HEIGHT - (photoHeight - py)*photoScale;
    updatePhotoCursor(cx, cy);
  }
});

photo.addEventListener('mousemove', function(event) {
  var offset = $('#photo-canvas').offset();
  updatePhotoCursor(event.pageX - offset.left, event.pageY - offset.top);
});

function updatePhotoCursor(cx, cy) {
  if (cx >= 0 && cx < CANVAS_WIDTH && cy >= 0 && cy < CANVAS_HEIGHT) {
    var px = cx/photoScale;
    var py = photoHeight - (CANVAS_HEIGHT - cy)/photoScale;
    if (grabbedPin) {
      hideCursors();
      $('#photo-status').text('x = ' + px.toFixed(1) + '\n' +
                              'y = ' + py.toFixed(1));
      $('#photo-help').text('click to drop');
      grabbedPin.photo[0] = px;
      grabbedPin.photo[1] = py;
      updatePins();
    } else {
      updateCursors([px, py], applyTransform(photoToWorld, px, py));
      hoveredPin = null;
      for (var i = 0; i < pins.length; i++) {
        if (Math.abs(pins[i].photo[0] - px)*photoScale < PIN_HIT_RADIUS &&
            Math.abs(pins[i].photo[1] - py)*photoScale < PIN_HIT_RADIUS) {
          hoveredPin = pins[i];
        }
      }
      highlightPin(hoveredPin);
      $('#photo-help').text(hoveredPin ? 'click to grab' : ' ');
    }
  } else {
    hideCursors();
  }
}

world.addEventListener('mousemove', function(event) {
  var offset = $('#world-canvas').offset();
  var cx = event.pageX - offset.left;
  var cy = event.pageY - offset.top;
  if (cx >= 0 && cx < CANVAS_WIDTH && cy >= 0 && cy < CANVAS_HEIGHT) {
    var wx = (cx - worldOriginX) / worldScale + worldXOffset;
    var wy = (worldOriginY - cy) / worldScale + worldYOffset;
    updateCursors(applyTransform(worldToPhoto, wx, wy), [wx, wy]);
  } else {
    hideCursors();
  }
});

$('#save-transform').click(function() {
  var elements = [];
  for (var i = 0; i < photoToWorld.length; i++) {
    elements.push(toDecimals(photoToWorld[i], 12));
  }
  var pinCoords = [];
  for (var i = 0; i < pins.length; i++) {
    pinCoords.push({'photo': pins[i].photo, 'world': pins[i].world});
  }
  var json = '{\n' +
    '"coefficients": [' + elements.join(', ') + '],\n' +
    '"pins": ' + JSON.stringify(pinCoords) + '\n' +
  '}\n';
  saveAs(new File([json], 'transform.json', {'type': 'text/plain'}));
});

$('#file-selector').change(function() {
  var reader = new FileReader();
  reader.onload = function(e) {
    var data = JSON.parse(e.target.result);
    var pinCoords = data.pins;
    for (var i = 0; i < pinCoords.length; i++) {
      pins[i].photo = pinCoords[i].photo;
      pins[i].world = pinCoords[i].world;
    }
    $('#world-x-offset').val(pins[0].world[0]);
    $('#world-y-offset').val(pins[0].world[1]);
    $('#world-width').val(pins[1].world[0] - pins[0].world[0]);
    $('#world-height').val(pins[2].world[1] - pins[0].world[1]);
    updateWorldRect();
  };
  reader.readAsText(this.files[0]);
});

$('#load-transform').click(function() {
  $('#file-selector').click();
});
</script>