Wednesday Feb 25, 2009

Easy to use - A Block of JavaFX !

Somewhere in someone blog, I read this "Complex thing should be doable and simple things should be simple" - this is what the power of a Language.

Many of us have seen lot of Samples in JavaFX and my favorites are those in which complex things are done quite easy, like PhotoFlip. http://www.javafx.com/samples/PhotoFlip/index.html. You can see how complex calculation goes for a perspective transform.

Using it in a simpler form, I tried to write Cascade transformed Frames, which looks something like this :



You can play with 2 buttons. Sorry for not making some flashy button, I simple used Swing Buttons.

By code is little buggy, so bear with it.

- Moving Mouse on any frame, will make it front.
- Close button will close that frame. (It is only possible in non-perspective mode).
- Top bar can be useful for dragging the frames(again good at non-perspective mode, in perspective mode, use the left most corner to  drag it, you can figure out why is so ? :) ).
- Text will be as clear as it was in original mode.
- Sharing common reason in case of toFront() make the effect little flckry.

(One problem solved, thanks for José Miguel in comment section - Code changed)

Its all in around 100-150 lines of code.  Feel free for suggestions. This can be used for multi-frame work like showing Car models, parts of engine.

Code :

Main.fx

package cascade;

import cascade.Frame;
import javafx.ext.swing.SwingButton;
import javafx.scene.Group;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;

/\*\*
 \* @author Vaibhav Choudhary
 \*/

var bt: Frame = Frame{ x: 20, y: 140 };
var bt1: Frame = Frame{ x: 100, y: 220};
var bt2: Frame = Frame{ x: 180, y: 300};

var gp = Group {
};
insert bt into gp.content;
insert bt1 into gp.content;
insert bt2 into gp.content;

Stage {
    title: "Application title"
    width: 550
    height: 580
    scene: Scene {
        fill: Color.GRAY
        content: [
            gp
            SwingButton {
                translateX: 10
                translateY: 10
                text: "Transform"
                action: function() {
                    bt1.t.playFromStart();
                    bt.t.playFromStart();
                    bt2.t.playFromStart();
                }
            }
            SwingButton {
                translateX: 100
                translateY: 10
                text: "Normal"
            action: function() {
                bt1.t.rate = -1;    bt1.t.play();
                bt2.t.rate = -1;    bt2.t.play();
                bt.t.rate = -1;     bt.t.play();
            }
            }
        ]
    }
}
Frame.fx
package cascade;

import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.CustomNode;
import javafx.scene.effect.PerspectiveTransform;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

/\*\*
 \* @author Vaibhav Choudhary
 \*/


public class Frame extends CustomNode {
    public var startx: Number;
    public var starty: Number;
    public var x: Number;
    public var y: Number;
    var distX: Number;
    var distY: Number ;

    public var clip_ = 0.0;
    public var t = Timeline {
        repeatCount: 1
        keyFrames: [
            KeyFrame {
                time: 1s
                canSkip: true
                values: [
                    clip_ => -150.0 tween Interpolator.LINEAR
                ]
            }
        ]
    }
    public var t_rev = Timeline {
        repeatCount: 1
        keyFrames: [
            KeyFrame {
                time: 1s
                canSkip: true
                values: [
                    clip_ => 0.0 tween Interpolator.LINEAR
                ]
            }
        ]
    }
    public override function create(): Node {
        return Group {
             effect: PerspectiveTransform {
                ulx: 0
                uly: 0
                urx: 300
                ury: bind clip_
                lrx: 300
                lry: bind clip_ + 150
                llx: 0
                lly: 150
            }
            cache: true
            translateX: bind x + startx
            translateY: bind y + starty
            content: [
                Rectangle {
                    x: 0,
                    y: 0
                    opacity: 0.6
                    width: 300
                    height: 150
                    fill: Color.BLACK
 
                    onMouseMoved: function( e: MouseEvent ):Void {
                        this.toFront();
                    }
                },
                Text {
                    fill: Color.WHITE
                    font: Font {
                        size: 14
                        name: "Arial Bold"
                    }
                    x: 10,
                    y: 40
                    content: "I am living on a 3D Frame. You can \\n  transform me using the Transform \\n Button at the top, "
                    "you can set \\n me normal using normal button "
                }
                Rectangle {
                    x: 1,
                    y: 1
                    width: 299,
                    height: 20
                    opacity: 0.8
                    fill: LinearGradient {
                        startX: 0.0
                        startY: 0.0
                        endX: 0.0
                        endY: 1.0
                        stops: [
                            Stop {
                                color: Color.GRAY
                                offset: 0.0
                            },
                            Stop {
                                color: Color.BLACK
                                offset: 1.0
                            },
 
                        ]
                    }
               onMousePressed: function (e:MouseEvent) : Void{
                      distX = startx;
                      distY = starty;
                }
                onMouseDragged: function( e: MouseEvent ):Void {
                      startx =distX  + e.dragX;
                      starty =distY  + e.dragY;
                }
                },
                Rectangle {
                    x: 280,
                    y: 3
                    width: 15,
                    height: 15
                    opacity: 0.7
                    onMouseClicked: function( e: MouseEvent ):Void {
                        this.visible = false;
                    }
                    fill: LinearGradient {
                        startX: 0.0
                        startY: 0.0
                        endX: 0.0
                        endY: 1.0
                        stops: [
                            Stop {
                                color: Color.ORANGE
                                offset: 0.0
                            },
                            Stop {
                                color: Color.DARKRED
                                offset: 0.5
                            },
                            Stop {
                                color: Color.ORANGE
                                offset: 1.0
                            },

                        ]
                    }
                    arcHeight: 5
                    arcWidth: 5
                },
                Text {
                    font: Font {
                        size: 20
                    }
                    x: 283,
                    y: 17
                    content: "x"
                }

            ]
        };
    }
}
View the JNLP here :)

