HTML5 Canvas update...

This is just a really short post to let you know about the modifications i made to the javascript version of the steelseries library.
Thanx to Mark Crossley who pushed me to add more features from the java version of the lib the current version of the javascript lib contains the following gauges.


Radials and RadialBargraphs...

Linears and LinearBargraphs...

DisplaySingle and DisplayMulti...

The Level component...

The compass component...

The horizon component...

And last but not least the LED component...

The following features from the java version are available for the gauges too:

• FrameDesign
• BackgroundColor
• PointerColor / ValueColor
• PointerType
• ForegroundType
• KnobStyle
• KnobType
• Areas
• Sections
• LedColor
• LcdColor
• DigitalFont

And there's more to come...just stay tuned... :-)

You could find the latest version version of the lib always on the upper right part of the sidebar in this blog. At the same position you will find a link to the demo page that i'll update from time to time. Here's a current screenshot, click on the link below the image to start the demo.

Click to see it in action...

Due to some improvements this demo will also work on a mobile like a HTC Desire or iPhone (even if it is a bit slow)...

So keep coding...

SteelSeries 3.9.3

Hello again...it's time for another release of the SteelSeries Java Swing component library.


Enable / disable nice scaling...
Because somebody asked for it i added the functionality to disable the usage of the automatic tickmark calculation. If you have for example limits of

• minValue = 0
• maxValue = 124

and you use the automatic tickmark calculation (niceScale=true) the calculation will set the maximum value to 140 instead of 124 to get a nice scaling. There might be usecases where you need to have the scale ends at 124 and for this reason one could now enable/disable the nice scaling by the method setNiceScale(boolean) which default's true.
A picture will better explain what this means...

On the left gauge the niceScale property is set to true and on the right it is set to false.


More realistic inner shadow on radial gauges...
Another tiny thing that annoyed me a long time was the inner shadow of the radial gauges. Somehow it looked not the way it should and therefore i modified it a little bit so that it looks better to my eyes now.

                    

You might not even noticed the difference but for me it was visible all the time so i had to change it... :-)

New backgrounds...

When i was playing around with the lib i thought i might add more background colors to the gauges and so i've added six new designs...

Well not all of them might be useful but you never know...so feel free to play around with it. Here i would like to thank Wolfgang Zitzelsberger of Jyloo Software for the idea with the carbon. And by the way if you don't know him you should know that he's in charge of the Synthetica look and feel which you could find here. 

StopWatch component...

And i have to say thanx again to Wolfgang because he also asked me for a StopWatch component and here it is...

It's nothing special with this stopwatch, just a simple analog stopwatch.

Additional clock design...

And talking about clocks...there's also a new clock design available in the existing Clock component of the SteelSeries. I while ago i created a Swing component that looked like the clock of the german railway company "Deutsche Bahn". So for those who do not know this clock just click this link and you will find some images of it. So my version looks like this...

You could activate this design by changing the pointerType property in the Clock component to eu.hansolo.steelseries.tools.PointerType.TYPE2. In addition i've added the ability to let the second pointer move continuously by calling secondMovesContinuous(true).

Because it's derived from AbstractRadial you could use all the frameDesigns, backgroundColors, pointerColors (except the SecondPointer which is always red) and foregroundTypes to customize this clock.

Additional frame designs...

So now that i mentioned frameDesigns it's time to talk about some new frameDesigns too. I have added three new frameDesigns to the lib that are looking like this...

It's again nothing special but i thought you could never have to much designs to choose from. Of course this designs are available for the linear gauges too. Because we are talking about the frames already i extended the effect feature of the frames. 

Frame effects...

In the former version you only could activate one frameEffect but i found that there too many possibilities that might make sense too, so i added a property named frameEffect and you could choose between four different effects as overlay for your frame, here they are...

These frameEffects will work on all frameDesigns and on the radial and linear gauges. They won't work on the Radial2Top and Radial1Square component right now (but i'm working on a new ContourGradientPaint which hopefuly will make it possible to use it on these gauges too).

