I’m with a customer this week in Swiss doing a workshop on e4. Tomorrow is the last day and well most likely will at least take a short look how they can integrate JavaFX 2.x into their e4-SWT applications e.g. to show charts.
I just coded up a small example of a PieChart and thought it might be nice show case for JavaFX animations to let the pie slice move out a bit when hovering. I’m not really good at all the math stuff so I searched the internet a found this nice JavaFX 1.x tutorial and adopted it to JavaFX 2.0. I didn’t spend too much time on reading the API so maybe I’m doing things completely wrong but here’s the result in a short screencast.
The real magic is in the translation calcuation inside the MouseOverListener which looks like this:
static class MouseHoverAnimation implements EventHandler<MouseEvent> { static final Duration ANIMATION_DURATION = new Duration(500); static final double ANIMATION_DISTANCE = 0.15; private double cos; private double sin; private PieChart chart; public MouseHoverAnimation(PieChart.Data d, PieChart chart) { this.chart = chart; double start = 0; double angle = calcAngle(d); for( PieChart.Data tmp : chart.getData() ) { if( tmp == d ) { break; } start += calcAngle(tmp); } cos = Math.cos(Math.toRadians(0 - start - angle / 2)); sin = Math.sin(Math.toRadians(0 - start - angle / 2)); } @Override public void handle(MouseEvent arg0) { Node n = (Node) arg0.getSource(); double minX = Double.MAX_VALUE; double maxX = Double.MAX_VALUE * -1; for( PieChart.Data d : chart.getData() ) { minX = Math.min(minX, d.getNode().getBoundsInParent().getMinX()); maxX = Math.max(maxX, d.getNode().getBoundsInParent().getMaxX()); } double radius = maxX - minX; TranslateTransitionBuilder.create().toX((radius * ANIMATION_DISTANCE) * cos).toY((radius * ANIMATION_DISTANCE) * sin).duration(ANIMATION_DURATION).node(n).build().play(); } private static double calcAngle(PieChart.Data d) { double total = 0; for( PieChart.Data tmp : d.getChart().getData() ) { total += tmp.getPieValue(); } return 360 * (d.getPieValue() / total); } }
The sample sources are published as part of the e(fx)clipse repo in a sample project.
Pingback: Java desktop links of the week, November 26 | Jonathan Giles
can you please publish the code on Github , thank u in advance.
oops I did’nt see k the link at the end 🙂
Pingback: JavaFX – jamais parti, déjà has been ? « Le Blog d'Ippon Technologies
How can we display the values on individual slices, without any mouse event.
I have been trying to search a method, but didn’t find one. Can anyone please suggest something.