Science Fiction User Interfaces with JavaFX Part 1

Sci-Fi UI Shaped Window created using JavaFX

Can Fictional UIs become a Reality?

Growing up as an 80’s kid I’ve seen my share of science fiction movies that really inspired me to become quite fond of graphical user interfaces (GUIs) especially the idea of trying to make science fiction UIs possible in the real world. In this and a series of blog posts I want to try (attempt) to answer the question “Can Fictional UIs become a Reality?”

Since I am experimenting with different ideas (implementations) of what a sci-fi UI should look and behave  like, I won’t know exactly how many parts this blog series will be. So I hope you will join me in this journey towards the creation of a prototype and API capable of making science fiction UIs a reality. You might be wondering if there is something (UI framework) that already exists.

Shouldn’t we just use UI frameworks that already exist?

If you’re familiar with the excellent post from Jeff Atwood’s 2006 article “This Is What Happens When You Let Developers Create UI“. He talks about how most software developers aren’t really good at creating UIs. Is this really true? While I agree with most of his statements, I still believe anyone with enough passion will figure out a way to achieve their intended goal (within reason of course). As for me, most of my design choices are mainly through trial and error. I think UI design is very much like clothing where designs can be either trendy or classical.

Through the years many designers have made UI frameworks to build UIs that look great and are extremely functional, however they can look rather primitive (IMO) compared to the science fiction UIs that we see in movies today. When going the other direction science fiction UIs may look futuristic, but they don’t exactly map to anything real or functional.

Assuming you’re a developer (with some UI skills) and wishes to build sci-fi UIs the next section I’ll talk about what a sci-fi UI might look like or how it might behave.

Look and Feel Requirements

The following are features a typical science fiction UI window might have:

• Create any shaped window (for now use line segments)
• Style the visible shaped frame around the window
• Create mouse a listener to define areas to resize & move window on the desktop
• Resize the window using 8 directions (NW, N, NE, E, SE, S, SW, W)
• Animate window and contents when entering and exiting the desktop (area)
• Create Clipped region to display content such as video, 3D, Pane

Conclusion

As a kid I remember how my mind was simply blown away when I had seen futuristic and technologically advance civilizations on the big screen. Looking back at old sci-fi movies you will immediately realize how cheesy they were compared to today’s movies.

Hopefully I’ve given you compelling reasons why I would like to create such an API that would enable developers to easily style and create Sci-Fi looking UIs. As a developer/designer I would like to bridge the gap between Sci-Fi UIs and real UIs by listing some general requirements to start things off.

As always feel free to comment and let me know what you think.

Happy coding.:-)

References

Jeff Atwood’s 2006 article “This Is What Happens When You Let Developers Create UI”
Chris Noessel on “How Design in Sci-Fi and the Real World Influence Each Other”
Carl Dea’s video “JavaFX demo of a Sci-fi UI HUD Window“

Advertisement

FX Playground

 

 

 

Update: The FX Playground project can be found at: https://bitbucket.org/cdea/fxplayground

Introduction

FX Playground is a JavaFX-based prototyping tool or live editor that eliminates the step of compiling Java code. This concept isn’t new, for instance the Web world there are many HTML5 playgrounds that offer online editors that enable developers to quickly prototype or experiment with various JavaScript libraries. This allows the developer to focus on visualizations or UI details without needing to set-up an IDE project or mess with files. Even older (pre-dating) than playgrounds are REPLs (Read Eval Print Loop) where dynamic languages such as Groovy, Python, Ruby, etc. provide an interactive interpreter command line tool to allow developers to quickly script code to be executed. Scala is a compiled language, but also provides a REPL tool.

After finishing the book JavaFX 8 Introduction by Example I noticed each example was created as separate NetBeans projects which seemed a little overkill for small examples. Because the book is based on Java the language each program needed to be compiled (via javac) prior to execution. Larger projects will typically need to be set-up with a proper classpath and resources in the appropriate directory locations. Even larger projects will also need dependencies which typically reside on Maven repositories.

JavaOne 2014

Based on timing I was able to submit a talk regarding JavaFX based playgrounds just in time. After awhile I was pleasantly surprised that my proposal (talk) was accepted. You can check out the session here. Also, I will be presenting with my good friend Gerrit Grunwald (@hansolo_). So, be prepared to see awe-inspiring demos. Since the talk is a BoF (birds of a feather) the atmosphere will be low-key and very casual. I hope to see you there!

The JavaOne talk is titled “JavaFX Coding Playground (JavaFX-Based Live Editor Tool) [BOF2730]”.  Based on the description you’ll find that the tool will be using the NEW! Nashorn (JavaScript) engine to interact with JavaFX primitives. The figure below depicts the FX Playground tool’s editor windows and a JavaFX Display area. Starting clockwise at the lower left is the code editor window allowing the user to use JavaScript (Nashorn) to interact with nodes. Next, is the JavaFX FXML editor window allowing the user to use FXML (upper left). The FXML window is an optional.  In the upper right, you will notice the JavaFX CSS editor window allowing you to style nodes on the display surface. Lastly, to the bottom right is the output area or better known as the DISPLAY_SURFACE.

