This repo contains the button panel web apps used in my smart home. They’re my apartment’s light switches!
These apps are part of the Smarthome project, a system I put together that uses Home Assistant and repurposed hardware for everyday home life. These button apps, the touch hardware they run on, and the hub that handles device connections combine tightly, giving me direct control that’s useful to me and usable by my friends.
(And yes, that is 2010’s iPhone 4.)
| Component | Product | Remarks | |
|---|---|---|---|
| 🔨 | Hardware | ||
| hub | Raspberry Pi | Debian computer that locally runs Home Assistant and locally hosts web apps | |
| lightbulbs | Zigbee, Tuya | color-changing bulbs to screw into lamps and ceiling sockets | |
| outlets | Zigbee, Tuya | wireless on-off switches, like for counter lights | |
| button panel | iPhone 4 | touch screens that run custom-built web apps | |
| power | USB extension cords, 30-pin USB cables, and USB bricks | typical iPhone charging equipment | |
| cord management | cord runs, cord tacks, and temporary adhesive | temporary, safer power access in outlet-less corners | |
| 🏠 | Software | ||
| smart device hub | Home Assistant | runs on the Raspberry Pi for blended setups and custom device logic | |
| web app hub | Apache | also running on the Raspberry Pi, serving up the custom, local web app pages | |
| jailbreak | Pangu 1.3 | enables full control of the iPhone 4 to manipulate brightness automatically, override home button behavior, and use f.lux for warmer screens | |
| design software | Sketch | plans out SVG art for buttons, controls, glyphs, on separate layers | |
| SVG splitter | svgsplit.com | generates one SVG file per outer group (Sketch layer) to show feedback in a GPU-friendly way | |
| development browser | Webkit build 91 (13.1) | allows Web Inspector over USB, specifically with support for the iPhone 4 |
Yep! I’ve amassed a fleet of them because they are wildly cost-effective button panels. They have:
- high-resolution, multi-touch displays, legible even at odd or extreme angles
- a dedicated GPU
- permanent jailbreak capability to customize every part of the hardware, software, and sensors
- a speaker and microphone
- Wi-Fi, Bluetooth, and AirPlay
- ambient light sensor, gyroscope, and GPS (to stay in sync with the sun)
- capabilities via jailbreak to eliminate blue-glow appearance
- a sturdy glass-and-steel housing light enough to be safely mounted with renter-friendly adhesive
On eBay, you’ll find them for $25 a pop.
-
Good: the hardware lasts and lasts.
The panel in the kitchen is on its fourteenth year of service: it was my first smartphone in 2011, then went on to be my spare device for wall-based web app experiments in 2015, and is currently living a happy life as the kitchen’s button panel. -
Good: the system’s cost is low and amortizes.
The whole thing is portable, so I save on sunk costs as it comes with me to the next rental. It’s a flexible system, so I can safely give low-cost devices a try. Best of all, I can improve on inconvenient switch and outlet placement without violating my lease or hiring help from an electrician. -
Bad: the tech stack is basically encased in amber.
The iPhone 4 relies on 2014’s version of WebKit, making for a weird, back-in-the-day coding experience. Build-time transpilers help ease this pain, but it also involves a degree of Stack Overflow sleuthing that takes time.
Nope, at least not yet. Smarthome underwent a quick shift from “will this work?” to “this works so smoothly let’s gooo!” As such, the project is ready for a refactor.
-
Incorporate components.
The gridded button layout evolved along the way, and there’s some repetition present that’s ripe for cleaning up. -
Eliminate duplicated SCSS.
I excitedly ran wild with ⌘C and ⌘V after early FPS tests passed with 60 flying colors. I’ll be refactoring class names and target IDs to make future ideas easier. -
Comment the code.
For others and for future-me alike, I want to note the iPhone 4-specific hacks I used, as well as the decisions that let the GPU run as smoothly as it does.
This project and its documentation are made available strictly for informational purposes. It is provided on an as-is basis without guarantee or warranty. The Smarthome project is not offered for sale, trade, or distribution. This project is not paid for, sponsored, or endorsed by any company. “Apple strongly cautions against installing any software that modifies iOS.” All trademarks, including wordmarks, designs, and logos, mentioned in this project are property of their respectful owners.