Wednesday, September 7, 2011

SteelSeries 3.9.6

Glow with the flow...
Finally i was able to finish another release of the SteelSeries component library and again there's lot's of new stuff in here.


First of all i have made many many many changes in the code where i did not add features but only replace all full classified class descriptions by their related import statements. That tooks a lot of time and i'm sure that there are still some in there.
In addition i have also changed the placments of the braces to more common format that the open braces are placed on the same row and not in a new one. But that's only for those of you who read the code...


In addition i moved from trident animation library 6.2 to version 6.3 that you could get here.


No 3.9.4 and 3.9.5 release ?
You might ask yourself where are the 3.9.4 and 3.9.5 releases? Well the 3.9.4 was ready to go and when i took all the screenshot for this post i figured out that i missed something that i would like to add to this release so i added the feature (which was really small) and created another release which was 3.9.5. But that's not enough, again two bugs appear in the last minute and so it came finally to 3.9.6


So let's start with the news...


NO NO_FRAME:
I removed the FrameDesign NO_FRAME from the library because it was not really needed anymore. One should use setFrameVisible(false) instead.




NEW LCD COLORS:

On the image you could see the new LcdColors in 3.9.6 which are named DARKBLUE_LCD, LILA_LCD, BLACKRED_LCD and DARKGREEN_LCD.

Because i gave some love to the DisplaySingle component i have more to show here...

LCD THRESHOLD INDICATOR:

All components that contain an LCD now supports the minValue, maxValue and threshold property. And if the current value exceeds the maxValue, a little indicator on the lower left corner of the lcd display will appear and visualize that the current value is out of range.

During a talk with my future colleagues i figured out that it might make sense to use an lcd itself to indicate the current value. In a gauge i could display sections but in an lcd what could i change to visualize the current value ???
Right the complete color of the lcd...

LCD SECTIONS:

This means one could define now an array of Section objects and pass it to the DisplaySingle component. If the current value is in the range of a section the complete display will change it's color related to the color that is defined in the active section. Please keep in mind that this feature works best on the LcdColors BLUE2 (image above), GREEN etc. which means all monocolored LcdColors (without a glass reflection effect).

Another nice feature of the DisplaySingle that is new in this release is the QualityOverlay feature. In principle it's similar to the Sections feature that i mentioned before but in this case i use some kind of a progressbar to visualize the quality of the current value. But let's have a look...

LCD QUALITY OVERLAY:

You could imagine that this feature is only useful in special usecases but if you need it it's now available... :-)

When i was in Basel at Canoo, Dierk König mentioned that the threshold led might be to small to be recognized when not in front of the monitor and we discussed ideas on how to improve...

GLOW:

If you take a closer look at the gauges above you will figure out that there is an additional frame on the inside of the gauges. This frame could be made visible by using setGlowVisible(true). And if you use setGlowing(true), it will use the current glowcolor and visualize it like this...


This might be useful to visualize a certain value or threshold or whatever...

By the way...to come back to the LCD one more time...it supports the glow too... :-)


On the radial gauges you will find a new PointerType which is TYPE10. This type of pointer was created to be used on very small gauges, where the standard pointers are simply too small, so it looks like this...

POINTER TYPE 10:

On the image above you could see the new pointer type and to show you the difference i created a small gauge with the new and with a standard pointer.

Well the next new things are related to the BackgroundColor of the gauges and i have to say that the first of the following new BackgroundColors does not really fit to a gauge but someone asked for it and here we go...

LINEN BACKGROUND:


NOISY_PLASTIC BACKGROUND:

The idea for the NOISY_PLASTIC came from Wolfgang Zitzelsberger of Jyloo Software (creator of the Synthetica LAF) and i saw it on their blog. I tried to get mine as good as theirs but i think their texture looks still better.

As you can see you could define the color of the texture and this is another new feature in this release, called TextureColor. The TextureColor is a standard Color that could be set and will be used to colorize the LINEN, BRUSHED_METAL and PUNCHED_SHEET texture.

Here are some examples of BRUSHED_METAL...

and PUNCHED_SHEET:

Well with the PUNCHED_SHEET texture it's a little bit different because in the current version of the library the texture will be created in an enum and will be used on every gauge. This means changing the texture color e.g. to red will change the texture in all gauges that are using the PUNCHED_SHEET texture.

