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 .