Engineering · 4 min read

Building for multiple displays was harder than we thought

LumaSpace looked great on a single screen from day one. Then someone plugged in a second monitor and everything broke.

The naive approach

Our first version just set the same wallpaper on every screen. This sort of worked, but a vertical 4K monitor next to a widescreen ultrawide meant the video got stretched on one or cropped on the other. It looked terrible.

Per-screen, per-resolution

The fix sounds simple: let each screen have its own wallpaper at its own resolution. In practice this meant:

  • Detecting when screens connect and disconnect (Macs are hot-plug, so this happens constantly with docks).
  • Remembering which wallpaper was on which screen, even when the screen arrangement changes.
  • Handling the case where someone unplugs a monitor, rearranges their desk, and plugs it back in a week later.
  • Not crashing when a virtual display (like Sidecar or AirPlay) appears and disappears.

Each of these sounds like a small edge case. Together they took almost two months to get right.

The screen identity problem

macOS identifies screens by a combination of vendor ID, model, and serial number. Except some monitors don't report serial numbers. And some USB-C docks present as a different display device depending on which port you use.

We ended up using a combination of the display ID, resolution, and physical position to create a "best guess" identifier. It works about 95% of the time. For the other 5%, there's a manual override in the menu bar.

Not glamorous. But nobody has complained about their wallpaper disappearing when they plug in a second monitor since we shipped this, and that's the kind of problem we like solving.

Learn more about LumaSpace →