Hi there,
This is just a short post about a little JavaFX control that I've created last weekend. Some time ago I've bought a NeoPixel24 ring from Adafruit and last weekend I've started to play around with it. For those of you that don't know the NeoPixel ring, here is a little image...
As you can see it is a simple ring of RGB led's.
Connecting the NeoPixel ring to my Arduino YUN was really easy and with the help of the Adafruit NeoPixel library for Arduino it was a piece of cake to control the NeoPixel ring via code.
But I'm a Java guy and like to code Java so I was thinking about how to make use of the NeoPixel ring from my desktop machine and decided to create a JavaFX control that represents the NeoPixel ring.
Long story short...that's how it looks like...
It's not a really fancy looking control but might be useful for one or the other. First I've started to create the control from JavaFX nodes using CSS to style it but after some tests I've decided to use the Canvas node to create the control. The reason for this decision is the fact that I have to change the color of each led very often which is not the best thing to do in CSS. In Canvas this is very easy because I simply redraw the led's (and only the led's because the ring and the led frames are in a separate Canvas node) which is fast enough.
For my little test project I simply increased the no of activated led's and sent the number of active led's and the current color via MQTT to the Arduino YUN which sets the real NeoPixel ring in the same way. So I can use the NeoPixel ring as some kind of a temperature gauge.
Here is a little video that shows the result...
And if you are interested in the code of the NeoPixel24 JavaFX control, feel free to fork it on Bitbucket.
UPDATE:
Because I've ordered a NeoPixel ring 60 from Adafruit to build a little clock with it, I've also added a NeoPixel60 JavaFX control to the project on Bitbucket. To give you an idea how it looks like, here it is:
That's it for today, so keep coding...
Aloha,
And another one from Canada. After I've ported two controls from the SteelSeries to JavaFX 8 I thought it might make sense to add a third one...the Altimeter control.
But after I've created the control I thought it now might make sense to add those three controls to a little library because they are somehow related to each other.
So I've created a library called AirSeries which contains the AirCompass, the Horizon and the Altimeter control.
If you check out the source code at Bitbucket you will find a Demo class in the project and when you start it you will see something like this...
And if you want to see it in Action you might want to check this YouTube video.
I can't guarantee that these controls work exactly right because I've never used them by myself and did them only because some people asked me to create them. So if you find some problems, do not hesitate to send pull-requests :)
So happy easter to all of you and keep coding...
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...
And again a little post about a control that you've asked me for...
The Horizon control from the SteelSeries Swing library is now also available as a JavaFX 8 control (but like the AirCompass it's just a quick conversion without many possibilities for modifications).
To those of you that don't know what I'm talking about, this was the original Horizon Swing control...
And here is the JavaFX 8 version of the Horizon control...
As you can see it doesn't look exactly the same but I hope it's good enough for those of you who asked for it.
Otherwise...just fork it on BitBucket and do it yourself :)
That's it for today...so keep coding...
Aloha,
I was looking for an idea on how to show what one could do with the JavaFX WebView except showing html content and had an idea on how to combine the WebView and Nashorn for some live editing.
So you might have seen live editors where you can edit code and directly see some visual feedback (e.g. SwingPad).
Well I was not after recreating this editors but only on how to do this in a very simple way and this is what I've came up with.
Create a simple HTML page with just a textarea like follows:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var doc = document;
function getCode() {
window.status = doc.getElementById('codeArea').value;
}
</script>
<style type="text/css">
textarea {
font-size: 12px;
}
</style>
</head>
<body style='background-color: rgb(216, 222, 227)'>
<textarea id='codeArea' name='codeArea' onkeyup='getCode()' rows='23' cols='55'>
// Import JavaFX classes
var Color = javafx.scene.paint.Color
var Led = Packages.eu.hansolo.enzo.led.Led
var LedType = Packages.eu.hansolo.enzo.led.Led.LedType
// JavaFX Code in JavaScript syntax
led.ledType = LedType.ROUND
led.ledColor = Color.RED
led.on = false
</textarea>
</body>
</html>
As you can see the HTML page only has one textarea that contains some code. The code is JavaScript and should set some parameters of an Enzo Led JavaFX control later on.
I hooked up an onkeyup listener that will trigger the getCode() method each time a key was pressed.
This method only set the window.status to the current value of the textarea tag.
The nice thing in the JavaFX WebView is the possibility to hook up a ChangeListener to the window.status of the loaded HTML page.
That means as soon as the window.status in the loaded HTML page changed, the ChangeListener in the JavaFX application will be triggered and one could read the new status of the HTML page (which is the text in the textarea in this case).
This is the point where Nashorn joins the game, I simply pass the text from the textarea to the Nashorn JavaScript engine and try to evaluate it as code. If the code is valid it will be executed immediately. To see the changes in the JavaFX application I've added the Enzo JavaFX Led control to the Scene. The last thing we need to do is to inject the Led control instance to the Nashorn scripting engine so that Nashorn is able to change the parameters of the Led control.
Here is the JavaFX code that demonstrates the live editor.
public class Demo extends Application {
private ScriptEngineManager scriptEngineManager;
private ScriptEngine scriptEngine;
private StackPane ledContainer;
private Led led;
private WebView webView;
private WebEngine webEngine;
// ******************** Initialization ************************************
@Override public void init() {
led = new Led();
ledContainer = new StackPane(led);
ledContainer.setPrefSize(400, 400);
ledContainer.setPadding(new Insets(10, 10, 10, 10));
initNashorn();
}
private void initNashorn() {
scriptEngineManager = new ScriptEngineManager();
scriptEngine = scriptEngineManager.getEngineByName("nashorn");
// Inject led object into Nashorn scripting engine
scriptEngine.put("led", led);
}
private void initWebView() {
webView = new WebView();
webView.setPrefSize(600, 400);
webEngine = webView.getEngine();
webEngine.load(Demo.class.getResource("editor.html").toExternalForm());
webEngine.getLoadWorker().stateProperty().addListener((ov, o, n) -> {
if (Worker.State.SUCCEEDED == n) {
webEngine.setOnStatusChanged(webEvent -> {
try {
scriptEngine.eval(webEvent.getData());
} catch (Exception e) {/* code was not valid */}
});
}
});
}
// ******************** Application start *********************************
@Override public void start(Stage stage) {
initWebView();
HBox pane = new HBox();
pane.setSpacing(10);
pane.getChildren().addAll(ledContainer, webView);
Scene scene = new Scene(pane);
stage.setTitle("WebView live edit");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Keep in mind that you JDK8 and Enzo to run that code. The result should look similar to this...
This is a very easy poor man live editor that has a lot potential for improvements (like adding a syntax highlighting JavaScript library like highlight.js or codemirror) but it shows the power of the JavaFX WebView in combination with Nashorn.
That's it again...so enjoy Java and keep coding...
Hi there,
I know I know...long time no post but that's like it is when you're busy...
So today I just have a short post for you about a control that I've originally created for the SteelSeries Swing components library but because you've asked for a JavaFX version I've decided to quickly create one and here you go.
The control I'm talking about is the so called AirCompass which simply visualizes the bearing like you know it from airplanes.
The original version can be found here and it looked like this...
The JavaFX version looks a bit different (because I did not spent much time on it) but should be good enough, here it is...
It has not many properties but you can set the bearing, you can enable/disable animated rotation and you can set the color of the plane and the orientation text...that's it.
So if you would like to use it, feel free to get it on bitbucket.
That's it for today, so keep coding...
