In an Adobe AIR project I needed a gauge component for Flex 4. I found the Degrafa Gauge to my liking, but I ran into trouble as Degrafa isn’t ready for Flex 4 yet. I continued to dig some and found a prerelease of Degrafa for Flex 4, but the Gauge component wasn’t compatible. Instead of fixing that I decided to build on a version of that Gauge that was built without strings to Degrafa. (Degrafa is wonderful, it’s just that the whole story with a once working component that can’t keep the pace up with Adobe’s upgrades to the Flex platform directed my to build from something with less dependencies.) I found it here: http://www.smithfox.com/?e=48
My version is up on Github now – https://github.com/PEZ/FlexGauge - please feel invited to fork it. If you just want to see it in action I’ve put a demo in my Dropbox: http://dl.dropbox.com/u/3259215/gauge-demo/gaugetestflash.html. The component is both skinnable and stylable even if some of the settings are hardcoded. It looks like this styled to my liking:
Everything is in the green
I’m a bit too tired to write more about it right now, but please ask questions or suggest features/changes to the gauge component.
Dec 08, 2011 @ 20:53:07
I guess this doesn’t work with Flex 3?
Oct 17, 2011 @ 20:00:55
Hi. Great work on the gauge but with flex 4.6 we can’t use import mx.controls.Image… Can you publish the source of GaugeSkins_Skin1.swf?
Thanks
Oct 17, 2011 @ 21:33:56
Unfortunately I don’t have the source for that one. I think I remember that someone has made version wich doesn’t rely on it. But I could be wrong.
Oct 18, 2011 @ 01:00:27
This looks great. But, do I understand this right… this component will no longer function after Flex 4.5?
Nov 06, 2011 @ 21:37:59
hello?
Nov 06, 2011 @ 22:52:27
Sorry for not responding. I have not been coding in Flex for a long while and haven’t followed the events. Still, I’m pretty sure the gauge can be made to work in newer versions of Flex.
Nov 07, 2011 @ 03:06:57
Ah, I see. Thank for the response anyway!
Apr 23, 2011 @ 15:28:52
PEZ,
In the code, I found you import mx.charts.chartClasses.GraphicsUtilities,
and used two functions in the Utilities class.
GraphicsUtilities.setLineStyle
GraphicsUtilities.drawArc
I suggest you directly copy the mx.charts.chartClasses.GraphicsUtilities drawArc function into the your Guage class.
You know, all those classes like “mx.charts.xxxx” are in the datavisualization.swc.
If application used RSL, then it must include the datavisualization.swc.
Feb 24, 2011 @ 21:58:53
Hi,
Very good work.
I need such a gauge for a personal development, so I have downloaded yours.
Is it possible to download the “fla” source code to make some modifications ?
Thanks.
Fred
Feb 25, 2011 @ 08:38:15
Glad you find it useful! The source code is on Github. It’s for Flex 4. .fla sounds like you’re working in Flash? Or do you mean the actual gauge artwork? I don’t have the source for that. Maybe SmithFox has it. You can always draw something yourself and just use the same symbol names. (Well, maybe, I know I can’t. I don’t have Flash and I suck at artwork. =)
Feb 25, 2011 @ 14:52:44
Yes, it’s the flash fla source code I’m looking for to know how to make a swf wich can be handled with flex 4.
I’m going to ask it to SmithFox.
Thanks for your quick answer.
Fred
Feb 06, 2011 @ 16:13:18
BTW, I can not access dropbox from China :(
Feb 06, 2011 @ 18:07:30
Oh, I had no clue about that. Sorry for posting my comment on your site so many times. I couldn’t read the submit button labels and then that message about comment awaiting approval was also in Chinese. =)
I’ve put a copy of the demo here: http://files.betterthantomorrow.com/gauge-demo/gaugetestflash.html Hope you can reach it from China?
Feb 07, 2011 @ 05:57:04
I ever suffered from the spam comments, so I enable the moderate comment function for my blog, and also enable some anti-spam module.
Now, I can view the demo, very cool! I noticed that the pointer is transparent :)
Feb 06, 2011 @ 16:07:45
@PEZ, If you check the code, you can find that
if (r.target != null && r.isPlaying) return;
in updateDisplayList function, that is to avoid frequently invoke the updateDisplayList caused by Tween changing the pointer object’s rotation property more times during the tween.
Actually, I’v found the root cause, and give a solution to resolve the issue without above code, that is set the pointer object includeInLayout = false when createChildren.
You can refer http://www.smithfox.com/?e=56 for the detail.
Feb 06, 2011 @ 18:09:00
Thanks, I’ll try to understand what it is about even if the prose is in Chinese. =)
Feb 07, 2011 @ 05:45:57
I have added some English comments into my article
Feb 07, 2011 @ 08:22:00
Thanks! Right now the AIR app I am building likes the fact that each tween step is causing an update. I set the app icon in the OS X dock from the gauge and what happens is that the app icon is animated too. Quite cool. But I’ll try add your findings anyway so that it is under the control of the component user what the behavior should be.