Maybe some of you know or have already worked with Adobe products like Premier Pro or After Effects.
From the perspective of a UI developer there are many cool things about these products. For example you can seamlessly
fade the brightness of the UI and it looks great in every brightness level
(which seems to be a hard task).
This is cool because there are good reasons for users to prefer either a dark or light interface. For example some
creative artists like to work in a dimmed office so that no light from outside is overlaying the colors picture/video
they are working on. In this situation a dark user interface is better then a light one because it's more comfortable
for the eyes.
On the other hand I know people how prefer a light and friendly user interface because a dark one would give them a
depressive fealing.
So it can be a big plus for the usability of your application when you allow the user to adjust the brightness of your
app.
Adjustable Brightness in JavaFX
Something like this can be done with JavaFX too. With JavaFX 8 there was a new default stylesheet created known as
modena.
In this stylesheet there is a color definition named -fx-base
that is, as the name suggests, the base for all other
color definitions in the stylesheet.
When you adjust the value of -fx-base
all other colors will be adjusted automatically in relation to -fx-base
.
Example
The first thing to do is to create an IntegerProperty that will hold the brightness level in a range from 0 to 100%.
IntegerProperty brightness = new SimpleIntegerProperty();
After that we create a
StringExpression (which is a
base class of StringBinding) that
contains the style definition of -fx-base
with the value of our brightness property.
DoubleBinding colorValue = brightness.multiply(2.55);
StringExpression styleString =
Bindings.format("-fx-base:rgb(%1$.0f , %1$.0f, %1$.0f)", colorValue);
For this task we can use the
Bindings.format
method that takes a format string and an observable value. In the example I'm using the rgb
css method to define the
color. This method takes the color information for every channel in a range from 0 to 255. For that reason I'm creating
a DoubleBinding
that contains the multiplication of our brightness property (from 0 to 100) with 2.55
so that the
value range is correct.
The last step is to bind the style property of the root container of your application to the StringExpression with our
style definition.
Parent root = ...
root.styleProperty().bind(styleString);
This way the styling of the application is adjusted everytime the brightness property changes.
I've created a small example app that shows the usage of this binding. In the app I have bound the brightness
property
to a slider so you can change the brightness level without interruption. To demonstrate the effect I created a dummy
form with some JavaFX controls.
Dark:
Medium:
Light:
You can find the example code on github:
https://github.com/manuel_mauky/javafx-brightness-example. Feel free
to use it in your own applications!