Gradient Maker

by techbrew

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel panel-primary">
  <div class="panel-heading">
    <div class="panel-title"><a href="http://journeymap.info/Topographic" target="_parent">JourneyMap Topographic Maps</a> Gradient Generator</div>
  </div>
  <div class="panel-body">
    <div class="alert alert-info alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      This tool is a work-in-progress. Use it to create linear gradients that you can paste into Topographic map config files.
      <p>
        Provide 2 or more gradient stops (Comma-delimited hex colors). There is also experimental support for space-delimited 'rgb(159,200,167)' colors.)
      </p>
    </div>

    <div>

    </div>
    <textarea id="inputs">#8b4513, #F5DEB3, #80ffbf</textarea>

    <p>
      <input id="count" value="26" />
      <span>Approximate number of hex colors to generate</span>

    </p>


    <button id="generate" type="button" class="btn btn-primary">Generate</button>

    <p>
    </p>

    <h3>
Results
</h3>
    <textarea id="result"></textarea>
    <div id="output" />

  </div>
  <div class="panel-footer">Gradient Generator v2016.04.11.1 by Techbrew for <a href="http://journeymap.info/Topographic" target="_parent">JourneyMap Topographic Maps</a></div>
</div>

CSS

label,
input {
  display: inline-block;
}

.panel-title a {
  text-decoration: underline !important
}

label {
  width: 50%;
  /* or whatever size you want them */
}

textarea {
  width: 100%
}

#count {
  width: 3em;
}

JavaScript

$(function() {

  function go() {
    $("#result").val("");
    $("#output").html("");
    var inputs = $("#inputs").val().replace(/\s\s+/g, ' ').trim();
    if (inputs.indexOf("rgb") >= 0) {
      inputs = inputs.split(" ");
      for (var i = 0; i < inputs.length; i++) {
        v = inputs[i];
        if (v.indexOf("rgb") >= 0) {
          eval("inputs[i]=" + v.trim());
        } else {
          //console.log("remove " + v)
          inputs.splice(i, 1);
          i--;
        }
      };
    } else {
      inputs = inputs.split(",");
    }

    var count = $("#count").val();
    var seg = (count / (inputs.length - 1));

    var i = 0;
    while (i < inputs.length - 1) {
      var first = inputs[i].trim();
      var second = inputs[i + 1].trim();
      //console.log("from " + first + " to " + second + " : " + seg)
      genColors(hexToRgb(first), hexToRgb(second), seg);
      i++;
    }

    var result = $("#result").val().replace(/\s\s+/g, ' ');
    $("#result").val(result);
    console.log(inputs.length)
  }

  go();

  $("#generate").on("click", go);

});

function color(r, g, b) {
  return {
    "r": r,
    "g": g,
    "b": b
  };
}

function addColor(hex) {
  var result = $("#result");
  $(result).val(result.val() + hex + ",")

  $("<div/>", {
    css: {
      "height": 10,
      "background-color": hex,
      "font-size": "10px",
    },
    html: hex
  }).prependTo("#output");
}



function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

function rgb(r, g, b) {
  var c = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
  return "#" + c;
}

function...