Revised Gauge Control

I’ve been looking over my past posts and thought it was time to update the old Gauge control I introduced way-back-when. In looking over that code I thought it was time for a re-write and a simplification.

This is the result:

This gauge control is simplified in a couple of ways:

  • First, there are just two parts: the face and the needle. Both of these are skins which you can change.
  • Second, the skins are directly ‘attached’ to the control. In the previous versions of this component I had created classes which then held the skins. I wanted to show you a more simplified approach and it works well here.


I also made adjustments for the placement of the needle and the label as well as the start angle of the needle and its sweep from minimum to maximum value. If you play with the example above you’ll see that as you change the needle’s position the start and sweep angles reset to favored positions. You can change them, of course. For example, if you set the needle position to “top” the start and sweep angles reset to 45 and -90 respectively. This puts the minimum value on the left side. If you want the minimum value to appear on the right side and have the maximum value on the left, then set the start angle to 135 and set the sweep angle to (positive) 90.

This set of properties along with custom skins can give you very flexible gauges.

I did not in this version of the gauge control include interaction. You can basically copy the code from the previous version and use it here. I recommend you extend this control and create an InteractiveGauge control or something like that.

I hope you find the control useful, but more important, I hope you find this example of writing a Flex control simple and easy to follow.

View and download the source code.

9 Responses to Revised Gauge Control

  1. Robert says:

    Looks great! One question, is this a Flex 3 component? I am getting some errors when i import into Flex 3 “unable to open ……\libs”. I am completely new to flex 3 so is this a configuration problem on my end?

    Thanks for the hard work
    ————-
    It is a Flex 3 component. Create a new Flex project, then import just the source (not the . files).

  2. Robert says:

    Thanks for the help getting started in Flex 3.

    Another question is can the needle be graphically skinned? I have tried embedding a .png like the gauge face with:

    needle-skin: Embed(‘test/skins/needle.png’);

    and this gets the graphic in but distorted and in a position off center. If this is possible where do i set the the position and scale of a .png needle?

    thanks for the help and sharing this component.

  3. Peter Ent says:

    Peter: I forgot to do that! Thanks for the reminder. You have to set the (0,0) position of the graphic so that it sets in the middle of the tail of the needle, then draw the point of the needle to the right. This isn’t great with graphic programs, though, so it may be off. The better way to do this is to create another UIComponent that holds the needle skin. Then position that. This way the needle graphic can be whatever you want and just have a rule that the center of the graphic becomes the center of the needle.

    I’ll update this article with this information.

  4. Robert says:

    Thanks Peter for looking into this. Sounds like it may be beyond my two days with flex 3 capabilities. Looks like I may have to wait for your update to this article. In the meantime I will read some more of your articles on flex 3 and maybe come up with some cool gauge graphics.

    thanks again

  5. George Sibbald says:

    I tried to set this up usining dreamweaver mx (cut and paste)

    But not luck. What am I missing>
    ————
    Peter: You must use Adobe Flex Builder 3 (or 2), not Dreamweaver.

  6. Baldeep Hira says:

    Looks like the source control system is down. I’m getting HTTP 404 when trying to download or view the source for the gauge. The gauge looks slick, would love to view the code… GREAT JOB!
    —————–
    Peter: I fixed the link; please try again. You can also get revised code from this article: http://weblogs.macromedia.com/pent/archives/2008/02/gauge_revisited.cfm

  7. Thanks for the source code, I am planning to use it in my site.

  8. Want to add easing or bounce to the needle movement?

    In Gauge.as
    1. import the appropriate easing class:
    ex: import mx.effects.easing.Elastic;
    2. set the easing function right after the rotateNeedle instance is created:
    Ex:
    rotateNeedle.duration = 1000;
    rotateNeedle.easingFunction=Elastic.easeOut;

    For a list of easing function options see this page:
    http://livedocs.adobe.com/flex/201/langref/mx/effects/easing/package-detail.html

    Thanks for the code Peter!

  9. Michael says:

    It looks like the view and download source links are broken, can I get this source somewhere? Thanks.