Dialify: Meter Elements as Canvas-Generated Dials

About

One of the new semantic elements given to us by HTML5 is the <meter> element. This enables us to represent a value in between a specified minimum and maximum. Unfortunately as yet, not many browsers support it, and those which do render a simple filled-bar. For some scenarios, this might be exactly what is required, but in other cases it might be desirable to have a more graphic representation.

This began as an experiment to see it were possible and feasible to replace these meter elements with a representation of a dial or gauge, much as you might find on a car's dashboard. As it turns out, the answer is a resounding yes. Not only is it possible, it seems an ideal thing to build into a jQuery plugin.

This page is a result of my plugin-building efforts. At the moment it is still very much a work-in-progress, but as you can see from the demos, it does function and provides a bunch of different configuration and customisation options, including the ability to use an image to render a completely custom dial in addition the simple default generated one.

In the near future, I will be making the initial release of the plugin to the world (which I will be sure to blog about). Until then, this page can serve as a taster for what is to come whilst I tidy up the code for human consumption.

Please see the source for this page to see how each of the demos is created. When I release the plugin, I will also write some documentation (with a load of examples).

Demos

Defaults

<meter class="demo1" value="0" min="0" max="100"></meter>
<meter class="demo1" value="25" min="0" max="100"></meter>
<meter class="demo1" value="50" min="0" max="100"></meter>
<meter class="demo1" value="100" min="0" max="100"></meter>
$('meter.demo1').dialify();

No Dial Face

<meter class="demo2" value="0" min="0" max="10"></meter>
<meter class="demo2" value="5" min="0" max="10"></meter>
<meter class="demo2" value="8" min="0" max="10"></meter>
<meter class="demo2" value="10" min="0" max="10"></meter>
$('meter.demo2').dialify({ 'drawDialFace': false });

Custom Canvas Size

<meter class="demo3" value="0" min="0" max="12"></meter>
<meter class="demo3" value="2" min="0" max="12"></meter>
<meter class="demo3" value="6" min="0" max="12"></meter>
<meter class="demo3" value="12" min="0" max="12"></meter>
$('meter.demo3').dialify({ 'width': 140, 'height': 120 });

Custom Min/Max Angles

<meter class="demo4" value="5" min="5" max="15"></meter>
<meter class="demo4" value="10" min="5" max="15"></meter>
<meter class="demo4" value="12" min="5" max="15"></meter>
<meter class="demo4" value="15" min="5" max="15"></meter>
$('meter.demo4').dialify({
    'pointerRange': { 'min': 0 - Math.PI, 'max': 0 }
});

Custom Pointer Rotation Point, Pointer Length, Scale Arc Radius

<meter class="demo5" value="0" min="0" max="10"></meter>
<meter class="demo5" value="2" min="0" max="10"></meter>
<meter class="demo5" value="5" min="0" max="10"></meter>
<meter class="demo5" value="10" min="0" max="10"></meter>
$('meter.demo5').dialify({
    'pointerRotationPoint': { 'y': 60 },
    'scaleArcRadius': 36,
    'pointerLength': 24
});

No Spindle, Custom Class Applied to Canvas Elements

<meter class="demo6" value="0" min="0" max="10"></meter>
<meter class="demo6" value="5" min="0" max="10"></meter>
<meter class="demo6" value="9" min="0" max="10"></meter>
<meter class="demo6" value="10" min="0" max="10"></meter>
$('meter.demo6').dialify({ 
    'class': 'dialify-demo6-custom-class',
    'drawSpindle': false 
});

Custom Colours

<meter class="demo7" value="0" min="0" max="10"></meter>
<meter class="demo7" value="4" min="0" max="10"></meter>
<meter class="demo7" value="5" min="0" max="10"></meter>
<meter class="demo7" value="10" min="0" max="10"></meter>
$('meter.demo7').dialify({
    'dialFaceColor': 'rgb(125, 172, 191)',
    'dialOutlineColor': 'rgb(59, 86, 97)',
    'scaleRangeColor': 'rgb(145, 195, 217)',
    'pointerColor': 'rgb(255, 255, 255)',
    'spindleColor': 'rgb(255, 255, 255)',
    'spindleOutlineColor': 'rgb(59, 86, 97)'
});

Render Using Custom Image

<meter class="demo8" value="0" min="0" max="10"></meter>
<meter class="demo8" value="5" min="0" max="10"></meter>
<meter class="demo8" value="7" min="0" max="10"></meter>
<meter class="demo8" value="10" min="0" max="10"></meter>
$('meter.demo8').dialify({ 
    'image': 'meter.png',
    'width': 120,
    'height': 90,
    'pointerRange': { 
        'min': 0 - (Math.PI * 0.609), 
        'max': 0 - (Math.PI * 0.382) 
    },
    'pointerRotationPoint': { 'y': 130 }
});

meter.png