Generate Java Swing UI Touch Screen Interaction Heat Maps

Question

I have created an experiment to evaluate various cursors( Bubble Cursor, Area Cursor). Although I have generated the response time and accuracy for each interaction I was interested in knowing user touch patterns and visualize it in heat maps. I could find several API's for iphone, javascript, etc. Since Java Swing package isn't meant to be for touch screen, I couldn't find a way to generate them. Only way I could thing of is to find the touch point pixels and then use some visual tools to generate heatmaps in x-y plane. Any better solution is much appreciated.

Answer 1

Starting from this example, I added the following code to the mouse handler and dragged the mouse diagonally across the image to get the effect pictured below. For simplicity, I used darker() on each pass, but a transformation in HSB space may also be appealing, for example.

@Override
public void mouseMoved(MouseEvent e) {
    …
    Color color = new Color(img.getRGB(x, y));
    int c = color.darker().getRGB();
    img.setRGB(x, y, c);
    repaint();
    …
}

Alternatively, look at using JFreeChart with an XYBubbleRenderer or an XYShapeRenderer, seen here. Add a ChartMouseListener to highlight the selected bubble, as shown here for a StackedXYBarRenderer.

Also consider the prefuse visualization library. As the mouse moves over each entry in prefuse.demos.Congress, illustrated below, the highlight, tooltip and detail text change.