Coordinate reader for Kurrent Alphabet Comparator

by John Doe

JavaScript

/* todo
* + implement rescaling calculation
* + implement nice copyable output (fix NaNs, add comments, size, links etc)
* + make the controls stay while the image scrolls
* + implement crosshair
* + show mark of selected character when hovering over buttons
* + change order: first click letter in image, then click corresponding button 
* + implement adjustable size of picture
* + implement adjustable zoom of magnifying glass
* + implement adjustable size of magnifying glass
*/


var input
var imageUrl
var myImage
var canvas
var ctx
var scalingFactor //  displayedSize / actualSize
var coordinates   // coordinates of the letters found in the image
var currentCoords //cordinates of click
var alphabetDiv
var outputDiv
var imageSizeSlider
var magnificationSlider
var magGlassSizeSlider
function main()
{
  // set up canvas
  console.log("begin")
  canvas = document.createElement("canvas")
  canvas.style.marginLeft = "20vw"
  ctx = canvas.getContext("2d")
    //ctx.imageSmoothingQuality = "high" // || "medium" || "high" // not available
  document.body.appendChild(canvas)
  
  // set up magnifying glass
  canvas.addEventListener("mousemove", function(evt)
  {
  	var yratio = 2/3
    var xratio = 1/2
    var magGlassSize = magGlassSizeSlider.value * myImage.width
    var zoom = magnificationSlider.value
  	var mousePos =  getMousePos(canvas, evt)
    var imgCoords = {x: (mousePos.x / scalingFactor),  //round??
                       y: (mousePos.y / scalingFactor)}
     ctx.drawImage(myImage, 0, 0, myImage.width, myImage.height)
     ctx.drawImage(myImage, imgCoords.x - magGlassSize * xratio / zoom , //clipping
                            imgCoords.y - magGlassSize * yratio / zoom , 
                            magGlassSize / zoom ,
                            magGlassSize / zoom , 
                            imgCoords.x - magGlassSize * xratio, //positioning
                            imgCoords.y - magGlassSize * yratio,
                            magGlassSize ,
    ...