Gauge Component – New Features – v04
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.


