Wednesday Sep 23, 2009

shape intersection/subtraction result - JavaFX

A very simple example in JavaFX to show that shape intersection/subtraction  works so cool in JavaFX. Gradient comes out in a nice fashion and motion is also smooth. 

 Please see this link to view the sample: http://www.javafx.com/samples/SpeedoMeter/index.html The gradient in sample and here are different and that can be changed by changing 3-4 lines in code.

Its again a open code written. Personally I don't like too much of OOP's coding in JavaFX as it is not a language meant for it. But yes if sample size/application size is big, its always good to make things seperate.


Tuesday Aug 11, 2009

User experience - More rich !

Finally Nancy got it done. Thanks ! 

It's very very important for us to know the correct method of shipping the application. Out of Browser feature is awesome but you can't simply expect Customer, End User to drag the applet out of browser by pressing Alt-Space. No, its just a way Java Runtime provide to us. In JavaFX, this feature is customizable up to an awesome extent. You can simply write 4-5 lines of code and make the applet draggable as you feel it should :D.

Here is one small article on same:

http://www.javafx.com/docs/articles/ShouldDrag/index.jsp

Maybe, I mentioned something like this in my prev. post, so can be repeated, but not truly  ! Have Fun !

Now again, we will talk about Customer, User look and feel. I bet most of us got bored watching rotating Java Logo and applet is taking time to load. JavaFX new feature is to use splash screen for that. Though here in this article you will get one static splash screen but no one can stop you making a dynamic gif splash screen. We will have that also in show case soon, till that time enjoy with this :

http://www.javafx.com/docs/techtips/SplashScreen/

Do, leave your comments so that we get to know how pathetic we are and what is/are the improvement(s) required. thanks !

Sunday Aug 02, 2009

Progress Indicator - JavaFX !

Probably I missed something. But this is the way we can add indefinite progress indicator with any unpredictable events. Here I am just calling a Web service to show yahoo maps for NY city.

Here how progress indicator looks like : ..........

[Read More]

Thursday Jul 30, 2009

Use of ListView - UI Control

A simple example how ListView works in JavaFX 1.2. I guess it need more feature in next release. But it do basic stuff like providing scrollbar if list is long, selected item actions.Something like this :

Here is the simple code, in which I am adding text  ..........

[Read More]

Tuesday Jul 28, 2009

Simple example of Scroll Bar - JavaFX 1.2

ScrollBar - UI Control feature of JavaFX 1.2 .

It has been used in lot of samples but if you are finding it tough to grab out the code from sample to use. Here is a simple(simplest actually :) ) code to use scrollBar. I have create array of rectangle and associated scroll bar with it. Something like this  ..........

[Read More]

Tuesday Jun 30, 2009

Small code for PieChart...but !

As already discussed, JavaFX 1.2 provide API set for Charts and Graphs. Though I decided to put my hand dirty in writing one 3D piechart from my own. With mine, you will get additional feature of explode in and out feature :). Well, action can be written with the existing chart API and I guess explode feature will also come soon.


Making 3D Pie chart is nothing but layering of 2D Pie Chart and here goes a small code :

Slice.fx

package piechart3d;

import java.lang.Math;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.CustomNode;
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.Arc;
import javafx.scene.shape.ArcType;

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

public class Slice extends CustomNode {

    public var color: Color;
    public var sAngle: Number = 0.0;
    public var len: Number = 0.0;
    public var xt = 0.0;
    public var yt = 0.0;


    function explodout():Boolean {
        var t = Timeline {

            repeatCount: 1
            keyFrames: [
                KeyFrame {
                    time: 0.25s
                    canSkip: true
                    values: [
                        xt =>
                        30 \* Math.cos(2  \*  Math.PI  \*  (sAngle  +  len  /  2)  /  360) tween Interpolator.EASEBOTH,
                        yt =>
                        -30 \* Math.sin(2  \*  Math.PI  \*  (sAngle  +  len  /  2)  /  360) tween Interpolator.EASEBOTH

                    ]
                }
            ]
        }
        t.play();
        return true
    }
    function explodein():Boolean {
        var t1 = Timeline {
            repeatCount: 1
            keyFrames: [
                KeyFrame {
                    time: 0.25s
                    canSkip: true
                    values: [
                        xt => 0,
                        yt => 0
                    ]
                }
            ]
        }
        t1.play();
        return true
    }

