Gauge Component v.01
Author: Thomas Gonzalez
Well, the time has come for me to give back a little to the community from which I have learned and benefited so much. People like Ely, Doug, and too many others to list have been a source of inspiration and a repository for useful components that I have used across many projects.
This gauge component actually stems from some of my first work with the beta bits of Flex 2.0 over two years ago. For business and IP reasons I could not share this code, but now as conditions have changed I can offer this code to the community under an MIT license. It is far from a polished component, but the foundation is there. Follow this link to BrightPoint Inc. to go see the gauge in action and right click for view source.
Some of the things on the to do list will be the following, based on interest from the community and feedback.
1. ASDocs (duh...)
2. Exposing the .swc skin more easily so all the gauge parts can be swapped via MXML or at runtime.
3. Cleaning up some of the min/max label stuff (try clicking on the radio buttons at 5 and 8 o'clock.)
4. Providing the user a way to input values via scroll-wheel our mouse.
At some point I might create a commercial version of this component, but everyone is free to use this code in whichever way they see fit.
Any suggestions/comments for improvement are welcome.
Update: The newest version of this component can be found here.
That's pretty cool.
Thomas,
That is just too sweet. Nice job! Thanks.
Mark,
My pleasure, enjoy. For anyone else who ends up using this component I would love to see how it has been implemented. Just leave some links here in the comments.
- Tom
Thomas,
Nice work!
A good addition to your to do list would be to have a gradient transition between the red, yellow and green color regions. That'll make it look really cool.
Thanks. Very useful component.
Karan
G-R-E-A-T component. Thanks for sharing
Karan,
Thanks for the suggestion. Right now you can actually add as many different color regions as you want via MXML, with whatever colors and alpha levels you choose. But having them all "blend" would be an interesting feature.
- Tom
I have osted comment but it seems it did not went through ....
it would be great if you could expose turnSpringEffect on/off variable, or even better to expose a spring tension adjustment variable if set to 0 will basically mean same as being turned off, what I'm try to achive is to get some how gauge push forward effect with some tension effect , even if loading happens very fast, .
Levani,
Thanks for the feedback. I will probably do another rev on this component shortly, and I will add that feature.
- Tom
This is very nice. I especially like the bounce effect for the needle when the value changes.
Hi Thomas,
I've slightly modified the the gauge component to use as a preloader and this works fine. However when I try to move the component off stage using TweenLite, I cannot get the component to move. Scaling and Alpha tweening work just fine.
Any idea why this happens?
Thanks!
Hi Sander,
Hmmm... that is interesting. Without seeing the code I am not sure how much I can help. The v1 of the component does some funky stuff inside it (as I was learning Flex as I built it over 2 years ago.) Have you tried using the v2 version I built, it is much cleaner and you might have some better results.
- tom
Thank you for sharing your work. This component works excellently for my application. I was wondering if you would be able to share the .fla for the skin. I would like to extend the component to have a second needle. I would like to represent trend data. Thanks again!!
Hi Jenn,
I am glad the component is working well for you.
I would highly recommend using the V2 version of this component (more recent blog posting) as all the assets are built using markup and are easy enough to change if you know a little MXML. The code on the V2 version is also a lot tighter and easier to extend. BUT, if you want to stick with this version and want the FLA, just shoot me an email at tgonzalez "at" brightpointinc.com and I will send you the FLA.
- Tom
Beautifuly done, Thanks allot!!
is it posible to recieve the fla file?
Thanks again
Uri
Beautifully done, Thanks allot!!
how cat i recieve the fla?
Thanks again
Uri