JavaFX Example Code | PhotoEffects

Using the ColorAdjust Effect

By Josh Marinacci, October 15, 2008

JavaFX enables you to modify the brightness, contrast, and saturation of photos very easily with the ColorAdjust effect.

Understanding the Code

The core of this example is the class ColorAdjust. It is an effect that adjusts the brightness, contrast, and saturation of whatever node you put it on. You can attach it to any kind of node but ColorAdjust is most useful with ImageViews. ColorAdjust has public variables called brightness, contrast, and saturation, which do exactly what you would expect, controlling those features of the image that the effect applies to.

For this example, three model variables were created called brightness, contrast, and saturation. (Figure 1).

Source Code

var brightness = 0.0;
var contrast = 1.0;
var saturation = 0.0;

Figure 1: Model Variables

Sliders for each control are bound to the three model variables in Figure 2, which use the with inverse keywords.

Source Code

        Group {
            content:[
                ImageView { x: gap y: 50 image: Image { url:"{__DIR__}images/headerM.png" } }
                ImageView { x: gap+226-1 y: 50 image: Image { url:"{__DIR__}images/headerM.png" } }
                ImageView { x: gap+226+48 y: 50 image: Image { url:"{__DIR__}images/headerM.png" } }

                CustomSlider {translateX: 30  translateY: 90
                    value: bind brightness with inverse
                    minValue: -1.0
                    maxValue: 1.0
                    minButtonImage: Image { url: "{__DIR__}images/bl.png" }
                    maxButtonImage: Image { url: "{__DIR__}images/bh.png" }
                },
                Text { translateX: 60  translateY: 120 content: "Brightness" fill: TEXT_COLOR },
                CustomSlider {translateX: 190 translateY: 90 
                    value: bind contrast with inverse
                    minValue: 0.25
                    maxValue: 4
                    minButtonImage: Image { url: "{__DIR__}images/cl.png" }
                    maxButtonImage: Image { url: "{__DIR__}images/ch.png" }
                },
                Text { translateX: 220 translateY: 120 content: "Contrast" fill: TEXT_COLOR },
                CustomSlider {translateX: 350 translateY: 90
                    value: bind saturation with inverse
                    minValue: -1.0
                    maxValue:  1.0
                    minButtonImage: Image { url: "{__DIR__}images/sl.png" }
                    maxButtonImage: Image { url: "{__DIR__}images/sh.png" }
                },
                Text { translateX: 380 translateY: 120 content: "Saturation" fill: TEXT_COLOR },
            ]
        },

Figure 2: Binding Sliders to the Model

Finally, a ColorAdjust object was set as the effect on an ImageView of the earth. The brightness, contrast, and saturation of the ColorAdjust are bound to the model variables. (Figure 3). This way, when the sliders are moved by the user the model variables are updated, which in turn updates the values in the ColorAdjust. With just a little bit of binding you can build a complete user interface.

Source Code

        ImageView {
            translateX: gap
            translateY: 180
            image: Image { url: "{__DIR__}giraffe.jpg" }
            effect: ColorAdjust {
                brightness: bind brightness
                contrast: bind contrast
                saturation: bind saturation
            }
        },

Figure 3: Binding the ColorAdjust

FX

Profile

Using the ColorAdjust Effect

Understanding the Code