Posts tagged draggable

JavaFX, Duke Potato

Oct 4th

Posted by Silveira in english

11 comments

Do you know the toy Mr. Potato Head? Now meet the Java Potato.

Duke images here from previous dukes I posted and other images from Open Clipart Project.

Java Web Start:

The code:

package dukepotato;
 
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.Group;
import javafx.input.MouseEvent;
import javafx.scene.geometry.Circle;
import javafx.scene.paint.Color;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
 
public class Img extends ImageView{
    public  attribute content: Node[];
    public  attribute src: String;
 
    private attribute endX = 0.0;
    private attribute endY = 0.0;
    private attribute startX = 0.0;
    private attribute startY = 0.0;
 
    override attribute translateX = bind endX;
    override attribute translateY = bind endY;
    override attribute blocksMouse = true;
 
    init {
        image = Image {
            url: "{__DIR__}/{src}"
        }
    }
 
    override attribute onMousePressed = function(e:MouseEvent):Void {
        startX = e.getDragX()-endX;
        startY = e.getDragY()-endY;
    }
 
    override attribute onMouseDragged = function(e:MouseEvent):Void {
        endX = e.getDragX()-startX;
        endY = e.getDragY()-startY;
    }
}
 
var dukesimages = ["duke1.png", "duke2.png", "duke3.png", "duke4.png"];
var dukes = for (image in dukesimages){
    Image {
        url: "{__DIR__}/{image}"
    }
}
var index = 0;
var duke = ImageView {
    x: 200, y:170
    image: bind dukes[index];
    onMouseClicked: function( e: MouseEvent ):Void {
        index = (index + 1) mod sizeof dukesimages;
    }
}
 
var hat = Img { src: "hat.png", x: 370 }
var partyhat = Img { src: "party_hat.png", x: 160, y: 5 }
var cap = Img { src: "cap.png", x: 230, y: 10 }
var cake = Img { src: "cake.png", x: 526, y: 190 }
var glove = Img { src: "glove.png", x: 338, y: 363 }
var baseball = Img { src: "baseball.png", x: 548, y:373 }
var pencil = Img { src: "pencil.png", x: 451, y: 365 }
var camera = Img { src: "camera.png", x: 125, y: 380 }
var coffee = Img { src: "coffee.png", x: 541, y: 114 }
var burger = Img { src: "burger.png", x: 542, y: 282 }
var diamond = Img { src: "diamond.png", x: 243, y: 383 }
var pliers = Img { src: "pliers.png", x: 20, y: 368 }
var rubikcube = Img { src : "rubikcube.png", x: 37, y: 295 }
var syringe = Img { src: "syringe.png", x: 35, y: 245 }
var hourglass = Img { src: "hourglass.png", x: 35, y: 127 }
var adventurehat = Img { src: "adventurehat.png", x: 8, y:30 }
var tie = Img { src: "tie.png", x: 547, y:35 }
 
Frame {
    title: "Duke Potato"
    width: 640
    height: 480
    closeAction: function() {
        java.lang.System.exit( 0 );
    }
    visible: true
 
    stage: Stage {
        content: [duke, hat, partyhat, cake, adventurehat, cap, glove,
            baseball, pencil, camera, coffee, burger, diamond,
            pliers, rubikcube, syringe, hourglass, tie]
    }
}
  • Lines 14 to 42 is the same dragging approach I showed in the post Draggable Nodes, but this time creating a class that inherits the behavior of ImageView.
  • Lines 44 to 57 is the Duke that changes when you click on it. It cycles over the dukesimages list.
  • Lines 59 to 75 is just instantiations of all toys and objects we will use to dress the Duke. Look how easier was to create and place a image.
  • Lines 78 to the end is just creating a Frame and putting all elements on it.

Download a package with the NetBeans project, sources, libraries and images, DukePotato.tar.gz.

, , , , , , ,

JavaFX, Draggable Nodes

Aug 11th

Posted by Silveira in english

14 comments

One thing that I like a lot to do with JavaFX is draggable objects. Due to some recent changes in the JavaFX syntax my old codes for that are no longer working. Joshua Marinacci from Sun’s JavaFX engineering team and other guys from the JavaFX community gave me some tips. Here some strategies I’m using for making draggable nodes in JavaFX.

In this first example, a simple draggable ellipse.


video url: http://www.youtube.com/watch?v=pAJHH-mPLaQ

import javafx.application.*;
import javafx.scene.paint.*;
import javafx.scene.geometry.*;
import javafx.input.*;
 
Frame {
    width: 300, height: 300, visible: true
    stage: Stage {
        content: [
            Ellipse {
                var endX = 0.0; var endY = 0.0
                var startX = 0.0; var startY = 0.0
                centerX: 150, centerY: 150
                radiusX: 80, radiusY: 40
                fill: Color.ORANGE
                translateX: bind endX
                translateY: bind endY
                onMousePressed: function(e:MouseEvent):Void {
                    startX = e.getDragX()-endX;
                    startY = e.getDragY()-endY;
                }
                onMouseDragged: function(e:MouseEvent):Void {
                    endX = e.getDragX()-startX;
                    endY = e.getDragY()-startY;
                }
            }
        ]
 
    }
}

