Monday Apr 26, 2010

JavaFX [1.3] - Save As Image


JavaFX - Save As Image code updated to be compatible with JavaFX 1.3
Please refer to JavaFX13Utils.fx for more information. You will need to update only if you are using internal APIs as mentioned in this forum thread.

<script src="http://dl.javafx.com/1.3/dtfx.js"></script> <script src="http://javafxdemos.googlecode.com/hg/resource/SaveAsImage/1.3/SaveAsImage.js"></script>

For Applet mode, click on above image

For standalone mode

Try it out and let me know feedback

Tuesday Jul 21, 2009

JavaFX - Save As Image


There was a question on forum related to saving of node as image. JavaFX sample - EffectsPlayground had this feature. It uses internal APIs, so its broken in JavaFX 1.2. Community has identified a solution. Thanks to Chris Jensen for pointing me to this.

If you are using internal APIs as mentioned in forum thread, you will have to update your code to use 1.3 internal APIs. Please refer to JavaFX [1.3] - Save As Image post for update related to JavaFX 1.3.

Since it uses internal APIs, it may again break in next release. May be most of users just want to save a set of nodes displayed on screen. In that case we may get the top level container and draw the contents on to an image. Yes, draw back is that it will draw all nodes, so we may have to selectively hide nodes before we save the image.

<script src="http://dl.javafx.com/1.2/dtfx.js"></script> <script src="/rakeshmenonp/resource/SaveAsImage/SaveAsImage.js"></script>

For Applet mode, click on above image

For standalone mode

First we get the instance of top level container which may be an Applet or Frame.

public function getContainer() : Container {

    var container : Container;

    if("{__PROFILE__}" == "browser") { // Applet
        container = FX.getArgument("javafx.applet"as Applet;
    else // Standalone
        var frames = Frame.getFrames();
        // We may improve this logic so as to find the
        // exact Stage (Frame) based on its title
        container = (frames[0as JFrame).getContentPane();
    }

    return container;
}

Now we can save the contents of the Container as Image

function save(container : Container, bounds : Bounds, file : File) {

    var bufferedImage = new BufferedImage(
        bounds.width, bounds.height, BufferedImage.TYPE_INT_ARGB);
    var graphics = bufferedImage.getGraphics();
    graphics.translate(-bounds.minX, -bounds.minY);
    container.paint(graphics);
    graphics.dispose();

    ImageIO.write(bufferedImage, "png", file);
}

Yes, it captures the entire scene. So user has to hide the nodes which are not required before saving as image. For this I have created two groups. One group will hold all nodes that needs to be captured. Other group contains nodes which are not required (such as Button). Before taking saving as image, hide the node which contains controls etc, so that they won't appear in saved image.

Try it out and let me know feedback


<script type="text/javascript">var dzone_url = "http://blogs.sun.com/rakeshmenonp/entry/javafx_save_as_image";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script>

Monday Apr 13, 2009

JavaFX - Image Viewer


One of the questions I received in comments of one post

actually regarding the carousel and display shelf samples written on the net.this samples r feasible for 100 x100 pics. i am getting photos from flickr. if i want to implement this view how can it be done.. or is it at all feasible..

A genuine valid question! Yes Carousel and DisplayShelf are written with smaller dimensions. Carousel was targeting mobile profile as well, so its size was small. Also most of samples I have too didn't have large dimensions.

So here is a sample which uses larger dimension - [800X650].

For Applet mode, click on above image

For standalone mode

It loads images from flickr. If you click on the thumbnails below, it will move to scroll to next thumbnail and zooms the image. Its very basic demo, just to demonstrate use of large images. It uses hard-coded values for coordinates and scale, so not really the best demo.


<script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="/rakeshmenonp/resource/ImageViewer/zoneit.js"></script>

Saturday Apr 11, 2009

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:

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