Wednesday, February 6, 2019

Style it baby...

Aloha,

The people that know me know that I first was not a big fan of CSS in JavaFX and a year after that I was THE big fan of CSS but another year later I switched back to code only. There are several reasons for that but mainly it was about the performance of the CSS implementation and about missing features in CSS that made me mix up code and CSS which I did not like.
So I switched to code only in my Medusa and TilesFX library where I also use JavaFX Canvas which content is not styleable by CSS in the way the other nodes are.
Well don't get me wrong, I'm not completely against CSS in JavaFX, esp. for application level stuff it is great and fast enough. But when it comes to controls I do not really like it.
I knew that someday someone will ask me how to style a Medusa gauge or a TilesFX tile and here we go...

So if you really need to style a Medusa gauge by using CSS here is an example on how to do it.
In principle you need to create a new skin that makes use of CSS, in this example let's create a styleable version of the new PlainAmpSkin. It is simply a copy of the existing skin class where I removed the code that directly sets the colors and gradients and added some style classes.
The idea is to extend the Gauge class and in this new class add some styleable properties for the things that cannot be styled directly (e.g. the tickmarks and ticklabels because they are drawn in a Canvas node).
The styleable properties will be triggered by loading a css stylesheet that contains the defined style classes. So we simply add listeners to the styleable properties and trigger the appropriate properties in the Gauge class with the values from the styleable properties.
I hope you understand what I'm talking about :)
So the example is as follows:

1. We create a StyleableGauge class that has a styleable property named styleableTickmarkColor as follows:

public class StyleableGauge extends Gauge {

    private static final StyleablePropertyFactory<StyleableGauge> FACTORY = 
        new StyleablePropertyFactory<>(Control.getClassCssMetaData());
    
    private static final CssMetaData<StyleableGauge, Color> TICKMARK_COLOR = 
        FACTORY.createColorCssMetaData("-tickmark-color", 
        g -> g.styleableTickmarkColor, Color.rgb(220, 220, 220), false);
    
    private final StyleableProperty<Color> styleableTickmarkColor;


    
    public StyleableGauge() {
        this(SkinType.GAUGE);
    }
    public StyleableGauge(@NamedArg("SKIN_TYPE") final SkinType SKIN_TYPE) {
        super(SKIN_TYPE);
        styleableTickmarkColor = 
            new SimpleStyleableObjectProperty<>(TICKMARK_COLOR, 
                                                this, 
                                                "tickmark-color");
    }


    public Color getStyleableTickmarkColor() { 
        return styleableTickmarkColor.getValue(); 
    }
    public void setStyleableTickmarkColor(final Color COLOR) { 
        styleableTickmarkColor.setValue(COLOR); 
    }
    public ObjectProperty<Color> styleableTickmarkColorProperty() { 
        return (ObjectProperty<Color>) styleableTickmarkColor; 
    }


    @Override public String getUserAgentStylesheet() {
        return StyleableGauge.class.getResource("custom-plain-amp.css").toExternalForm();
    }

    public static List<CssMetaData<? extends Styleable, ?>> getClassCssMetaData() {
        return FACTORY.getCssMetaData(); }
    @Override public List<CssMetaData<? extends Styleable, ?>> getControlCssMetaData() { 
        return FACTORY.getCssMetaData(); 
    }
}



2. We create a css file named "custom-plain-amp.css" that looks as follows:

.gauge {
    BRIGHT_COLOR   : rgb(220, 220, 220);

    -tickmark-color: BRIGHT_COLOR;
}

3. Now we need to create our custom skin named "CustomPlainAmpSkin".
In this skin we make use of the css style classes. Because the skin file simply is too long to show it here.
The complete example can be found in the medusademo project on github.

With this you can style even canvas node content indirectly by triggering "standard" properties in the control by making use of "styleable" properties. 
I would not recommend to use this approach as the standard approach but it is good enough to make use of CSS even if the controls do not support CSS styling directly.

I hope that was more or less clear for you to understand...otherwise just let me know :)

Oh and do not forget to keep coding... ;)

Friday, February 1, 2019

Friday Fun LXI Part 2

Aloha,
Found some additional time today to close some bugs in my Medusa JavaFX library and in addition I've quickly created another skin called PlainAmpSkin.
There was the request for the ability to switch off the black part of the AmpSkin and just show the scale to save place.
Instead of adding another property to the Gauge class I've simply created another skin based on the AmpSkin but without the black frame.
Here are images of both skins to give you a better understanding of what I'm talking about...



Both controls have the same size but it is obvious that the lower control makes better use of the available space.
So I hope this new skin will fit the needs of the people that requested the feature.
This additional skin and some bugfixes can be found in the latest Medusa release which is now 8.2.

As always you can find the 

source at github

binary at bintray

and on maven central.

So that's it for today...enjoy your weekend and keep coding...

Friday Fun LXI

Aloha,

