Dial Gauges - Making the Web Gauges

Back to Using Web Gauges

Making the Web Gauges

To make the previous gauge, we need an image. The image needs to be 320 x 320. Any image of any kind will do, as long as it can be used in the background of a div. I used Gimp (similar to Photoshop, but free), and made huge 3200 x 3200 dials, then reduced them. A dial image does not need to be a dial. It could be your cat. Whatever you want. This is where you get artsy and I leave you to it.

The needle, in my case, is 20 pixels wide, by 102 pixels high. In the JavaScript code, you define the point on the needle around which it will rotate. For my needle that was 10x, 102y. That is the bottom center point in the needle. The needle background must be transparent, so I used a png file. If you make a needle that is 100 pixels long and 50 pixels wide, you would choose 25x, 100y for your needle center.

A Second Gauge

This gauge is smaller, but uses the same code. The gauge is 250 pixels square, and the needle is 115 pixels long by 16 pixels wide. The code for it is seen below. Notice we set the "needleCenter" property to the x,y coordinates of the rotational center of the needle.

var windGauge = new gauge(

windGauge.needleCenter = [8,105];

var position = 0;
var dir = 1;

function moveNeedle() {
    if (dir === 1) {
        if ((position += 0.5) > 359) dir = 0;
    } else {
        if ((position -= 0.5) < 1) dir = 1;

And Finally

This gauge is silly, and is only to show that this has nothing to do with gauges - it is just one image spinning over another. The gauge JavaScript takes an input of your units and converts it to degrees, then positions the pointer there. It doesn't care what the units are, and it doesn't care what number you pass. There is no range checking, so you can show 1000°F on a 100°F thermometer - it will just have wrapped 10 times before ending somewhere.