And the Nashorn again...

I know I know...it's a long time ago...but a lot of things happened within the last couple of months which kept me away from blogging...
So today my colleague Bruno Borges asked me if I would have an example where I use JavaFX with Nashorn only...means without writing any Java code and because I had no example I've created one :)

So here you go, simply copy the following code in a file named e.g. nashorn.js :

load('fx:base.js');
load('fx:graphics.js');

var Random        = java.util.Random;
var lastTimerCall = 0;

var Gauge         = Packages.eu.hansolo.enzo.gauge.Gauge;
var Section       = Packages.eu.hansolo.enzo.common.Section;

var timer         = new AnimationTimer() {
    handle: function handle(now) {
        if (now > lastTimerCall + 5000000000) {
            gauge.value = new Random().nextDouble() * 40;
            lastTimerCall = now;
        }
    }
};

var gauge      = new Gauge();
gauge.title    = 'NashornFX';
gauge.unit     = '°C';
gauge.minValue = 0;
gauge.maxValue = 40;
gauge.sections = [new Section(18, 26),
                  new Section(26, 32),
                  new Section(32, 40)];
gauge.style = ('-section-fill-0: rgba(0, 200, 50, 0.5);' +
               '-section-fill-1: rgba(200, 100, 0, 0.5);' +
               '-section-fill-2: rgba(200, 0, 0, 0.5);');

$STAGE.title = 'Nashorn FX';
$STAGE.scene = new Scene(new StackPane(gauge), 400, 400);
$STAGE.show();

timer.start();

And with a few lines of code we created a JavaFX scene and add a stage that contains a Gauge that has three sections with custom colors. In addition we also added an AnimationTimer that changes the value of the Gauge every 5 seconds.
For those of you who are wondering how I can access my Enzo-0.2.4.jar file here is solution...you can simply add it to the classpath when calling the script.

To be able to run the application you have to copy the Enzo-0.2.4.jar file to the same folder as the nashorn.js file. The Enzo library can be downloaded here.

To start the application simply execute the following on the command line:

#: jjs -cp Enzo-0.2.4.jar -fx nashorn.js

Please make sure you run that script on JDK 8 !

If everything is correct you should see something like this...

And that's it for today...keep coding... :)

Friday Fun Component XX

Hi again,

during the last weeks I was working on my JRunner project which is a wearable system based on an Odroid-W running on Java SE embedded. As you might guessed already the system was made to monitor a runner or bicycle rider. Especially the heart rate is very interesting to monitor and analyze. To visualize the recorded data and also to track the runner live during the run I've created a JavaFX based desktop application which shows all the different parameters.
And because I would like to have a gauge in the app (you know I love gauges) I was looking for a gauge that I can use to visualize the current heart rate and the average heart rate in one gauge.
To make it short...here it is...

As you can see it has two bars and some text. The outer bar visualizes the current heart rate and the inner bar visualizes the average heart rate. Because I have a color scheme in my app to visualize the different heart rate zones I would like to color the bars dependend on the heart rate. Therefor I've used my little GradientLookup class that I've used before. To get an idea about the current value, the big number shows the current and the small number the average heart rate. For my use case I set the title always dependend on the current heart rate zone.
Both bars can be set independently and are animated. If you would like to use the mode where the bars change their color dependent on the value you have to enable it by calling setMultiColor(true). If not you can simply set the color for the outer and for the inner bar and the colors won't change dependent on the value.
You could also set the color of the inner background, the border and for each text of the gauge.
Like always I've created this control for one of my demos so don't expect it to be production ready but if you like you might want to fork it on bitbucket.
I've also recorded a very short video on youtube that shows the gauge in action.

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

Enzo is on Maven Central

Just a short announcement...if you like you could find the JavaFX 8 controls library "Enzo" now on Maven Central.

That was really short...so keep coding... 

Just flip it...

Hi there,

When writing this blog post I'm on a trip in Canada visiting my good friend Todd Costella for a JavaFX training. So before the training started I've found a control that I've created 2 years ago and that was not very well coded so I decided to port it to JavaFX 8 and add it to my Enzo library. 
The control is a simple panel that has two sides to which one could add some content. To switch between both sides the panel has to methods, flipToFront() and flipToBack(). I personally think that this kind of control could be quite useful in applications to keep the focus of the user at the position where you would like to have it. E.g. changing the properties of a control can be done at the location where the location is placed instead of using a properties menu etc.
Here is a little video that demonstrates the usage of such a panel.



