garciadelcastillo/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    UI

The nature of Sketchpad makes it very easy to create UI elements such as sliders or knobs, which stream their values directly to Measure objects and trigger update chains. Check another example here.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div id="sketchpadDiv">
      <canvas id="sketchpadCanvas"></canvas>
    </div>
  </body>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="http://www.garciadelcastillo.es/sketchpad/sketchpad.js"></script>
  <script type="text/javascript" src="sketch.js"></script>
</html>

## sketch.js
// Create new instance of Sketchpad in target Canvas
var pad = new Sketchpad('sketchpadCanvas');

// Create a Measure object through the Slider interface
var radius = Slider(pad, 25, 25, 150, 0, 300, 150);

// Now use the slider's Measure as radius for a circle
var center = new pad.Node(pad.width.value / 2, pad.height.value / 2),
    circle = pad.Circle.centerRadius(center, radius);

/**
 * A quick implementation of a Slider class
 * Returns a Measure object defined by the slider's state
 */
function Slider(pad, x, y, width, minValue, maxValue, startValue) {
  var axis = new pad.Line(x, y, x + width, y),
      t = (startValue - minValue) / (maxValue - minValue),
      handle = pad.Node.along(axis, t, {clamp: true});
  var measure = pad.Measure.compose(handle, function() {
    return minValue + (maxValue - minValue) * (handle.x - x) / width;
  });
  var label = pad.Label.from(measure, {round: true}),
      tag = new pad.Tag.on(handle, label);
  return measure;
};

## styles.css
body {
  margin: 0;
  padding: 0;
}

#sketchpadDiv {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#sketchpadCanvas {
  position: absolute;
}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
	<div id="sketchpadDiv">
	<canvas id="sketchpadCanvas"></canvas>
	</div>
	</body>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="http://www.garciadelcastillo.es/sketchpad/sketchpad.js"></script>
	<script type="text/javascript" src="sketch.js"></script>
	</html>
	// Create new instance of Sketchpad in target Canvas
	var pad = new Sketchpad('sketchpadCanvas');

	// Create a Measure object through the Slider interface
	var radius = Slider(pad, 25, 25, 150, 0, 300, 150);

	// Now use the slider's Measure as radius for a circle
	var center = new pad.Node(pad.width.value / 2, pad.height.value / 2),
	circle = pad.Circle.centerRadius(center, radius);

	/**
	* A quick implementation of a Slider class
	* Returns a Measure object defined by the slider's state
	*/
	function Slider(pad, x, y, width, minValue, maxValue, startValue) {
	var axis = new pad.Line(x, y, x + width, y),
	t = (startValue - minValue) / (maxValue - minValue),
	handle = pad.Node.along(axis, t, {clamp: true});
	var measure = pad.Measure.compose(handle, function() {
	return minValue + (maxValue - minValue) * (handle.x - x) / width;
	});
	var label = pad.Label.from(measure, {round: true}),
	tag = new pad.Tag.on(handle, label);
	return measure;
	};
	body {
	margin: 0;
	padding: 0;
	}

	#sketchpadDiv {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 1px solid #000;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

	#sketchpadCanvas {
	position: absolute;
	}