Smarthome

This hobby project — a combination of a web app, Raspberry Pi, and an old iPhone 4 — has powered my apartment lighting since 2015.

Motivation

I love living in cities, which means I’ve been an apartment dweller for several years. Though every apartment is different, each place has had its share of questionable décor decisions. As a renter, I’ve made my peace with things like antique kitchen appliances and unappealing bathroom hardware. But in each one, my most common gripe has always been with the overhead lighting.

Each place I’ve lived in has had its own, uh, character: finial-adorned domes or “boob” lights, ceiling fan floodlights, the most miniature chandeliers ever. The look of these fixtures wasn’t great, and neither was the flickering, overpowering, inefficient light they gave off.

The easy solution was to simply skip the ceiling lights altogether, relying on lamps and custom lights to illuminate my place. In the first apartment I did that in, though, I quickly faced the downside of having separate switches for every single light. Without a single wall switch, I found myself running around trying to find the clickers or the switches or the doodads for each light.

To get customized lighting without all that fiddling around, I decided to look into some sort of centralized, smart-ish home solution. And instead of reaching for something off the shelf, I began by researching DIY projects to see if I could build something totally custom.

Process

The breadboard with the transmitter for my wireless outlets
The breadboard and transmitter at the crux of this project. (Don’t rely on me for your next electrical engineering project.)

My quest for a DIY smart outlet system started with a guide that explained how to link up a particular brand of remote-controlled outlets with some other parts to make an extensible system. With a Raspberry Pi, a transmitter chip, and an open-source program to control the outlets from a command line, I’d be able to turn on my lights over the internet. I got going by assembling my very first breadboard, connecting the chip to it, and confirming that everything worked.

The guide then described how to set up a web server and hosted webpage on the Pi to give the terminal commands a UI. As a final step, it included a little proof-of-concept webpage that looked identical to the physical remote control’s buttons and layout. Since I wanted to push the interface a lot farther, though, it was time to keep going on my own.

Giving the outlets a brain

Out of the box, the outlets didn’t come with a centralized hub. This meant that there was no way to keep track of which lights were on, and it explained why there were separate “on” and “off” buttons on the remote and the example webpage. But with a whole Raspberry Pi to work with, I could easily add in that missing piece.

This is a high-level diagram of how Smarthome works. To turn on a light, I tap a button on the iPhone web app. That triggers the web server to run an “outlet on” command using the open-source program, which transmits the wireless signal through the chip on the breadboard. The signal gets picked up by the outlet and the light flicks on.

So… I did! I routed the outlet commands through a state object so that I could keep track of each light’s status, plus extra metadata like the room it was in and its light type. No longer needing to rely on separate buttons, I could add in all sorts of helpful controls, like:

  • Turning on all lights in a particular room
  • Setting and swapping out predefined scenes, like “waking up” or “evening”
  • Controlling separate outlets together, like a pair of lamps behaving as one
  • Turning off everything before leaving

Balancing functionality with aesthetics

A screenshot of Smarthome
Smarthome with the Pride color theme enabled. The layout is based off of my T-shaped apartment, and each light button is positioned in roughly the same spot as in my home.

From the start of the project, I planned to use a dedicated device to display the switches and status so that turning on an outlet would be just as easy as flipping a light switch. Since this thing (specifically, a trusty ol’ iPhone 4) would be permanently affixed to the wall, I wanted it to have a purposeful, well-designed appearance that presented all these controls and statuses in a clear way.

Taking some design cues from other products, like an Apple Watch or Google Nest, I opted for a dark interface so that the web app merged seamlessly into the iPhone’s black display bezel. For the UI itself, I created an abstracted layout of my apartment and positioned the buttons corresponding to an outlet’s physical location. To indicate status, each button switch got an icon, becoming highlighted when that light turned on. Finally, I put scene buttons and the “everything off” button at the bottom of the screen.

Iterate, iterate, and iterate some more

As time went on, I iteratively added more features to make this system feel less generic and more like a custom project. I added things like:

  • Color themes like a subtle rainbow theme for Pride 2019
  • Current weather, to take advantage of some free space and make the phone on the wall even more useful
  • An extremely exciting time and date

I also made the always-on-the-wall iPhone behave even more like a home appliance by enhancing it with some custom functionality. Doing so allowed me to precisely adjust the iPhone’s brightness based on ambient light, disable the lock screen and rubber banding effects, and schedule a period overnight to put the phone to sleep.

More recently, I added a couple more old iPhones to the mix — they’re inexpensive on eBay these days — and a menubar app on my Mac, keeping my system scaling and adapting just for me.

Evaluation

(What worked well and what I’d do differently)

  • Smarthome has been reliable and useful. I’m pretty pleased, especially considering the project is cobbled together with low-cost outlets, my best attempt at circuitry, and some old iPhones.

  • The app doesn’t run on a frontend framework yet. I have some ideas for granular light controls, dimmers, and other interface techniques. A framework will let me abstract away state management for the UI and focus on the fun stuff.

  • Adding color themes helped to make Smarthome feel like mine. Earlier versions were strictly monochromatic, which was sleek… to the point where it kind of felt sterile. It was a nice reminder of the big impacts that little changes like these can have.

Details

Timeframe

Original iteration introduced July 2015. Current, redesigned iteration introduced December 2017. Features added June 2019.


Skills in use

Frontend programming, UI design, hardware/software interaction design, graphic design and layout, device management


Tech specs

  • System that interfaces with radio-frequency (RF) controlled outlets via an open-source program (rfoutlet), an interface to send signals from a transmitter chip
  • Raspberry Pi web server bridge between app and transmitter, including a custom system status mechanism using PHP
  • Lightweight web app built with HTML, CSS, and JavaScript
  • Two iPhone 4 devices with extra capabilities for finer power management and appearance control
  • Simple menubar app for macOS

Status as of December 2020

I still use it! Works as well as ever.