When you need to create a group of draggable objects, you can try thie approach of a draggable group like this. Inside on it, you can put whatever you want.


Video url: http://www.youtube.com/watch?v=mHOcPRrgQCQ

import javafx.application.*;
import javafx.scene.paint.*;
import javafx.scene.geometry.*;
import javafx.input.*;
import javafx.scene.*;
import javafx.scene.effect.*;
import javafx.scene.image.*;
import javafx.animation.*;
 
// a graggable group
public class DragGroup extends CustomNode{
    public attribute content: Node[];
 
    private attribute endX = 0.0;
    private attribute endY = 0.0;
 
    private attribute startX = 0.0;
    private attribute startY = 0.0;
 
    public function create(): Node {
        return Group{
            translateX: bind endX
            translateY: bind endY
            content: bind content
        }
    }
 
    override attribute onMousePressed = function(e:MouseEvent):Void {
        startX = e.getDragX()-endX;
        startY = e.getDragY()-endY;
    }
 
    override attribute onMouseDragged = function(e:MouseEvent):Void {
        endX = e.getDragX()-startX;
        endY = e.getDragY()-startY;
    }
}
 
// angle animation, cycles between 0 to 360 in 36 seconds
var angle = 0.0;
var angleAnimation = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames : [
        KeyFrame {
            time: 0s
            values:
                    angle => 0.0
        },
        KeyFrame{
            time: 36s
            values :
                    angle => 360.0 tween Interpolator.LINEAR
        }
    ]
}
 
// some pictures from my Flickr albums 
var me    = "http://farm4.static.flickr.com/3042/2746737338_aa3041f283_m.jpg";
 
 
 
var dog   = "http://farm4.static.flickr.com/3184/2717290793_ec14c26a85_m.jpg";
var plant = "http://farm4.static.flickr.com/3014/2731177705_bed6d6b8fa_m.jpg";
var bird  = "http://farm4.static.flickr.com/3190/2734919599_a0110e7ce0_m.jpg";
var me_89  = "http://farm3.static.flickr.com/2138/2308085138_7b296cc5d0_m.jpg";
 
 
Frame {
    width: 640, height: 480, visible: true
    stage: Stage {
        fill: Color.BLACK
        content: [
            DragGroup{
                content: ImageView {
                    anchorX: 120, anchorY: 90
                    rotate: bind 30 + angle
                    image: Image { backgroundLoading: true, url: me }
                }
            },
            DragGroup {
                translateX: 300, translateY: 50
                content: ImageView {
                    anchorX: 120, anchorY: 90
                    rotate: bind -30 + angle
                    image: Image { backgroundLoading: true, url: dog }
                }
            },
            DragGroup {
                translateX: 300, translateY: 300
                content: ImageView {
                    anchorX: 120, anchorY: 90
                    rotate: bind 90 + angle
                    image: Image { backgroundLoading: true, url: plant }
                }
            },
            DragGroup {
                translateX: 200
                translateY: 200
                content: ImageView {
                    anchorX: 120, anchorY: 90
                    rotate: bind 90 + angle
                    image: Image { backgroundLoading: true, url: bird }
                }
            },
            DragGroup {
                translateX: 30
                translateY: 200
                content: ImageView {
                    anchorX: 85, anchorY: 120
                    rotate: bind angle + 180
                    image: Image { backgroundLoading: true, url: me_89 }
                }
            },
        ]
 
    }
 
    closeAction: function() {
        java.lang.System.exit( 0 );
    }
}
 
angleAnimation.start();

One more example, using the same class DragGroup, we can put multiple nodes using lists.


Video url: http://www.youtube.com/watch?v=gJqy7EdtEqs

import javafx.application.*;
import javafx.scene.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
import javafx.input.*;
import javafx.animation.*;
import java.lang.Math;
 
// Class to create a draggable group of objects
public class DragGroup extends CustomNode{
    public attribute content: Node[];
 
    private attribute endX = 0.0;
    private attribute endY = 0.0;
 
    private attribute startX = 0.0;
    private attribute startY = 0.0;
 
    override attribute onMousePressed = function(e:MouseEvent):Void {
        startX = e.getDragX()-endX;
        startY = e.getDragY()-endY;
    }
 
    override attribute onMouseDragged = function(e:MouseEvent):Void {
        endX = e.getDragX()-startX;
        endY = e.getDragY()-startY;
    }
 
    public function create(): Node {
        return Group{
            translateX: bind endX
            translateY: bind endY
            content: bind content
        }
    }
}
 