Saturday Feb 14, 2009

Get ready for any mobile screen - JavaFX

Developers are ready for any mobile screen. What does it means when we say "any mobile screen". I will explain in a minute. Lets take a sample from javafx sample repository. For a while, I am taking my sample, Carousel. And I will show you how it works on mobile screen. 

We can see all things changed dynamically with change in orientation or screen size. The second is landscape mode which has a different mobile screen size. Images moved to the right position(center of the screen), lower bar adjusted its position according to screen size. 

Believe me, not more than 5 lines of code is required for these changes. This is what we call the power of binding. Components are so nicely binded with each other, that your idea is your implementation.

We have checked this sample on lot of mobile screen size and its running fine. In general, I can assure you, it will run fine on all screen(can be little problem on too small screen size, because there is no image resizing we have done in code. We can expect this behavior will  most of the application which will run on mobile.

 Thats why I said, developers are ready for any mobile devide and any mobile screen. Happy FX'ing.

Monday Feb 09, 2009

Flexible writing - JavaFX

Writing flexible code is always good. Though I myself write lot of hard coded stuff but nothing wrong in giving good lecture :D. Weeks back I planned to make flexible template in JavaFX, so that we all can use it by just writing one line of code and that is making an instance of that template in our main file. In general the code we write comes with OS frame like on Windows XP it will come with blue frame and close button, min/max buttons, but for good graphics its between to use own template :) and off course it will work on mobile too.

Here are some examples : 


So, I have just created a close button on which we call FX.exit(), nothing else. If we can customize the close button, say hmm to save the data or to save the position of the application. Most of the time it happens, we want the application to open at same position where we dragged it last time.

Important thing to notice is the upper rectangle I mean the title bar adjust the length from its own. So, even the landspace(90 degree rotating the mobile) will give us the correct template form(title bar). I agree, it should be small in case of mobile, and even that can be manageable with code(I have not done in this example). 

How to do this can be understandable in 3 basics steps :

1. Define scene as an instance and use that inside stage like this :

public var s = Scene {
    height: 200
    width: 200
    fill: Color.GRAY
    content: [
        Text {
            font: Font {
                size: 20
            }
            x: 10,
            y: 100
            content: "Application content"
        }
    ]
};

and then:

