↑ Return to Projects

Print this Page

RDPresent

Giving presentations with your tablet’s help

Tablets are around more and more these days and each day a new Application is released to fulfill your productivity needs. However, there is always something you miss of your PC, and this is why no one will say that tablets are here to replace computers.

One thing i’d like to do with my tablet is to give talks and give my presentations, but not giving up on my PC. You might know that there are quite some presentation products for your Ipad or Android-based tablet. The thing is all of them require that you connect the tablet to the projector (you lose some freedom and also need to buy the adaptor) and also that you port your current presentations to that new program.

Wouldn’t it be nice if you could use your tablet as some sort of presenter view (with your slide notes and some controls), while connecting your PC to the projector? I think that this way you would have more freedom, while making a better use of the tablet.

In this post I will explain how I implemented such system and give you all the guidelines you need to build one yourself!

Connectivity

Of course, one question immediatelly arises. How would you connect your tablet to your computer? Here you have some considerations. Nowadays, almost every device of both types have Wifi and Bluetooth, so let’s just stick with these two.

Initially I thought Bluetooth would be perfect in this situation:

  • Peer-to-peer conenction
  • Good range
  • Low speed
  • I had to deal with device discovery and connection

Let’s see what conditions Wifi offers:

  • Need access point connection
  • Would be possible to use the internet directly
  • Better range
  • Better speed/bandwidth
  • Access-point connection was configured by devices’ operating system

After pondering these conditions, I decided that Wifi was the best option. Then I thought this was a great oportunity to learn some HTML5 and use the tablet’s browser as the interface for this system, because this way it will automatically cover all the devices.

By making this decision I already introduced an assumption: this system needs a Wifi Access Point.

Eduroam problems

In my University (University of Aveiro, Portugal), the Internet is provided by the eduroam network which is implemented with different AP’s disposed in various positions across the campus.

They all broadcast the SSID “eduroam”, that the devices use to connect to. This means that if both PC and Tablet are connected to the “eduroam” SSID, doesn’t mean that they are connected to the same BSSID (MAC Address) – Access Point. If they eventually connect to different AP’s there is no route between those computers.

How to implement the peer-to-peer connection then?

So now that we have the problem of devices connected different access points, how do we put them talking with each other? Of course, we have to create the route between them!

The Wifi comes handy here, because we have internet access, so we just need an external “router” of traffic, which will make the bridge between tablet and PC. This, of course, will be a server.

Because the HTML approach was adopted, it’s obvious that a WebSocket server is what is needed. I decided to use a PHP Websocket server:

https://github.com/lemmingzshadow/php-websocket (credits to Simon Samtleben - @github)

I created a new aplication that each device will connect to. It will be listening for an incoming connection from a specific port and the first thing that the device does after connecting is letting the RouterApplication know of which type it is (either tablet or pc). After registration of both devices, the RouterApplication will forward any message from one device to another.

A communication protocol was established to make it possible to share the required information…

The Tablet Client

The tablet client was based on the client examples found on the server’s library. The major changes have to do with the general layout and functionality. Here I present a sketch of what I wanted the layout to look like.

 As you can see, these are the features I would like to include:

  • See current slide
  • See current slide notes
  • See current slide number and total number of slides
  • Change to previous or next slide
  • See general connection status (connected/disconnected)

As discussed in the previous section, this will be HTML5-based and can be hosted in the same machine that will host the websocket server. Each time I want to present, I just have to browse the html page, and also, I can do that from any device!

This does not require any application to be installed on the tablet itself, but if I develop an application that is a browser wrapper I can have more control on the devices options (for example, restricting the display to landscape mode and get rid of the browser’s toolbar). I will forget that for now.

Here is a screenshot of what I’ve managed to create (first draft)

This draft version successfully connects to the WebSocket server, recieves the image, displays it and is also able to send the PREV and NEXT commands to the computer.

The PC Client

Currently I use Keynote for my presentations, but I would like to develop something that could pottencially be used with any presentation application (Powerpoint, Prezi, …).

However, there is a catch: the way the notes are stored in the presentation file is different from format to format. That said, if I want to have notes, I have to develop a mechanism that grabs them from the different presentation formats. For now I will concentrate on Keynote files.

