7 May 2018 // web development
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.
Develop an activation to:
Be colour
Be fast
Be fault tolerant
Handle up to 17 characters with dynamic text resizing
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.
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:
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.
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');
});
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
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:
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.
6,733 total plates created (52.3% Red and 47.7% White)
Highest print volume: 113 name plates within an hour
James, Mia, Jack
Get to know our team with our fastfive series. This week we see what Ashleigh has to say. more...
Get to know our team with our fastfive series. This week we see what Ashton has to say. more...
As the saying goes, 'all publicity is good publicity', but, do you really want to test it? Let's look at how it can go wrong and what you can do about it. more...