<img alt="" src="https://secure.leadforensics.com/150446.png " style="display:none;">
Go to top icon

Magnifier in JavaFX 2

Sai Dandem Aug 13, 2013

JavaFX 2 Java Technology 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_half last="no"]

JavaFX - Rocket Blueprint


[one_half last="yes"]

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"));
MagnifierPane magnifierPane = new MagnifierPane();

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

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.

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.



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".


Scale Factor

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.


Frame Width

4) Scope Lines Visible : This property is added just have some extra to the component ;), hoping that this can be helpful for those who require to check the center point of the magnified view or give the feel of the scope lens in Snipper Rifle :).The default value is set to false.


Scope Lines Visible

5) Scope Lines Width : This property is to adjust the scope lines width.The default value is set to 1.5px.


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.

Unable to display content. Adobe Flash is required.

Happy Coding !! :)

Similar Blog

Warning : This pattern is patented (http://www.google.com/patents/US20110283241). Not suitable for professional usage !!

By Sai Dandem Dec 11, 2013

One of the very interesting features of JavaFX is its ability to have gradients (Linear or Radial) to the background color of the ...

By Sai Dandem Jul 19, 2012

JavaFX 2.x has many fascinating and useful controls. Among them “TabPane” is also one of the control. Here I am not going in ...

By Sai Dandem Jun 13, 2012

JavaFX animation package provides many amazing animation/transition effects. Let’s look into another effect, “Sliding” effect of ...

By Sai Dandem Apr 09, 2012

e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.