Instead of adding a new ContourGradientPaint class i have added a class to scale convex polygons which makes it possible to apply the frame effects also to the Radial2Top and Radial1Square component. 

Additional foregrounds...

But not only the backgrounds and frames got something new, i've also added two new foregroundTypes to the radial gauges, check them out...

The left one (TYPE4) has a more unobtrusive look where the right one (TYPE5) stays more present in the foreground. 

Number systems in lcd...

So far so good but that was not the end right now...i've got the request if i could add a hexdecimal numberformat to the lcd component and you know i always try to do my best to make your wishes come true, so i added it to the lcd in general which means it's now available in all gauges and in the standalone lcd displays too. 

Right now the decimal, hexadecimal and octal number system is supported.

Additional lcd design...

Well there are some color schemes for the lcd but from time to time i find something new to implement and so i added another LcdColor named STANDARD_GREEN which looks like this...

Like all the other things nothing special but it looks nice doesn't it...?

Additional pointer type...

And talking about little new things i also want to mention the new pointerType in the radial gauges named TYPE9 that i found on a car...

This pointerType is a bit special, because it won't change it's color if you set the pointerColor but it will only change the little rectangle at it's end to the given pointerColor which means this pointer is best used on bright backgrounds.

Additional threshold indicator...

And now the smallest new add on (and it might change in the next release because i'm not 100% satisfied with it), another thresholdType named ARROW which comes in addition to the former thresholdType that is now named TRIANGLE. The color of the threshold indicator could now be modified too.

Additional center knob...

Another tiny thing i've added to the library is a new type of center knob which is available for all radial components. Here's how it looks like...

KnobStyles...

After i finished the new center knob i figured out that it might be a good idea to have knobs with adjustable colors because if you have a brass colored frame the silver center knob won't fit very well to the design. Long story short...here they are...

You might have figured out that the standard knob also got a little polish and looks more shiny now. By the way, the MinMax alignment posts do change their color too... :-)

Additional pointers for the compass...

Oh what's this...how does the compass pointer look like...? Ahh...yes i gave some love to the compass component and added two additional pointer types, so here is an image of the three available types of pointers in the compass component...

So far so good, now i just have another little modification which might be usefull for one or the other of you...the ability to save an image of a component.

Save component as image...

Each component now has a method named getAsImage() which will return a buffered image of the current state of the component. In addition i've added another helper method to the Util class in the package eu.hansolo.steelseries.tools which will save the given buffered image as a png image with the given name. Here's a small example on how to use it...

// the component we would like to save as image is named radial
SwingUtilities.invokeLater(new Runnable() 
{
    @Override
    public void run() 
    {
        // store the radial component as radial.png
        Util.INSTANCE.savePngImage(radial.getAsImage(), "radial.png");
    }
});

New battery component...

Man that's a long post with lots of pictures again and to give you some eyecandy at the end i've added a battery component to the SteelSeries lib that takes integer values from 0 to 100 and looks like this...

So...i think it's done for today, i hope some of these modifications will be of use for you and please do me a favour and let me know if you have the need for a special component and i'll see what i can do for you...

Keep coding...

Just scale it...

During my work on the SteelSeries library i faced a lot of different problems when i tried to convert the graphical design from the drawing program into the code. One of the problems was related to inner shadows. In the Java2D api there's no method to create an inner shadow for an object but in design inner shadows are really useful to create some kind of realism.
If you take a closer look to an inner shadow you will figure out easily that the shadow itself is in principle a scaled version of the object that has a color gradient which fades from shades of black to translucent (as you could see in the next images).

To keep it simple i used a linear gradient from black to translucent in the examples above which does not correspond to the reality.

Well if you have shapes like circles or rectangles it's not a big deal to create an inner shadow by shrinking the shape arounds it's center and vary the color from shades of black to translucent (for radial shapes you could also use a java.awt.RadialGradientPaint() to achieve the same effect).


This means if you would like to create an effect like an inner shadow it's all about scaling. For standard shapes like ellipses and rectangles it's not a big deal but the real problem will become visible when it comes to polygons because you can't shrink every polygon around it's center (in this case i mean the center of the boundary box) as i'll show you later. 


