happyrobots · December 21, 2015 14:09
diff --git a/point-picker.html b/point-picker.html
 <html>
 <head>

 <style>
 body {
  background: url('./carbon.png');
  font-family: Helvetica, Arial, sans-serif;
 }

 .content {
  margin: 0; padding: 0;
  width: 320px;
  color: #fff;
 }
 .point-picker-selection {
  margin: 0; padding: 0;
  position: absolute;
  width: 20px; height: 20px;
  background: #999;
  border-radius: 10px;
  box-shadow: 0 1px 3px #fff;
 }
 #point-picker {
  margin: 0; padding: 0;
  width: 300px;
  height: 256px;
  position: relative;
  background: #eee;
  border-right: #555 1px solid;
  border-top: #555 1px solid;
  background: transparent;
 }

 #recommend-warrant input[type="submit"] {
  width: 94%;
  padding: 0.2em 0;
  background: #fff;
  color: #777;
  font-size: 2em;
  border: none;
  margin: 0 auto;
  text-align: center;
 }

 #recommend-warrant input[type="submit"]:hover {
  cursor: pointer;
  background: #eee;
  color: #111;
 }

 #recommend-warrant input[type="text"] {
  width: 60px;
 }
 </style>

 </head>
 <body>

 <div class="content">
 <h2>Estimate the Future Security Price of Apple Inc.</h2>

  <img src="arrow-top.png" />
  Price Change (US$)
  <div id="point-picker" data-xindicator="Time (Months)" data-yindicator="Price Change (US$)"></div>
  <img src="arrow-bottom.png" />

  <form id="recommend-warrant">
    <label for="securityPrice">Security price will change by US$</label>
    <input type="text" name="securityPrice" id="security-price" />

    <label>in</label>
    <input type="text" name="securityTime" id="security-time" />
    <label for="securityTime">Months</label>
    

    <div class="field">
      <input type="submit" value="Pick Now" />
    </div>
  </form>

  <script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script type="text/javascript">
    (function() {
      Raphael.fn.drawGrid = function (x, y, w, h, wv, hv, color) {
          color = color || "#000";
          var path = ["M", Math.round(x) + .5, Math.round(y) + .5, "L", Math.round(x + w) + .5, Math.round(y) + .5, Math.round(x + w) + .5, Math.round(y + h) + .5, Math.round(x) + .5, Math.round(y + h) + .5, Math.round(x) + .5, Math.round(y) + .5],
              rowHeight = h / hv,
              columnWidth = w / wv;
          for (var i = 1; i < hv; i++) {
              path = path.concat(["M", Math.round(x) + .5, Math.round(y + i * rowHeight) + .5, "H", Math.round(x + w) + .5]);
          }
          for (i = 1; i < wv; i++) {
              path = path.concat(["M", Math.round(x + i * columnWidth) + .5, Math.round(y) + .5, "V", Math.round(y + h) + .5]);
          }
          return this.path(path.join(",")).attr({stroke: color});
      };

      function PointPicker(selector, didPickValue) {
        var $pointPicker = $(selector),
            maxX = $pointPicker.width(),
            maxY = $pointPicker.height()/2,
            didPickValueCallback = didPickValue,
            $dot = $('<div class="point-picker-selection"></div>');


        $pointPicker.on('click', function(e) {
          var $t = $(this),
              offset = $t.offset(),
              pos = $t.position(),
              x0 = pos.left,
              y0 = maxY,
              x = e.clientX - offset.left - x0,
              y = offset.top + y0 - e.clientY,
              percentX = x/maxX,
              percentY = y/maxY;

          if (x < 0 || x > maxX || y > maxY || y < -maxY) { return; }

          $dot.remove();
          $t.append($dot);
          $dot.css({left: x - $dot.width()/4, top: maxY-y-$dot.height()/2});
          if (didPickValueCallback !== undefined && didPickValueCallback != null) {
            var value = {
              x: percentX,
              y: percentY
            };
            console.log(value);
            didPickValueCallback(value);
          }
        });

        var width = maxX,
            height = maxY*2,
            leftgutter = 30,
            bottomgutter = 20,
            topgutter = 20,
            colorhue = .6 || Math.random(),
            color = "hsl(" + [colorhue, .5, .5] + ")",
            r = Raphael("point-picker", width, height),
            X = (width - leftgutter) / maxY,
            Y = (height - bottomgutter - topgutter) / maxX;
        r.text(maxX-60, maxY-10, "Time (Months)").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#fff"})

        // x labels
        r.text(10, maxY+10, "0").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#bbb"})
        r.text(70, maxY+10, "2").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#bbb"})
        r.text(130, maxY+10, "4").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#bbb"})
        r.text(190, maxY+10, "6").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#bbb"})
        r.text(250, maxY+10, "8").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#bbb"})

        // y labels
        r.text(20, 10, "1000").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#5b5"})
        r.text(20, 74, "500").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#5b5"})
        r.text(20, 204, "-500").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#b55"})

        r.drawGrid(0, -1, width, height, 5, 4, "#ddd");
      }

      var maxSecurityPrice = 1000, // depend on security max price?
          maxSecurityTime = 10, // months
          picker = new PointPicker('#point-picker', function(value) {
            $('input#security-price').val((value.y * maxSecurityPrice).toFixed(2));
            $('input#security-time').val((value.x * maxSecurityTime).toFixed(2));
          });

      $('form#recommend-warrant').submit(function() {
        console.log($(this).serialize());
        return false;
      });
    })();
  </script>
 </body>
 </html>
	<html>
	<head>

	<style>
	body {
	background: url('./carbon.png');
	font-family: Helvetica, Arial, sans-serif;
	}

	.content {
	margin: 0; padding: 0;
	width: 320px;
	color: #fff;
	}
	.point-picker-selection {
	margin: 0; padding: 0;
	position: absolute;
	width: 20px; height: 20px;
	background: #999;
	border-radius: 10px;
	box-shadow: 0 1px 3px #fff;
	}
	#point-picker {
	margin: 0; padding: 0;
	width: 300px;
	height: 256px;
	position: relative;
	background: #eee;
	border-right: #555 1px solid;
	border-top: #555 1px solid;
	background: transparent;
	}

	#recommend-warrant input[type="submit"] {
	width: 94%;
	padding: 0.2em 0;
	background: #fff;
	color: #777;
	font-size: 2em;
	border: none;
	margin: 0 auto;
	text-align: center;
	}

	#recommend-warrant input[type="submit"]:hover {
	cursor: pointer;
	background: #eee;
	color: #111;
	}

	#recommend-warrant input[type="text"] {
	width: 60px;
	}
	</style>

	</head>
	<body>

	<div class="content">
	<h2>Estimate the Future Security Price of Apple Inc.</h2>

	<img src="arrow-top.png" />
	Price Change (US$)
	<div id="point-picker" data-xindicator="Time (Months)" data-yindicator="Price Change (US$)"></div>
	<img src="arrow-bottom.png" />

	<form id="recommend-warrant">
	<label for="securityPrice">Security price will change by US$</label>
	<input type="text" name="securityPrice" id="security-price" />

	<label>in</label>
	<input type="text" name="securityTime" id="security-time" />
	<label for="securityTime">Months</label>


	<div class="field">
	<input type="submit" value="Pick Now" />
	</div>
	</form>

	<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
	<script type="text/javascript">
	(function() {
	Raphael.fn.drawGrid = function (x, y, w, h, wv, hv, color) {
	color = color \|\| "#000";
	var path = ["M", Math.round(x) + .5, Math.round(y) + .5, "L", Math.round(x + w) + .5, Math.round(y) + .5, Math.round(x + w) + .5, Math.round(y + h) + .5, Math.round(x) + .5, Math.round(y + h) + .5, Math.round(x) + .5, Math.round(y) + .5],
	rowHeight = h / hv,
	columnWidth = w / wv;
	for (var i = 1; i < hv; i++) {
	path = path.concat(["M", Math.round(x) + .5, Math.round(y + i * rowHeight) + .5, "H", Math.round(x + w) + .5]);
	}
	for (i = 1; i < wv; i++) {
	path = path.concat(["M", Math.round(x + i * columnWidth) + .5, Math.round(y) + .5, "V", Math.round(y + h) + .5]);
	}
	return this.path(path.join(",")).attr({stroke: color});
	};

	function PointPicker(selector, didPickValue) {
	var $pointPicker = $(selector),
	maxX = $pointPicker.width(),
	maxY = $pointPicker.height()/2,
	didPickValueCallback = didPickValue,
	$dot = $('<div class="point-picker-selection"></div>');


	$pointPicker.on('click', function(e) {
	var $t = $(this),
	offset = $t.offset(),
	pos = $t.position(),
	x0 = pos.left,
	y0 = maxY,
	x = e.clientX - offset.left - x0,
	y = offset.top + y0 - e.clientY,
	percentX = x/maxX,
	percentY = y/maxY;

	if (x < 0 \|\| x > maxX \|\| y > maxY \|\| y < -maxY) { return; }

	$dot.remove();
	$t.append($dot);
	$dot.css({left: x - $dot.width()/4, top: maxY-y-$dot.height()/2});
	if (didPickValueCallback !== undefined && didPickValueCallback != null) {
	var value = {
	x: percentX,
	y: percentY
	};
	console.log(value);
	didPickValueCallback(value);
	}
	});

	var width = maxX,
	height = maxY*2,
	leftgutter = 30,
	bottomgutter = 20,
	topgutter = 20,
	colorhue = .6 \|\| Math.random(),
	color = "hsl(" + [colorhue, .5, .5] + ")",
	r = Raphael("point-picker", width, height),
	X = (width - leftgutter) / maxY,
	Y = (height - bottomgutter - topgutter) / maxX;
	r.text(maxX-60, maxY-10, "Time (Months)").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#fff"})

	// x labels
	r.text(10, maxY+10, "0").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#bbb"})
	r.text(70, maxY+10, "2").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#bbb"})
	r.text(130, maxY+10, "4").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#bbb"})
	r.text(190, maxY+10, "6").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#bbb"})
	r.text(250, maxY+10, "8").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#bbb"})

	// y labels
	r.text(20, 10, "1000").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#5b5"})
	r.text(20, 74, "500").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#5b5"})
	r.text(20, 204, "-500").attr({font: "1em Helvetica", opacity: 1}).attr({fill: "#b55"})

	r.drawGrid(0, -1, width, height, 5, 4, "#ddd");
	}

	var maxSecurityPrice = 1000, // depend on security max price?
	maxSecurityTime = 10, // months
	picker = new PointPicker('#point-picker', function(value) {
	$('input#security-price').val((value.y * maxSecurityPrice).toFixed(2));
	$('input#security-time').val((value.x * maxSecurityTime).toFixed(2));
	});

	$('form#recommend-warrant').submit(function() {
	console.log($(this).serialize());
	return false;
	});
	})();
	</script>
	</body>
	</html>