Sunday, September 26, 2010

Coming to the end...

Here we go again...

The steelseries library again got some new components but i decided to stop adding components to the library now, otherwise it won't end ;-)

Because i added radial bargraphs i had to add linear bargraphs too, so here they are in horizontal and vertical orientation.

Horizontal...


 Vertical...


As you could see i also added new colors like cyan and magenta to the ColorDef class. After i finished the first version of radial bargraphs it reminds me on a equalizer that i had a long time ago.
This equalizer had a feature called show peak where it shows the last value of the led column a little bit longer. So what should i say...i had to implement to the bargraph components and it looks like this...


This feature has to be enabled and will only be visible if the bargraph is in AutoResetToZero mode which means that the value will automaticaly return to zero after it reached it's value.

In addition to the bargraphs i found it usefull to have a simple led (the same that i used in the components) available as a separate component and so i created it and it looks like this...


The led component is really simple, one could choose between one of the shown colors, it can be on or off and it can blink and that's it. You might want to use it to build some kind of a state indicator.

Finaly i tried to create a set of components that allows you to extend the existing components with your own. As a example i would like to combine a radial frame with a simple lcd display and three leds. On top of all these components should be the same glass effect as on the other components...


For this i created a circular and a rectangular base component (FrameCircular and FrameRectangular). On this components you could add others like the lcd and the three led's.
To cover it with the glass effect you'll find a so called Foreground component that switches it's design by it's parent component. That means if you drop it to a FrameCircular it will be a circular glass effect and if you drop it to a FrameRectangular it will switch to a rectangular glass effect (dependend on the orientation of the rectangular frame).

I did not make extensive tests with this components but my first try looked like this and it worked...


This component was simply created by drag'n drop all the related components in Netbeans from the palette to the canvas.

I hope this little library will be usefull for one or the other and it would be great to hear from you...

Now it's 2 am in the morning and i think it's time for me to get some sleep...

Thursday, September 16, 2010

And another one...

Yesterday i was sitting on the train and was thinking about a radial bargraph gauge...
What should i say...today it's in the library...

There are 8 new components that i added to the lib:
  • RadialBargraph1
  • RadialBargraph1Lcd
  • RadialBargraph2
  • RadialBargraph2Lcd
  • RadialBargraph3
  • RadialBargraph3Lcd
  • RadialBargraph4
  • RadialBargraph4Lcd



and here they are...

    As you could see they are similar to the radial gauges that uses a pointer to visualize the data except that this gauges uses a led bargraph to visualize tha values.



    Additional to the new components i added a feature that again will help you to visualize a certain area of interest in your gauge. If don't like the track, the area or the section feature you might want to be interested in the colored tickmark feature. 
    Here you could define sections (like in the section feature) but only the tickmarks and their labels will be colored with the color defined in the given section. You could define a list of sections that will be used during the creation of the tickmarks.

    Here is a example where i defined the TickmarkSection for the range of 80...100





    Now it is also possible to decide if you would like to see the tickmarks only or maybe the tickmark labels only.
    Well let pictures speak...




    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

    SOURCE:      Project Kenai


    So i hope this modifications are useful for one or another of you...

    Tuesday, September 14, 2010

    SteelSeries updates...

    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

    SOURCE:      Project Kenai


     

    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 =
     
        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);


    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...