Monday, January 2, 2012

Applying Sepia Effect to Loaded Images in JavaFX 2.0

In this blog post, I look at a very simple JavaFX 2.0 application that loads an image provided on the command-line and presents it in both normal form and with JavaFX 2.0's SepiaTone effect applied to it. The simple application presents the two images side-by-side for dramatic effect. To accomplish this, the simple example demonstrates loading images in JavaFX based on a URL, use of the HBox layout component, and accessing command-line parameters in a JavaFX application using Application's getParameters() method.

In general photography, use of sepia can make a photograph appear older or like an antique. The JavaFX SepiaTone Effect accomplishes this for JavaFX components, including loaded images. The following code snippet shows how this can be accomplished.

SepiaEffect.java
package dustin.examples;

import java.util.List;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.SepiaTone;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

/**
 * Simple demonstration of the SepiaTone Effect.
 * 
 * @author Dustin
 */
public class SepiaEffect extends Application
{
   /** Default width of displayed photographs/images. */
   private final static int DEFAULT_WIDTH = 540;

   /**
    * Overridden (from parent Application class) method.
    * 
    * @param stage Primary stage.
    * @throws Exception JavaFX 2.0 application exception or file I/O exception.
    */
   @Override
   public void start(final Stage stage) throws Exception
   {
      // Get command-line parameters and access first argument as image URL.
      final Parameters params = getParameters();
      final List<String> parameters = params.getRaw();
      final String imageUrl = !parameters.isEmpty() ? parameters.get(0) : "";

      // The third-to-last 'true' preserves height/width ratio and the next
      // 'true' argument indicates better quality (smooth) filtering should be
      // used and the final 'true' indicates that background loading should be
      // used. The imageUrl must really be a URL and begin with a protocol
      // such as file:\\ or http:\\.
      final Image loadedImage = new Image(imageUrl, DEFAULT_WIDTH, 405, true, true, true);
      final ImageView originalView = new ImageView(loadedImage);
      final ImageView sepiaView = new ImageView(loadedImage);
      sepiaView.setEffect(new SepiaTone());  // default is full (1.0) effect

      final HBox horizontalBox = new HBox();
      horizontalBox.getChildren().add(originalView);
      horizontalBox.getChildren().add(sepiaView);

      stage.setTitle("Demonstration of JavaFX 2.0 Sepia Effect");
      final Group rootGroup = new Group();
      final Scene scene = new Scene(rootGroup, DEFAULT_WIDTH*2, 405, Color.WHITE);
      rootGroup.getChildren().add(horizontalBox);
      stage.setScene(scene);
      stage.show();
   }

   /**
    * Main function for running demonstration of JavaFX 2.0 SepiaTone Effect.
    * 
    * @param arguments Command-line arguments: none expected.
    */
   public static void main(final String[] arguments)
   {
      Application.launch(arguments);
   }
}

The above example uses fewer than 70 lines, including white space and overly verbose comments in code intended for a blog post example. When run against a photograph I took in Juneau, the application looks like that shown in the next screen snapshot.

The source image was only loaded once into a single Image instance, but two different ImageView instances were used to present that single Image instance both in its original color scheme and with the sepia effect. The application of the sepia effect is only a single line. The level of "sepia-ness" can be specified, but I used the default in this case. The HBox layout component made it easy to place the images side-by-side.

As a comment in the code sample indicates, the String provided to the Image constructor needs to be a URL that includes a protocol such as http or file. For example, in my case the string I provided as the command-line argument to the sample application was "file:///C:/Users/Dustin/Pictures/P1010804-juneau.jpg". Without the "file://" prefix, the application is not able to find the image to load it.

This blog post has shown that loading images in JavaFX 2.0 and applying effects to them is straightforward.

1 comment: