rulerGenerator.js

/* jshint asi: true*/
var ruler = {};

var limitTickQty = function () {
  //Prevent it from crashing if it tries to render too many linest
  ruler.ticksPerUnit = Math.pow(ruler.subUnitBase, ruler.subUnitExponent);
  ruler.masterTickQty = ruler.ticksPerUnit * ruler.width;
  if (ruler.height > 100) {
    console.info(
      "Unreasonable ruler height: " + ruler.height + " reducing height"
    );
    ruler.height = 15;
    document.getElementById("rulerHeight").value = ruler.height;
  }
  if (ruler.width > 1000) {
    console.info(
      "Unreasonable tick quantity: " + ruler.masterTickQty + " reducing width"
    );
    ruler.width = 500;
    document.getElementById("rulerWidth").value = ruler.width;
  }
  if (ruler.masterTickQty > 10000) {
    console.info(
      "Unreasonable tick quantity: " +
        ruler.masterTickQty +
        " reducing exponent"
    );
    if (ruler.subUnitExponent > 1) {
      ruler.subUnitExponent = ruler.subUnitExponent - 1;
      document.getElementById("subUnitExponent")[
        ruler.subUnitExponent
      ].selected = true;
    }
  }
  if (ruler.ticksPerUnit > 100) {
    console.info(
      "Unreasonable exponent: " +
        ruler.ticksPerUnit +
        " resetting to reasonable"
    );
    ruler.subUnitExponent = 1;
    document.getElementById("subUnitExponent")[
      ruler.subUnitExponent
    ].selected = true; //selects resonable
  }
};

var checkUnit = function () {
  var pixelsPerInch = 72; //I don't think this needs to be in the object....
  var pixelsPerCM = pixelsPerInch / ruler.cmPerInch;

  if (ruler.units === "inches") {
    ruler.pixelsPerUnit = pixelsPerInch;
    ruler.unitsAbbr = '"in.';
  } else if (ruler.units === "centimeters") {
    ruler.unitsAbbr = "cm.";
    ruler.pixelsPerUnit = pixelsPerCM;
  } else {
    ruler.pixelsPerUnit = 0;
    console.error("Unexpected unit value. Unit value: " + rulerUnits);
  }
  ruler.heightPixels = ruler.height * ruler.pixelsPerUnit;
};

var checkSubUnitBase = function () {
  // if it is fractional, make the fractional dropdown appear
  // if it is decimal, likewise
  var suffix = " " + ruler.unitsAbbr;

  var subLabelsDec = [
    "1" + suffix,
    "1/10th" + suffix,
    "1/100th" + suffix,
    "1/1000th" + suffix,
    "1/10000th" + suffix,
    "1/100000th" + suffix,
    "1/1000000th" + suffix,
  ];

  var subLabelsFrac = [
    "1" + suffix,
    "1/2" + suffix,
    "1/4" + suffix,
    "1/8" + suffix,
    "1/16" + suffix,
    "1/32" + suffix,
    "1/64" + suffix,
  ];

  if (ruler.subUnitBase === "10") {
    //Decimal!
    ruler.subLabels = subLabelsDec;
    document.getElementById("subUnitExponent")[3].disabled = true;
    document.getElementById("subUnitExponent")[4].disabled = true; //disable the ones that crash.
    document.getElementById("subUnitExponent")[5].disabled = true;
    document.getElementById("subUnitExponent")[6].disabled = true;

    for (var i = ruler.subLabels.length - 1; i >= 0; i--) {
      document.getElementById("subUnitExponent")[i].text = ruler.subLabels[i];
    }
  } else if (ruler.subUnitBase === "2") {
    //Fractional!
    ruler.subLabels = subLabelsFrac;

    document.getElementById("subUnitExponent")[3].disabled = false;
    document.getElementById("subUnitExponent")[4].disabled = false;
    document.getElementById("subUnitExponent")[5].disabled = false; //re-enable the ones that dont crash
    document.getElementById("subUnitExponent")[6].disabled = false;

    for (var j = ruler.subLabels.length - 1; j >= 0; j--) {
      document.getElementById("subUnitExponent")[j].text = ruler.subLabels[j];
    }
  } else {
    console.error(
      "Impossible subUnitBase. Must be 2 or 10. is:  " + ruler.subUnitBase
    );
  }
};

var resizeCanvas = function () {
  document.getElementById("myCanvas").width = ruler.width * ruler.pixelsPerUnit;
  heightAddend = 50;
  document.getElementById("myCanvas").height =
    heightAddend + ruler.height * ruler.pixelsPerUnit;
};

