Spooky Glowing Eyes for LIFX Tile

If you have a LIFX Tile and would like to run this effect, simply download Devicebook for free and add the Glowing Eyes app from Showroom.

The rest of this story will detail how I created it from start to finish, and is intended to serve as a guide for those who want to build their own dApps.

The Sitch

I wanted to make a pair of spooky glowing eyes on my LIFX Tile, which seems like a nice ambient lighting effect to create an atmosphere that is both playful and somewhat ominous. Scary movie night, anyone?

Luckily with Devicebook, creating this new effect not only dead easy, but took less time than writing this up!

Adding Icons to the LIFX Tile's Devicebook SoftDevice

I have my Tile linked to Devicebook, so I can edit the code that talks to it by creating a private version SoftDevice using the public version as a template. Once my changes are done, I can share them with other users on Devicebook by publishing them as a 'Vetting Version' of the Tile.

I want to make eyes that subtly change in shape and fade in and out over time, resembling the kinds of eyes might imagine you'd see peering out at you from the bushes at night.

To make these I will need to create 4 new icons. One set of left and right eye when they are fully open, and another set when they are narrower. To add these new icons to the Icon Display service of the LIFX Tile SoftDevice, I simply add their new unique names to the Icon enumeration in the Set Icon command. I decide to call them leftEye, rightEye, LeftEyeSlit, and rightEyeSlit.

Now that our icon names are defined, time to add (and draw) the icons themselves. In the tileValuesForIcon function of the adapter.js file in the Adapter tab of the SoftDevice Editor, I copy and paste the "off" icon array in the iconMap 4 times, then rename each copy and fill in the pixels I want to be lit for this icon with F (Foreground) instead of B (Background). I can kind of get an idea of how it will look by clicking an F which will highlight all of them. Once I am happy I hit save at the top right, and my changes to the LIFX Tile SoftDevice are complete. I publish this as a new vetting version, so that everyone using Devicebook with their LIFX Tile will be able to display these cool new icons.

Building the dApp

Now it's time to create an app to display this effect and allow the user to control its appearance as it plays. Using one of my other animation apps as a template, I create a Devicebook app which displays 2 lists of 5 icons in alternation. First I lay out this visual code in the DeviceScript tab of the dApp Editor which does just that!

Notice I do not explicitly set the TransitionTime, MinBrightness, MaxBrightness, or EyeColor variables. I want to be able to control these parameters of the animation while it is running so I can change how my effect is displayed on the fly. By creating a Control Panel I can manipulate the color and brightness of the eyes, as well as how fast they alternate between their 2 states. I navigate to the Mapper tab and select sliders to control and text displays to display the MinBrightness, MaxBrightness, and TransitionTime variables. I check their ranges to make sure they are appropriate (e.g. TransitionTime is between 0 and 10 seconds). I select a dropdown to set the color. I set the EyeColor variable Data Type to a string enum and populate it with the values accepted by the Color parameter in the Set Icon command I use in the DeviceScript visual code.

Now I just need to lay out my control panel in the Layout Editor. I drag my sliders into an eye pleasing column, and stick each text display above the appropriate slider. I enter the correct prefix and postfix for each text display. To make things line up nicely, I drag select all my controls use the boxed vertical alignment tool. That's a wrap! Hit Save and we're ready to run.

As you can see in the video at the top, the app works great. I published it for anyone to use by simply hitting the Publish button in studio, then uploading an image and filling out a few details. Check it out for yourself in the Devicebook Showroom!