JavaFX - Loading Images


JavaFX provides many features which can be utilized while loading large images. Image has an attribute backgroundLoading which can be set to true, so that image loads in a background thread without freezing the UI. A placeholder image (thumbnail) can be shown using placeholder attribute. The approximate percentage of image's loading that has been completed can be determined from progress attribute.

Now lets see how to use these attributes. In below code we have set backgroundLoading to true and specified placeholder image.

// Load specified image in background thread
var imageView = ImageView {
    image: Image {
        url: "<image url>"
        backgroundLoading: true
        placeholder: Image {
            url: "<thumbnail url>"
        }
    }
}

Now we can directly get the progress of image loading using imageView.image.progress or we can bind this value to another attribute as shown below

// Bind to Image.progress and print the progress
var progress = bind imageView.image.progress on replace {
    println("progress {progress}");
}

The same progress attribute can be bound to actual progress bar. In this sample we are binding this progress to width of a Rectangle. So that the width of rectangle is proportional to the progress of image loading as shown below.

Rectangle {
    x: 11
    y: (sceneHeight - 9)
    // Change width of rectangle proportional to image progress
    width: bind ((sceneWidth - 20\* progress)/100.0
    height: 3
    arcWidth: 5
    arcHeight: 5
    fill: Color.RED
}

Launch Sample -

Source:

Comments:

this is great. But I find image take more time than normal loading. In my case, I feel it is taking more than 30-40 percent of more time.

What your ideas on this ?

Posted by Vaibhav Choudhary on April 11, 2009 at 08:10 AM IST #

@Vaibhav I tried loading http://farm4.static.flickr.com/3077/2365118433_ccb790041d_o_d.jpg [800X600] image using Browser and JavaFX. It was taking almost same time. Can you compare?

Posted by Rakesh Menon on April 11, 2009 at 08:21 AM IST #

Hi i created flash like demo please check this out

http://farrukh.hostrator.com/

Posted by Farrukh obaid on April 12, 2009 at 07:31 PM IST #

@Farrukh This looks cool! Would you like to add a post to http://jfxstudio.wordpress.com/ ?

Posted by Rakesh Menon on April 13, 2009 at 01:48 AM IST #

i've seen examples that load images using the url attribute

url: "{__DIR__}myPicture.jpg"

how do i load an image from a folder other than the folder of the current class loading it ?

let's say my class loading the images is in :
src/myPackage/

and my image is in /images (not in /src/myPackage/images)

how do i load that image ?

Posted by belun on February 26, 2010 at 04:59 AM IST #

@belun Reference using "{__DIR__}../" fails, alternative is to declare a variable public constant in one of the class in root package and use that variable in all other packages.

public def IMAGE_DIR = "{__DIR__}";

Posted by Rakesh Menon on February 26, 2010 at 06:20 AM IST #

great idea. thanks

this still involves the image folder being inside /src will all the sources files, but it will do

better then else

Posted by belun on February 26, 2010 at 06:51 AM IST #

@belun images are kept inside src, so that NetBeans will automatically include it in jar. You may keep those images in another jar and refer it in main application. Example:

http://www.javafx.com/docs/techtips/jar.jsp

This approach is required only if you use large images.

Posted by Rakesh Menon on February 26, 2010 at 07:11 AM IST #

Post a Comment:
Comments are closed for this entry.
About


The views expressed on this blog are my own and do not necessarily reflect that of my organization

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today