Introducing fontawesomefx-examples project

Some people asked me about a FontAwesomeFX tutorial.
Now I started a new project: fontawesomefx-examples at GitHub!

basic_1

The examples will always reflect the latest version of FontAwesomeFX (currently 8.12 which can be loaded from Bintray) and I am going to extend it soon to show all stuff which provided by the lib.

FontAweseomFX 8.12 release informations

FontAwesomeFX 8.0.9 with 40 new icons

I have updated FontAwesomeFX and released version 8.0.9.
A few days ago the FontAwesome 4.2.0 was released with 40 additional icons (FontAwesome now contains 479 icons).

Also I added a simple browser to preview all contained icons.
You can start it via: de.jensd.fx.fontawesome.test.IconOverview

iconsbrowser_8.0.9

Download Binaries
Sources @ Bitbucket

Maven Artifact:

<dependency>
  <groupId>de.jensd</groupId>
  <artifactId>fontawesomefx</artifactId>
  <version>8.0.9</version>
</dependency>

MQTT.fx 0.0.7 released

A new version of MQTT.fx is available featuring:

  • Scripting support
  • Setup/Re-configuration tool
  • Reviewed Connection Profile Editor
  • Reviewed UI and style

007_start

Download latest binaries HERE.

Scripting support

I have added support for scripts executed by the Nashorn Engine.
Thought it might be helpful for testing a MQTT message flow of a certain setup, e.g. simulate sensors sending temperature value messages. All controlled via the UI.

007_executescript

Adding new scripts

New scripts can be easily made available for execution via the UI. The app is scanning a folder named “scripts” located at the MQTT.fx working directory:
OS X: [USER_HOME]/Library/Application Support/MQTT-FX/scripts
Windows: [USER_HOME]\AppData\Local\MQTT-FX\scripts
Linux: [USER_HOME]/MQTT-FX/scripts
If this folder does not exists it is created by MQTT.fx containing a demo script.

007_workingdir

Naming convention:

[INDEX]__[NAME].js
01__Switch_Fountain_Test.js

[INDEX] - controls the order of the entry in the drop down menu
__ - delimiter between index and name
[NAME] - the name of the menu entry (words are delimit by '_')

Hint:
If you name a script “separator”, e.g. 02__separator.js a separator is added to the menu at the “index” position.

007_scripting

Example script:


var Thread = Java.type(“java.lang.Thread”);
var System = Java.type(‘java.lang.System’);

function execute(action) {
out(“Test Script: ” + action.getName());
for (var i = 0; i < 10; i++) { switchON(); Thread.sleep(500); switchOFF(); Thread.sleep(500); } action.setExitCode(0); action.setResultText("done."); out("Test Script: Done"); return action; } function switchON() { out("fountain ON"); mqttManager.publish("home/garden/fountain", "ON"); } function switchOFF() { out("fountain OFF"); mqttManager.publish("home/garden/fountain", "OFF"); } function out(message){ System.out.println(message); } [/javascript] The entry point of execution is the function execute(action).
During script execution System.out is hooked by MQTT.fx to print output to the console. Thus with System.out.println() messaged can be printed to the UI-console.

The interface to the broker-connection is the bound mqttManager. Messages can be published via the established broker connection.

Setup/Re-configuration Tool

If no configuration can be found, the app assumes its first start. The user is promoted with a setup dialog to create e new configuration.

Also if a configuration has been found but it seems to be corrupt or the format doesn’t fit a newer version also a new configuration can be created or the exiting config can be opened in an external editor (assumed an editor has been assigned to open *.xml-files.

007_setup

Reviewed Connection Profile Editor
Now the Connection Profile Editor is recognising wether the chosen profile has been changed (buttons are enabled/disabled accordingly). Changes can be reverted as not already applied.

007_newprofile

Reviewed UI and Style

Greetings from Yosemity! 😉

How to get rid of focus highlighting in JavaFX

Today I was asked if I know a way to get rid of the focus-highlighting of JavaFX controls (respectively buttons):

button_hover

Most posts and tipps regarding this issue suggesting to adding:

.button:focused {
    -fx-focus-color: transparent; 
}

But with this style a glow like this is still left:

button_glow

To get rid of this glow also often suggested to play around with -fx-background-insets additionally:

.button:focused {
    -fx-focus-color: transparent; 
    -fx-background-insets: -1.4, 0, 1, 2;
}

But this results in a button rendered with out an outer border:

button_insets

Compared to the default button style

button

this is still a kind of “highlighting”:

Why is that? (And why are there actually 4 inset values ?)
(note he comment of David Grieve below)

Having a look at the JavaFX default style as defined by modena.css bares some more information:

/* A bright blue for the focus indicator of objects. Typically used as the
* first color in -fx-background-color for the "focused" pseudo-class. Also
* typically used with insets of -1.4 to provide a glowing effect.
*/
-fx-focus-color: #f25f29;
-fx-faint-focus-color: #f25f2933;

Obviously there is not only one focus color -fx-focus-color but also -fx-faint-focus-color which is meant to create this glow-effect (that is remaining when setting -fx-focus-color:transparent;).

A closer look at the .button:focused pseudo class (in modena.css):

.button:focused {
    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; 
    -fx-background-insets: -2, -0.3, 1, 2;
    -fx-background-radius: 7, 6, 4, 3;
}

Playing around with some (extreme ;-)) colouring reveals the arrangement:

.button:focused {
    -fx-focus-color: red;
    -fx-faint-focus-color: green;
    -fx-inner-border: blue;
    -fx-body-color: orange;

    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; 
    -fx-background-insets: -2, -0.3, 1, 2;
    -fx-background-radius: 7, 6, 4, 3;
}

button_hover_style

Getting back to the topic maybe a clent way to remove the focus hightlight is to use the default button styles also for .button:focus (same approach for other controls):

.button:focused {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; 
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 5, 4, 3;
}

FontAwesomeFX 8.0.7/8.0.8 released

UPDATE: In 8.0.7 I forgot to replace the TTF! So 8.0.7 still contains the 4.0.1 font. Some icons may not be displayed with 8.0.7. Have fixed this issue with fontawesomefx-8.0.8.

NavigationButtonsI have updated FontAwesomeFX and released version 8.0.7.
A few days ago the FontAwesome 4.1.0 was released with 70+ additional icons (FontAwesome now contains 439 icons).

Download Binaries
Sources @ Bitbucket

Maven Artifact:

<dependency>
  <groupId>de.jensd</groupId>
  <artifactId>fontawesomefx</artifactId>
  <version>8.0.8</version>
</dependency>

“somehow more organic”: how to create a ‘noisy’ gradient in JavaFX

If you always wondered why some regions on your Mac, Websites or in your Smartphone-Apps look somehow more organic than a plain coloured area or even an region with a gradient, have a closer look!
Zooming into these areas shows that they are a bit “noisy”.

This effect can be created very easily with CSS in JavaFX too:
I just noticed that “-fx-background-image” is painted in front of “-fx-background-color“:

javafx_css_color_paint

So, what is needed is a transparent “noise texture” which can be created here or here.

This texture is then used as a repeated background-image and painted in front the background-color which in JavaFX-CSS can also be a linear gradient:

-fx-background-color: linear-gradient(rgb(224,228,233) 0%, derive(rgb(224,228,233),-20%) 100%);
-fx-background-image: url("images/noise-texture.png");
-fx-background-repeat: repeat;  

I used this approach e.g in my MQTT.fx-UI:

mqtt-fx-6-noise-0.0.2