JavaFX Script and other musing Clarkeman's Weblog

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.

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

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.