    public override function create(): Node {
        return Group {
            blocksMouse: true
            translateX: bind xt
            translateY: bind yt
            onMouseClicked: function( e: MouseEvent ):Void {
                if(xt == 0 and yt == 0) {
                    explodout();
                }
                            else
                explodein();
            }
            content: for(num in [0..25]) {[
                    Arc {
 
                        stroke: color
                        cache: true
                        fill: color
                        translateX: 0
                        translateY: (num + 1) \* 1
                        centerX: 250
                        centerY: 250
                        radiusX: 150
                        radiusY: 60
                        startAngle: bind sAngle
                        length: bind len
                        type: ArcType.ROUND
                    }
                    Arc {
                        cache: true
 
                        fill: LinearGradient {
                            startX: 0.3
                            startY: 0.3
                            endX: 1.0
                            endY: 1.0
                            stops: [
                                Stop {
                                    color: color
                                    offset: 0.0
                                },
                                Stop {
                                    color: Color.WHITE
                                    offset: 1.0
                                },

                            ]
                        }
 
                        centerX: 250
                        centerY: 250
                        radiusX: 150
                        radiusY: 60
                        startAngle: bind sAngle
                        length: bind len
                        type: ArcType.ROUND
                    },
                ]
            }

        };
    }
}


Main.fx:
package piechart3d;


import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;

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

var slice1: Slice = Slice{color: Color.YELLOWGREEN, sAngle:0, len: 45};
var slice2: Slice = Slice{color: Color.BLUEVIOLET, sAngle:45, len: 80 };
var slice3: Slice = Slice{color: Color.PALETURQUOISE, sAngle:125, len: 80 };
var slice4: Slice = Slice{color: Color.DARKORANGE, sAngle:205, len: 100 };
var slice5: Slice = Slice{color: Color.FIREBRICK, sAngle:305, len: 55};


Stage {
    title: "Pie Chart - 3D"
    width: 550
    height: 580
    scene: Scene {
        fill: Color.WHITE
        content:[
           slice2, slice1,slice5,slice3,slice4
        ]
     }
    }


Anything here can be made generic to any extend. There is a for loop of 0..25 in Slice.fx which speaks about the thickness of chart :) and some mathematics in timeline speaks about explode feature.

Now if you compare this with PieChart that comes in API, you will see this has some jerky corners + Color combination is not as soluble. How that has been made is secret :).

JNLP Run :



Tuesday Jun 09, 2009

JavaFX Production Suite - Usages

The new samples are more complex than older once. And this is what we want. New features, not only need a sample to showcase but all the sample should be result oriented. Mean to say, it should do something with real world.

In the meantime, I can show you how interaction of JavaFX SDK increased with Production Suite. 

Lot of samples like Forecasting, BrickBreaker, SnakesNLadders are using Production Suite. They get the FXZ file from the designer and then do the animation job(logic coding) in JavaFX.

One I can explain of mine, Forecasting, though this sample is not complete but it uses FXZ file to a great extent. I got all the weather information in FXZ file by Charles, who is the graphics designer of this sample. Now, our idea is to animate weather conditions. According to the condition, we need to thought of animation.

For thunder, it looks something like this : 


Animation can be viewed in applet but I am just putting an image. Here there are three animation, 1. Shining of Sun 2. Left thunder spark 3. Right thunder spark.

Now, I have 5 layers of image in FXZ file, Sun, Sun Glow, Cloud, Left spark, right spark. On the basic of these, we decided what to animate when !

Final point is we need animation like opacity reduction or translation or both or rotating. Content once delivered to us in FXZ file, we can easily interoperable with FX code. The best way is to define layer names in FXZ file and use it in the code.

Thursday Jun 04, 2009

New Controls - Chart API in JavaFX 1.2