This might not be usable for everything but in some applications it could make sense.

For those of you that are interested in this, you will find it as part of the Enzo controls library on bitbucket.

So that's all for today and don't forget...keep coding...

Enzo moved to Bitbucket

This is just a short blogpost about some modifications to the Enzo project. 

First of all I changed the build from one monolithic project to a multi project gradle setup.
With this approach each package will now be created as a single jar which makes it possible to use only parts of the library (e.g. only the Led). 
When you build the library it will also create the single jar file that contains all controls like before.
This is something that was on my to do list for some time and today I finally did the conversion.

And because I was changing the whole setup I decided to change the repository hosting from github to bitbucket.

At the moment you will find the "old" version on github and the new version on bitbucket but I will remove the repo from github in the near future.

Here is the link to the new repository on bitbucket:

https://bitbucket.org/hansolo/enzo/wiki/Home

This was the first time I setup a multi project build with gradle in IntelliJ 13 and I hope everything works like expected, so if you have problems with building the project, please let me know.

That's it for today...so enjoy the upcoming weekend and keep coding...

JavaFX on Android

Hi there,

Today I finally was able to get one of my JavaFX custom controls running on my Android based Nexus 7 and I think this is a good reason to share it with you...
So first of all I have to say THANK YOU to Johan Vos for setting up a Bitbucket Project that makes the setup very easy. So for those of you that don't know what I'm talking about, please take a look here

https://bitbucket.org/javafxports/android/wiki/Home

There you will find a description how to compile a JavaFX project for Android. Well for those of you that know me you can imagine that running a "boring" standard JavaFX application is fine but I would like to see one of my controls running on my Nexus 7 :)
So the first thing I did was trying to get one of my Enzo controls running on my Nexus 7 and what should I say...I failed... :(
Well that was not really surprising because you need JDK7 style Custom Controls to let them run on your Android device. 
That means you usually would need

• Control
• Skin
• Behavior
• CSS

for your control. So I backported the SimpleGauge from Enzo to JDK7 and tried to get it running on the Nexus 7...and again failed.

The only thing that I saw was a little white square on the Nexus which looked to me like the scene was not properly resized. The next step was instantiating the scene directly with a with and height and now...I saw a white box with the right size but without any control...

This reminded me on the problems that I had with JavaFX Custom Controls on the BeagleBoard xM and so I used a different approach which is extending Region to create the control.

So instead of using the Control, Skin, Behavior and CSS approach I now simply created a class that extends Region and contains all the properties and drawing code.
And what should I say...it worked as you can see on this little video that I recorded with my iPad mini.





UPDATE: 
I've updated the app and instead of using random numbers it now shows live measured temperature, humidity and pressure data from one of my Raspberry Pi's. Btw the video also shows the same code running on my iPad mini :)

Here is the link: https://www.youtube.com/watch?v=KqSjywExsTs

So there are a few things I would like to tell you that might lead to problems...

Creating the jar from the IDE didn't work for me so I created the jar by using the javafxpackager like follows

javafxpackager -createjar -appclass PACKAGES.AND.YOUR.MAIN.CLASS -outfile YOUR_JAR_NAME.jar -v -nocss2bin -srcdir /PATH/TO/YOUR/PROJECTS/CLASS/FILES

That creates a jar file that you can start on the console by calling
java -jar AndroidFX.jar

After that was done I followed the instructions from Johan Vos and here you should use Gradle 1.4 (I got problems when using Gradle 1.9).

And another important thing was that I have to use JDK7 as the standard VM when compiling everything.


So for those of you that would like to try the Android APK file directly you can download it here:

AndroidFX-debug.apk

And for those that would like to take a look at the code that I used, feel free to fork it on Bitbucket...

https://bitbucket.org/hansolo/androidfx

I think that's all I have to say for today, so enjoy your upcoming weekend and as always...keep coding...

Enzo part II