Center of gravity
You might know the center of gravity (aka Centroid) from 3-dimensional objects but in fact you could also calculate the center of gravity for an area. But why do we need to calculate this point ?
The answer is easy, because you could scale a polygon around it's centroid which means you could create an inner shadow with the same approach that works for circles and rectangles too. To calculate the area of a polygon and it's centroid you could find lot's of information on the web. After i did some math to understand how it works i searched the web for existing stuff to not reinvent the wheel again i found this page which explains the principle and will give you some sourcecode too.
Now that i had something to start with i created a class that takes a object of the type java.awt.Shape, iterates along the path, calculates the area of the polygon and centroid of the shape. By calculating the area of the polygon you have to keep in mind that negative areas (like "holes" in the polygon) have to be taken into account with a negative sign.
So the next step was the creation of a method that scales the given shape by a given factor. To achieve this i calculate the distance of each point in the polygon and multiply it with the scaling factor. With the usage of some trigonometry i  calculated the new scaled position of each point and created a new shape of the type java.awt.geom.GeneralPath from all the calculated points. 
After some tests i tried to optimize the methods and figured out that i could use the inbuild java.awt.geom.AffineTransform to achieve the scaling of the shape too.
That means i really only have to calculate the area of the polygon and it's centroid and use the centroid do translate the shape that i scaled with AffineTransform.createTransformedShape(java.awt.Shape shape).
So now i have a little helper class that will take a shape and a scaling factor as it's argument and that'll return a scaled version of the given shape.




ATTENTION:
The placement of the scaling does only work for convex polyons !!!




Convex polygon:
A convex polygon is a polygon where every internal angle is less than or equal to 180°. In addition to this every line segment between two vertices remains inside or on the boundary of the polygon.


Concave polygon:
In contrast a concave polygon will always have an interior angle that is greater than 180° (e.g. a L-shaped polygon).


To show you the difference between those two types of polygons i prepared two images. On both images the upper polygon was scaled around it's centroid (visualized by a dot) and the lower polygon was scaled around the center of it's boundary.


Scaling of a convex polygon:

Scaling of a concave polygon:

The positioning of the scaled shape is not correct for the concave L-shaped polygon as you can see in the images above. This means if you have to handle this kind of polygons you still have to do some math to calculate and translate it scaled polygon to the right position.


For those of you who would like to read the code...here you go...

public enum Scaler
{
    INSTANCE;
    
    /**
     * Returns a double that represents the area of the given point array of a polygon
     * @param POLYGON
     * @param N
     * @return a double that represents the area of the given point array of a polygon
     */
    private double calcSignedPolygonArea(final Point2D[] POLYGON)
    {        
        final int N = POLYGON.length;
        int i;
        int j;
        double area = 0;

        for (i = 0; i < N; i++)
        {
            j = (i + 1) % N;
            area += POLYGON[i].getX() * POLYGON[j].getY();
            area -= POLYGON[i].getY() * POLYGON[j].getX();
        }
        area /= 2.0;

        return (area);
        //return(area < 0 ? -area : area); for unsigned
    }
    
    /**
     * Returns a Point2D object that represents the center of mass of the given point array which represents a
     * polygon.
     * @param POLYGON
     * @return a Point2D object that represents the center of mass of the given point array
     */
    public Point2D calcCenterOfMass(final Point2D[] POLYGON)
    {
        final int N = POLYGON.length; 
        double cx = 0;
        double cy = 0;        
        double area = calcSignedPolygonArea(POLYGON);
        final Point2D CENTROID = new Point2D.Double();
        int i; 
        int j;

        double factor = 0;
        for (i = 0; i < N; i++)
        {
            j = (i + 1) % N;
            factor = (POLYGON[i].getX() * POLYGON[j].getY() - POLYGON[j].getX() * POLYGON[i].getY());
            cx += (POLYGON[i].getX() + POLYGON[j].getX()) * factor;
            cy += (POLYGON[i].getY() + POLYGON[j].getY()) * factor;
        }
        area *= 6.0f;
        factor = 1 / area;
        cx *= factor;
        cy *= factor;

        CENTROID.setLocation(cx, cy);
        return CENTROID;
    }

