How to Fall in Love with Receipts

Or: How to print out album art of the music you’re listening to in real time

Zoe Colley
Offline Camp
5 min readAug 8, 2017

--

These people hate receipts and the technology that backs them

Many people hate the technology that goes into printing a receipt. It’s a known controversial topic.

But how does it work? How do they print? If you’d prefer to watch a talk version of this, check out my passion talk from Offline Camp below, otherwise read on for more detail.

“How to Fall in Love with Receipts,” the passion talk I shared at Offline Camp Berlin, April 2017

The paper 📄

With a thermal printer, the ink isn’t printed onto the paper from a cartridge. Instead the ink is in the paper itself.

This ink is thermochromatic, meaning it changes colour when it changes temperature.

The thermal printer heats up small areas of the paper changing the ink colour to black.

Here’s an example of how a thermal printer feeds paper through and heats at the same time

You can see here what happens when you heat it from a flame. You may have also noticed old receipts left in your wallet end up going darker due to heat.

Holding a lighter flame to a receipt paper darkening it

Hack friendly printers 🛠

Rather than rip apart a till, there are some thermal printers you can buy that are ready to be hacked with. The one I have (pictured below) is the Mini Thermal Receipt Printer from Adafruit.

The Mini Thermal Receipt Printer from Adafruit

I wanted to make something

I had to think of a project with this: What if, while listening to music, the album art of what I was listening to printed out in real time?

Sounded achievable, but I needed to work out two things:

The two tasks we need to carry out: “Get music data” and “Print text and images”

I’ll be using JavaScript and Node.js for this project.

Get music data 🖼 🎶

So first I decided to use Last.fm. Last.fm tracks the music you listen to, such as streaming from Spotify.

Last.fm’s logo

They have a pretty flexible API that lets you get all sorts of data. You can sign up for the API and read the docs here: http://www.last.fm/api

Here’s an example of a endpoint you can access:

Example data returned from the endpoint

Going to this URL and using the “get recent tracks” method with my username, I can get the tracks I’m currently listening to!

The most recent track I listened to was a song by Bear Cavalry.

Here is a simplified version of what it returns. It brings back the song info and even has a image!

Example of the data that would be returned by the Last.fm API
Album art that was returned from the API

Using Last.fm in node

While this API endpoint is pretty accessible already, there is a node module that allows you to create a stream of tracks that are playing.

This will be helpful when sending these images and information to the printer later.

Example of using the lastfm node module to stream tracks

Print text and images 🖨 🔥

Now we have the data we need to work this printer out.

Thermal printer commands

Thermal printers can receive commands through a serial interface. You can send a command to print characters, print barcodes or even feed the paper.

This thermal printer manual is a very riveting read

Thankfully you don’t need to do this manually as there are node modules for this: serialport and thermalprinter.

Example of using the serialport and thermalprinter node modules to print an image.

First attempt

I tried to print the album art. On the left you can see what I tried to print, and on the right how it came out when printing.

It’s splodgy like a Rorschach test and has lost all of the depth of the picture…

This is because once the colour reaches a certain threshold the printer will either print it black or white.

On the left the image I wanted to print, on the right the failed splodgy print out

Getting depth with dithering

Dithering is intentionally adding noise (here we’re adding dots) to an image to create colours. As we have black and white, we can achieve different grey colours.

These greys will help us achieve a sense of depth we’re missing.

Example of dithering with colour
Example of dithering to create a gradient between black and white

Second attempt

After applying dithering to the image you can see the print out has a lot more depth! Yesss!

On the left an altered dithered version of what I wanted to print, and on the right the more successful print

GraphicsMagick

To create the images and do the dithering you can use GraphicsMagick and the node module gm.

Example of using the gm node module to create an image.
GraphicsMagick’s logo. I don’t get it either.

The end result

If we put all these parts together, we have something that can grab the music currently playing, create images and print them!

As that’s easier said than done, you can find code and some documentation over on GitHub of how this was done.

Below you can see a shoddy video of what I ended up with:

A video of a song being played on Spotify and then its album art being printed automagically

Thanks for reading. If you have any questions you can feel free to ask me on Twitter. :-)

Editor’s Note: This passion talk is one of many shared at Offline Camp, where a small group of campers with diverse interests come together to discuss Offline First. We hope to see you at an upcoming event!

--

--