And another one...
This time let me tell you something about another control in the lcd package...the LcdClock. To give you an idea what I'm talking about...here is a little screenshot

As you can see it looks similar to the Lcd control and indeed it is based on the Lcd control and supports all the Lcd styles that I showed in the last post.
Because this is just a simple clock there not so many features that you can adjust. The main things are

• title
• alarms
• locale
• dateFormat
• dateSeparator

The title is just a simple text that will be shown on top of the LcdClock. When I created the LcdClock I remembered the time on the University where we had to spent some time in the CleanRoom and observe some processes. Most of the times we use a little AlarmClock with either a countdown timer or with a simple alarm to remind us on running processes etc.
So the idea was to have the ability to add one or more alarms to the LcdClock that will fire an event and can also execute something by themselves. So let me give you an example.

class Commando implements Alarm.Command {
    @Override public void execute() {
        System.out.println("This will be executed by the alarm");
    }
}

Alarm alarm = 
    new Alarm(Alarm.Repitition.ONCE,
              LocalDateTime.now().plusSeconds(30),
              Alarm.ARMED,
              "Some text",
              new Commando());

The Alarm class that I use here offers different features

• time
• repetition
• armed
• text
• command

The time specifies the alarm time and the repitition defines if this alarm will be triggered only once or if it will be triggered in intervals. Possible values are

• Alarm.Repetition.ONCE
• Alarm.Repetition.HOURLY
• Alarm.Repetition.DAILY
• Alarm.Repetition.WEEKLY

You can arm or unarm an alarm by calling the setArmed(boolean) method on the alarm instance. 
Each alarm can have it's own text that you can use as an alarm message or for whatever you like. And at least we have the Command interface that simply has an execute() method which will be called when the alarm is due. 
The alarm indicator in the LcdClock will be visible as long as there are alarms in the internal list.
You can add and remove Alarms in the LcdClock and if an Alarm is due it will be removed from the list of Alarms if it has a repetition of Alarm.Repetition.ONCE.

Please keep in mind that this control (like all others in Enzo) was not made for production code and might contain bugs but if you like it you can fork it on bitbucket


https://bitbucket.org/hansolo/enzo/wiki/Home

That's it for today...so enjoy JavaFX and keep coding...

Enzo part I

Hi everyone,

As you might know I've started another JavaFX controls library named Enzo which you can find on github.
This project started as a playground for JDK8 and JavaFX8 and in the meantime it contains some controls that I would like to share with you.
So this is the first post of a series about the Enzo controls. The idea is to explain one control with each post and because it's my favourite control I will start with the Lcd control.

The Lcd control can be found in the package: eu.hansolo.enzo.lcd

If you instantiate a Lcd control you will get something like this...

This is the simplest version of the Lcd control only showing a value. The control offers many different features and if everything is enabled it will look like this...

As you can see there are different kind of symbols and text fields available.
On the next screenshot you will find the name of each feature...

Most of the above features could switched on/off (except the backgroundText which depends on the used valueFont). Because all controls in Enzo will come with a Builder (I liked the builders so I decided to add them to my controls) the code to instantiate the full blown lcd will look like this...

Lcd lcd = LcdBuilder.create()
                    .prefWidth(480)
                    .prefHeight(192)  
                    .styleClass(Lcd.STYLE_CLASS_STANDARD)
                    .backgroundVisible(true)                     
                    .value(42)
                    .foregroundShadowVisible(true)
                    .crystalOverlayVisible(true)
                    .title("Title")
                    .titleVisible(true)
                    .batteryVisible(true)
                    .signalVisible(true)
                    .alarmVisible(true)
                    .unit("°C")
                    .unitVisible(true)
                    .decimals(2)
                    .minMeasuredValueDecimals(2)
                    .minMeasuredValueVisible(true)
                    .maxMeasuredValueDecimals(2)
                    .maxMeasuredValueVisible(true)
                    .formerValueVisible(true)
                    .threshold(26)
                    .thresholdVisible(true)
                    .trendVisible(true)
                    .trend(Lcd.Trend.RISING)
                    .numberSystemVisible(true)
                    .lowerRightTextVisible(true)              
                    .valueFont(Lcd.LcdFont.LCD)
                    .animated(true)

                    .build();