The next thing that is available now is an additional LED which could be configured by the user, so it's called userLed. This LED will not be used by the library so you could set it visible, set on or off and let it blink. Of course one could define the color of the userLed.

USER_LED:

So if you are in the need to have an additional indicator for whatever value, you could now use the userLed feature to visualize it.

Another new thing is the highlighting of Sections and Areas in the gauges. This means if the pointer is over a section/area that contains the current gauge value, the section/area will be highlighted.

HIGHLIGHT SECTIONS / AREAS:

In the left column on the above image you see the behaviour that you might know already, it simply shows the sections/areas that you have defined.
In the middle column you see that the green section/area is brighter than the other sections/areas because i switched on the hightlightSection/highlightArea feature of the gauges. 
There is also the possibility to show only the highlighted section/area which you could see on the right column. To achieve this behaviour you just have to call setSectionsVisible(false) and setHighlightSections(true). The same will work for the areas too.

Now we are coming to an end...


DESIGN SETS:
The last new feature is the possibility to define so called DesignSets (2 for each gauge) and toggle between those DesignSets. So you might ask yourself for what this might be useful and here is the answer to it...

If you use a dashboard with gauges on a notebook to visualize data and you have to use the notebook outside you will define the colors of the gauges in the way that it is good readable. If you now go back inside a dark house the colors of the gauges might not fit anymore to the new surrounding brightness.
Or if you would like to use the dashboard by day and night you might need different colors for your gauges.
For reasons like that i have added the DesignSet which mainly contains the colors/designs of the frame, background, pointer, knobs, lcd and led. You could either toggle between design1 and design2 or you could call setActiveDesign() with the gauge and the design you would like to set.

Here is the code to define a DesignSet:

DesignSet night = 
            new DesignSet.Builder().frameDesign(FrameDesign.BLACK_METAL)
                                   .backgroundColor(BackgroundColor.BLACK)
                                   .lcdColor(LcdColor.BLACK_LCD)
                                   .knobStyle(KnobStyle.BLACK)
                                   .color(ColorDef.RED)
                                   .build();
DesignSet day = 
            new DesignSet.Builder().frameDesign(FrameDesign.SHINY_METAL)
                                   .backgroundColor(BackgroundColor.WHITE)
                                   .lcdColor(LcdColor.STANDARD_GREEN_LCD)
                                   .knobStyle(KnobStyle.SILVER)
                                   .color(ColorDef.BLUE)
                                   .ledColor(LedColor.BLUE)
                                   .build();
        
radial1.setDesign1(day);
radial1.setDesign2(night);
radial1.setActiveDesign(radial1, night);
        
radial2.setDesign1(day);
radial2.setDesign2(night);
radial2.setActiveDesign(radial2, day);

I used the builder pattern to create the DesignSet so you can decide which kind of parameters you would like to store in your DesignSet.
And that's would it would look like...


Well that's it for 3.9.6, so i hope you find one or two useful new things for you in this release, which is available as binary here on the page or you could get the source from project Kenai. You also find the SteelSeries lib on Maven Central, if you search for "SteelSeries"

So keep coding...

