Thursday Jan 22, 2009

Putting effect in effective way...JavaFX

With me, it happens most of the time. The basic code is over and I stuck in giving a good color to a button or a text. Now a day, a good UI is as required as basic functionality. In my 7 year of Computer life including college + work I always ran away from animations and coloring. 

Last day, I was making a button and it took me pretty much time to finish it off. But, I find a good observation from it. A simple and quick way to color a button or giving a glossy effect. Have a look at these buttons. 

If you are not a grahics designer, then you probably like these buttons. These buttons has been made with very simple effort, just a small work of Linear Gradient. But the fight is which color to put in Linear Gradient. So, here is my observation, you need to put the color which are close to each other and can be easily merged with each other. Like .. hmm :

LIGHTBLUE, DARKBLUE, LIGHTBLUE.(3rd button)

This is actually the best pattern. 

2nd button is also the result of same :

LIGHTGREEN, DARKGREEN, LIGHTGREEN.

So, check more with this simple code :

Stage {
    title: "Some Cool Buttons"
    width: 250
    height: 280
    scene: Scene {
        fill:Color.BLACK
        content: [
            Rectangle {
                x: 10,
                y: 10
                width: 90,
                height: 30
                fill: LinearGradient {
                    startX: 0.0
                    startY: 0.0
                    endX: 0.0
                    endY: 1.0
                    proportional: true
                    stops: [
                        //   Stop { offset: 0.0 color: Color.BLACK },
                      Stop {
                            offset: 0.0
                        color: Color.LIGHTGREEN },
                        Stop {
                            offset: 0.5
                        color: Color.DARKGREEN },
                        Stop {
                            offset: 1.0
                        color: Color.LIGHTGREEN }
                    ]

                }
                opacity:0.6
                arcHeight:5
                arcWidth:5
            },
            Text {
                font: Font {
                size: 12
                name: "Arial Bold"
                letterSpacing: 0.15

            }
                fill:Color.WHITE
                x: 18,
                y: 30
                content: "HelloWorld"
            } ] }

Some of my fav. combinations(2 already mentioned) :

1. Stop {
                            offset: 0.0
                        color: Color.LIME },
                        Stop {
                            offset: 0.5
                        color: Color.DARKGREEN },
                        Stop {
                            offset: 1.0
                        color: Color.LIME }

This will look awesome, if you are writing a flashy application. Very vibrant in color.

2.  Stop {
                                offset: 0.0
                            color: Color.ALICEBLUE },
                            Stop {
                                offset: 0.5
                            color: Color.BLUE },
                            Stop {
                                offset: 1.0
                            color: Color.ALICEBLUE }

3. Stop {
                                offset: 0.0
                            color: Color.ORANGE },
                            Stop {
                                offset: 0.5
                            color: Color.RED },
                            Stop {
                                offset: 1.0
                            color: Color.ORANGE }

4. A very plain and descent effect :

Stop {
                                offset: 0.0
                            color: Color.LIGHTYELLOW },
                            Stop {
                                offset: 0.5
                            color: Color.YELLOWGREEN },
                            Stop {
                                offset: 1.0
                            color: Color.LIGHTYELLOW }

Enough, please let me know your choice. Is there any pattern, you follow !

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"
                    }
                ]
            }
        ]

    }
}  

Friday Nov 28, 2008

Sparkling on glass...

What to achieve: A sparkling glass(beer glasses are clean and shiny before beer get served) like this.

 So, our aim is to make those sparkling effect on glass. Here is the code in JavaFX(things are little hard coded but better for understanding):

  
package sample;

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.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.input.MouseEvent;
import javafx.scene.transform.Rotate;
import javafx.scene.shape.Polygon;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
import javafx.scene.shape.Circle;
import  javafx.scene.Group;
/\*\*
 \* @author Vaibhav
 \*/

var r = 0.0;
var t = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
        KeyFrame {
            time: 3s
            canSkip: true
            values: [
                r => 360.0 tween Interpolator.EASEBOTH
            ]
        }
    ]
}
t.play();
var op = 1.0;
var t1 = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
        KeyFrame {
            time: 3s
            canSkip: true
            values: [
                op => 0.0 tween Interpolator.EASEBOTH
            ]
        }
    ]
}
t1.play();

