Printing custom jobs live on site? Here is your solution

At Raw Ideas we have a long history of solving unique problems for clients. While we've printed photos and sent emails or texts, we've never had to print custom labels.

Our new friends at GetJack'd Media approached us to solve this problem.

 

The problem

Develop an activation to:

1. Collect users details
2. Print custom licence plates
3. Email a digital version to the user

 

What are the basic requirements

1. Be colour

2. Be fast

3. Be fault tolerant

4. Handle up to 17 characters with dynamic text resizing

5. Multiple plate options

Our client recommended a label printer used on a previous activation, so we went with that. It covered the first three requirements, so our software would have to cover the rest.

 

Establish a simple user flow.

For this we had to think about how the users and staff would be interacting with the solution. This is what we came up with:

Staff ask for details from user:

• Name, Phone, Email
• Up to 5 names for licence plates
• Plate colour
• Staff submit form and it then reloads ready for a new entry
• Sticker labels are printed and placed on prefabricated board by staff and handed to user
• Thank you email (branded) is sent to user with images of all plates attached

From this we knew we needed:

• Label printer
• Local server
• Wireless router with 4G connection
• iPads to take details

The nuts and bolts

After 47 browser tabs and a day of experimenting with various ways to composite and print images I had a winner. Node.js. Node had all the libraries required to create the plate and print the image. Node.js. can also run a web server which we used to power the entry form on the iPads.

Sending emails and creating web forms is a solved problem for us, and most of the world. Instead I'd like to talk about generating the label that got printed.

My initial experiments were promising. I managed to get a basic licence plate generator up and running within an afternoon.

The code for this is actually pretty simple.

gm('registration_plate.jpg')

.font("HelveticaNeueLTStd-Blk.otf", 280)

.drawText(130, 40, "TEST", "Center")

.write("custom_plate.jpg", function (err) {

 if (!err) console.log('done');

});

It basically says:

• Give me a new image based on registration_plate.jpg

• I want to use the font *HelveticaNeueLTStd-Blk.otf* with a point size of 280

• Now draw the word "TEST" 130 pixels from the left and 40 pixels from the top, then centre it

• OK. Save all that to a file called custom_plate.jpg

 

Simple right? There was an issue though.

As it turns out drawText expects a font size and has no interest in resizing text. I came to realise things were going to be a little more complicated. If we couldn't get the text to resize it wasn't solving the clients problem.

To get dynamic text resizing to work, along with adding the top/left offsets I had to define a text boundary.

Even with the text boundary defined drawText won’t resize text. It turns out that the magic was all in the label command.

gm(templateWidth-leftOffset, templateHeight-topOffset)

.background('transparent')

.fill('black')

.font("HelveticaNeueLTStd-Blk.otf")

.gravity('Center')

.out('label:TEST')

.write("custom_plate.jpg", function (err) {

 if (!err) console.log('done');

});

This was the crux of the solution. What it does is create a separate image with the resized text within the text boundary. That image is then overlaid on the template.

 

A lot more went in to the final solution that we delivered, such as:

• handling bad or lost internet connections
• recovery after total loss of power
• coping with printer failure, etc.

This is what the final product turned out like.

 

And of course our 17 character test case.

 

Thoughts

As with most software development it was a rollercoaster ride of success and failure. When you thought you had cracked it, a new constraint presented itself. Then you either had to work around it or reverse out completely and start again.

Failing forward is the best way to think about this process. Not only do you need to embrace the failures, you need to accept the new knowledge that you discover along the way.

While it was a small project I learned many new things and it gave me an opportunity to experiment.

We now have a robust solution that we can repurpose for many different event types.

 

The results

6,733 total plates created (52.3% Red and 47.7% White) 

Highest print volume: 113 name plates within an hour

 

Top 3 Names

James, Mia, Jack