Stage {
        title: "Flexible Themes"
        style: StageStyle.TRANSPARENT
        width: 240
        height: 320
        scene: s

......

2. Everything will be effected with scene width and height. So, take this in a var. like :

public var width = bind s.width;
public var height = bind s.height;

Now, every component, like rectangle, arc, circle will be properly bind with width and height. Changes width and height will change all the component in relative term. So, rectangle(border line) is :

Rectangle {
                    x: 0,
                    y: 0
                    width: bind sceneWidth - 1
                    height: bind sceneHeight - 1
                    fill: Color.TRANSPARENT
                    stroke: Color.BLACK
                    strokeWidth: 2
                },

 where,

var sceneWidth = bind Main.width;
var sceneHeight = bind Main.height;

This code is written in different file so you need to take width and height from main file.

This is title bar rectangle(the blue and the green) :

Rectangle {
                    x: 1,
                    y: 1
                    width: bind sceneWidth - 1,
                    height: 30
                    opacity: 0.8
                    fill: LinearGradient {
                        startX: 0.0
                        startY: 0.0....

So, height is hard coded here but it should vary according to the size of window. For small window like mobile screen we need to reduce it with some factor.

3. Since Main is used as many place, the compiler will confuse with the entry point, so write the main stage code in function run(). Like:

function run() {
    var s1 = Stage {
        title: "Flexible Themes"
        style: StageStyle.TRANSPARENT
        width: 240
        height: 320
        scene: s
    }
}

Here are the files :

Main File (Please rename this file to Main.fx, else you will get some problem)

Blue Theme, Green Theme

 There can be lot to do with Themes, like adding min/max button, giving drag option which is default in OS Frames or save option as we already mentioned.  Please let me know if I missed something :).

Thanks to Josh for making it possible for all screen.

Thursday Jan 29, 2009

Different text effects in JavaFX

Some of the way, we can make fancy text. There are lot of good way but these are few of them. If you really want to make it fancy then please do some R&D with these API's used in this code. Here is a small code:

  

package addingfontinstyle;

import javafx.scene.effect.DropShadow;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.effect.light.DistantLight;
import javafx.scene.effect.light.SpotLight;
import javafx.scene.effect.Lighting;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;
import javafx.stage.Stage;

Stage {
    title: "Text In Style"
    width: 450
    height: 500
    scene: Scene {
        content: [
            Text {
                effect: DropShadow {
                    offsetX: -10
                    offsetY: -10
                }
                font: Font {
                    name: "Arial"
                    letterSpacing: 0.20
                    size: 50
                }
                fill: Color.YELLOWGREEN
                stroke: Color.GREEN,
                strokeWidth: 3
                x: 15,
                y: 80
                content: "Hello World"
            },
 
            Text {
                effect: Lighting {
                    light: DistantLight {
                        azimuth: -135
                        elevation: 30
                    }
                    surfaceScale: 5
                }
                x: 10
                y: 200
                content: "Hello World"
                fill: Color.RED
                font: Font {
                    name: "Arial Bold"
                    letterSpacing: 0.20
                    size: 50
                }
            },
            Text {
                effect: Lighting {
                    light: SpotLight {
                        x: 0
                        y: 100
                        z: 50
                        pointsAtX: 400
                        pointsAtY: 0
                        pointsAtZ: 0
                        specularExponent: 2
                    }
                    surfaceScale: 5
                }
                textOrigin: TextOrigin.TOP
                x: 10
                y: 300
                content: "Hello World"
                fill: Color.RED
                font: Font {
                    name: "Arial Bold"
                    letterSpacing: 0.20
                    size: 50
                }
            },
            Text {
                effect: GaussianBlur {
                }
                x: 10
                y: 400
                content: "Hello World"
                fill: Color.GREEN
                font: Font {
                    name: "Arial Bold"
                    letterSpacing: 0.20
                    size: 50
                }
            }
        ]
    }
}

Wednesday Jan 07, 2009

Pendulum Motion with controller in JavaFX

So, here goes one more Motion sample in JavaFX :). I have added Slider to control the value of "g" in Pendulum motion(just a thought, anything can be controlled like mass, length of pendulum). Pendulum do a complex calculation(Square root, Cosine, Sine) and I guess render is great in FX. Sorry again, as I am not able to post the applet. 

But here how it looks : 

The progress bar has been stolen from Chris Blog.

Here is the source code :

Main file, Pendulum.fx, Slider.fx.

Have a look and feel free to share your views.

Sunday Dec 21, 2008

JavaFX Production Suite - Example.

One more example of JavaFX production Suite. Though the complete thing can be done in Photoshop alone but I am just giving an example. I have made a house in Photoshop, which is not very good :(, but fair enough. And I animated the star effect in JavaFX. 

So, here is my home in photoshop :

Actually this is funny, I was following a tutorial to make house and in temptation, I made shadow as well, but there is no meaning of shadow in night :). Now, I filled star sparking effect in this from JavaFX.


Filling star effect need same which we have written for sparkling glasses. Just some changes here and there. In the last blog we have already discussed how to import work from Photoshop.

Here are the things to download:

1. House in fxz format .

2. Code (Main.fx, Star.fx)

Lot many things can be done. But I don't know Photoshop.

Friday Dec 19, 2008

Designer + Developer + JavaFX

Here is the little discussion on Designer + Developer workflow in JavaFX. Powered with Project Nile, we can export data from PhotoShop or Illustrator. Actually the complete production suite is awesome and provide developer and designer to work in parallel. Here how it is :

So, Developer can work on the business logic and till that time designer can design the actually content for developer. Finally it will merge in a great style. 

 Basic Requirement to do :

1. JavaFX Production Suite : Download from the start section of javafx.com.

2. For Designer : Any tool, either PhotoShop CS3 or Illustrator CS3. Officially CS3 is the supported platform but it works for CS4 as well.

3. For Developer : Java FX SDK: Download from the start section of javafx.com

Now, I am going ahead with PhotoShop. Copy the plugin from JavaFX production suite to PhotoShop. Run the PhotoShop, in export it will give you a save option in JavaFX, which basically saves the file in fxz format(a new format, why Sun need a new format, there is a lot of discussion and Jeet has pointed some reason in his blog).

Alright, so work started : 

I was watching the batman movie, so decide to take his awesome car, which is here :


In photoshop, I have changed the hue and exported all in fxz format.

Then I made a Netbeans Project, Copy the fxz file into the project space. We can now click on fxz file, we can see the preview and code as well. Right now, if we put some of the complex features of PhotoShop, I am afaird to say JavaFX will not catch those changes.

So, my fxz file(JavaFX.fxz) looks like this :

  /\*
 \* Generated by JavaFX plugin for Adobe Photoshop.
 \* Created on Fri Dec 19 19:17:33 2008
 \*/
//@version 1.0

Group {
    clip: Rectangle { x:0 y:0 width:576 height:432 }
    content: [
        ImageView {
            opacity: 1.0
            x: 0
            y: 0
            image: Image {
                url: "{__DIR__}Background.png"
            },
        },
    ]
}

Actually in my case there was nothing, so it generated a simple code :).

