Introducing LiMa

A Next.js/React web app to visualize Philips Hue light bulbs

Earlier this year I upgraded my man cave, which includes a sophisticated Philips Hue lighting setup:

7 color spot bulbs on the ceiling rail, 3 on the macro desk on the right

As I learned that the Philips Hue Bridge features an API that allows one to programmatical read/write light state, I figured to combine a few goals. I was in the process of learning Next.js/React anyway, so I might as well use that learning journey to build something non-trivial, fun and potentially useful.

And that’s how LiMa was born. LiMa is short for Light Manager. It’s a Next.js/React web app that visualizes the state of your Philips Hue lights in real-time whilst also allowing you to manipulate them. Demo video:

A transcript of the 4 scenes in the video:

• Real-time visualization of all Hue lights in my home, displayed on a widescreen monitor. This is where LiMa really shines. In the scene, I’m picking scenes for particular groups using the Hue smartphone app and you can see how this changes the light in the room and the LiMa dashboard reflecting these changes instantly.
• In the second scene, I have LiMa opened on an iPad and am manipulating a light in various ways: power off/on, changing brightness, changing saturation, changing hue using a slider, and changing hue using a color picker.
• In the 3rd scene I’m using a physical Philips Hue Tap Dial Switch to control brightness and pick a number of pre-selected. The light as well as LiMa (shown on the iPad) reflect these changes.
• The 4th scene is similar to the first but shows an iPad responding to external scene changes. This is how I mostly use LiMa myself: on a mounted iPad next to my desktop screen.

Learn more

LiMa is open source, learn more about it at the Github repo.