One of the most effective API's got introduced into the Marina(JavaFX 1.2) release are Control and Chart API's. As there are lot of questions on chart API, here is the small code for making some charts, it almost follow the same protocol with all chart API's.

We can do hell lot of things with it. I have just used the default and shown how action() can be written on slices. 

Source code : Here

Here goes the bubble chart, basic funda is same, insert the number array into BubbleChart.Data. Get all the Data into series and get that series into the Chart API. For more, please see the source Code.

More will be posted soon, or a jumbo one with all of it in one go ! You can download the latest SDK from here.

Monday May 11, 2009

Image of the Day - NASA + JavaFX

In last blog entry, we talked to have some blogs on Web Service to show how things go. Here is one of the simplest.

JavaFX is moving towards it's next release and work is ON. One of my friends came to my desk and he saw some animation of weather going here and there. He asked me " Is it some scientific data, data from NASA or something like that, if not what is this animation all about". Meantime, I checked the RSS feeds/WebService by NASA and I use one here to get something called "Image of the Day".

Its a big size image and so decide to showcase fullscreen example as well. Here goes the small code :

//Main.fx

package nasaimage;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.text.TextAlignment;

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

var s: Stage;
public var vText: Boolean = true;
var ly: LocationY = LocationY{};
var im = ImageView {
    fitHeight: bind s.height
    fitWidth: bind s.width
    image: bind Image {
        url: ly.urlImage
    }
}

var rect = Rectangle {
   blocksMouse: true
   x: bind s.width - 25
   y: 20
   arcHeight: 4
   arcWidth: 4
   width: 20,
   height: 20
   stroke: Color.GRAY
   strokeWidth: 2
   onMouseClicked: function( e: MouseEvent ):Void {
       FX.exit();
   }
}
/\* close button 'x' in title bar \*/
var close = Text {
   fill: Color.WHITE
   font: Font {
       name: "Arial Bold"
       size: 18
   }
   x: bind s.width - 20
   y: 35
   content: "x"
}

var loadingText = Text {
   visible: bind vText
   fill: Color.BLACK
   font: Font {
       name: "Arial Bold"
       size: 20
   }
   x: 20
   y: 20
   content: "Loading Image from NASA WebService..."
}

function run() {
s = Stage {
    title: "Nasa Image"
    width: 300
    height: 300
    fullScreen: true   
    scene: Scene {
        content: [
            loadingText,im, rect, close
        ]
    }
}
}

//LocationY.fx

package nasaimage;

import java.lang.Exception;
import javafx.data.pull.PullParser;
import javafx.data.xml.QName;
import javafx.io.http.HttpRequest;

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

public class LocationY {
    public var urlImage:String;
    var url = bind "http://www.nasa.gov/rss/lg_image_of_the_day.rss";
    var p: PullParser;
    var h: HttpRequest;
    init {
        if (url.length() > 0) {
            h = HttpRequest {
                location: url
                onException: function(exception: Exception) {
                    print("Please check the internet connectivity or Data Input");
                }
                onInput: function(input) {
                    p = PullParser {
                        input: input
                        onEvent: function(event) {
                            if ((event.type == PullParser.END_ELEMENT)) /\* and (event.qname.name == "current_conditions")) \*/{
                                if (event.qname.name == "enclosure") {
                                    urlImage = event.getAttributeValue(QName{name:"url"});
                                 }
                            }
                        }
                    };
                    p.parse();
                    p.input.close();
                }
                onDone: function() {
                Main.vText = false;
                }
            };
            h.start();
        }
    }
}

Don't ask me why I am using LocationY.fx as filename. Sometime back, I made my first webservice with name LocationY and from that time, I am copying the same file.

Last day Photo was more awesome than this. I guess it was something related with stars :). As talked in the prev. blog about the use of OnDone() method, here it is. Before loading of image, you will see a text   'Loading Image from NASA WebService...'. This text vanishes when image get loaded because we have called its visible: false in OnDone() method of HTTP.

I hope you love this short code and start of webservices. Thanks to NASA website to provide this RSS feed :).

Friday Apr 17, 2009

Bullet Graph - RIA + JavaFX !