Now, I have made another file, calling it CarRotate.fx :

package psfx;

import java.lang.\*;
import javafx.fxd.FXDLoader;
import javafx.scene.\*;
import javafx.scene.input.\*;
import javafx.scene.paint.Color;
import javafx.scene.shape.\*;
import javafx.stage.\*;


var group = Group {
    content: []
};
var fxdContent = FXDLoader.load("{__DIR__}JavaFX.fxz"); // loads the content
insert fxdContent into group.content; // inserts the fxd content into the group


Stage {
    title: "JavaFX Invaders"
    resizable: true
    width: 700
    height: 700
    onClose: function() { 
        System.exit (0);

    }
    scene: Scene {
        content: [
            group
            Rectangle {
                x: 330,
                y: 500
                width: 60,
                height: 30
                fill: Color.GRAY
                onMouseClicked: function( e: MouseEvent ):Void {
                    fxdContent.rotate = 90;
                }
            }
        ]
    }
};


Some part of the code is point of interest :
  var group = Group {

    content: []

};

var fxdContent = FXDLoader.load("{__DIR__}JavaFX.fxz"); // loads the content

insert fxdContent into group.content; // inserts the fxd content into the group

Here I have loaded the .fxz file into var fxdContent which is a node and node means things are in our hand. I have simply written a rotate equation on a button click which is working nicely.

We can see the rotated car and hue which is the asset of PhotoShop in Green color. Huh, finally its done. Sorry, for posting bad example.

Thursday Dec 18, 2008

Initial Look of Physics App.

So, finally I decided to add all the motion(physics) application under one tree. Still I am not able to write too much of them but we will do it soon. Here are some which I merged into one and it looks like : 


Soon, the further work will be done. We will remove application like Carousel,Spring because its already in our repository. This application will also depicts 2 scene mode, how to remove content and add content dynamically.

Sorry for not posting the code, its in the mid and in a bad shape :).

Wednesday Dec 17, 2008

Playing with Color in JavaFX

JavaFX provide a rich API for playing with colors for an image or object. The best depicted in this sample but I will show you very quickly how to change the color of a car on JSlider. I have taken this nice car from Path Animation Sample and on JSlider, I will reproduce lot of Car color like this :

