Massimiliano Pesente

A UI like the NEST thermostat one

I’m a big fan of using SVG, personally I would use it for every interface element. I’m also a big fan of the NEST thermostat, therefore I decided to recreate its UI: the goal was to examine in depth the opportunities offered by SVG and to offer a great user experience on desktop as well as touch devices.

I created the grid in Illustrator, with some tweaks, and then exported the SVG. Thus I obtained not only an optimal quality on retina devices too, but I could animate via Javascript every single detail of the interface as well.

The TweenMax behaved just fine when it was time to rotate/animate/color the SVGs.
I parameterized some elements for customization and added an event that is dispatched when the thermostat temperature changes.

To initialize a grid it is sufficient to instantiate the “class” via the required parameters:

Nest(DOMelement, [fromValue], [toValue], [label], [onValueChanged]);

Thus in my case

//Create new thermostat
let thermostat = new Nest("div#ring", 40, 110, "TEMP °F", setTemperature);

//Event handler
function setTemperature(value){
    console.log("Temp: ", value);

    //Your stuff here
}

Considerations and tips

• Use the SVGs as much as possible: they truly are an exceptional instrument when properly used;
• If you must apply 3D transformations to one, it is best to do so to the entire SVG rather than to a single node; even the most modern browsers behave in an anomalous manner when transformations are applied to nodes of an SVG;
• With TweenMax you can really do whatever you want.

Interfaces such as the NEST one demonstrate that, from the point of view of the UI, there is always much to innovate, improve or simplify. SVGs offer a valid instrument for this and more.