Finally we are able to finish one more article on Data Representation. My special thanks to Stephen Few who has written the concept of Bullet Graph. An awesome way to represent lot of data in one screen. Basically used on Executive Dashboard to compare between predicted value and actual done.

In terms of Animation, this is different in comparison with other Data Rep. Articles. Here the data loading is sequential in nature. Actually if someone is making it for presentation purpose, the best way is to show the animation on Key hit, very similar to what we do in ODP or PPT presentations.Some small code of AppletExtension is also there, which will show you the power of JavaFX API. When you drag this applet out of Browser, you will not see the custom close button.

Feel free to comment or add anything you want in this.

Wednesday Apr 15, 2009

JavaFX + Web Service + Maps + Navigation

Just a small demo of JavaFX + Web Services. From JavaFX, its quite easy to work on Web Services like maps, search, pictures .. There are lot of Web services demo in the sample space

Here I have contact list of person, which has name, email ID, phone no, address and thumbnail images. Everything has a different work but here we are willing to see the address work. On clicking contact list's, will show me his location in maps. Actually there are two ways to do that, fast way and good way. We can store the maps in Database and use it when required, other is we call the web service and take the map on demand from Yahoo or Google API, which will be slow. So, we will go with good way.

Considering only one contact.


Some fancy stuff, like clicking the + sign will open address option. Now, on clicking the address, we will call the yahoo maps API for showing the location of the person Joseph J.

Actually its a mobile application, and can be viewed in mobile as well(just that I am not putting image). So, in basic code of Map show, we did :

// in place of Sunnyvale and CA, it will be {city} and {state} which will be the variables and passed from main code.

