When I have gone to talk at conferences and demoed my well-travelled PocketRave app, I get a lot of great questions about NativeScript, Angular 2, and the Angular Advanced Seed code that were used to build the mobile app. We have a cool dance party at these talks as people download the PocketRave app and watch the art creations that they built on the mobile app turn into a kaleidoscope with paired music on the web.
One thing that I built to compliment this app, however, also gets a lot of surprised attention: the hardware integration that "blings" out my laptop. Several people have come up after my PocketRave talks to ask how it is possible that pressing buttons on the web app can make my laptop light up like a Christmas tree. In this tutorial, I’ll reveal my secrets to making a beautiful wifi- and web-enabled LED light show so that you, too, can bling out your laptop in style.
First, you’ll need some hardware:
Getting mesmerised by @jenlooper's laptop light strip whilst I learn about NativeScript. #AngularConnect pic.twitter.com/n85H8J3tMd
— Phil Nash (@philnash) September 28, 2016
The first thing you should do is trim the wires at one end of the LED strip. You won’t need them, so trim them and fold the ends under the strip’s plastic casing. Next, carefully solder the three wires from the LED strip to the Photon. The schematic is as follows:
The Ground and Voltage pins connect to their counterparts on the photon, and the Dout pin on the strip connects to the D2 pin on the Photon. On my devices, the installation looks like this:
Once your have soldered the three necessary wires securely, you can connect the Photon via its mini USB port to your laptop and connect it to wifi. Once it’s connected, check its status in the Particle console via https://console.particle.io/devices. Both the light on the device and in the console will ‘breathe cyan’ - or pulse a light greenish blue color:
Note, you need a non-gated wifi connection to work with Photon devices on wifi - in conference venues, I consistently have to use my phone as a wifi hub.
You can go ahead and attach the LED strip and the photon to your computer with the rubber bands, like this:
Once your Photon has successfully connected to wifi, you can flash the necessary code to make it respond to API calls. This is a very simple little program that you can load into the Photon ‘build’ cloud-based IDE, which looks like this:
In the Particle Build IDE, create a new app with an .INO file named rainbow-strip.ino
and paste the following code:
Go ahead and ‘flash’, or copy, this code to your Photon. Instructions on how to do this are here. This code allows the Photon to listen for remote commands and change the display of the LEDs. We can now build out our website to make calls to the light strip via the Photon.
The code to change the Photon color is pretty straightforward. First, I created a service for the Angular 2 app:
Here, I make an http call to the Photon, using the device id and access token that I copied from the Particle Build IDE. When a user clicks a button on the web app, the startLightShow
function is invoked, passing through a parameter identifying the mode of the light show:
In PocketRave, you can see the way this is all set up to interface with my own Photon. Create a new integration with your own setup to put this code through its paces!
Somehow, I have trouble creating a software demo without also creating a hardware integration. If you’re the same way, have fun creating a web site with a cool light show to match. Let me know in the comments what you decide to create!
Jen Looper is a Developer Advocate for Telerik products at Progress. She is a web and mobile developer and founder of Ladeez First Media which is a small indie mobile development studio. In her spare time, she is a dancer, teacher and multiculturalist who is always learning.