var constructRuler = function () {
  ruler.tickArray = []; //for prevention of redunancy, an member for each tick
  var layerArray = new Array(ruler.subUnitExponent); //Layers in the SVG file.

  for (
    var exponentIndex = 0;
    exponentIndex <= ruler.subUnitExponent;
    exponentIndex++
  ) {
    //loop thru each desired level of ticks, inches, halves, quarters, etc....
    var tickQty = ruler.width * Math.pow(ruler.subUnitBase, exponentIndex);
    layerArray[exponentIndex] = new paper.Layer();
    layerArray[exponentIndex].name =
      ruler.subLabels[exponentIndex] + " Tick Group";

    var startNo = $("#startNo").val();

    highestTickDenomonatorMultiplier =
      ruler.ticksPerUnit / Math.pow(ruler.subUnitBase, exponentIndex);
    //to prevent reduntant ticks, this multiplier is applied to crrent units to ensure consistent indexing of ticks.
    for (var tickIndex = 0; tickIndex <= tickQty; tickIndex++) {
      ruler.masterTickIndex = highestTickDenomonatorMultiplier * tickIndex;
      // levelToLevelMultiplier =0.7
      var tickHeight;
      tickHeight =
        ruler.heightPixels *
        Math.pow(ruler.levelToLevelMultiplier, exponentIndex);

      var tickSpacing =
        ruler.pixelsPerUnit / Math.pow(ruler.subUnitBase, exponentIndex);
      //spacing between ticks, the fundemental datum on a ruler :-)
    //   var finalTick = false;
    //   if (tickIndex === tickQty) {
    //     finalTick = true;
    //   }

      //draws the ticks
      var offsetTickIndex = parseInt(tickIndex) + parseInt(startNo);
      tick(
        tickHeight,
        0,
        tickIndex,
        offsetTickIndex,
        exponentIndex,
        tickSpacing,
        // finalTick,
        ruler.absolute,
        ruler.multiplyFactor,
        ruler.fontSize,
        ruler.fontFamily
      );
    }
  }

  drawAdditionalLabel(ruler.fontSize, ruler.fontFamily, ruler.additionalLabel);
};

var drawAdditionalLabel = function (fontSize, fontFamily, additionalLabel) {
  var labelTextSize = getLabelTextSize(fontSize);

  var text = new paper.PointText(new paper.Point(0, 45));

  text.justification = "left";
  text.fillColor = "black";
  text.content = additionalLabel;
  text.style = {
    fontFamily: fontFamily,
    fontWeight: "bold",
    fontSize: labelTextSize,
  };
  text.name = "Additional label"; //label for SVG editor
};

var tick = function (
  tickHeight,
  horizPosition,
  tickIndex,
  offsetTickIndex,
  exponentIndex,
  tickSpacing,
  // finalTick,
  absolute,
  multiplyFactor,
  fontSize,
  fontFamily
) {
  //exponentIndex is 0-6, how small it is, 6 being smallest
  var x1 = horizPosition + tickSpacing * tickIndex;
  var x2 = x1; //x === x because lines are vertical
  var y1 = 0; //all lines start at top of screen
  var y2 = tickHeight; //downward

  if (ruler.tickArray[ruler.masterTickIndex] === undefined || ruler.redundant) {
    // if no tick exists already, or if we want redundant lines, draw the tick.
    var line = new paper.Path.Line([x1, y1], [x2, y2]); //actual line instance
    line.name = ruler.subLabels[exponentIndex] + " Tick no. " + tickIndex; //label for SVG editor
    line.strokeColor = "black"; //color of ruler line
    line.strokeWidth = "1"; //width of ruler line in pixels

    ruler.tickArray[ruler.masterTickIndex] = true; //register the tick so it is not duplicated
    if (exponentIndex === 0) {
      //if is a primary tick, it needs a label
      tickLabel(
        x1,
        y2,
        // finalTick,
        offsetTickIndex,
        exponentIndex,
        absolute,
        multiplyFactor,
        fontSize,
        fontFamily
      );
    }
  }
};

var getLabelTextSize = function (fontSize) {
  var labelTextSize;
  var labelTextSizeInches = fontSize;
  var labelTextSizeCm = Math.round(labelTextSizeInches / ruler.cmPerInch);
  if (ruler.units === "inches") {
    labelTextSize = labelTextSizeInches;
  } else {
    labelTextSize = labelTextSizeCm;
  }
  return labelTextSize;
};

