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.