FXPlayground’s editor windows

FX Playground in Action

Because FX Playground is still in development I will give you a glimpse of some demos that I’ve created on Youtube. The following are examples with links to videos.

• FXPlayground Path Example – This example is an updated example hosted at the BitBucket repo at https://bitbucket.org/cdea/fxplayground.
• FXPlayground w/Webcam – Nashorn w/sarxos/webcam-capture library
• FXPlayground3d – Nashorn and JavaFX 3D
• FX Playground now has a settings slide out panel – Nashorn, Rectangle w/CSS, and MediaView
• FX Playground Using Enzo library – Nashorn and Enzo Library
• FX Playground Testing Video w/ MediaView and WebView – Nashorn, MediaView and WebView

 

Roadmap

There are plans to opensource the code, but for now there is much needed functionality before public consumption.

The following features are a work in progress:

• Make use of FXML editor window.
• Pop out the display panel into its own window
• Save, SaveAs, and Load Playgrounds
• Build software to be an executable for tool users. (90% done)
• Make the tool capable of using other languages (JSR 223)

I want to thank Oracle corp. especially the following engineers who helped me (some of the engineers below are not Oracle employees):

• David Grieve – @dsgrieve
• Jim Laskey – @wickund
• Sundararajan Athijegannathan  – @sundararajan_a
• Danno Ferrin – @shemnon
• Sean Phillips – @SeanMiPhillips
• Mark Heckler – @MkHeck
• Jose Perada – @JPeredaDnr
• Gerrit Grunwald – @hansolo_
• Jim Weaver – @JavaFXpert

References

The FX Playground project can be found at: https://bitbucket.org/cdea/fxplayground

CarlFX’s Channel – https://www.youtube.com/channel/UCNBYRHaYk9mlTmn9oAPp1VA

7 of the Best Code Playgrounds – http://www.sitepoint.com/7-code-playgrounds

NetBeans – https://www.netbeans.org

JavaFX 8 Introduction by Example – http://www.apress.com/9781430264606

Nashorn – https://wiki.openjdk.java.net/display/Nashorn/Main

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

Harmonic Code – http://harmoniccode.blogspot.com/

JavaFX 8u20 Days of Future Past (Always On Top)

It’s been a long time since I’ve posted topics relating to JavaFX. So, if you are still following along, awesome!

Introduction

In this blog post I want to blog about a very cool feature starting with JavaFX 8 update 20 that allows your application to always be on top of other applications. What this means is that on your desktop your JavaFX based application can be a floating widget that will remain above all other applications (z-order). An example would be a weather widget in the upper right corner never to be obscured by other applications. So, I’m very excited to share with you this amazing feature ‘Always On Top’.

History

In the past Java Swing developers would rely on the method Window.setAlwaysOnTop(boolean).  This feature allowed Swing developers to build native looking and native behaving desktop applications. Ever since JavaFX 1.x this very feature was highly requested (originally requested by Stephen Chin @steveonjava for the WidgetFX framework). This feature request is JIRA ticket RT-153. Figure 1 is the feature request shown with a status of ‘Resolved’.

figure 1: Jira ticket RT-153

 

Although this feature didn’t get into JavaFX versions 1.x, 2.x and the version prior to Java 8u20, it is finally here now. For those who don’t know how to report bugs or file new features requests I encourage you to head over to the JavaFX JIRA system.

Example: Weather Widget

Assuming you know the basics of JavaFX since version 2.0 a typical application would consist of extending from the javafx.application.Application class. When developing JavaFX desktop applications the platform API would provide you with a (javafx.stage.Stage) window. The Stage object will have the following methods to access the always on top property.

• alwaysOnTopProperty()
• setAlwaysOnTop(boolean)
• isAlwaysOnTop()

The following code snippet sets the Stage to be always on top using the method setAlwaysOnTop(boolean).

public class KeyholeDemo extends Application {

   @Override public void start(Stage primaryStage) {
      primaryStage.initStyle(StageStyle.TRANSPARENT);
      primaryStage.setAlwaysOnTop(true);
      // code omitted...
   }

   public static void main(String[] args) {
     launch(args);
   }
}

How it works

Shown in the listing above the start() method sets the stage to be transparent to be a JavaFX window without a title bar. This allows applications to have irregular shaped windows on the desktop. If a web person trolls you again about JavaFX ask them the following question: “Can  HTML5 create irregular shaped windows on the desktop? (always on top)”. Next, the stage is setup to be always on top via the setAlwaysOnTop() method.

Demo

After realizing that this highly requested feature was available I basically updated my old ‘KeyholeWidget‘ project at the Github and created a video demonstrating the widget on my desktop. Here is the video:

To see the full code listing visit the Github project ‘KeyholeWidget‘.

 

I hope you’ve enjoyed this cool feature (I know I did). As usual please leave comments below.

Happy coding,

Carl