As you can see in the code above there is a styleClass method in the builder where you can define the visual appearance of the Lcd control. And because there are so many nice Lcd displays out there I've tried to cover as many as I've found. 
To give you an overview over all available styles I created another screenshot for you...

As you can see there are a lot of different styles available and all of them are defined in CSS. You will find more realistic versions and also some flat ui styled ones.
In case you don't want to use a style at all you can simply switch of the background by calling setBackgroundVisible(false). With this feature you could use the Lcd also on your own backgrounds which sometimes might be useful.
You will also find features like the signal, trend, alarm or battery indicator which you can switch on or off by calling 

• setSignalVisible(true/false) 
• setTrendVisible(true/false)
• setAlarmVisible(true/false)
• setBatteryVisible(true/false)

The signal, trend and battery indicator also have getters and setters to set their value. So to set the battery to another value you can call

• setBatteryCharge(double 0...1)

and for the signal indicator please call

• setSignalStrength(double 0...1)

The trend indicator has 6 different states that you can call, the states are

• UP
• RISING
• STEADY
• FALLING
• DOWN
• UKNOWN

and the method to set one of these is

• setTrend(Lcd.Trend.STATE)

Keep in mind that you have to take care about the trend which means you have to check whether it's rising or falling, so you can implement your own algorithm to calculate the trend.

You have 5 different fonts available to visualize the main value of the Lcd control. The available fonts are

• Lcd.LcdFont.STANDARD
• Lcd.LcdFont.LCD
• Lcd.LcdFont.DIGITAL
• Lcd.LcdFont.DIGITAL_BOLD
• Lcd.LcdFont.ELEKTRA

which will look like this

Lcd.LcdFont.DIGITAL

Lcd.LcdFont.DIGITAL_BOLD

Lcd.LcdFont.ELEKTRA

Lcd.LcdFont.LCD

Lcd.LcdFont.STANDARD

If you use the Lcd control to measure values in a longer interval (> 2 sec) you can use the animation feature which will count the value from the current value to the new value in the time that you specified with setAnimationDuration(double duration) in ms. This is useful if you for example measure the temperature every 5 minutes you could set the animation duration to 60000 ms which will then slowly increase/decrease the value to the new measured value within a minute. But if you measure values more quickly (interval < 2 sec) you should switch off the animation by calling setAnimated(false). This will directly set the lcd value to the new value.

Another maybe useful feature is the ability to blink the value of the Lcd control by calling setBlinking(true). This feature can be used to indicate that a threshold was exceeded or simply to grab the attention of the user.

The Lcd control supports three different number systems that you can use which are

• Lcd.NumberSystem.DECIMAL
• Lcd.NumberSystem.HEXADECIMAL
• Lcd.NumberSystem.OCTAL

which will display the current value in the choosen number system.

