Gauge

by Gregory Guidero

HTML

<input id="temp" type="text" />

JavaScript

var g = new gauge();
    var temp = document.getElementById('temp');
    temp.addEventListener('input',function(ev){
        g.setValue(this.value);
    });
function gauge()
{
    this.debug = false;
    this.allowConfig = true;
    this.ticks = 20; //even only
    this.majorTicks = [];
    this.majorTickLength = 15;
    this.majorTickThickness = 2;
    this.majorTickColor = '#000';
    this.minorTickLength = 5;
    this.minorTickThickness = 1;
    this.minorTickColor = '#000';
    this.numberTickFontSize = 12;
    this.numberTickFont = 'Georgia';
    this.numberTickFontColor = '#000';
    this.tickDangerColor = '#F00';
    this.needleColor = '#F00';
    this.needleThickness = 3;
    this.value = 500;
    this.hasNeedle = true;
    this.hasBar = true;
    this.barWidth = 5;
    this.barColor = '#F00';
    this.largeValue = this.value;
    this.largeValueFontSize = 24;
    this.measurement = 'RPM'
    this.outerRingThickness = 2;
    this.startValue = 0;
    this.endValue = 1400;
    this.layer = 0;
    this.width = 300;
    this.height = 300;
    this.speed = 10;
    this.increment = 5;
    this.gauge = null;
    this.context = null;
    this.startDegrees = 135.0;
    this.endDegrees = 405.0;
    this.isConstrained = true;
    this.hasInnerGauge = true;
    this.isAnimating = false;
    var obj = this;
    
    function create()
    {
        obj.gauge = document.createElement('canvas');
        obj.gauge.setAttribute('component','gauge');
        obj.context = obj.gauge.getContext('2d');
        document.body.appendChild(obj.gauge);
        obj.drawGauge();
    }
    
    this.drawGauge = function()
    {
        obj.gauge.width = obj.width;
        obj.gauge.height = obj.height;
        obj.majorTicks = [];
        var centerX = (obj.gauge.width/2);
        var centerY = (obj.gauge.height/2);
        var majorTickRadius = reverseLength(obj.majorTickLength);
        var minorTickRadius = reverseLength(obj.minorTickLength);
        if(!isEven(obj.ticks))
       ...