    /**
     * Returns a Point2D object that represents the center of mass of the given shape.
     * @param SHAPE
     * @return a Point2D object that represents the center of mass of the given shape
     */
    public Point2D getCentroid(final Shape SHAPE)
    {        
        ArrayList pointList = new ArrayList(32);
        final PathIterator PATH_ITERATOR = SHAPE.getPathIterator(null);
        int lastMoveToIndex = -1;
        while(!PATH_ITERATOR.isDone())
        {
            final double[] COORDINATES = new double[6];            
            switch (PATH_ITERATOR.currentSegment(COORDINATES))
            {               
                case PathIterator.SEG_MOVETO:
                    pointList.add(new Point2D.Double(COORDINATES[0], COORDINATES[1]));
                    lastMoveToIndex++;
                    break;
                case PathIterator.SEG_LINETO:
                    pointList.add(new Point2D.Double(COORDINATES[0], COORDINATES[1]));
                    break;
                case PathIterator.SEG_QUADTO:
                    pointList.add(new Point2D.Double(COORDINATES[0], COORDINATES[1]));
                    pointList.add(new Point2D.Double(COORDINATES[2], COORDINATES[3]));
                    break;    
                case PathIterator.SEG_CUBICTO:
                    pointList.add(new Point2D.Double(COORDINATES[0], COORDINATES[1]));
                    pointList.add(new Point2D.Double(COORDINATES[2], COORDINATES[3]));
                    pointList.add(new Point2D.Double(COORDINATES[4], COORDINATES[5]));
                    break;
                case PathIterator.SEG_CLOSE:
                    if (lastMoveToIndex >= 0)
                    {
                        pointList.add(pointList.get(lastMoveToIndex));
                    }
                    break;
            }                                   
            PATH_ITERATOR.next();
        }
        final Point2D[] POINT_ARRAY = new Point2D[pointList.size()];
        pointList.toArray(POINT_ARRAY);        
        return (calcCenterOfMass(POINT_ARRAY));
    }
                    
    /**
     * Returns a scaled version of the given shape, calculated by the given scale factor.
     * The scaling will be calculated around the centroid of the shape.
     * @param SHAPE
     * @param SCALE_FACTOR
     * @return a scaled version of the given shape, calculated around the centroid by the given scale factor.
     */
    public Shape scale(final Shape SHAPE, final double SCALE_FACTOR)
    {
        final Point2D CENTROID = getCentroid(SHAPE);
        final AffineTransform TRANSFORM = AffineTransform.getTranslateInstance((1.0 - SCALE_FACTOR) * CENTROID.getX(), (1.0 - SCALE_FACTOR) * CENTROID.getY());
        TRANSFORM.scale(SCALE_FACTOR, SCALE_FACTOR);
        return TRANSFORM.createTransformedShape(SHAPE);
    }
    
    /**
     * Returns a scaled version of the given shape, calculated by the given scale factor.
     * The scaling will be calculated around the given point.
     * @param SHAPE
     * @param SCALE_FACTOR
     * @param SCALE_CENTER
     * @return a scaled version of the given shape, calculated around the given point with the given scale factor.
     */
    public Shape scale(final Shape SHAPE, final double SCALE_FACTOR, final Point2D SCALE_CENTER)
    {        
        final AffineTransform TRANSFORM = AffineTransform.getTranslateInstance((1.0 - SCALE_FACTOR) * SCALE_CENTER.getX(), (1.0 - SCALE_FACTOR) * SCALE_CENTER.getY());
        TRANSFORM.scale(SCALE_FACTOR, SCALE_FACTOR);
        return TRANSFORM.createTransformedShape(SHAPE);
    }
}

And for the others that would prefer download and use it...that's for you...


    Scaler.java


Fortunately i do not have to handle concave polygons in the SteelSeries library and so the scaler class will be part of the SteelSeries library too and in the upcoming 3.9.3 release i'll use it to create some effects for the frames.


That's it for today...so as always...keep coding...