Do you know the toy Mr. Potato Head? Now meet the Java Potato.
[youtube]6NrUdp5XX_o[/youtube]
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.