Actually this is very small but some one who want to develop car race required lot of car colors(it can be done at runtime)

Code here :

package carcolors;

import javafx.scene.effect.ColorAdjust;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
import javafx.ext.swing.SwingSlider;

var hue = 0;
var s = SwingSlider {
                minimum: -100
                maximum: 100
                value: hue
                vertical: false
            };
Stage {
    title: "Application title"
    width: 250
    height: 280
    scene: Scene {
        content: [
            s,
            ImageView {
                x: 100
                y: 100
                image: Image {
                    url: "{__DIR__}car.png"
                }
                effect: ColorAdjust {
                    hue: bind s.value/100.0
                }
            },
         ]

    }
}

Wednesday Dec 10, 2008

Spring Motion - Physics in JavaFX

3 weeks back, we were thinking of some cool application to make. I am a guy who has seen very less outside world, so coming up with some great idea is always tough for me. So, deciding that, I went back to my tenth class physics book and saw some of the cool physics motion. Its one of the tough subject and always screw me in exam. Searching some of the easy equation, I though to make one spring motion. Meantime, I though there is some spring motion residing in our repository. Actually one of the Josh applications do it in awesome way, but still we were missing the actual feel of Spring motion because of the gig-gag and spiral stuff attached to the wall and spring is going up and down in it, with a complete view of awesomeness :). This is what finally we achieve from this blog :

 I can still bet this can be 3 times much better than what you are seeing here. So, little of good news here that this sample can be executed on mobile

Here are the code files :

1. Main file.

2. Spring file.

3. SpringEquation file.

Enjoy FX'ing !

Tuesday Dec 09, 2008

3D button Effect in JavaFX

Me and Vikram was looking today some of the cool flash examples and I have seen the button effect at some place, when you press the button it really goes like inside and coming out. But that was an effect achieved by the images(two different images, one unpressed button and one pressed button) and then we thought to simulate this effect by code. Somehow we are able to do that in FX, here is the final outcome:

What we have tried to do is pressing one button will put the other in unpressed mode and vice-versa. This has been achieved by some of the cool API's of JavaFX. And we have used the DistantLight effect of JavaFX which gives a lighting effect in its awesome way. Actually this can be more cooler but I left that for developer to modify it according to their need :). But this is a modular code and can be used in any of the button place.

Here is the simple code for the same(again code is not written in the most optimized way but in the best way for understanding) :

package lighteff;

import javafx.scene.effect.light.DistantLight;
import javafx.scene.effect.Lighting;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

var factor = 5;
var scale = 1.0;
var factor1 = 10;
var scale1 = 0.85;

Stage {
    title: "Control Panel"
    width: 290
    height: 180
    style: StageStyle.UNDECORATED
    scene: Scene {
        fill: Color.BLACK
        content: [
            Group {
                effect: Lighting {
                    light: DistantLight {
                        azimuth: 90
                        elevation: 60
                    }
                    surfaceScale: bind factor
                }
                content: [
                    Circle {
                        centerX: 100,
                        centerY: 100
                        radius: 40
                        fill: Color.RED

 
                        onMousePressed: function( e: MouseEvent ):Void {
                            scale = 0.85;
                            factor = 10;
                            scale1 = 1.0;
                            factor1 = 5;
                        }
                    },
                    Text {
                        fill: Color.WHITE
                        scaleX: bind scale
                        scaleY: bind scale
                        font: Font {
                            size: 24
                        }
                        x: 71,
                        y: 105
                        content: "Press"
                    }
                ]
            },
            Group {
                effect: Lighting {
                    light: DistantLight {
                        azimuth: 90
                        elevation: 60
                    }
                    surfaceScale: bind factor1
                }
                content: [

                    Circle {
                        centerX: 200
                        centerY: 100
                        radius: 40
                        fill: Color.BLUE
                        onMousePressed: function( e: MouseEvent ):Void {
                            scale1 = 0.85;
                            factor1 = 10;
                            scale = 1.0;
                            factor = 5;
                        }
                    },
                    Text {
                        fill: Color.WHITE
                        scaleX: bind scale1
                        scaleY: bind scale1
                        font: Font {
                            size: 24
                        }
                        x: 171,
                        y: 105
                        content: "Press"
                    }
                ]
            }
        ]

    }
}  
About

Hi, I am Vaibhav Choudhary working in Sun. This blog is all about simple concept of Java and JavaFX.

Search

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