The .keynote file is basically a ZIP with a different extension. You don’t believe me? Try duplicating your presentation file, change the extension to zip and unzip it! :D there you go, you have access to slides thumbnails in the folder “thumbnails”, and a “index.apxl” file that describes the whole presentation.

The index.apxl file is a XML-based file, and thus can be parsed by a XML parser. This is where we will grab the notes for each slide.

As the thumbnails are quite small, they are useless as the active slide image. Then, we need to grab the current slide from the monitor (screenshot).

So by now we need some special features for our PC client:

  • Grab image from the screen
  • Grab current slide number
  • ZIP handler
  • XML Parser
  • WebSocket client library

At least the first three can’t be done with PHP, so I can’t use the client example from the library used in server! To make this application portable to any OS, I decided to make it in JAVA, which is a language that has libraries for almost anything you can imagine! It’s no surprise that there is a library to handle ZIP files, other to parse XML, a WebSocket library and also, there is a way to grab an image from the screen.

The first step is to create a console program to do the basic stuff! :) So let’s get started…

Implementation

In order to get the image from the screen, I used a built-in system command in OSX (screencapture). The following command captures your main screen, without that “vintage camera flash” sound, and saves it to “screen.jpg” in the working directory:

screencapture -xm screen.png

After capturing the screen, we need to resize it and compress it to JPEG format. These operations will drop the file size, making it more bandwidth-friendly. I achieved this with the following command:

sips -Z 480 -s format jpeg screen.png -s formatOptions low -o slide.jpg
 This creates a image with 480 pixels width, and saves it in JPEG format, with high compression. SIPS stands for “scriptable image processing system” and is included in OSX.

Regarding the Keynote interface, I decided that, for now, I would try to get the active slide number and implement the next and previous commands. All these three were made possible by using command-line applescript:

osascript -e "tell application \"Keynote\" to get slide number of current slide of front slideshow" # gets current slide number
osascript -e "tell application \"System Events\" to key code 124" # emulates right arrow key
osascript -e "tell application \"System Events\" to key code 123" # emulates left arrow key

This is how you can actually run a command from your JAVA-based application and get its output:

String[] scriptGetCurrentSlide = {"osascript", "-e", "tell application \"Keynote\" to get slide number of current slide of front slideshow"};
Process p = Runtime.getRuntime().exec(scriptGetCurrentSlide);
p.waitFor();

BufferedReader stdInput = new BufferedReader(new InputStreamReader(p.getInputStream()));
while ((s = stdInput.readLine()) != null) {		// read the output from the command
  return Integer.valueOf(s);					// Return its integer value
}

For the WebSocket interface, I used the Java-Websocket library developed by Nathan Rajlich (TooTallNate@github). It’s well documented, really well structured, and very easy to use.

Because I didn’t need anything from the presentation file, the ZIP handler and XML parser are yet to be implemented.

Demo Video

Because I know you like to see a video of the fully working system, I made a quick video for demo purposes.

Future work (TODO)

I personally think that there is a huge room for improvement. A better interface can be built with new simple features, like timer, clock and a slide thumbnail list, for example.

It would also be great if there was some sort of configuration for the user, so he can build his own layout.

Regarding the PC application, there will be a graphical interface that let’s you pick the presentation file, parses it and starts it for you! :)

In order to be reasonable in badwidth usage, instead of continuously sending a new image from the PC, I could send a new image only after changing to a new slide.

Permanent link to this article: http://ricardo-dias.com/projects/rdpresent

3 comments

1 ping

  1. Nuno Santos

    Olá Ricardo

    Fantástico projecto. Num momento em que os tablets e os Smartphones são quase banais esse tipo de interligação poderá ser muito útil na apresentação de trabalhos.

    Gostei muito da ideia e do conceito.

    Cumprimentos
    Nuno Santos

    1. Ricardo Dias

      Olá Nuno.

      Muito obrigado pelo seu comentário.

      Cumprimentos,
      Ricardo Dias

      1. Nuno Santos

        Continua o Bom Trabalho…

        Ficarei a espera de novos desenvolvimentos!

        Cumprimentos
        Nuno Santos

  1. New Project: RDPresent » Ricardo Dias

    [...] RDPresent [...]

Leave a Reply to Ricardo Dias Cancel reply

Your email address will not be published. Required fields are marked *