Hong Kong Jockey Club
Creating a real-time social network photo printing booth.
- Responsibilities: Visual & Systems Design, Frontend & Backend Development, UAT
- Timeframe: 21st September 2014 - 21st September 2014
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.
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
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.
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.
The photo printing booth project was very fun to make. The concept and execution were straightforward, the the resulting product worked flawlessly. Furthermore, it is good proof that it is easy to make seemingly complicated real-world applications and services using a simple web application without having to invest in customised hardware or applications.