// angle animation, cycles between 0 to 360 in 10 seconds
var angle = 0.0;
var angleAnimation = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames : [
        KeyFrame {
            time: 0s
            values: angle => 0.0
        },
        KeyFrame{
            time: 10s
            values :  angle => 360.0 tween Interpolator.LINEAR
        }
    ]
}
 
// breath animation, go and back from 0.0 to 10.0 in 2 seconds
var breath = 0.0;
var breathAnimation = Timeline {
    repeatCount: Timeline.INDEFINITE
    autoReverse: true
    keyFrames : [
        KeyFrame {
            time: 0s
            values: breath => 0.0
        },
        KeyFrame{
            time: 1s
            values :  breath => 10.0 tween Interpolator.LINEAR
        }
    ]
}
 
// Creates n multi colored floating circles around a bigger circle
var n = 12;
var colors = [
    Color.BLUE, Color.AQUA, Color.MAGENTA, Color.RED,
    Color.YELLOW, Color.ORANGE, Color.HOTPINK, Color.LIME
];
var chosen = Color.YELLOW;
var floatingCircles = Group{
    rotate: bind angle
    content: for (i in [1..n])
    Circle {
        fill: colors[i mod sizeof colors]
        radius: 10
        centerX: Math.cos(i * 2 * Math.PI/n) * 70
        centerY: Math.sin(i * 2 * Math.PI/n) * 70
        onMouseClicked: function( e: MouseEvent ):Void {
            chosen = colors[i mod sizeof colors];
        }
    }
}
var circle = Circle{
    radius: bind 50 + breath
    fill: bind chosen
}
 
 
Frame {
    width: 400, height: 400, visible: true
    stage: Stage {
        fill: Color.BLACK
        content: [
            DragGroup{
                translateX: 200, translateY: 200
                content: [circle, floatingCircles]
            }
        ]
    }
 
    closeAction: function() {
        java.lang.System.exit( 0 );
    }
}
 
// starts all animations
angleAnimation.start();
breathAnimation.start();
, , , , , , ,

JavaFX: Color picker

Feb 19th

Posted by Silveira in english

2 comments

An simple color picker that can be also used as a gadget.

import javafx.ui.*;
import javafx.ui.canvas.*;

var colors = [red:Color, orange:Color, yellow:Color, green:Color,
     cyan:Color,blue:Color, magenta:Color, gray:Color];

var chosenColor: Paint;
chosenColor = black:Color;

var x = 120;
var y = 70;

Canvas{
    content: Group{
        transform: bind translate(x,y)
        content: [Star{
            points: sizeof colors
            rin: 30
            rout: 50
            fill: bind chosenColor
            onMouseDragged: operation(e) {
                x += e.localDragTranslation.x;
                y += e.localDragTranslation.y;
            }
        },
        foreach (i in [1..sizeof colors]) Circle {
            var: self
            transform: [rotate(i*360/sizeof colors,0,0), translate(50,0)]
            radius: 10
            fill: colors[i%sizeof colors]
            onMouseClicked: operation (e){
                chosenColor = self.fill;
            }
        }]
    }
}
, , , , , , , , , , ,

Draggable and Growable Ball in JavaFX

Feb 16th

Posted by Silveira in english

2 comments

Two simple JavaFX code handling onMouseDragged event.

import javafx.ui.*;
import javafx.ui.canvas.*;

Canvas {
    content: Circle {
        var x = 50
        var y = 50
        transform: bind translate(x, y)
        radius: 30
        fill: red
        onMouseDragged: operation(e) {
                x += e.localDragTranslation.x;
                y += e.localDragTranslation.y;

        }
    }
}


import javafx.ui.*;
import javafx.ui.canvas.*;

Canvas {
    content: Circle {
        var x = 50
        var y = 50
        var radius = 30
        transform: bind translate(x, y)
        radius: bind radius
        fill: red
        onMouseDragged: operation(e) {
            if (e.button == 1){
                x += e.localDragTranslation.x;
                y += e.localDragTranslation.y;
            }
            if (e.button == 3) {
                radius += e.localDragTranslation.x;
            }
        }
    }
}


import javafx.ui.*;
import javafx.ui.canvas.*;

Canvas {
    content: [
    Rect {x: 50, y: 50, width: 50, height: 50, fill: orange },
    Circle {
        var x = 50
        var y = 50
        var radius = 30
        var color = red:Color
        transform: bind translate(x, y)
        radius: bind radius
        fill: bind color
        onMouseDragged: operation(e) {
            if (e.button == 1){
                x += e.localDragTranslation.x;
                y += e.localDragTranslation.y;
            }
            if (e.button == 3) {
                radius += e.localDragTranslation.x;
            }
        }
        onMousePressed: operation(e){
            color = Color {blue: 0.0, green: 0.0, red: 1.0, opacity: 0.5};
        }
        onMouseReleased: operation(e){
            color = red:Color;
        }
    }]
}

You can test this examples with thhe JavaFX Pad or using Netbeans with the JavaFX Plugin.

, , , , , , , , , , , , ,