JavaFX HD Menus on RaspberryPi

JavaFX HD Menus on RaspberryPi

We put together a demo that shows what JavaFX can do on a RaspberryPi running fill 1080p HD on a TV using 5 way navigation(Arrows + Select). I hope you enjoy it, we had a lot of fun making it.

The first section of the video is a real recording direct of the HDMI output of the Raspberry Pi. So you can see the raw performance of the device, though video capture was limited to 30fps when the Pi was rendering at 60fps much of the time. The second section is a demo of how SceneBuilder could be used to build one of the demos. In all the menus we show the little overlay of arrow keys in top right corner so you can see how the menu is being navigated.

There are 4 separate menu demos:

  1. The first menu is a classic 2D menu system with a cool 2.5D section chooser.
  2. This is a cool vector 2D animated menu with a fun visual style. Playing with the idea of rotation.
  3. This is a cartoon retro style 3D menu showing 3D extruded text and 3D modeled TVs. The text and TVs were created in Cheetah 3D and exported as OBJ then imported using the OBJ importer available in the open source 3D Viewer sample app. In this demo and the next we have random animated lighting in and the ability to spin the 3D model with the <- and -> arrow keys so that the user can get a feeling for it being real time rendered 3D rather than video of offline rendered content.
  4. This was a way out 3D menu featuring DukeBot who was a early alternative design for the Java Duke mascot that did not get chosen. He was modeled and animated by John Yoon in Maya and we then imported the Maya ASCII file directly with all animation into JavaFX. The code for this menu is pretty tiny as its mostly working off the imported Maya file. The Maya importer is also open source and in the 3D Viewer sample app.

Its mostly running on the shipping EA of JavaFX 8 Embedded we prototyped a couple changes to the platform that we are working on making them real and I hope they will make it into 8 but not sure yet if we will have time. The changes are some performance improvements to how we draw into frame buffer, also the ability to draw JavaFX with transparent background on a hardware layer over hardware decoded video.

3D SpaceNavigator with JavaFX

I just got a 3D Connexion SpaceNavigator which is a kind of 3D input device(mouse/stick). It is cool to use when 3D modeling content for JavaFX but I thought it would be even better if I could navigate my JavaFX 3D scenes using it. I managed to hack some quick code to get it working in JavaFX. Many thanks to the JInput project, they made it super easy. Its super fun so I recoded a little video to share with you.

SpaceNavigator with JavaFX from Jasper Potts on Vimeo.

The code really is very simple, I just have a AnimationTimer that every frame checks to get the current inputs from device and applies them to the camera transforms. The device via jinput provides 6 floats for each axis and 2 booleans for the buttons, so could not be easier to connect to your app. Below is complete 3D app with a simple cube. I will be working on getting the object importers out in open source for you to use very soon 🙂

public class InputTestBlog extends Application {
    private ControllerEnvironment controllerEnvironment;
    private Controller spaceNavigator;
    private Component[] components;
    private Translate translate;
    private Rotate rotateX,rotateY,rotateZ;

    @Override public void start(Stage stage) throws Exception {
        controllerEnvironment = ControllerEnvironment.getDefaultEnvironment();
        Controller[] controllers = controllerEnvironment.getControllers();
        for(Controller controller: controllers){
            if ("SpaceNavigator".equalsIgnoreCase(controller.getName())){
                spaceNavigator = controller;
                System.out.println("USING Device ["+controller.getName()+"] of type ["+controller.getType().toString()+"]");
                components = spaceNavigator.getComponents();
            }
        }

        Group root = new Group();
        Scene scene = new Scene(root, 1024, 768, true);
        stage.setScene(scene);
        scene.setFill(Color.GRAY);
        // CAMERA
        final PerspectiveCamera camera = new PerspectiveCamera(true);
        scene.setCamera(camera);
        root.getChildren().add(camera);
        // BOX
        Box testBox = new Box(5,5,5);
        testBox.setMaterial(new PhongMaterial(Color.RED));
        testBox.setDrawMode(DrawMode.LINE);
        root.getChildren().add(testBox);
        // MOVE CAMERA
        camera.getTransforms().addAll(
                rotateY = new Rotate(-20, Rotate.Y_AXIS),
                rotateX = new Rotate(-20, Rotate.X_AXIS),
                rotateZ = new Rotate(0, Rotate.Z_AXIS),
                translate = new Translate(5, -5, -15)
        );
        // SHOW STAGE
        stage.show();
        // CHECK FOR INPUT
        if (spaceNavigator != null) {
            new AnimationTimer() {
                @Override public void handle(long l) {
                    if (spaceNavigator.poll()) {
                        for(Component component: components) {
                            switch(component.getName()) {
                                case "x":
                                    translate.setX(translate.getX() + component.getPollData());
                                    break;
                                case "y":
                                    translate.setY(translate.getY()+component.getPollData());
                                    break;
                                case "z":
                                    translate.setZ(translate.getZ()+component.getPollData());
                                    break;
                                case "rx":
                                    rotateX.setAngle(rotateX.getAngle()+component.getPollData());
                                    break;
                                case "ry":
                                    rotateY.setAngle(rotateY.getAngle()+component.getPollData());
                                    break;
                                case "rz":
                                    rotateZ.setAngle(rotateZ.getAngle()+component.getPollData());
                                    break;
                            }
                        }
                    }
                }
            }.start();
        }
    }

    public static void main(String[] args) {
        System.setProperty("net.java.games.input.librarypath", new File("lib").getAbsolutePath());
        launch(args);
    }
}