Gauge Revisited

I received a comment on my recent blog article about the Gauge component wanting to know how to use a graphic skin for the gauge’s needle. I should have included that, but since I didn’t I thought I would supplement the article. As it turns out, you can’t just swap a graphic skin for the programmatic skin – in that version of the Gauge control. My bad.

It has to do with the rotation of the needle. I used the Flex Rotate effect to turn the needle and made it rotate the needle about the needle’s (0,0) point.

The problem with using (0,0) is that in a graphic, you cannot have negative pixels. To center the needle you’d have to draw half of it with negative pixel coordinates. That’s not possible, so I had to come up with another solution.

First, I changed my philosophy of using Rotate. Now, rather than rotating about (0,0) I let Rotate determine the center of the needle and rotate it about its own center point.

I then created another class for the Gauge called GaugeNeedle and it hosts the skin. The Gauge class creates an instance of GaugeNeedle, positions it at (0,0) – the upper left corner of the gauge, and sizes it to match the gauge. If the gauge face is a circle, picture the GaugeNeedle as floating in the center of a box with the box sized to fit the gauge’s face inside of it.

The needle skins are now drawn under the assumption that their centers are aligned with the center of the Gauge. If you were drawing a programmatic needle skin, you’d determine the center point and draw from there. Suppose the Gauge is 200×200 pixels. The GaugeNeedle will be sized to fit 200×200 also. So the needle skin should draw its base at 100,100 and draw the point to the right.

A graphic skin does much the same: you’d make a 200×200 image with a transparent background (PNG works best) and put the needle’s base at 100,100 and draw it pointing to the right.

The needle graphic is positioned so that its base is in the center of the image.

When the needlePlacement value is not "center", the box (GaugeNeedle) is positioned so its center point is shifted to where the needle’s base should be. For instance, if needlePlacement is "left", then the GaugeNeedle is not positioned at (0,0) but somewhere to the left of that so its center point is drawn closer to the left edge of the Gauge face.

The updated code is here for you to download.

I think you’ll find skinning this version of the Gauge a bit easier.