HKJC

Social network photo printing.

  • Responsibilities: Visual design, frontend & backend development
  • Technologies: AngularJS, jQuery, Cordova, Wayin API
  • Timeframe: November 2014 – December 2014

We were commissioned by the Hong Kong Jockey Club to develop a photo printing booth that would use iPads to print photos in real-time. Users would be able to use the iPads to search for and select photos they had posted on social media. The photo would be sent wirelessly to a printer nearby where it would be printed instantaneously.

iPad App

We developed the iPad app using Cordova. The app would send a HTTP GET request to the Wayin API service which would return a list of all the social media images of the event posted under a set of hashtags related to the event.

Screenshot of the iPad app's image selection page.
Screenshot of the iPad app with an image open.
Tapping the 'print' button would send a HTTP POST request to the printing server with the image URL and a random printer ID.

Printing Server

The printing server was run on several laptops connected to high-speed photo printers. The server was built using AngularJS that would listen for HTTP requests respective to its printer ID on the local area network. Requests would be added to a queue which filtered duplicate requests.

The apps ran in Firefox using the 'kiosk' and 'silent printing' modes, which allowed print requests to be sent to the OS-level printing service without showing any dialogue boxes or notifications. Firefox also allowed for the adjustment of printing parameters such as sizing and spacing, which was cruical to printing on photo-sized paper.

Printing images was achieved by directly printing a local webpage rendered by AngularJS containing the image next in the queue, and using the native window.print() method. A CSS3 @media print media query ensured the webpage and photo was sized and positioned correctly.