var url = bind "http://local.yahooapis.com/MapsService/V1/mapImage?appid=GetApp;city=Sunnyvale&state=CA";

   var p: PullParser;
   var h: HttpRequest;
   init {
           if (url.length() > 0) {
           h = HttpRequest {
               location: url
                onException: function(exception: Exception) {
                }

                onInput: function(input) {

                   p = PullParser {
                       input: input
                       onEvent: function(event) {

                           if ((event.type == PullParser.END_ELEMENT)) {
                               if (event.qname.name == "Result") {
                                   location = event.text; //this will give a URL for image
                               }
                          }
                       }
                   };
                   p.parse();
                   p.input.close();
      .......

Lot of further code. Important of it is OnDone method where we have to write some code of cleaning or loading prev. data. I have also embed my long back code of navigation, which will help us into navigation in the map.

Ignore some minor mistakes, have a look at the jnlp:

Soon, I will post the whole application with code, but the basic idea is simple and can be doable. 

Friday Mar 20, 2009

Timelines - Ease to Use in JavaFX

JavaFX being an easy language, one complex part is to write proper timeline for animation. Though its quite easy but as beginner I feel problem sometime. And sometime as a Java Developer, we start demanding those things which are generally done by the concept of multi-threading in Java. Remember, JavaFX is single threaded application.

So, this is what I generally follow. Say, If I have a class Ball, which has a circle and every ball has a timeline for its own. Now, if you want One ball move after another ball, I write a master timeline in Main file and there we write something like this :

var t = Timeline {
    repeatCount: 1
    keyFrames: [
         KeyFrame { time:0s action: function(){ t1.t.playFromStart(); } },
         KeyFrame { time:1s action: function(){ t2.t.playFromStart(); } },

    ]
}

Where there is an animation of 1s in t1.t.playFromStart(); So, the next timeline call goes at 1s, means finishing at first one. If you want some initial delay, you can write :

var t = Timeline {
    repeatCount: 1
    keyFrames: [
         KeyFrame { time:1s action: function(){ t1.t.playFromStart(); } },
         KeyFrame { time:2s action: function(){ t2.t.playFromStart(); } },

    ]
}

Means, dont do anything from 0s to 1s.

But, It is possible that you messed up after sometime. For that, you need to check the "javafx.animation.transition" package, one of the awesome packages in FX API's.

Though, example is everywhere in API Doc. I just show a small one, copied from the API' example itself. First car will fade, then move left and right, then rotate, then move again and then zoom.

Code for assistance :

1. Main for timeline problem.

2. Time class for timeline problem

3. Transitions Main Class.


Monday Mar 16, 2009

Play with Space - JavaFX

Spring season is about to come and one can feel the coldness in air. Last week, I went to my home and that week was quite good for my sample writing. Able to finish some of my pending job. 

Back to JavaFX Samples, last week I saw a nice sample written in flash about the ball motion in 3-D space. I try to implement that idea in JavaFX. Code is little dirty, so I will post it later. 

This is how it looks (animation is important) :

To watch the animation, please launch this JNLP.

I hope, you will enjoy it ! 

1. There are 4 polygon, which covers the space, looks like a cricket net practice place :).

2. Launch button will give motion to ball, since the motion is not restored, pressing it again will not work.

3. var scale = z0 / (z0 + z); Scaling with proper value will provide the Z-Camera.

4. Gaussian Blur for shadow, which translate in 2-D and with same timeline.

-- 

Change in Blog : Adding source code :

1. Main File

2. Ball Throw

 This will allow you to relaunch the animation.

Tuesday Mar 10, 2009

Combining Some motions...JavaFX

This is combination of my old examples. But here we can easily see how to delete, insert items from window at runtime. I have integrated 6 of the physics motion in one tree. Actually it makes things little complex, say we have colliding balls on one button and when I go somewhere and come back to colliding balls, it should colliding from begin. So, for some motion we need to restore initial position again. Run the JNLP here :

Jar file is little big, so it will take time.

Monday Mar 09, 2009

Spot Light at spot - JavaFX

There are lot of ways, you can use Lighting effects in JavaFX. All of them have its own use like Spot Light, Distant Light or Point Light. One small sample to show how Spot Light works.

Run the JNLP :

Here is the code :

package lightingeffects;

import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.effect.light.SpotLight;
import javafx.scene.effect.Lighting;
import javafx.scene.Group;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;
import javafx.stage.Stage;

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

var distance = -20.0;
var t = Timeline {
    repeatCount: 200
    autoReverse: true
    keyFrames: [
        KeyFrame {
            time: 6s
            canSkip: true
            values: [
                distance => 200.0 tween Interpolator.LINEAR
            ]
        }
    ]
}
t.play();
Stage {
    title: "Lighting Effects"
    width: 240
    height: 250
    scene: Scene {
        fill: Color.BLACK
        content: [
            Group {
                var t: Text;
                content: [
                    Circle {
                        translateX: bind distance
                        centerX: 20,
                        centerY: 45
                        radius: 30
                        stroke: Color.RED
                        strokeWidth: 2
                        effect: GaussianBlur {
                            radius: 10
                        }
                    }
                    t = Text {
                        translateX: 10
                        translateY: 20
                        effect: Lighting {
                            light: SpotLight {
                                x: bind distance
                                y: 0
                                z: 100
                                pointsAtX: bind distance
                                pointsAtY: 0
                                pointsAtZ: 0
                                specularExponent: 4
                            }
                            surfaceScale: 3
                        }
                        textOrigin: TextOrigin.TOP
                        x: 10
                        y: 10
                        content: "SpotLight"
                        fill: Color.RED
                        font: Font.font(null, FontWeight.BOLD, 40);
                    }
                ]
            }
            Group {
                content: [
                    Circle {
                        translateX: bind distance
                        centerX: 20,
                        centerY: 145
                        radius: 30
                        stroke: Color.GREEN
                        strokeWidth: 2
                        effect: GaussianBlur {
                            radius: 10
                        }
                    }
                    Text {
                        translateX: 10
                        translateY: 120
                        effect: Lighting {
                            light: SpotLight {
                                x: bind distance
                                y: 0
                                z: 100
                                pointsAtX: bind distance
                                pointsAtY: 0
                                pointsAtZ: 0
                                specularExponent: 4
                            }
                            surfaceScale: 3
                        }
                        textOrigin: TextOrigin.TOP
                        x: 10
                        y: 10
                        content: "SpotLight"
                        fill: Color.GREEN
                        font: Font.font(null, FontWeight.BOLD, 40);⁞
                    }
                ]
            },
        ]
    }
}
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