JavaFX Progress Bar with glow effect

Yesterday, I was looking at an install package for some game software my son was loading on his computer and I was intrigued by the progress bar. It had a glow effect going back and forth while the progress bar was "progressing".  Of course, I had to sit down and figure this out in JavaFX.

To start with I borrowed some code from my IndeterminateProgressBar that I posted here a few moon's ago,  JavaFX - Inverting text color with a changing background. This shows how to change the text color as the progress bar crosses over the text.

Next, I created a ProgressBar class, that shows a progress bar as it moves from zero to a maximum. There are 2 options for the display, the percentage completion or the current value. To show progress, I merely paint a Rectangle for the progress with a different color over a background Rectangle.  The width of this "progress bar" changes based upon the percentage completion. So far, nothing surprising here.

To create the moving glow effect, I created an Ellipse with a GuasianBlur effect:


Ellipse {
centerX: bind blurX
    centerY:  bind height/2
    radiusX: bind progressHeight
    radiusY: bind progressHeight/2
    fill: Color.rgb(255,255,255,.7)
effect: GaussianBlur{ radius: 30 }
},


The centerX of the Ellipse will be changed in an animation based on the local variable, blurX, that moves the "glow" back and forth over the progressBar part. Here is the animation:


    var blurAnim = Timeline {
        repeatCount: Timeline.INDEFINITE
        autoReverse: true
        keyFrames: [
            at(0s) { blurX => 0.0 }
            at(2s) { blurX => currentX - progressHeight/2 tween Interpolator.EASEBOTH }
        ]
    };


Next, I tie the animation play to when the Progress bar is visible:


var playing = bind visible on replace {

        if(playing) {
            blurAnim.play();
        }else {
            blurAnim.stop();
        }

    };


The effect looks like this. Notice the glow towards the left side.

Progress Bar %75

And at %83, the glow is after the %83.58 label.

Progress Bar @ %83

The glow actually moves back and forth over a 2 second cycle.

One thing I haven't taken the time to figure out, is how to have the glow move at a constant rate of speed. In the timeline, I set the duration to a fixed 2 seconds, but as the progressbar's width grows, the glow travels a longer distance, so it moves faster, each cycle is still 2 seconds. (Thanks to Mr Newton and Mr. Einstien for this phenomenon).

Next, when I get a chance to play, I want to modify this to use CSS Style Sheets  and change it to a javafx.scene.Control with a javafx.scene.Skin. StyleSheets is a cool feature in JavaFX, that lets you easily modify the look of the JavaFX components, similar to the way HTML uses them. More on this later.

ProgressBar.fx is here.

Main.fx is here.

Comments:

Jim,

Nice example! To accelerate your "playing" with skin and styling in JavaFX, you might want to look at the investigative work that Simon Morris and Dean Iverson have done on the subject:
http://learnjavafx.typepad.com/weblog/2009/01/javafx-skins-game.html

Thanks,
Jim Weaver

Posted by Jim Weaver on January 04, 2009 at 03:46 AM EST #

Can you show the updated code for the progressBar as it has been affected by the JavaFX 1.2 update.....

Posted by Joseph on June 25, 2009 at 04:33 AM EDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

jimclarke

Search

Categories
Archives
« July 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  
       
Today