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.