Tuesday Mar 17, 2009

JavaFX - Light Effect


JavaFX provides many APIs for Lighting effects.
There are also different light types such as

As you might have noted, there are many attributes available in each of these classes to control the light. To be frank, I'm not really familiar with the details of those attributes. But I still would like to use the APIs to generate light effects.

For this I have written a program which will generate the source code for the light effect. The user just needs to change the slider and monitor the changes in light. Once the user is happy about the effect, he can just copy the code that is shown and use it in his application!

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

For Applet mode, click on above image

For standalone mode

Now you too can enjoy using light effects in your application! Simple?!


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

Friday Mar 13, 2009

JavaFX - SVGPath


We recently celebrated Holi - Festival of Colours. It was real fun! Now lets try to celebrate Holi with JavaFX!.

You can create an SVG path in JavaFX using SVGPath class. It accepts content which is a string formatted as specified here.

SVGPath {
    content: "M48.859,43.518c8.424,17.64,2.736,140.832-7.128,184.032"
             "c-9.864,43.272-19.728,98.28-22.032,144.576c-1.008,19.728,"
             "2.016,27.504,14.904,27.504c22.752,0,51.624-47.952,87.84-46.872"
             "c36.288,1.08,47.808,55.008,64.8,54.648c16.992-0.36,30.672-6.264,"
             "30.816-58.752C218.563,191.981,87.235,64.973,48.859,43.518"
             "L48.859,43.518L48.859,43.518L48.859,43.518z"
    fill: Color.BLACK
}

We can combine a series of SVGPath to create the final image. Now we can manipulate attributes of individual SVGPath such as fill, stroke, strokeWidth etc. I'm using the same ColorChooser code as in previous post.

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

For Applet mode, click on above image

For standalone mode

To paint Duke select any part of Duke and then select a color from color chooser. Now you can play Holi with Duke! Have fun!

Source

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

Thursday Mar 12, 2009

JavaFX - BlendMode Effect


Just thought of demonstrating use of JavaFX BlendMode effect API to combine and render multiple nodes. Since this requires blending of multiple nodes, we apply this effect to Group by specifying its blendMode attribute.

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

For Applet mode, click on right image above.

For standalone mode

Here we create two ImageView and add it to group. The blendMode attribute is bound to one of element of an array of blend modes available in JavaFX. This is done so that we can just change the index to switch to another blend mode.

var blendGroup = Group {
    
    // Specify BlendMode
    blendMode: bind blendMode[index]
    
    content: [
        ImageView {
            image: Image {
                url: "{__DIR__}images/sky.jpg"
            }
        },
        ImageView {
            image: Image {
                url: "{__DIR__}images/baloon.jpg"
            }
        },
    ]
    
    translateX: 5
    translateY: 5
};

Source

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

Tuesday Mar 10, 2009

JavaFX - Sudoku with CSS


This is a Sudoku game developed using JavaFX. The objective is not really to demonstrate Sudoku, but to show Cascading Style Sheets (CSS) support in JavaFX. This sample uses two CSS files - blue.css and black.css. These files have information about different user interface attributes such as color, font, shape...

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

For Applet mode, click on above image

For standalone mode

First lets create a style sheet...

.titleText {
    font-size: 20pt;
    font-family: "Bitstream Vera Sans";
    font-weight: bold;
    fill: #79818C;
}
Here we have specified the font attributes family, weight, size, color etc.

Similarly a button can be created by a combination of Rectangle and Text as shown below:

.buttonText {
    font-size: 11pt;
    font-family: "Bitstream Vera Sans";
    font-weight: bold;
    fill: #FFE6D9;
}
.normalButton {
    fill: #8A9CB4;
    stroke: #79818C;
    strokeWidth: 2.0;
    arcWidth: 10;
    arcHeight: 10;
}

Now we need to associate this style-sheet with the top level container of JavaFX - Scene.

var stylesheets = "{__DIR__}blue.css";
Scene {
    content: []
    width: 281
    height: 408
    stylesheets: bind stylesheets
}
I have declared a variable stylesheet and have assigned the URL of the stylesheet file. Now I bind this value to stylesheets attribute of Scene. This will associate the CSS file with this Scene. I have used bind so that I can update the associated stylesheet at runtime.

Now I will associate the style-class defined in style-sheet to the specified Node. For example, we can apply the titleText style-class with the title node as shown below.

var title = Text {
    content: "Sudoku"
    effect: dropShadow
    styleClass: "titleText"
}

Similarly we can associate the button's rectangle attributes as shown below..

var defRect = Rectangle {
    width: bind width
    height: bind height
    styleClass: "normalButton"
}
Cool! Now you can play Sudoku game and if you feel bored just change the look and continue playing!!

<script type="text/javascript">var dzone_url = "http://blogs.sun.com/rakeshmenonp/entry/javafx_sudoku_css_support";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script>
<script type="text/javascript"> digg_skin = 'compact'; digg_window = 'new'; </script> <script language="javascript" src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
<script src="http://slashdot.org/slashdot-it.js" type="text/javascript"></script>

Friday Mar 06, 2009

JavaFX - Glow Effect


This sample is just to demonstrate how easy it is to add an effect to a Node. First we initialize the Glow effect as shown below. The level attribute is bound to glowLevel variable so as to change the glow value at runtime.

var glowLevel = 0.0;
var glow = Glow {
    level: bind glowLevel
}

Now we will instantiate an ImageView and load the Image as shown below.

var imageView = ImageView {
    image: Image {
        url: "{__DIR__}images/light.jpg"
    }
    effect: bind glow
}

Create a Timeline which will run 5 times with auto-reverse. This Timeline is used for updating the value of glowLevel.

var timeline = Timeline {
    repeatCount: 15
    autoReverse: true
    keyFrames: [
        KeyFrame {
            time: 0s
            values: glowLevel => 0.0 ]
        },
        KeyFrame {
            time: 3s
            values: glowLevel => 0.85 ]
        }
    ]
}
timeline.play();

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

Click on above image for Applet mode.


The glow effect is added to the candles! Simple?!

Source

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

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