How Vivaldi got its Lights

Vivaldi designer Henrik Helmers tells the story behind one of the latest additions to the Vivaldi browser – an integration with Philips Hue smart lighting.

vivaldi-browser-philips-hue

I’ve always been deeply fascinated by color. I enjoyed working on the theme engine in Vivaldi and was thrilled to see how our users customized it. Yesterday we released 1.5 where we took Vivaldi one step further. By integrating with the Philips Hue system, themes can now reach outside of the browser and into your home.

While finishing off the theme scheduling feature, I was buying new lamps for my home. I came across Philips Hue by accident and ordered a starter kit to check it out. Like many of my colleagues, I struggle to resist new technological temptations (as well as shiny objects in general). It worked well, and my collection of smart lights quickly grew. There was a ecosystem of apps around Hue, and I had a look at the developer documentation. That didn’t seem so complicated! Using duct tape and dirty tricks, I hardcoded support into Vivaldi.

By wonderful coincidence Jon von Tetzchner – our CEO – happened to be visiting our Oslo office. I stuffed my Vivaldi backpack with everything needed to give a quick demo. I somehow managed to get it all working and showed it to Jon, just for the fun of it. To my surprise, his enthusiasm matched mine. He uttered some of his favorite words – “When can we get it in” – and just like that I had the permission to spend the time needed to make the Hue integration work.

Then came the hard part – actually building the thing! For the demo, I had many layers of programming duct tape in place. And there was no logic for connecting the system – everything was hardcoded. Part of the fun (and the risk) when building something is that you never know if it actually will work when you start.

Fortunately, I had intimate knowledge of the theming system, which saved me a lot of time. I knew exactly where I wanted to put the integration to get the data I wanted. Furthermore I also had a good understanding of color theory and our algorithms, which helped in converting the color on screen to something that the lights were interested in. Internally, colors are often represented in RGB (Red, Green and Blue) components. In Vivaldi, we use the LAB and LCH color spaces for improved accuracy. Philips Hue prefers to work in a color space called XYZ (no joke!). Once you get past the language barrier, working with these spaces is a nice way to get perspective on color rendering, and hopefully something I would like to bring back into our theme engine in the future.

I’ve always been drawn to lights. When I grew up, most lights were often fairly weak tungsten bulbs with warm yellow tones. Later came the fluorescent lights with the eerie purple glow and occasional flickering. I still remember the first time I saw a colored bulb. I think it was a leftover from some party. It think it was green. I loved that bulb. Looking at it I instinctively realized that light could be any color. But there was not much of a market for it at the time.

vivaldi-browser--philips-hue-2

In the Vivaldi Browser, we have set up the lights for a gentle effect. We don’t want you to feel like you are in some sort of an underground rave party when you are surfing the web. The effect is intended to create a pleasant ambiance. In what can only be described as limited testing, I have found it to work well. When I’m reading up on technical issues on, say, Stack Overflow, the space around my computer lights up orange. A trip to Twitter – and it brings on the bright blue. I have used it for a couple of weeks and watching the smooth transitions still gives me a good feeling.

There are many things that we could do with this feature going forward. Things like notifications for a new mail or a completed download. Or, maybe, only for an email from a special person. Like when Jon wants me finish up a feature I am working on. For now, I will go back to working on some less exotic features. Did you know we are building a great mail client with web technology? Maybe I get to talk about that next time! 😉

Explore the new Hue integration now with Vivaldi 1.5.

DOWNLOAD VIVALDI 1.5

comments