Gauge Component v.02
Author: Thomas Gonzalez
After the response I received on the first release of the Gauge component I thought it was time for an overhaul of the code since this original code was written when I was learning Flex back on the alpha bits of Flex 2.0. Since that time Flex has moved on, and I have learned quite a bit.
This version of the component is a complete re-write of the code and is vastly simpler and easier to read/extend. First a thanks to Peter Ent, as his stab at a gauge was infinitely better thought out than mine and much more compact, the component code is very close to his, with a couple of modifications. The other bigger, and what I consider very significant change for this component is how it leverages Degrafa… which if you are not familiar with and you are doing any component development you are doing yourself a disservice by not taking a close look at it. I used this little mini project as an excuse to really dig in and find out what Juan, Jason and the rest of the Degrafa team had been working on since they seemed to be popping up everywhere.
When I dug into Degrafa I was REALLY impressed at several levels. Not only are the examples just plain sweet visually, but the framework itself is very elegant, compact, and infinitely extendable. In this version of the gauge I built two skins completely in Degrafa and MXML markup, you can toggle the skins and they will still respect the color of the styles you choose. BTW, the skins can be set via CSS, and you can have separate skins for each part of the gauge (bezel, face, pointer, center, indicators.)
The beauty of this approach with Degrafa is three fold. First I am using MXML to create complex geometric relationships which is infinitely easier to do in markup versus procedurally because the markup itself creates visual relationships through the inherent nesting and grouping structure of XML. Second, Degrafa does a great job of leveraging Flex’s binding mechanism, which in my opinion is one of the most powerful things within Flex. Finally the workflow is vastly improved, I can do everything from flex builder and not jump between Flash for building vector assets and exporting to symbol .swfs etc…
On some later post I will probably dive into the framework itself, since I ended up having to extend it in a couple of areas and it only took me a few minutes to do so. For example the “tick” marks you see on the gauge I ended up copying the VerticalLineRepeater which extends the base Repeater class, and within 20 minutes after modifying a few methods and adding a couple trig functions, I had this arc of lines that I could declare in MXML… I remember the first time I did that in the original gauge component it took me hours to fine tune procedurally via the API.
At Juan’s urging I wanted to get this up so it could be shared with the community, as such the code might stand a little clean up here and there, but overall it should be pretty easy to follow. I am also going to be writing an article for InsideRIA that goes into all the gory details of building out this component with Degrafa, which was actually quite simple and very enjoyable.
----------------------------------------------
Caveat... The tweening of the pointer is a little flakey, as I threw it in at the last second, and I need to do a better job of handling the rotate effect and updateDisplayList collisions.
Update: The newest version of this component can be found here.
What an amazing component. Is there a way I can use a vector swf as the gauge's background?. I need a half-circle gauge with a gradient marker. I'm hoping you could point me to a good start to acomplish this, thank you
Hi tomo,
You have a couple of choices, you can either alter the degrafa skin located in the com.brightPoint.controls.gauge.skin with degrafa markup, and use a set of SVG paths as exported from Flash for the background within that skin.
OR
You can take a look at the v1. version of this component where each asset is actually a .SWF symbol. In this case you will want to export your background with a neutral base color of #777777, give it a symbol name, and then alter the Gauge class for the "face" or "bezel" of the gauge and update the appropriate constants in the Gauge.as class as well as the private symbol in the class declaration.
The idea behind this new version is that it would be much easier to do exactly what you want via the Skin itself in Degrafa.
- Tom
Wow, a million thanks tom, that's the fastest response I've got so far. Yeah, I was afraid of rolling my sleeves and getting knee deep w/flex's code. Many thanks duh, by the way, I'll like to increase the size of the score, and perhaps it's font face to something more digital-ish. Any suggestions on the best way to tackle that? thanks man!
The v2 Gauge has a "labelStyleName" style, which allows you to declare a CSS style with whatever font attributes you want... Just create the Style like "myGaugeLabel" and set the property of the gauge component accordingly.
If you can it would be great to post your final work so I can link to it, I would love to see how you extend it.
- Tom
Thom,
Sorry to post again, but I ran into a problem. The start/end angles aren't working. In my main mxml file I did: startAngle="90" endAngle="270", I also changed them on the GaugeSkin.mxml (lines 41,44). I'm still seeing the previous settings (45,315).
On a better note, thanks for your suggestion, I was able to do what I wanted, but it took allot of pies to achieve. It seems that defraga's repeaters don't support independent colors... I had to do them one-by one. I don't supposed you could write them in a mxml loop of some kind.
Thanks for any help.
tomo
Hello Tomo,
Hmmm... not sure why the angles aren't working... it could possibly be a bug, but first I would suggest you use the sample test container that comes with the download and adjust the angles via that to see if it is responding correctly. If it is, then I would look to see what might be different in your code (btw 0 degrees would be a 6 o'clock and 90 degrees is at 3 o'clock)
In regards to Degrafa's repeaters, we/they are working on some updates that will allow you to customize colors in the repeater stack.
I hope those suggestions help
- Tom
That'll be great, it'll save me a ton of lines. I got the download files, and when I adjust from the form, it works perfect. I deleted the form since I'm trying to package it for actual use. I found the solution. You have to do it in the "DegrafaGauge.as" file as well. It almost sound to me like it doesn't like setting some things directly on the controls:DegrafaGauge tag... I had the same problem with the indicatorCrownColor. If you don't set a color for it, it won't display the crown.
Tomo,
Those most definitely sound like bugs in my code ;) I probably didn't bind those styles to private/protected var's and was just lazy about grabbing the style attribute directly from the getStyle(). I am not sure when I will be doing another release, so I would suggest just adding that yourself if you want. Glad you got it going!
- Tom
I'm glad it wasn't me...been toying w/you code, pretty cool stuff. One last thing and I won't spam yer blog even more :).....I added a "click="textbox.text='sometext'"" to the gauge, and set it up to use the handcursor, but no click event is fired.... how can I make it so when someone clicks anywhere on the gauge it calls something? thanks
Hi Tomo,
Hopefully others find this thread informative as well :)
In regards to the click event, it was purposely disabled, but if you go to the clickHandler method on line 443 and comment out the stopImmediatePropogation call you should be good to go and receive your click event :)
- Tom
Tom,
U're a freaking GENIUS!! Thanks a bunch man! that did it. Defraga is so cool, I can't wait what else they come up with. Thanks again for such a nice component.... I don't supposed you have a tutorial on how to make the gauge into a swc component to reuse on other projects? :)
Hi Tomo,
That is great! I am glad it worked. Yeah Degrafa is REALLY cool, and in fact, I have joined the team (yet to be officially announced.) But you can expect more good things to come.
In regards to creating a .swc for the gauge, you would just bundle it as you would any other Flex .swc.
- Tom
Thanks so much for this awesome gauge!
I'm a Flex newbie and have learned quite a bit from working with your gauge.
I had the same problem as Tomo using startAngle & endAngle: these properties/styles draw the tick marks at the right places, but the gauge indicator was not starting/ending at the right angle.
I added getters and setters for the minimumAngle and maximumAngle properties in DeggrafaGauge.as and that made the gauge indicator start/stop at the right places. Probably not the elegant solution, but hey I'm a newbie!
Thanks so much for the awesome component, and even more for everything I've learned from it!
Hi Sunil,
That is awesome that you were able to learn more about flex by dissecting the gauge. As you spend more time with flex you will realize this is NOT the way components are built in the framework. The approach used on the gauge is a much lighter approach and while working within the SDK conventions, it does not use half as many method calls.
Your fix sounds good to me, by just making those literals via set/get versus being an anonymous style.
For you and any others who skin or modify the component I would love to post examples.
- Tom
Very nice -- both versions. I was attracted to your old gauge because it had alert regions. I guess I'm lazy, but I don't see how to implement those in the V.02, and the dashboard I'm working on requires them. I would also like to dampen the "bounce" I get in the first version.
Hope you can help.
AP,
You are right the second version does not currently support alerts, although adding them via the Gauge skin and some public properties would be pretty trivial.
The bounce in the first version was done by manually creating a set of sequence rotation effects... at the time (this was Flex 2 Beta) I did not realize I could simply apply an easing function to an effect. So the solution would be going into the code of the first component and removing all the sequence effects and just have one rotation effect with a bounce easing function set to your liking.
I hope that helps.
- Tom
Thanks for your quick response. I guess I either take the bounce out of v0.1 or figure out how to add the alerts to v0.2. I'm not sure which way to go, but if I do anything useful, I'll post the link here. Once again, thanks for publishing the gauge and being so responsive.
Where is the code for this, are you publishing the code? It looks fantastic, better than all the others i could find. I'd like to tinker with it...
Jean,
If you click on the link at the top of the post, and then right click on the demo you will see a "View Source" option, that will show you all the code for this.
- Tom
Does this demo require installing degrafa or some degrafa components in order to run?
Everything you need to compile and run the demo is included in the source files, including the "libs" folder which has the correct Degrafa .swc file.
is there a way to programmatically set the value of the gauge?
You can set the value of the gauge via the "value" property either directly in MXML or via AS.
Thanks
Does your gauge component support tooltips?
big dummy,
I would suggest you look at the source code to see what is supported within the gauge. A quick scan of the public properties and styles will show you what is available. Right now I don't have it supporting tool tips, but you could easily add that.
- Tom
Thanks Tom,
I've been looking through the source code but I'm very new to Flex and it's still a bit hard to follow. If you don't mind answering one more I can't figure out, is there any way to set the color of the gauge label? It currently seems to inherit the color of it's parent control.
BD
big dummy,
I can appreciate that your are new to flex. FlexCoders (http://tech.groups.yahoo.com/group/flexcoders/) at yahoo is a great source of information and help for basic flex stuff. The nature of your questions is much more general than the specifics of this gauge component, which is probably more appropriate for intermediate to advanced Flex developers.
But to answer your last question, like many other flex components the gauge supports a "LabelStyle" style, which allows you to assign it a CSS style that you have declared within your code. In that privately declared style you can set all relevant font attributes (like size, color, weight, etc...)
i.e. <DegrafaGauge labelStyle="myLabelStyle" .../>
- Tom
To Everyone:
I have just posted a new version of this control with enhancements. Look for the entry Gauge Component - New Features
- Tom