Compositing Text Over Images

8 Inch USB Screen With Composited Text

I have a number of small USB-powered screens scattered across the apartment that displays various stuff that I find myself wanting to know.  In particular, I always want to know what music is playing. And I sometimes want to know what temperature it is outside.  (And I can tap the screens to pause the music.)

So I want to display the sleeve of the currently playing album, and I want to display the group/album/track name.  And on the screen in the “office”, I want to display the temperature in the room and the temperature outside.  Because I want to know how many layers of wool I have to put on before going outside.

“This should be easy enough to script up with ImageMagick”, you’re probably thinking.  But I want the font be Futura, and I want the text to have a “shadow” around it so that it can be read no matter what the background (i.e. the sleeve) looks like.

My go-to tool for all text-based things is LaTeX.  (Yes, I know.)  And after fiddling around a bit with LaTex and netpbm, I got the look I wanted.  (“A bit” is a euphemism for “a few minutes every day for a couple of weeks until it didn’t look hideous”.  (And “a few” is a euphemism for “a lot of”.))

This Is A Button

The solution I settled on was to take the output from LaTeX, convert it into pnm, and then blur the outlines for a number of times.  Then I used this blurred image as the alpha channel on a black image.  By then compositing all these images over each other (the background image first, then the black image with the alpha channel giving the outlines of the text, and then the text itself on the top), I got the result you can see on the image at the top.

Probably not usable for anybody else as is, but I’ve put the scripts up on GitHub anyway.  Somebody out there may want to do something similar some day, and perhaps this will help in some way.

And publishing code like this always helps.  It’s been through so many iterations that the code was just a total nightmare, and cleaning it up (as one does) before publication makes the code more maintainable for my personal use, too.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s