Using Effects - Digital Clock

In this blog, we will see how to create a digital clock. Now that’s all API work. Important part is to decorate clock, that’s again API work, but lets see how to use API’s effectively .

(click here to launch)

This application is flexible enough and you can drag it anywhere. Best to put at the corner of the desktop . So, making it in simple steps :

1. Use Calendar API to take important data like Hours, Minutes and Seconds.

var calendar = createCalendar();
       seconds = String.valueOf(calendar.get(Calendar.SECOND));
       minutes = String.valueOf(calendar.get(Calendar.MINUTE));
       ...........

2. In text, where you write the Hours-Minutes-Seconds, add reflection API of FX. Like this :

content: bind combination
                   effect: Reflection {
                       fraction: 1.0
                       ........

3. Add one more effect inside the Reflection Effect and that is DistantLight like this :

 content: bind combination
                   effect: Reflection {
                       fraction: 1.0
                       input:Lighting {
                           light: DistantLight {
                               azimuth: -135
                               elevation: 60
                           }
                           surfaceScale: 5
                       }
                       .......

import java.util.Calendar;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;

import javafx.scene.Scene;
import javafx.scene.effect.Reflection;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

def SIZE = 50;

var string: String;
var stage: Stage = Stage {
title: “Clock (JavaFX sample)”
style: StageStyle.TRANSPARENT
scene: Scene {
fill: null
width: 6 * SIZE
height: 2 * SIZE
content: Text {
content: bind string
translateY: SIZE
stroke: Color.BLACK
fill: Color.YELLOW
font: Font {
size: SIZE
}
effect: Reflection {
}
onMouseDragged: function(event) {
stage.x += event.dragX;
stage.y += event.dragY;
}
}
}
}
Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames: KeyFrame {
time: 1s
action: function() {
def calendar = Calendar.getInstance();
string = “{%02d calendar.get(Calendar.HOUR)}:”
“{%02d calendar.get(Calendar.MINUTE)}:”
“{%02d calendar.get(Calendar.SECOND)}”
}
}
}.play()

Top Bar + Close Buttons are easy to do with simple gradient API. Give a try, not more than 100 lines of code .

Towards A 3D Graphics Engine

The current JavaFX 1.1 API is focused around two-dimensional (2D) graphics. Future versions of JavaFX will integrate a three-dimensional (3D) scene graph. In the meantime, though, there’s no reason not to roll your own 3D graphics software. The following simple demo app shows a super-early version of a 3D vector graphics engine in action.

Click on the image to launch the app

While the 3D engine is only early stage, and incredibly simple, this app illustrates a couple of features:

• The 3D physics engine and the on-screen 2D graphics are linked by using the neat JavaFX bind mechanism. That means, as the 3D world changes during the simulation, the JavaFX platform takes care of updating what’s happening on the computer screen automatically.
• The 3D scene is lit such that objects closer to the viewer appear brightly colored, whereas objects far from the viewer appear dimly lit. The idea is to help with the viewer’s perception of depth in the scene.

Obviously, there’s lots still to do; but even this simple 3D engine isn’t too far away from enabling various applications in domains as diverse as video games and scientific data visualization. In a subsequent post, I’ll show some more 3D “visual cues” in action that, combined with the lighting used in this demo, enhance the feeling of 3D.

I’ll try to keep track of any comments, suggestions, questions etc. here. Or you can hit me up on Twitter ( @psynixis ), or on my blog.

Family Tree Visualizer

Here’s a JavaFX application that experiments with a different way to represent a family tree. Inspired by Christina Van Vleck, instead of the classic branching tree structure, this application starts with the oldest generation in the center, and lays out each subsequent generation in concentric rings. So similar to an actual tree (that is, the plant, not the data structure), younger generations are farther from the center.

Here’s a screenshot of what that looks like using the Dwarf Gimli’s (of Lord of the Rings fame) family line.

You can launch the application here:

If you click on the “View Baggins” button you’ll see the Hobbit’s Bilbo Baggins’ family line. There is some animation transitioning between the two trees, so it’s worth checking out.

Simple Pie Chart with Explode Features

JavaFX Dialogue started with “Rich Internet Application for an expressive world”. So, I tried to figure out what are the applications required for RIA. And finally I came with a small important apps called Pie Chart. We use Pie Chart to express data in visual form and it is commonly used by most of the internet sites. From this blog, we will learn how to make a Pie Chart. So, here is the look :

and here it is in exploded form:

A very simple application.

public class PieChart extends CustomNode {

   public var sAngle = 0.0;
   public var len: Number = 0.0;
   public var color = Color.RED;
   public var sArea = 1;
   public var xt = 0.0;
   public var yt = 0.0;

This is the class of PieChart. Depending on the number of arc. needed we can make instance of this classes and bind the attribute with proper data.

Explode feature is quite mathematical and written like :

xt =>  20 * Math.cos(2  *  Math.PI  *  (sAngle  +  len  /  2)  /  360)
                          tween Interpolator.LINEAR
yt => -20 * Math.sin(2  *  Math.PI  *  (sAngle  +  len  /  2)  /  360)
                          tween Interpolator.LINEAR

This is a standard math equation for finding the point on a circle. For one slice, we are finding the center point and move the slice according to the equations.

One more basic class is to handle the template of the application. It has simple drag equation on rectangular title bar and FX.exit() on close button. What else ? Nothing .

Launch the application here :

Experimenting with smaller Form Factor

Developing software for smaller devices presents unique challenges. For example, how do you fit a lot of data into a small space without using a scrollbar?

Click on the graphic above to launch the demonstration using Web Start

Challenges of developing for small devices

Firstly, they tend to run on a myriad of operating systems. While Windows may command over 90% market share of the desktop, the handheld space is heterogenous. Everything in this space is interesting because there is a lot of competition between the JVM, HTML and Flash to be the de facto cross platform toolkit. In turn, it is fostering a great deal of innovation from the vendors to maximize developer productivity.

Secondly, designing for smaller form factors challenges the assumptions traditional GUI metaphors like Windows and complex menus. This is fertile ground for experimentation. User interfaces may be more tactile, and animation may be more than just window dressing, but it could be useful in signalling activity and movement. Once again, the key idea here is productivity. The vendor who can get ideas off a designer’s head and onto the digital canvas quickest will win.

The screen capture below is an example of a fisheye menu. As the pointer hovers over the options, the words become bigger and more apparent. This can be more usable than having scrollbars, and is capable of presenting a reasonable quantity of data in an unreasonably tight space. It was developed in under 100 lines of JavaFX code (not counting the data), which is a fraction of what it would take to develop using a conventional programming language.

Experimenting with smaller Form Factor

Developing software for smaller devices presents unique challenges. For example, how do you fit a lot of data into a small space without using a scrollbar?

Click on the graphic above to launch the demonstration using Web Start

Challenges of developing for small devices

Firstly, they tend to run on a myriad of operating systems. While Windows may command over 90% market share of the desktop, the handheld space is heterogenous. Everything in this space is interesting because there is a lot of competition between the JVM, HTML and Flash to be the de facto cross platform toolkit. In turn, it is fostering a great deal of innovation from the vendors to maximize developer productivity.

Secondly, designing for smaller form factors challenges the assumptions traditional GUI metaphors like Windows and complex menus. This is fertile ground for experimentation. User interfaces may be more tactile, and animation may be more than just window dressing, but it could be useful in signalling activity and movement. Once again, the key idea here is productivity. The vendor who can get ideas off a designer’s head and onto the digital canvas quickest will win.

The screen capture below is an example of a fisheye menu. As the pointer hovers over the options, the words become bigger and more apparent. This can be more usable than having scrollbars, and is capable of presenting a reasonable quantity of data in an unreasonably tight space. It was developed in under 100 lines of JavaFX code (not counting the data), which is a fraction of what it would take to develop using a conventional programming language.

Dynamic center Layout

In some of my applications I often need to center something horizontally or vertically within a larger space. Tired of writing this over and over I resolved to build a reusable layout class once and for all. Most importantly, this center layout is dynamic, meaning it will automatically do the right thing if the size of the nodes change, or if the size of the area you are centering in changes (say, by resizing the window). It even works if the contents are animated.

Click to run with webstart

This is the code for CenterLayout.
Set/bind the width and height you want to center within, and
set the booleans to center horizontally or vertically (or both). If you have multiple nodes they will be stacked on
top of each other. If you want to center a column of nodes rather than having them stacked, then put them in a VBox{} and center that instead.

package centerlayout;
import javafx.scene.*;

/**
* @author joshua.marinacci@sun.com
*/

public class CenterLayout extends CustomNode {
   public-init var centerVertical:Boolean = false;
   public-init var centerHorizontal:Boolean = false;

   public var width = 200.0 on replace { doLayout(); }
   public var height = 200.0 on replace { doLayout(); }
   public var content:Node[] on replace { doLayout(); }

   var layoutNodes:Node[];

   function doLayout() {
       layoutNodes = for(node in content) {
           var g = Group { content: node
               translateX: bind if(centerHorizontal) {
                   (width - node.boundsInLocal.width) / 2
               } else { 0 }
               translateY: bind if(centerVertical) {
                   (height - node.boundsInLocal.height) / 2
               } else { 0 }

           };
           g;
       }
   }

   override public function create():Node {
       return Group {
           content: bind layoutNodes;
       }
   }
}

Java FX version of Periodeic Table

I am trying to demonstrate capabilities of JavaFX a version of the Periodic Table completely in JavaFX.

Most of the code is simple and short. A major part involves creating the layout of the elements on the main screen. This is done with some simple multiplication of the position the element should be present on with the height and width of each square the element is shown with.

Periodic Table Main Screen

The second feature is that of the element details popping up when one clicks on the element. This is done with a Rectangle being shown on the screen with Text on it and a fancy close button.

Element Detail Screen

Launch the application

SnowFall, Cover your Screen with SnowFlakes

In honor of the middle of winter I present SnowFall, a simple app that covers your screen with falling snowflakes.

Click to run, then click on the main snowflake to start the effect.

The core code is actually pretty simple. I started with an object which represents a snowflake using one of a set of snowflake images. There is a Timeline object which calls an update function every few milliseconds. update() inserts the new snowflakes, moves them down the screen, rotates them, and finally removes them when they are too old.

rand() is a function which returns a random number between two other numbers.

function rand(min:Number, max:Number) {
   return min + java.lang.Math.random()*(max-min);
}
var count = 0;

function update():Void {
   count++;
   if(count mod 10 == 0) {
       insert Snowflake {
           y: -200
           x: rand(0.0,screenWidth)
           distance: rand(0.0,8.0)
           flakeType: rand(0.0,8.0)
       } into flakes;
   }

   for(flake in flakes) {
       flake.y += flake.fallRate;
       flake.angle += flake.spinRate;
       if(flake.y > deathLine) {
           delete flake from flakes;
       }
   }
}

var anim = Timeline { keyFrames: KeyFrame { time: frameLength action: update

SnowFall, Cover your Screen with SnowFlakes

In honor of the middle of winter I present SnowFall, a simple app that covers your screen with falling snowflakes.

Click to run, then click on the main snowflake to start the effect.

The core code is actually pretty simple. I started with an object which represents a snowflake using one of a set of snowflake images. There is a Timeline object which calls an update function every few milliseconds. update() inserts the new snowflakes, moves them down the screen, rotates them, and finally removes them when they are too old.

rand() is a function which returns a random number between two other numbers.

function rand(min:Number, max:Number) {
   return min + java.lang.Math.random()*(max-min);
}
var count = 0;

function update():Void {
   count++;
   if(count mod 10 == 0) {
       insert Snowflake {
           y: -200
           x: rand(0.0,screenWidth)
           distance: rand(0.0,8.0)
           flakeType: rand(0.0,8.0)
       } into flakes;
   }

   for(flake in flakes) {
       flake.y += flake.fallRate;
       flake.angle += flake.spinRate;
       if(flake.y > deathLine) {
           delete flake from flakes;
       }
   }
}

var anim = Timeline { keyFrames: KeyFrame { time: frameLength action: update

Pop Pop Bubble

Click to Run.

This is a new toy game I’ve been working on. It’s essentially minesweeper with cute bubble graphics. Instead of bombs I used ladybugs hiding in your bubbles. The graphics were all created in Illustrator using some of the standard styles, then exported to Photoshop, flattened, chopped up, and finally exported to JavaFX.

I’m trying to think of some better effects to use for the message screens and transitions between boards. Maybe some themes would be nice too. Any ideas?

Why ExploreFX?