var tickLabel = function (
  x1,
  y2,
  //finalTick,
  tickIndex,
  exponentIndex,
  absolute,
  multiplyFactor,
  fontSize,
  fontFamily
) {
  //label the tick

  var labelTextSize = getLabelTextSize(fontSize);

  //var xLabelOffset = 4;
  var xLabelOffset = 0;
  var yLabelOffset = 1;
  //   if (finalTick) {
  //     xLabelOffset = -1 * xLabelOffset;
  //   } //last label is right justified
  var text = new paper.PointText(
    new paper.Point(x1 + xLabelOffset, y2 + yLabelOffset)
  );

  //   // Justify the final tick to the right
  //   text.justification = "left";
  //   if (finalTick) {
  //     text.justification = "right";
  //   } //last label is right justified

  text.justification = "right";
  if (tickIndex < 0) {
    text.justification = "left";
  } else if (tickIndex == 0) {
    text.justification = "center";
  }

  text.fillColor = "black";

  finalValue = tickIndex * multiplyFactor;
  if (absolute) {
    finalValue = Math.abs(finalValue);
  }
  formattedValue = "" + finalValue;

  text.content = formattedValue;
  text.style = {
    // fontFamily: 'Helvetica',
    // fontFamily: "monospace",
    fontFamily: fontFamily,
    fontWeight: "bold",
    fontSize: labelTextSize,
  };
  text.name = ruler.subLabels[exponentIndex] + " label no. " + tickIndex; //label for SVG editor
};

var debug = function () {
  console.info("--All the variables---");
  console.info(ruler); //prints all attributes of ruler object
};

var updateVariables = function () {
  ruler.units = $("input:radio[name=rulerUnits]:checked'").val();
  ruler.subUnitBase = $("input:radio[name=subUnits]:checked'").val();
  ruler.redundant = $("input:checkbox[name=redundant]:checked'").val();
  ruler.absolute = $("input:checkbox[name=absolute]:checked'").val();
  ruler.width = $("#rulerWidth").val();
  ruler.height = $("#rulerHeight").val();
  ruler.fontSize = $("#fontSize").val();
  ruler.fontFamily = $("#fontFamily").val();
  ruler.multiplyFactor = $("#multiplyFactor").val();
  ruler.additionalLabel = $("#additionalLabel").val();
  ruler.subUnitExponent = $("#subUnitExponent").val();
  ruler.levelToLevelMultiplier = $("#levelToLevelMultiplier").val();
  ruler.cmPerInch = 2.54;
};

var build = function () {
  // Get a reference to the canvas object
  var canvas = document.getElementById("myCanvas");
  // Create an empty project and a view for the canvas:
  paper.setup(canvas);

  updateVariables();
  checkUnit();
  checkSubUnitBase();
  limitTickQty();
  resizeCanvas();
  constructRuler();

  paper.view.draw();
};

var exportSvg = function () {
  //* I referenced the excellent SVG export example here: http://paperjs.org/features/#svg-import-and-export
  document.getElementById("svgexpbutton").onclick = function () {
    exportWidth = document.getElementById("myCanvas").width;
    exportHeight = document.getElementById("myCanvas").height;

    let downloadLink = document.getElementById("downloadSVG");
    // let svgString = paper.project.exportSVG({asString:true})
    var svgString = paper.project.exportSVG({
      asString: true,
      size: { width: exportWidth, height: exportHeight },
    });

    var url = URL.createObjectURL(
      new Blob([svgString], {
        type: "image/svg+xml",
      })
    );
    downloadLink.href = url;
    downloadLink.download = "Ruler.svg";

    // viewBox ='viewBox="0 0 '+exportWidth+' '+exportHeight+'"'
    // dims = ' width= "'+exportWidth+'" height="'+exportHeight+' " '
    // var svgPrefix = '<svg x="0" y="0"'+dims+viewBox+' version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">';
    // var svgPostfix = '</svg>';

    // var elem = document.getElementById("svgexpdata");
    // elem.value = 'data:image/svg+xml;base64,' + btoa(svg);
    // //btoa Creates a base-64 encoded ASCII string from a "string" of binary data
    // document.getElementById("svgexpform").submit();
  };
};

$(document).ready(function () {
  console.log("\t Welcome to the Ruler Generator │╵│╵│╵│╵│╵│╵│");
  //When document is loaded, call build once
  build();
  debug(); //prints all values to browser console

  $("#rulerParameters").change(function () {
    //anytime anything within the form is altered, call build again
    build();
    debug(); //prints all values to browser console
  });

  exportSvg();
});