In this article, I want to share my experience of adding multi-user multi-touch capabilities to the JavaFX graph editor library developed by TESIS DYNAware. Shared interactive surfaces like tabletops or interactive walls are considered to improve the group collaboration and communication in office and educational settings. Still today, applications for shared interactive surfaces that support productive tasks such as document editing are rare.
Built on top of JavaFX, TUIOFX aims to support the development of multi-touch applications involving multiple co-located users. Therefore the goal of this project is:
- To investigate on the applicability of TUIOFX for building multi-user multi-touch document editing/authoring applications.
- To evaluate two novel interaction techniques that aim at reducing multi-user interaction conflicts.
As a document editing tool I chose to build a simple graph editor for UML class diagram using TUIOFX and this JavaFX graph editor library.
Inspired by the nice look of the gauges in Gerrit Grunwald’s blog post Harmonic Code: Building a simple Dashboard using Medusa I felt like trying out how his Medusa gauges library would look like on a Shared Interactive Surface with TUIOFX. I started from the example in the blog, but quickly added some interactive elements in form of some sliders, to control the gauges. The design of the gauges SlimSkin and the TUIOFX-Widget styling work together quite nicely.
To go a little further, I put together a quick UI mockup for a mixing console. In order to have some sort of knobs as control, I remembered a blog post by Jasper Potts, where he developed a knob skin for the Slider control. While — due to some API changes in JDK 8—his code did not work out of the box, it greatly helped me to quickly come up with an own Knob control implementing custom Skin and Behaviour.
In order to easily share documents to an Interactive Surface we implemented an AirPrint PDF Printer in pure Java. It uses the JmDNS library to announce a PDF-capable AirPrint-Printer to iOS- and OS X-devices in the local network via Apple’s Bonjour zeroconf-service. When a device discovers the printer and starts a print job, the incoming requests are handled by a
HttpServer. The server processes the incoming IPP (Internet Printing Protocol) requests and accepts incoming print jobs. The document in the response body is passed to Apache PDFBox in form of a
byte, gets loaded into a
PDDocument, and (the first page) is rendered into a
BufferedImage. The document is displayed in form of an
ImageView — with TUIOFX it is easily zoomable, rotatable and movable on our TUIO-enabled multi-touch table.
See this little demo video of how it works: