128x64 OLED Enclosure the Easy Way

There are lots of Instructables on how to use SSD1306-based 128x64 OLED displays. Many of these write-ups are very informative but just about all of them look like an unfinished science project. (In fairness, most are directed at getting up and running with the display, not creating a finished product).

Here's a quick and easy way to use these displays for something that doesn't look like it lives on the bench.

Project budget: $5 or less for the enclosure plus around $8 for the display (if you don't have one already).

Insofar as creating a finished product is concerned, the fundamental problem is that the displays are square. Well, rectangular to be precise. But for our purposes this is a distinction without a difference. Creating a square or rectangular faceplate cut-out for the display is not easy.

Square displays are great for presenting data -- the Apple watch was made square for a reason -- and if you have access to a a massive factory, or even a relatively modest metal shop, there is no problem. However, a drill, the home-gamers go-to hole creation tool, is less than optimal for making square holes. With infinite patience, a file and possibly a Dremel you can convert a round hole into a square one but a satisfactory result is far from guaranteed. And anyone who has tried to make a reasonably precise cut-out with a jig saw, basic hand tools, DIY broaching or anything else lying around in the shed will know these options aren't much better.

128x64 OLED displays present a special problem because they are very small and the display resolution is high. Not resolution compared to an Apple Watch, of course, but compared to say your typical Arduino 2004 LCD. With the latter, you can usually bodge up something that looks half-way decent because the low-res and larger size mean tolerances for the cut-out can be proportionately higher without the finished product looking too amateurish -- and you don't need to be too close to the display to read it.

With the OLED display, there is no place to hide. The cut-out has to be pretty much perfect. And if you want to mount the display in metal (who doesn't!?) you are in for a struggle. Especially if, like me, you are a clumsy oaf.

OK, this is where I have to 'fess up and say I'm not even sure this qualifies as a legit Instructable. It's more like a tip, really. But still useful, I think.

So for those of you hoping that I'd figured out how to build a $20,000 stamping press for $5 you are out of luck.

What we are doing here is outsourcing our hole-making. Just like Apple with Foxconn! Even better, actually, because our unwitting vendors have already cranked out millions of the pieces we need.

You see, it turns out that your standard U.S. toggle switchplate has a cut-out that is almost identical to the 128x64 screen size. Looking at the two, this is not intuitively obvious - the switchplate cut-out looks too small and way too rectangular. But in fact the dimensions are very close indeed. The specifications for the displays vary slightly from one manufacturer to another but typically the "active area" of the screen is given as around 22mm x 11mm. The standard switch plate cut-out is 23.8mm x 10.3mm. You obviously want the cut-out slightly bigger than the active area so the width dimension is almost perfect out of the box. A little work with a small flat file on the height and you are done.

After you've got the hole perfect, you can then use the switchplate without further modification in the type of installation pictured here or cut the switchplate down into the dimensions you need for your project - relatively easy because these are outside straight cuts. Holes for the mounting screws can be used for LEDs, for control buttons (easy to enlarge if needed), or simply use dummy screws. In my case, I cut the tabs off an old switch and mounted the two resulting tabs on either side of the workbox to receive the switchplate screws.

Even though the hole is now dead-on, you still need to be quite meticulous about mounting the display on the inside of the switchplate. I suppose you could use a complicated jig but I found the best way was to just eyeball it.

If you are using a metal switchplate, DON'T FORGET TO INSULATE THE FRONT OF THE DISPLAY PIN HEADER before starting the installation.

To ensure proper alignment, the display should be on and showing data at the very edge of the screen on both axes. Move it around until you are happy then tack it in place with insulating tape so it cannot move further. Then fix it semi-permanently with a liberal amount of hot glue. At least, that's the method I used.

Before I go, a note on the application pictured. This project grew out of another Instructable I posted in early 2017. That project turned your dumb $300 washing machine and/or dryer into a $2000 smart laundry monitoring system. Well, sort of.

Anyway, I remarked in that Instructable I was thinking of applying a similar approach to smartening up our dishwasher. Here, though, the problem was a little different. I wasn't too concerned with monitoring safety issues like water leaking and overheating but simply providing some indication of status as it operated. In an example of minimalism gone bonkers, our particular Jenn-Air model has no visible status lights on the machine - and it runs so quietly you often can't even tell when it is on. These features, plus the fact that unlike dishwashers of yore it takes its own sweet time to do a load (for energy efficiency, says Jenn-Air), meant that it was not uncommon to accidentally open it while it was washing. Not a huge deal -- water didn't come out or anything -- but you were treated to a blast of hot steam and sort of made to feel like a doofus, especially if you yourself had started it a few minutes ago.

Unlike the washer and dryer, I didn't need the dishwasher connected to the Internet so couldn't output status data to an app and certainly didn't want to destroy the minimalist aesthetic of the machine itself. Using the OLED display mounted in a stainless steel switchplate was a perfect way to demonstrate what I'm talking about here. The switchplate is covering a combination workbox with the code-required dishwasher cut-off switch on the 120V side (plus an always-on outlet on a separate circuit) and the display on the low voltage side. I think it fits in nicely with the dishwasher design, especially with the Jenn-Air logo included in the data cycle. The weather data (from a BME280 Sensor) is simply giving the display and Arduino something to do while not monitoring dishwasher operation.

The only even slightly tricky part of this project was finding a way to generate the Jenn-Air bitmap graphic. Just about everyone suggests using paint.net, but that isn't available for the Mac OS. Eventually I found this - really easy to use and web-based. There's an associated You Tube tutorial but not sure you even need to watch it. Thanks SKAARHOJ! They seem like a bunch of characters, the "About" page of their website starts:

"SKAARHOJ is owned and enthusiastically operated by Bjørn Thorup, Georgi Yankov and Kasper Skårhøj out of the Copenhagen area in the Kingdom of Denmark. Our charming country has a prince and a princess, green pastures, blond girls, some 16+ million slaugtherpigs and now also universal broadcast controllers, thanks to us!"

I'm not planning on writing up the dishwasher project itself as an Instructable - there's nothing particularly unique about it - but if you want the code and/or have questions, feel free to ask.