24 comments:

  1. Thumbs Up Gerrit! Wonderful work!

    And thanks for your time spent onto the code refactoring => very usable. Now need to configure all these in mind... and get more time, somehow... I have no idea how.
    I have only one note to you: why in the method "radial1.setActiveDesign(radial1, night); and radial2.setActiveDesign(radial2, day); " you're passing through the same object in the method invocation?
    Maybe it would be more usable to just call like this -> "radial1.setActiveDesign(night); and radial2.setActiveDesign(day); "

    What do you think? Just don't understand why has been chosen that way. Thanks!

    ReplyDelete
  2. Great news again. Thank you so much for sharing. I am really in love with your components ;-)

    ReplyDelete
  3. Hi Alexander,
    Well i know it looks a bit ugly and i think i'll change it in a future release. It's needed to determine if the gauge is a radial or linear one wich leads to use the given color for the pointer or for the bar. Thx for pointing me to this issue...will start fixing it right now... :-)
    Any news from the Android port so far ?
    Cheers,
    Gerrit

    ReplyDelete
  4. Amazing! It's fun to see the continous development!

    I have one question regarding LCDs:
    Is it possible to display text instead of numbers? I have different properties to display - some of them are numbers but there are also a lot of text based properties.

    Uli

    ReplyDelete
  5. Hello Gerrit!

    Unfortunately, I'm not playing with it right now, because currently I have a plenty of other crazy things that I must to accomplish... Otherwise, it'll kill me. This is like a snow ball, getting only bigger and bigger. Sure, it sounds like "to through a stone at the space", however it's quite true.
    I'm always wondering, where are you tacking time to play with it! Seems like, you're a very good manager of your own time! I'm - not :)
    Whatsoever, you'll know about it first. Just need to solve all of my current troubles as the must. Have a good one! ;)

    ReplyDelete
  6. very cool UI , and also easy to customize! Keep up the good job, man :)

    ReplyDelete
  7. It was me who asked for the linen texture. Thanks so much for adding it.

    Nick.

    ReplyDelete
  8. Getting heaps of RepaintManager exceptions
    at com.wls.main.ui.test.CheckThreadViolationRepaintManager.checkThreadViolations(CheckThreadViolationRepaintManager.java:45)
    at com.wls.main.ui.test.CheckThreadViolationRepaintManager.addDirtyRegion(CheckThreadViolationRepaintManager.java:38)
    at javax.swing.JComponent.repaint(JComponent.java:4732)
    at javax.swing.JComponent.repaint(JComponent.java:4746)
    at eu.hansolo.steelseries.gauges.AbstractRadial$1.onTimelineStateChanged(AbstractRadial.java:199)
    at org.pushingpixels.trident.Timeline$Chain.onTimelineStateChanged(Timeline.java:214)
    at org.pushingpixels.trident.TimelineEngine$1.run(TimelineEngine.java:591)
    at org.pushingpixels.trident.TimelineEngine$TimelineCallbackThread.run(TimelineEngine.java:242)
    java.lang.Exception

    ReplyDelete
  9. @raananaka
    This comment creates a grunwald.gerrit.NotEnoughInformationException in my brain...

    ReplyDelete
  10. Sorry for that I was in a harry to get the work done.
    I love your work and innovation in the swing area and while testing a radial gauge for EDT issues see code below:
    private eu.hansolo.steelseries.gauges.Radial1Square CpuRadial;
    public void addIdleObservation(final double y) {

    final double number = 100 - y;

    CpuRadial.setValueAnimated(number);


    }
    I encountered the following problem which is related to the EDT repaint method:
    at com.wls.main.ui.test.CheckThreadViolationRepaintManager.checkThreadViolations(CheckThreadViolationRepaintManager.java:45)
    at com.wls.main.ui.test.CheckThreadViolationRepaintManager.addDirtyRegion(CheckThreadViolationRepaintManager.java:38)
    at javax.swing.JComponent.repaint(JComponent.java:4732)
    at javax.swing.JComponent.repaint(JComponent.java:4746)
    at eu.hansolo.steelseries.gauges.AbstractRadial$1.onTimelineStateChanged(AbstractRadial.java:199)
    at org.pushingpixels.trident.Timeline$Chain.onTimelineStateChanged(Timeline.java:214)
    at org.pushingpixels.trident.TimelineEngine$1.run(TimelineEngine.java:591)
    at org.pushingpixels.trident.TimelineEngine$TimelineCallbackThread.run(TimelineEngine.java:242)

    I’m using the following class to perform the testing:
    http://weblogs.java.net/blog/alexfromsun/archive/2006/02/debugging_swing.html
    Kind Regards

    Raanan Zion
    Accenture Australia

    ReplyDelete
  11. I have thought how to use non numberic values in LCD displays. I would understand if you don't like to implement that because these displays are specialised for displaying numbers.

    But I could implement that myself (by tweaking the formatLcdValue(double) method) if you remove the final modifier from DisplaySingle and DisplayMulti. That might also help for other classes.

    Thanks!
    Uli

    ReplyDelete
  12. @Anonymous
    I was thinking about the text lcd thing before and implemented it in the JavaScript version of the library. You might take a look at it and let me know if this would be ok for you. Should be not a big deal to implement it...
    Cheers,

    Gerrit

    ReplyDelete
  13. Ok, the JavaScript version looks good! It would be great if can port that to the Java lib.

    Thanks!
    Uli

    ReplyDelete
  14. @Anonymous
    If you download the latest snapshot release from this page or build it from the kenai repo by yourself you will find a first version of the text support in the DisplaySingle component.
    Cheers,
    Gerrit

    ReplyDelete
  15. That's working now.

    Some things that might be improved:
    * The text is displayed very close to the border.
    * Units (and maybe other stuff too) are no longer displayed if using the text output. For my purpose it would be nice to only substitute the formatted number with the text set by setLcdText(String). Then I can decide myself if the unit should be displayed or not.

    Cheers,
    Uli

    ReplyDelete
  16. Bonjour,

    First of all sorry for my poor english, i'm french ...lol.
    I also want to congratulate you for this really great job and nice components.

    Unfortunately i have limited Javascript knowledge
    and i'm trying to include SteelSeries in HTML pages mainly for Meteo & Home Automation.

    I know that you are busy (following you on tweeter) but i'm just wondering if you could update your HTML steelseries demo to include all last features and also steelseries extras...
    It will be for us 'dummies' easier (using your HTML Code) and I am sure will promote the use of your library.
    Waiting for your comments and again Félicitations

    Xavier

    ReplyDelete
  17. Hi Xavier,
    There are a lot of things i'll have to do in the future and i really have to make a decision on how to prioritize them. First of all i'll have to finish my work at the upcoming 3.9.7 release of the SteelSeries Java lib and after this will be done i'll completly focus on the JavaFX port of the SteelSeries lib which will be a lot of work. Unfortunately the JavaScript port should have to wait until the others are done...which means...it really could take some time...
    Sorry for the bad news but i just have limited time to create all these things.
    Cheers,
    Gerrit

    ReplyDelete
  18. Hi Gerrit,

    Last week I stumbled upon your steelseries libs 'by accident' and couldn't believe what I saw !!

    What a great set of gauges !
    Code model and structure also is looking fine.

    I am planning to do some tests to integrate them into a production follow up dashboard.

    Keep up this great work !!
    May the source be with you !

    ReplyDelete
  19. Xavier

    I have put up some updated demo pages for the Canvas/JavaScript library here:

    http://www.wilmslowastro.com/steelseries/demoRadial.html
    http://www.wilmslowastro.com/steelseries/demoLinear.html
    http://www.wilmslowastro.com/steelseries/demoExtras.html
    http://www.wilmslowastro.com/steelseries/demoStopWatch.html

    ReplyDelete
  20. Hi Han,
    Very impressive blog!

    I actually have a question: I am trying to get a circular color gradient happening in a pie chart. I understand that color gradients in Java2D can be linear or radial, but I am trying to have it so that at 12 o'clock i have dark red, at 6 o'clock, lighter red, and just before 12'oclock it is very light red.

    I understand you have done something similar, but the colors fade back in repeatedly in you example.

    Do you have any ideas how I could do this? I will give you a big mention in my blog :)

    cheers

    Oliver (www.blue-walrus.com)






    ReplyDelete
    Replies
    1. Hi Oliver,
      Well that seems to be very easy if you use the ConicalGradientPaint that I have created. The following code creates a JPanel that paints a circle (200, 200) and fills it with a conical gradient from dark red to light red. I hope that's what you meant? Just let me know if not...

      public class TestPanel extends JPanel {
      final float[] fractions = {
      0.0f,
      0.5f,
      1.0f
      };
      final Color[] colors = {
      new Color(255, 0, 0),
      new Color(128, 0, 0),
      new Color(64, 0, 0)
      };

      @Override
      protected void paintComponent(Graphics g) {
      Graphics2D g2 = (Graphics2D) g.create();
      Ellipse2D circle = new Ellipse2D.Double(0, 0, 200, 200);
      Point2D center = new Point2D.Double(100, 100);
      ConicalGradientPaint gradient = new ConicalGradientPaint(true, center, 0, fractions, colors);
      g2.setPaint(gradient);
      g2.fill(circle);
      g2.dispose();
      }
      }

      Cheers,

      Gerrit

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Hello Gerrit,
      amazing work, been following you for few months now.
      Im a novice in java, trying to make a college project of traffic intersection with javaFx.I was thinking to include your TrafficLight(swing) gauge in JavaFx 2.2 scene.Havent been able to find relevant conversion example of adding swing component in JavaFx,only vice versa.Is it possible? Thank you, Nikola, Croatia

      Delete
    4. Hi Nikola,
      You might want to try the traffic light from the JFXtras project.
      Cheers,
      Gerrit

      Delete