Hong Kong Jockey Club

Real-time social network photo printing booth.

  • Responsibilities: Visual design, frontend & backend development
  • Technologies: AngularJS, jQuery, Wayin API
  • Timeframe: 09 September 2014 – 09 September 2014

The Idea

We got commissioned to make a photo printing booth that would use iPad apps to print photos from social media in real-time. Users would be able to use the iPads to search for and select photos they had posted on Instagram, Facebook, and Twitter, and then send it wirelessly to a printer nearby where it would be printed instantaneously.


Although the idea was quite straight-forward, the main challenge was getting the iPad apps to send images to the printer and having them print seamlessly. Furthermore, there had to be a queuing system for the printer as multiple iPads would be able to send images to the printer.


iPad App

The photo printing booth iPad app. Users can browse through the list of images, search for their username, select the printer under an options menu, and refresh the image list.

We developed the iPad app using Cordova as we planned to create the printing service using a local web-based server. The app would send an AJAX GET request to the Wayin API service, which would return a JSON of all the social media images of the event. A JavaScript script would then generate a list from the JSON which would be displayed as a grid of thumbnails. Users could tap on any of the thumbnails, which would show a dialogue box displaying the full image and username. Users could then tap a button and the app would send an AJAX POST request to the printing server with the image URL and printer ID in order for the printing server to decide which printer to print it from.

Users could also search through the images in real-time using simple client-side regex testing to find their image via their username.

Tapping a photo will open the printing screen. Tapping the 'Print' button will send the image to the printer.

Printing Server

We ran the printing server using several laptops connected to high-speed photo printers. The server would run a locally-hosted webpage built with AngularJS that would listen for AJAX requests via the local area network (of which the iPads were connected to). Once the webpage received a request that corresponded to its respective printer ID, it would add the social media image URL to a queue (which also checked for duplicate requests). Once the printer was idle, the social media image would be displayed on the webpage, and a script would use the window.print() function to send the webpage to the printer. We printed the webpage directly as we used a photo frame image as decoration, and therefore used the @media print CSS media query to make sure the dimensions and positions of the photo frame and social media image were sized and aligned correctly.

The printing server ran on Firefox using 'kiosk mode', as it provided advanced client features to enable 'silent printing', which would send print requests to the OS-level printing service without showing any dialogue boxes. Furthermore, Firefox also provides configurations for printing parameters such as sizing and spacing, ideal for printing in specific areas on custom paper sizes.


Overall, the Joyce project was one of my favourites. Being an immense learning experience, it was also a massive undertaking, having been personally responsible for all aspects of design — including mockups, front-end demos, all CSS and JavaScript development, and UAT — as well as delving into WordPress and Magento. A lot was learnt about cross-browser compatibility, as having so many different pages with varying layouts and features initially resulted in a lot of interesting problems. Furthermore, it was quite eye-opening being able to work with a variety of different people from the fashion industry, ranging from artists to marketing gurus, and learning how they all view and understand web design, as well as sharing my knowledge and expertise.