The lower right text can therefor be used to display the current number system by calling setNumberSystemVisible(true which will override the setLowerRightText("YOUR TEXT") method. Here are examples for the different modes

Lcd.NumberSystem.DECIMAL

Lcd.NumberSystem.HEXADECIMAL

Lcd.NumberSystem.OCTAL

It is also possible to use the Lcd control as a simple text display by enabling the text mode with setTextMode(true).
There is no scrolling or animation implemented for the text but this might come in future releases of the control.
Keep in mind that the text mode will not work with the Lcd.LcdFont.LCD because this is a 7-Segment font which has no characters.
Here are some examples

You can also use the text mode in combination with all the other features as on the following picture

I hope I covered most of the features of the Lcd control and if you have a special need for an additional feature you could either let me know and hope that I'll find some time to implement it or you can fork the project on bitbucket and do it yourself... :)

If you are interested in the sources you can find them on bitbucket at

https://bitbucket.org/hansolo/enzo/wiki/Home

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

Give the Nashorn some Pi...

Hi there,

Exciting times...since 2 weeks we have an updated version of JDK8 available for the Raspberry Pi and it's based on build b97 (well in the meantime we have b98 and b99 should be available soon). This means the restrictions that we had with the december build of JDK8 for the Pi are gone...e.g. custom controls that have been developed for the desktop will run on the Pi without modification...YAY!!! Finally I can test my standard Enzo build on the Pi which is awesome.
In addition to this we now also have 3D support and Nashorn on the Pi...and again YAY!!!
Now it's time to give the Nashorn some Pi and see if it works. I explained my idea some weeks ago, if you develop Java for the Raspberry Pi it's not that bad, you can develop your application on your desktop computer, create a jar, copy the jar to the Pi and start it there. That's ok...BUT if you would like to change something or test something this procedure could get boring because it's timeconsuming. So one possible solution might be using property files that you load at startup and so you have the chance to modify parameters. The disadvantage is that you have take care about each property in your app which means you have to know all the parameters you would like to change up front...not a really good solution.
When I read about Nashorn the idea came to my mind that it might be cool if I could access JavaFX controls from a script that could be loaded at runtime, so not only at startup but also when the application is running.
Well I tested that and it worked on the desktop so now it's time to test it on the Raspberry Pi.
In principle you could use the same code that I use for the "Taming the Nashorn again..." blog post to run a script at startup and you will figure out that it simply works.

Attention:
You have to put the nashorn.jar which is in $JAVA_HOME/jre/lib/ext on the classpath (don't ask me why but Jim Laskey figured that out and it worked...thanx to Jim for the hint).

To load a script during runtime you can use the same routine as for loading it at startup, so that's easy but I would like to go a step further, add a Filesystem Listener to a javascript file and reload the file if it was modified. With this approach I would be able to start a JavaFX application on the Raspberry Pi, connect to the Pi via SSH and modify the JavaScript file with a simple text editor like nano on the shell. After I save the JavaScript file the JavaFX application will be triggered because the file was modified and so the file will be reloaded and re-applied to the application (make sure that you are on the FXApplicationThread by calling Platform.runLater(new Runnable())...).
Because the polling of the Filesystem Listener is not that fast it could take a second or two before the Application will change but this is no problem because I can now modify a running application...sweet.
Ok, that's nice but what if I don't have a direct network connection to my Raspberry Pi? Means I can't use SSH easily to connect to the Pi and modify the JavaScript file...
Well as you might know I'm a big fan of XMPP so why not using a simple chat to send the script directly to the JavaFX application on the Raspberry Pi and evaluate it by the Nashorn scripting engine. Long story short...it's just to easy to implement because you simply send a text message to the JavaFX application via XMPP and pass the script text to the Nashorn scripting engine where it will get interpreted...done :)
To give you an idea about how that works I've created a little screen video that I've put on YouTube.



To see the text in the shell window you should increase the screen size of the video.

I won't show any code here because it's not finished yet so please be give me some time to prepare a little project that will contain the code...

UPDATE:
I've put the code I used for the demo on a BitBucket repo, so feel free to take a look at it...

That's it for today...enjoy taming the Nashorn and keep coding...

Need some notification...?

Hi there,
last Monday I attended the JayDay conference in Munich which was organized by Anton Epple and Barbara Py. I just can say that I wish all conferences would be so nice as this one was. During the day I've added another new little project to the Enzo library...notifications. 
If you know Growl notifications you know what I'm talking about. In principle it's just little popups that will remind you on something or simply give you a short info about some event etc.
I thought it might be a good idea to have something like that available in JavaFX so here you go. At the moment you could either define your own notification or use one of the four predefined notifications.
A notification contains a title, a message and an icon (which is optional). 

Here is some code that will show you how to use it...

// Create a custom Notification without icon
Notification info = new Notification("Title", "Info-Message");

// Show the custom notification
Notifier.INSTANCE.notify(info);

// Show a predefined Warning notification
Notifier.INSTANCE.notifyWarning("This is a warning");

As you can see this is really simple and to give you an idea about how the notifications look like, here are some images...

Notifier.INSTANCE.notifySuccess("Success");

Notifier.INSTANCE.notifyInfo("Information");

Notifier.INSTANCE.notifyError("Error");

Notifier.INSTANCE.notifyWarning("Warning");

The notifications will appear on the upper right corner of the screen and will disappear after 5 sec. New notifications will always stay on top and older notifications will move down.
If you create your own notification with a given image, this image will be scaled to 24 x 24px. 
The styling is done by css and the styles could be found in the notifier.css file.

Here is a little video of the notification in action...




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