In the current project I needed a matrix like data structure that is observable and because I was not aware of one (even I'm pretty sure that there is something out there) I created my own observable matrix.
This little class is more or less a wrapper around an 2-dimensional array of objects which offers some convenient methods to add columns and rows.
Meaning to say it can hold for example a matrix of your own custom objects and it will fire different kind of events in case you added/removed/changed an item in the matrix. There are also events if columns/rows have been added or removed from the matrix.
If you remove a column item by item until all items of that column are gone the matrix will fire an event as soon as the column only contains null objects.
Because this is only a data structure and nothing fancy, I do not have any nice and shiny images to show this time.
The source code is available on github as always and you will find a little demo class in the source that demonstrates the functionality.

That's it for today...so keep coding... :)

Friday, November 30, 2018

Friday Fun LX

Aloha,

Last monday I was up early and created a little control that I would do (again) for a long time. It is some kind of a rolling counter...well an odometer.
The whole thing was based on the JavaFX Canvas node which is great on desktop but not so good for JPro applications. 
So I thought about having a control like a single digit spinning wheel based on an ImageView. To be able to create such a control you need to create an image stripe that contains all the values you would like to "spin through".
This image has to be created every time you resize the control so you have to be aware of that. I've started with a numbering control that counts from 0-9 which means it contains at least 10 images. So far this is no problem but when I've started into an alphabetical control that counts from A-Z I had to handle at least 26 images plus an empty one if you would like to visualize a space character.
Meaning to say you should be careful when creating a lot of this alphabetical controls in a row because you will have to handle a lot of more or less big images (dependent on the size of the controls).
But long story short...here is a screenshot of the controls I'm talking about...



On top you see the Odometer control which is a simple counter that just counts up values. One can define the background and foreground colors for the digits and for the decimals independently. In addition one can define the number of digits you would like to see and the number of decimals.
On the lower image you see some combinations of the Spinner control, the upper part shows 7 alphabetical spinners in an HBox where the lower part shows the numerical spinners in HBoxes.

The Spinner control is available as ImageSpinner and CanvasSpinner with the exact same functionality just one is based on the ImageView and the other on the Canvas.

To give you an idea what it looks like I've recorded a little screen video of the controls in action...



As always you can find the source code over at github
I will also show this control next week at JavaFX days conference in Zurich.

That's it for today...so keep coding and hopefully see you next week in Zurich... :)

Sunday, November 25, 2018

TilesFX 1.6.5

Aloha,

I finally found some time to prepare another release of TilesFX. This release mainly contains fixes of different issues and one new skin.
First of all I would like to say thank's to the external pull requests that fixed two issues, it's always good to see people take over and fix things.
The skin I've mentioned is nothing that could not have done before with a custom tile skin but I saw some dashboard like apps that simply showed pictures of people on kind of tiles. Here is a little example of what I am talking about...


An so I thought this might be some nice add on to the library and was easy to do...so here you go...


Nothing really fancy but there might be some use cases for this kind of skin.
The skin takes the given image and a so called ImageMask which can be either

  • NONE
  • ROUND
  • RECTANGULAR

And this is how these ImageMasks look like...


That's all for the latest TilesFX release, I have ideas for more stuff to come but simply do not have the time at the moment...so please be patient... :)

***********************
Java 11
Another thing is porting the library to Java 11, I've started with a port to Java 11 but due to a lack of time was not able to finish this yet.
My plan was to create a new project for the Java 11 version which will be TilesFX11.

If one of you is interested and has the time he can start porting the library to Java 11.
It will be highly appreciated, so if you are interested, just ping me and we will figure out a way to work together.
***********************

The latest source code and binaries can be find at the following sites as always...

Source:    github

Binary:    bintray

Maven:    maven central


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

Wednesday, November 7, 2018

AnglePicker

Aloha,

Well it was just a question of time before I started to create a control for picking an angle as you might have guessed from my last post.
And here it is...a simple angle picker control:







You can simply rotate the knob to adjust the angle and if you double click on the control you can also enter the value directly into the text field.

The control has an angle property that contains the current angle that was set.

I needed this control for my gradient picker and thought you might want to use it too for whatever project you have :)

Watch this little video to see how it works...



So as always the source code can be found over at github

And that's already it for today...so keep coding...

Wednesday, October 31, 2018

Another LinearGradient...

Aloha,

I was playing around with a JavaFX application for a customer and missed a functionality from the JavaFX LinearGradient. So you can define a linear gradient by defining a start and end point and fill it either proportional or not.
Well this works most of the time but if you have to create the linear gradient from code it sometimes could be useful if you simply could define an angle and a list of stops to define the gradient. So here is a little drawing that explains it a bit better:



In principle I would just need to extend the existing LinearGradient but unfortunately this is not possible :(
So I have to create a new class, in this case I named it LinearGradientD and this simply wraps a LinearGradient and takes an angle and a list of Stops as parameters.
So the main thing you have to do is to turn the angle in xy coordinates for the gradient and the code is really simple, so here it is:


private void init(final double angle, final List<Stop> stops) {
    this.angle = angle % 360;

    double angleRad = Math.toRadians(angle);
    double x        = Math.cos(angleRad);
    double y        = Math.sin(-angleRad);

    double x1 = x > 0 ? 0 : Math.abs(x);
    double y1 = y > 0 ? 0 : Math.abs(y);
    double x2 = x > 0 ? Math.abs(x) : 0;
    double y2 = y > 0 ? Math.abs(y) : 0;

    gradient = new LinearGradient(x1, y1, x2, y2, true, CycleMethod.NO_CYCLE, stops);
}

As you can see we simply calculate the xy values from the angle using some trigonometry and set the resulting xy coordinates in the wrapped LinearGradient object.
One advantage of using the angle to describe the gradient is that you can now also easily rotate the gradient as you can see in the following video:



Well I guess that's already it for today, nothing special but I thought it might be worth blogging about it.
Of course the code is available on github, so feel free to use it for whatever you need it.

So...keep coding... :)