Stage {
    title: "Sparkling on Glass"
    width: 250
    height: 480
    scene: Scene {
        fill: Color.BLACK
        content: [
            ImageView {
                image: Image {
                    url: "{__DIR__}wineglass.png"
                }
            }
            Polygon {
                rotate: bind r;
                translateX: 130
                translateY: 100
                scaleX: 0.5
                scaleY: 0.5
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind op
            },
            Polygon {
                rotate: 45;
                scaleX: 0.25
                scaleY: 0.25
                translateX: 130
                translateY: 100
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind 1 - op
            },
            Polygon {
                rotate: bind r;
                translateX: 50
                translateY: 50
                scaleX: 0.5
                scaleY: 0.5
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind op
            },
            Polygon {
                rotate: 45;
                scaleX: 0.25
                scaleY: 0.25
                translateX: 50
                translateY: 50
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind 1 - op
            },
            Polygon {
                rotate: bind r;
                translateX: 30

                translateY: 120
                scaleX: 0.5
                scaleY: 0.5
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind op
            },
            Polygon {
                rotate: 45;
                scaleX: 0.25
                scaleY: 0.25
                translateX: 30
                translateY: 120
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind 1 - op
            },
        ]

    }
} 
Same animation in flash is here : http://www.entheosweb.com/Flash/sparkling_effect.asp

Monday Aug 18, 2008

Button Tabs with effects in JavaFX !

It looks good, so I decided to put before the completion of work. I was trying to simulate some fancy effects on button, so that I can embed it somewhere in some site. Here what is the class for Button:

public class Button extends CustomNode {

    public attribute x: Number;
    public attribute y: Number;
    public attribute text: Text;
    public attribute rectangle: Rectangle;
    public attribute content: String;
 
    public function create(): Node {

Now, the buttons will look like: 

 If you move the focus on any of the button, it will shine like this :

 or like this :

This simple 2 line animation is achieved by playing with the opacity code. Though I am not able to fit my text inside the button which currently I am trying to bind out. But simple flashy buttons are easy to achieve. Here is the code:

package flashybutton;

import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.text.\*;
import javafx.scene.geometry.\*;
import javafx.scene.paint.Color;
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.ext.swing.TextField;
import javafx.scene.Font;
import javafx.scene.FontStyle;
import javafx.scene.paint.\*;
import javafx.input.MouseEvent;


var x: Number = 100;
var y: Number = 100;
var color: Color;
var buttons:Button[]; 
var text: Text;
var content: String;
var width: Number = 100;
var height: Number = 40;
var arcWidth:Number = 10;
var arcHeight: Number = 10;
var opacity: Number = 0.6;

for( i in [1..5] ) {
    insert Button {
        x:100 + 100 \* i,
        y:100,
        content: "HelloWorld" + i,
        opacity: 0.6
    } into buttons;
}     
Frame {
    title: "MyApplication"
    width: 1000
    height: 200
    closeAction: function() { java.lang.System.exit( 0 ); 
    }
    visible: true

    stage: Stage {
        fill: Color.BLACK
        content: [ 
            buttons
        ]
    }
}

public class Button extends CustomNode {

    public attribute x: Number;
    public attribute y: Number;
    public attribute text: Text;
    public attribute rectangle: Rectangle;
    public attribute content: String;
 
    public function create(): Node {
        return Group {
            content: [
                Rectangle {    
                    x : bind x,
                    y : bind y, 
                    fill: LinearGradient {
                        startX: 0.0
                        startY: 0.0
                        endX: 1.0
                        endY: 0.0
                        proportional: true
                        stops: [
                 //   Stop { offset: 0.0 color: Color.BLACK },
                            Stop { offset: 0.0 color: Color.BLACK },
                            Stop { offset: 0.5 color: Color.GOLD },
                            Stop { offset: 1.0 color: Color.BLACK }
                        ]
                    },
                    width: 100
                    height: 40
                    arcWidth: 10
                    arcHeight: 10
                    opacity: bind opacity
                    onMouseMoved: function( e: MouseEvent ):Void {
                        opacity = 1.0;
                    }
                    onMouseExited: function( e: MouseEvent ):Void {
                        opacity = 0.6;
                    }
                },
                Text {
                    x: bind x + 10,
                    y: bind y + height / 2 + arcHeight / 2;
                    content: bind content
 
 
                }
            ]
        }
    }
}
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