JAVAFX: Magnifier in JavaFX 2

JavaFX is amending day by day and adding more fasinating features over time.The interesting part is its ability to create customized controls as per the user requirements.It is fun to write another blog related to a new component which works like a magnifying glass. Ofcourse I named it as “MagnifierPane”  .

MagnifierPane is a container which allows you to inspect the magnified view of its children by the provided scaleFactor. The scaleFactor is configurable that can be adjusted as per requirements.

Let us check a scenario where this “MagnifierPane” can be helpful. Assume we have a high resolution image (say some engineering design which is around 3000 x 4400 pixels large). To show this image in the application, obviously we need to resize the image to fit in the screen. After resizing, eventually it leads to some distortion from the original image making it abstruse.(as shown below).

One way to overcome this is to wrap the original image with a ScrollPane. But it will be a tedious task to the user to go from one part to another part by adjusting the scrolls.

(Note : Image courtesy from Google Images)

But if we wrap this resized image in a “MagnifierPane”, user can inspect the image very easily by just hovering to requried point in the image.Below is the code to use “Magnifier Pane”.

ImageView sample = new ImageView(new Image("/images/rocket-blueprint.jpg"));
sample.setFitHeight(620);
sample.setFitWidth(420);
MagnifierPane magnifierPane = new MagnifierPane();
magnifierPane.getChildren().add(sample);

And on mouse over of the image, below is the resulting output.

Ofcourse this component is to not only inspect the images, but also inspect any node that is added inside this component. This can be helpful to have a closer look on the styling of any node.Below are the few screenshots to inspect the JavaFX controls.

Configurable Properties:

To facilitate more, I have added few configurable properties to suite different user requirements.
1) Radius : This property allows the user to set the size of the magnifier. This is the size in which the content is shown. Make a note that this does not include the frame size. The default value is set to 86px.

magnifierPane.setRadius("86");

2) Scale Factor : This property allows the user to set the factor that the content should be magnified while viewing. This works just same as the “scale” property of the Node. The default value is set to “3.0″.

  magnifierPane.setScaleFactor("3.0");

3) Frame Width : This property allows the user to adjust the width of the frame that surrounds the view part.The default value is set to 5.5px.

                           magnifierPane.setFrameWidth("5.5");

That’s it !
I hope this component can suite if you have a requirement that allows the user to inspect.

The executable jar for the demo can be downloaded from here.
The source code of the component can be downloaded from here.

Below is a video which can give you a quick idea about this control and its properties.

Happy Coding !!