Scene to Scene in JavaFX

Any middle or big application demands to change one window to other at some point of time. A window type of thing in JavaFX is represented by Scene and its each to switch between scene or to run multiple scenes.

Here is a small application in which clicking on image will put you in another window, written "Hello World"

package sample6;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;

var s_new:Scene;
var s = Scene {
   content: [
       Text {
           font: Font {
               size: 24
           }
           x: 10,
           y: 30
           content: "HelloWorld"
       }
   ]
};

var s1 = Scene {
   content: [
       ImageView {
           image: Image {
               url: "{__DIR__}im2.PNG"
           }
           onMouseClicked: function( e: MouseEvent ):Void {
               s_new = s;
           }
       }
   ]
};

s_new = s1;
Stage {
   title: "Application title"
   width: 250
   height: 280
   scene: bind s_new
}

So, its simple, on mouse click, I have bind a scene variable with a new scene. That's it !

Moving image from MouseDrag

So, we got a discussion here. Last week we(me, Subrata and Vikram, both my office colleagues) are discussing about dragging an image with mouse pointer in JavaFX.

So, this was the first code. Point is to drag an image from the same place where we first hit the mouse, like it happens when we drag a folder :

package sample5;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import java.lang.System;

var x: Number;
var y: Number;

var im = Image {
       url: "{__DIR__}im2.PNG"
   };

var temp1:Number = 0;
var temp2: Number = 0;
var count: Integer = 1;
Stage {
   title: "Application title"
   width: 250
   height: 280
   scene: Scene {
       content: [
           ImageView {
               x: bind x - temp1
               y: bind y - temp2
               image: Image {
                   url: "{__DIR__}im2.PNG"
               }
               onMouseDragged: function( e: MouseEvent ):Void {
                   x = e.x;
                   y = e.y;
                   if(count <= 1) {
                       temp1 = e.x;
                       temp2 = e.y;
                   }
                   count++;
              }
            }
       ]

   }
}

You can see those patches of counts and flags which makes the code so unstable. And a bug, when you leave the mouse once, it cant grip the image from your mouse point again.

Subrata has written a cleaner code which works correct and here it is :

 
package mousedrag;
  
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
  
/**
* @author Subrata Nath
*/
  
var imgX : Number = 20;
var imgY : Number = 20;
var startX : Number;
var startY : Number ;
var distX : Number;
var distY : Number ;
  
    Stage {
        title: "Mouse smooth drag"
        width: 250
        height: 280
        scene: Scene {
            content: [
                ImageView {
                    x : bind imgX

                    y : bind imgY
                    image: Image {url: "{__DIR__}Mail.png"
                    }
                    onMousePressed: function( e: MouseEvent ):Void {
                        startX = e.x;

                        startY = e.y;
         // Calculate the distance of the mouse point from the image top-left corner
         // which will always come out as positive value
                        distX = startX - imgX;

                        distY = startY - imgY;
                    }
                    onMouseDragged: function( e: MouseEvent ):Void {
                        // Find out the new image postion by subtracting the distance part from the mouse point.

                        imgX = e.x - distX;
                        imgY = e.y - distY;
                    }
                }
            ]
  
        }
}

Image to Polygon

Java 3D and Java 2D image package is now strong enough to do any job. Weeks back I was looking at the morphing support by JavaFX, which is quite awesome. But I want to morph the images not shapes. Morphing an image is possible because Image in nothing a mixture of lot of shapes(at least mathematically :) ). So, I have decided to start working for Morphing of Images like Tiger getting converted into Man or Car getting converted into Horse. The basic idea is we need to convert Images into its Polygon form. First concentrating on 2D images(how funny, images are only 2D). 3D conversion is no doubt a tough job but do-able in Java, which demands for high efficient algorithms.

So, the basic need is to convert a 2D image into connected dots which can tell me something about shape. Looking those dots, I can guess this is a dog skeleton. I have seen some of 3D effort on net:

http://make3d.stanford.edu/
http://www.cs.uiuc.edu/homes/dhoiem/projects/popup/index.html

But how about making a cool polygon-ization in Java :). Raising same question on Java Developer site leads me to the conclusion that we can go ahead and do this work. I will post more details on this as the work will progress.