Nearly one month ago i thought "THATS IT"...the steelseries lib was ready to release but now i know better...it will never end... ;-)
During my vacation i thought about this and that and when i came back home i slowly started working on the steelseries again and here is the result...
- removed dependencies of GroupLayout
- added two new components (Radial2Top and RadialCounter)
- added support for large ranges
- added customizable tickmark color
- added customizable title and unit color
- added customizable background paint
- added pointer color BLACK, GRAY, WHITE
- added suport for one area
- added support for multiple sections
- added a maven pom.xml file
- fixed resizability problem
- fixed problem with multicolored track in components
- modifications in Level component
DOWNLOAD:
A short note to all of you that do not want to read all of the blogpost i just have to mention that the library depends on the trident animation library from Kirill Grouchnikov.
Means if you would like to use one of the components you need to have the trident.jar file on the classpath of your project. Additional to that you need to have Java 6 installed on your system.
BINARY: SteelSeries.jar
And now in more detail...
GroupLayout:
Because i created some of the components in the steelseries lib by using the Matisse GUI editor in Netbeans i added a dependency for GroupLayout that is the standard in Matisse. So as a Netbeans user i didn't care about that but when a Eclipse user told me that he got problems with that i realized the situation and removed the dependency in the following components:
- Radial1Lcd
- Radial2Lcd
- Radial3Lcd
- LinearLcd
- DigitalRadialLcd
Radial2Top component:
In principle this component is the same as the Radial2 component except the frame. For this component i still have to adjust the size because right now it's square (due to it's big brother Radial2) but it will be only half the vertical size in the future.
It supports all the features from the other radial gauges.
RadialCounter:
There is a short story about this component...
During my vacation i visited a old german undersea boat from the 60's where i found a gauge that was very similar to the RadialCounter. They used it as a gauge to measure the current depth of the boat. I instantly made a picture of it and voilá here it is.
It takes values from 0...10.
Support for large ranges:
When i created the gauges i tested it with values in the range of 1000 and it worked ok with that. But i always knew that i'll have to adjust this in future releases. Thanx to Thomas Steinbach, who found the same problem and wrote a patch to it which i added to the components.
To visualize the problem take a look at the next screenshot:
Both gauges have the following settings:
MinValue = 0
MaxValue = 10000
In the old version (left gauge) i was able to specifiy the number of ticks i would like to label but i did not add the possibility to define the number of ticks i would like to draw. The result you could see on the left gauge where 10000 tickmarks will be drawn and will just give you a white area instead of tickmarks.
With the patch of Thomas it's possible to adjust the tickmark drawing.
Different styled tickmarks will be drawn after different intervals. e.g. a small, light dot will be drawn every step whereas a strong bar will be drawn after every 100 steps. Sometimes a step of one for the small, light dot is too fine grained. In this case the whole step scaling can be raised to the next power of ten of the values shown.
Custom tickmark color:
Now it's possible to define your own color for the tickmarks and their values. I know that related to existing designs/colors my gauges not always will fit into a existing application and therefor you now could adjust some more parameter.
In the example above the default tickmark color was white (left gauge) and the custom tickmark color was changed to red (right gauge).
Custom title and unit color:
For the same reason i added the possibility to adjust the color of the title and unit string.
Like in the example above the default title/unit color was white (left gauge) and the custom title/unit color was changed to red (right gauge).
Custom background paint:
I was trying to add many useful background gradients but i understand if they do not fit your needs. For this reason i added the possibility to define your own background paint for the gauges.
You have the ability to define a java.awt.Paint object (which could be for example a java.awt.Color, java.awt.LinearGradientPaint or java.awt.RadialGradienPaint).
Here are some examples:
On the left gauge i set the background paint to a color (java.awt.Color.MAGENTA), the center gauge got a RadialGradientPaint and the right gauge a LinearGradientPaint.
Here is the code that i used to create the example above:
final float[] FRACTIONS = {
0.0f,
0.25f,
0.5f,
0.75f,
1.0f
};
final java.awt.Color[] COLORS = {
java.awt.Color.MAGENTA,
java.awt.Color.YELLOW,
java.awt.Color.GREEN,
java.awt.Color.BLUE,
java.awt.Color.RED
};
leftGauge.setCustomBackground(COLORS[0]);
final float RADIUS = (float) centerGauge.getBounds2D().getWidth() * 0.4f;
final java.awt.geom.Point2D CENTER = leftGauge.getCenter();
final java.awt.RadialGradientPaint RADIAL_GRADIENT =
new java.awt.RadialGradientPaint(CENTER, RADIUS, FRACTIONS, COLORS);
centerGauge.setCustomBackground(RADIAL_GRADIENT);
final java.awt.geom.Point2D START =
0.25f,
0.5f,
0.75f,
1.0f
};
final java.awt.Color[] COLORS = {
java.awt.Color.MAGENTA,
java.awt.Color.YELLOW,
java.awt.Color.GREEN,
java.awt.Color.BLUE,
java.awt.Color.RED
};
leftGauge.setCustomBackground(COLORS[0]);
final float RADIUS = (float) centerGauge.getBounds2D().getWidth() * 0.4f;
final java.awt.geom.Point2D CENTER = leftGauge.getCenter();
final java.awt.RadialGradientPaint RADIAL_GRADIENT =
new java.awt.RadialGradientPaint(CENTER, RADIUS, FRACTIONS, COLORS);
centerGauge.setCustomBackground(RADIAL_GRADIENT);
final java.awt.geom.Point2D START =
new java.awt.geom.Point2D.Double(rightGauge.getBounds2D().getMinX() + 20,
rightGauge.getBounds2D().getMinY() + 20);
final java.awt.geom.Point2D STOP =
new java.awt.geom.Point2D.Double(rightGauge.getBounds2D().getMaxX() - 20,
rightGauge.getBounds2D().getMaxY() - 20);
final java.awt.LinearGradientPaint LINEAR_GRADIENT =
new java.awt.LinearGradientPaint(START, STOP, FRACTIONS, COLORS);
rightGauge.setCustomBackground(LINEAR_GRADIENT);
rightGauge.getBounds2D().getMinY() + 20);
final java.awt.geom.Point2D STOP =
new java.awt.geom.Point2D.Double(rightGauge.getBounds2D().getMaxX() - 20,
rightGauge.getBounds2D().getMaxY() - 20);
final java.awt.LinearGradientPaint LINEAR_GRADIENT =
new java.awt.LinearGradientPaint(START, STOP, FRACTIONS, COLORS);
rightGauge.setCustomBackground(LINEAR_GRADIENT);
New PointerColor BLACK, GRAY and WHITE:
Nothing big but to keep you up to date i would like to mention the three new color definitions for the pointer. Please take a look at the next image to see how they look like.
Area:
You might know these feature from the rpm meter in your car. There is a red area which defines the area where the engine will get damaged if your rpm's in that range.
So there is new property which could be defined by a start value, a stop value and a color. The result for a area defined in the range of 80...100 with a semitransparent red color will look as follows:
For future releases i have to separate the title and unit string from the background image because the area will be drawn on top of it. That means that if the color of the area is not transparent it will hide the title and unit !
Multiple sections:
Well when i added the area feature i directly knew that there will be the need for another kind of colored area which i'll call a section. I found this on some pressure gauges where they define the area of to low pressure, the right pressure and overpressure.
So you could define a section object (eu.hansolo.steelseries.tools.Section) that contains a start value, a stop value, a color and a java.awt.geom.Area.
The are will be calculated from the given values everytime the init() method of the gauges is called (in this method all images will be created).
In principle it is exactly the same as multiple of the area features that i explained above.
The only difference is that the area looks like a pie where section looks like a piece of a ring but long story short...have a look by yourself.
Here is the code that i used to create the example above:
final Section[] SECTIONS = {
new Section(0, 33, java.awt.Color.GREEN),
new Section(33, 66, java.awt.Color.YELLOW),
new Section(66, 100, java.awt.Color.RED) };
gauge.setSections(SECTIONS);
Maven support:
I added a maven pom.xml file to the netbeans project that was created by Matthieu Brouillard. I hope i did not messed it up when i removed the dependency entry for GroupLayout from the pom file.
Resizability problem fixed:
In the former version of the steelseries i only took care about the width of the component when it came to resizing. Now every component always takes the smalles side as reference so that nothing will be cut from the component anylonger.
MultiColored track problem fixed:
There was a problem with the track gradient in the Radial2 and Radial2Top component that i fixed in the current version. Now the gradient should look the same in all radial components.
Last but not least i made some modification to the level component because i needed it by myself for a demonstration where i used the sensor of my Android phone and send their values via xmpp to a Java Swing demo app that visualized the data with the level component.
But that's another story...
