• Home
  • Events
  • About
  • CanooNow: an embedded room allocation dashboard with JavaFx and OpenDolphin

    Where is my meeting?

    At Canoo, we have a lot of meeting rooms. They can be booked using our corporate calendar (Zimbra).

    In your organization it may be the case that all meetings always have a proper room reservation, every participant is fully aware where his next meeting will take place, and no spontaneous meetings ever occur.

    Well, it is different at Canoo. We may stand in front of the meeting rooms asking ourselves:

    • Where will my meeting be?
    • Who is currently in which meeting?
    • Where can I go without a reservation?

    We could go back to the workplace, fire up the corporate calendar and find that information but we had the idea that it would be much nicer to have the information readily available right where we need it: on a screen in front of the meeting rooms.

    In the future, we may want to extend the information to corporate news, pictures, blog posts, build status, welcoming visitors, and so on. We were bold enough to call that project CanooNow and implemented it as part of the infamous Canoo code camp.

    Technologies and Hardware

    We wanted to experience how such an application could be implemented on a Raspberry Pi. The Pi is an inexpensive mini computer with limited resources, but still is capable to run Java – a special JDK provided by Oracle for Raspberry Pi. Additionally, the plan was to put the application logic on a server and let the embedded device be the display. We decided to use open-dolphin to this end.

    We were also eager to make use of the attractive view controls of the jfxtras.com project for JavaFx application. The Agenda control seemed to be a perfect match to our application.

    Experiences with JavaFx and open-dolphin

    Our first goal was to adjust the Agenda control so that it does not show days per column, but shows a room within each column. The Agenda control is made from the Agenda model class and the AgendaWeekSkin, that handles the visualization of the control. For that we built a new Skin class that is capable in achieving the desired effect.

    We had reached this intermediate step with almost full functionality after an intense coding session with the result below:

    This application shows our meeting rooms (which have got country names) and our breakroom.

    After this milestone, we targeted to integrate open-dolphin into the application. If you would like to know more about open-dolphin, please check out the official website www.open-dolphin.org.

    It didn’t take long to ‘dolphinize‘ our app. We needed a reference to the client dolphin:

    The clientDolphin property will be set in the Application starter classes. We have it in two flavors: one for a development scenario where the dolphin server runs in the same VM as the client, and one for a real client server separation scenario. In case of development the starter looks like:

    When the main view is initialized, a command for data retrieving must be sent by the clientDolphin:

    clientDolphin.send(Commands.CMD_PULL, new OnFinishedHandlerAdapter() {…}

    This will be mapped to a server side action where the data access to our room reservation system takes place. It loads the appointments and returns the required data to the client.

    Get our heads around the model

    In order to get the Agenda control do the things that we want it to do, we had to design the presentation models properly. We came up with three types of presentation models:

    • Appointment: This type holds the neccessary data for a single appointment such as startDate, endDate, title, organizer, attendee
    • Room: Type for the columns of the Agenda control.
    • Person: Type for the organizer and the attendees  of an appointment.

    The Main View registers as a ModelStoreListener on presentation models of type Appointment and finally adds/remove an appointment instance to the Agenda.

    Also the skin class of the agenda control must react on Room model changes. It must add or remove columns accordingly.

    Here it is

    Finally – after two days of work (including the nights) CanooNow stands in front of the meeting rooms, displaying live data, and giving directions to employees and guests:

    The screen shows all appointments that take place in the various meeting rooms. On the left hand side, a time scale of 6 hours is shown. It moves up every full hour automatically. The red line visualizes the current time and moves along. Completed appointments are greyed out.

    At Canoo we deployed the application to a Raspberry Pi that is connected to a flat screen. This flat screen is positioned at the entrance allowing everybody to check  whats going on in our meeting rooms.

    Lessons Learned

    JavaFx

    With JavaFx it is very easy to develop complex UIs. Binding properties is a slick way of having one property that controls all bound objects. There is no repaint() required like in Swing. Another neat thing about JavaFx is the CSS style definitions. Most of the CSS style definitions worked, a very few we had to set through the component API.

    Open-dolphin

    Open-dolphin is a tiny piece of software that can be easily integrated into any application. For us, the time spent for getting dolphin working as we wanted was less than a third of the whole project development time.

    Raspberry Pi

    The Raspberry Pi mini computer has got everything that is required for running JavaFx applications. With raspbian linux and a specially baked Java version from Oracle, the application runs perfect – even the performance is acceptable. The performance was our biggest initial concern, but it turned out not to be an issue. Of course we did not use complex UI transitions that would certainly bring the Raspberry Pi to its boundaries.

    The CanooNow Team,

    Fabian Dreier, Franz-Josef Wiszniewsky, Johannes Porzelt, Martin Huber, Detlef Brendle

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • DZone
    • Y!GG
    • Webnews
    • Digg
    • del.icio.us
    • DotNetKicks
    • Facebook
    • Google Bookmarks
    • Newsrider
    • Twitter
    • YahooBuzz

    Leave a Comment


    6 × = forty eight

    css.php