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.

7 Responses to Gauge Revisited

  1. Robert says:

    Thanks Peter for the fast update of the gauge component. This is fantastic. I has sparked my interest in Flex 3. Now that I have jumped in with both feet, I have started to explore the programmatic skin for needle and face with the Flex 3 drawing API. Can you recommend any resources the show the internal capabilities are? I have noticed there are alot of Flex Explorers out there. Are there any out there that would help in learning how to draw complex objects with the API? Thank you once again for sharing this component.

    Peter: The Flash people are the best source for drawing objects with the API. Try searching the web for Flash forums, blogs, etc.

  2. Fernando says:

    I´d like to know how I could use a toolTip on a needle skin (at least on a programmatic skin), since it doesn´t extends UIComponent.


  3. Fernando says:

    The link of the source code is broken…

    Oh, ignore my previous message. Now the needle is a UIComponent, so we won´t have that problem. But could you say me how I could use a tooltip on skin (programmatic)? Even the needle is not a programmatic skin anymore, I will work with other skins, like zones skin (intervals of the gauge).


  4. Peter Ent says:

    You do not have to use ProgrammaticSkin when creating a skin – you can use UIComponent just as easily. Normally you’d want something light weight for a skin, but if you only have a couple of gauges, then using UIComponent wouldn’t be a bad choice if you want some extra functionality.

  5. Deepak says:

    Links are broken…. Can you kindly fix it???
    I have a need of rotating a needle(image) from it’s center……

    • Peter Ent says:

      I believe I no longer have these images, I’m afraid. You can see from the dates in the article that it is pretty old. I’ll see if I can find them, but in the years that have past I’ve changed computers and probably lost them. I thought they would come back when the blog was un-archived, but they did not.

      Plus, there is a completely different way to do this in Flex 4, so perhaps I’ll try and revise this for that.

      • Deepak says:

        O ooo…… 🙁
        Yeah, I’ve been trying it out in FB4….. My need is to design a car speedo meter. I have created a circle with border and a center point(a smaller circle) in it. This is dynamic, radius of it can be changed however the user wants. To point the speeds there, I am using a needle image and as you have explained, I’m trying to use Rotate class to rotate the image off it’s bottom part and not center of the image. But I’m not able to fix this needle on center of my circle :(, I want to have same center for both needle image and my circle… anyway, hope to see another such example using FB4 soon… 🙂

        And Peter, thank you soooo very much for all the blogs(especially that you have been publishing online. All most all the flex knowledge that I have gained is from you. You have been my ‘Guru’ 🙂 So please accept my hearty gratitude……..Tried so many ways(by commenting in blogs, but no replies 🙁 ) to reach out to you, to thank you. But none worked. I was thrilled to see the reply today…. 🙂