Gauge Component - New Features - v04
Author: Thomas Gonzalez
First a thanks to everyone who has commented and used the previous versions of the gauge component seen here.
A few weeks ago a publicly traded company (that has asked to remain anonymous) hired me to make some improvements to the gauge to meet some of their specific needs. Some of the improvements are things that other people had asked for, so I offered to give them a discounted rate if we could keep the improvements under the original open source license. It was more important to me that I be able to share the enhancements with the community than the additional revenue I would have generated to lock up the intellectual property.
So here is a list of the latest enhancements.
1. Bounce Effect can now be set on/off by a boolean useBounceEffect. (code changes in control.)
2. Tick Mark Alignment Fixed - Tick marks for the gauge skin now use a best fit algorithm to align exactly with the min/max angles (before they sometimes would not cover the full range. (code changes in skin)
3. A X-Offset style has been provided for the value label placement (code changes in skin and control)
4. Alert Levels: A popular request was the addition of alert levels, something that I had in the original gauge I built. The gauge now supports contiguous alert levels by passing it an array of alertValues, alertColors, and alertAlphas. The control expects that the alertColors and alertAlphas will have one element less than the alertValues, since the alertValues contains the additional min or max boundary element, and the colors/alphas apply to the range within the boundary described by the alertValue array. (code changes in skin and control)
5. Log AND Linear scale: This was by far the most complex enhancement. The gauge now supports movement through a log scale as well as the original linear scale, and since my math skills seem to be stuck somewhere between 8th grade trig and 9th grade algebra it took me a while to figure out the algorithm to support not only programatic value assignments, but also when a user clicks along the and sets the value directly - yes now I remember that, Math.pow(10,value) is the inverse of Math.log(value)/Math.LN10 :) This log scale also gets applied with the alert ranges, and the skin leverages the now public caclulateAngleFromValue() function exposed by the control itself - which takes into account the min/max value range, the min/max angle range, AND the linear or log scale. (code changes in control)
I have tried my best to run it through a bunch of tests and ferret out any bugs, but if anyone finds something I missed please post and comment, and I will try my best to fix or point you in the right direction. Once again this code is posted under the every friendly MIT license.
Check out the sample here, with full source code.
Note: This gauge uses the latest version of Degrafa Beta 3, please reference the included .swc - as older versions of degrafa will cause conflicts.
I've been searching for some online inspiration of "Knob behavior" in customizable components. Mine is not ready for primetime yet.
http://keith-hair.com/blog/2008/07/25/nice-knobs/
Nice features, you have. these are good features for knob behavior too.
Hi Keith,
Yeah, that was the idea. You can simply swap skins and have this behave as a knob/dial. In the sample given I have included a simpler skin that behaves exactly like that.
I would love for others to create their own skins and post them. Degrafa is ideal for that type of stuff.
- Tom
This comment has been removed by a blog administrator.
Fritz,
You can contact me directly at tgonzalez [at] brightpointinc.com, but I did send you an e-mail.
- Tom
The new version with the alert levels look great Tom. I have a question, I'd like to put some labels on the min-max values of the gauge, could you give me any advice how to approach that?
Hi BD,
That is a great question!
There are two ways you could approach it. One, by altering the Degrafa Gauge Skin, and the other by alerting the control itself.
Since the current value label is in the control right now it might be easier to start there. But, I think ideally all of that stuff (including the current value label) should be moved to the skins.
So using the label-in-the-control approach you would want to create two new labels (min/max) in the DegrafaGauge.as file. Put the appropriate code in the createChildren() method, and then position the labels on the updateDisplayList() method, using the min/max angle as a reference point to do your math for the calculated radial positioning your min/max labels.
If you are pretty new to Flex it might take you a little while to get it figured out, but if you take your time to really understand the code it is very doable. For someone who has some experience with flex and might have built a control or two it should be a pretty easy addition.
if you end up doing it, we would all love to see the result and you can contact me if you need me to post it online somewhere.
Good Luck,
- Tom
Thanks Thomas. My boss wants me to do it so I'll basically be paid to figure it out, hopefully I'll get it strait, if it's just essentially a matter of copying the value label I can hopefully figure it out, I'm very new to Flex but I've managed to blunder my way through getting a lot of things working so far. If and when I get it I'll let you know. I may have a few more specific questions for you.
Thomas is it ok to post specific questions on the nitty gritty of this in here? Or would there be another better venue for that somewhere?
BD,
If you have general "approach" type questions this forum is fine. If you need detailed help implementing details and/or troubleshooting that is probably beyond the scope of what I can do in my free time maintaining this blog.
Feel free to contact me directly at tgonzalez[at]brightpointinc[dot]com if you would like to discuss other potential ways that I might be able to help you out.
- Tom
Tom,
Can you answer questions here about implementing the new controls (not modifying)
I'm having some trouble setting the alert values programmatically.
BD
Ok Tom I have a technical question per above, not on customization but just what you have done already. I'm trying to put the Alerts into a gauge control.
I installed version .04 and have one gauge working on my screen.
I defined these variables:
[Bindable]
public var alertValues:String="0,30,70,100";
[Bindable]
public var values:Array=alertValues.split(",");
Then in my init() function which executes "on completion":
centerGauge.setStyle("alertValues",values);
I expected to see the alerts show up on my gauge, but the gauge remained as before.
M.
Hi BD,
A couple of things to help you out.
The gauge also expects that you set a corresponding set of alertColors AND alertAlphas in order for the alerts to show up with the respective alert values. Otherwise nothing shows up. Once again refer to the test code in the sample provided.
For defining arrays you do NOT need to do split's like that. I simply had it in the sample code so it could read user inputed values easily.
You can do var alertValues:Array=[0,10,70,100];
- Tom
Thanks Tom, that worked. I should have noticed there were no default values in the code.
Much appreciated.
M.
Thanks so much for sharing this component! I do have a hopefully easy question (and I wouldn't be surprised if I'm just overlooking something obvious)... I have an application where I'd like to keep the minimum gauge value at 1 and set the max value at something other than 100, such as 21. This functions great but the gauge seems to always show 45 tick marks regardless of the value range. Is there a way to get the tick marks to show 1-for-1 with the increments? (i.e. if the max is 21, have 21 tick marks?)
Thanks again!
Hi Kevin,
I am glad you are enjoying the component.
To answer your question, which I have heard offline from others as well, about having a 1-1 correlation between tick marks and values. Unfortunately there is no way to accomplish this with the component in its current state. It would be relatively easy to fix by simply altering the tick mark code within the skin of the gauge. But here are a couple of the challenges you will face.
1. Converting actual values to radians/angles, and having it layout correctly and still look aesthetically pleasing when you have higher ranges (than say, 0-360)
2. Figuring out how to have alternative large/small ticks but still be accurate to your value range.
You will want to look at the ArcLine repeater code within the GaugeSkin.mxml, and set the angleOffsets to be the (maxAngle-minAngle)/(maxValue-minValue) for the small ticks. You will also have to do some tweaking to make them fit exactly within the range. I hope that helps.
- Tom
It's really cool ! Thanks Thomas for sharing. Truely appreciate it.
James