requirebin sketch

index.js

var Dial = require('canvas-dial');

var settings = [
  {
    diameter: 20,
    width: 8,
    outer: 15,
    gap: 0,
    background: '#ccc',
    foreground: '#c00',
    min: 0,
    start: 0,
    max: 1
  },
  {
    diameter: 20,
    width: 8,
    outer: 15,
    gap: 10,
    background: '#ccc',
    foreground: '#000',
    min: 0,
    start: 0,
    max: 1
  },
  {
    diameter: 20,
    width: 8,
    outer: 15,
    gap: 10,
    background: '#eee',
    foreground: '#00f',
    min: 0,
    start: 0.5,
    max: 1
  }
];

settings.forEach(function(settings) {
    var gauge = new Dial(document.body.appendChild(document.createElement('div')), settings);
    gauge.draw(0.5);
    var range = document.body.appendChild(document.createElement('input'));
    range.type = 'range';
    range.min = 0;
    range.max = 1;
    range.step = 0.001;
    range.oninput = function(e) {
      gauge.draw(parseFloat(e.target.value));
    };
});

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"canvas-dial":[function(require,module,exports){function Dial(element,options){var d2r=Math.PI/180;this.canvas=document.createElement("canvas");this.options=options;this.start=Math.PI/2+d2r*this.options.gap;this.end=Math.PI*2.5-d2r*this.options.gap;this.startAngle=this._lerp(this.end,this.start,this._unlerp(this.options.start));this.element=element;this.element.innerHTML="";this.element.appendChild(this.canvas);this.canvas.width=this.options.diameter*2;this.canvas.height=this.options.diameter*2;this.canvas.style.width=this.options.diameter+"px";this.canvas.style.height=this.options.diameter+"px";this.context=this.canvas.getContext("2d")}Dial.prototype._lerp=function(a,b,t){return a*t+b*(1-t)};Dial.prototype._unlerp=function(t){var a=this.options.min,b=this.options.max;return(t-a)/(b-a)};Dial.prototype.clear=function(){this.canvas.width=this.canvas.width};Dial.prototype.draw=function(value){var d2r=Math.PI/180;this.clear();this.context.strokeStyle=this.options.background;this.context.lineWidth=this.options.width;this.context.beginPath();this.context.arc(this.options.diameter,this.options.diameter,this.options.outer,this.start,this.end);this.context.stroke();var angleDiff=this._lerp(this.end,this.start,this._unlerp(value));this.context.strokeStyle=this.options.foreground;this.context.beginPath();this.context.arc(this.options.diameter,this.options.diameter,this.options.outer,this.startAngle<angleDiff?this.startAngle:angleDiff,this.startAngle<angleDiff?angleDiff:this.startAngle);this.context.stroke()};if(typeof module!=="undefined")module.exports=Dial},{}]},{},[]);var Dial=require("canvas-dial");var settings=[{diameter:20,width:8,outer:15,gap:0,background:"#ccc",foreground:"#c00",min:0,start:0,max:1},{diameter:20,width:8,outer:15,gap:10,background:"#ccc",foreground:"#000",min:0,start:0,max:1},{diameter:20,width:8,outer:15,gap:10,background:"#eee",foreground:"#00f",min:0,start:.5,max:1}];settings.forEach(function(settings){var gauge=new Dial(document.body.appendChild(document.createElement("div")),settings);gauge.draw(.5);var range=document.body.appendChild(document.createElement("input"));range.type="range";range.min=0;range.max=1;range.step=.001;range.oninput=function(e){gauge.draw(parseFloat(e.target.value))}});

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "canvas-dial": "1.0.0"
  }
}

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

made with requirebin