Jen Looper
Published © GPL3+

Bling your Laptop with an Internet-Connected Light Show

Create a web-connected light-strip API controllable from your website, using the Particle.io.

IntermediateFull instructions provided2 hours1,205
Bling your Laptop with an Internet-Connected Light Show

Things used in this project

Hardware components

NeoPixel strip
NeoPixel strip
×1
Photon
Particle Photon
get a headerless photon, you don't need the pins
×1
USB-A to Mini-USB Cable
USB-A to Mini-USB Cable
×1

Software apps and online services

Particle.io API

Hand tools and fabrication machines

Soldering iron (generic)
Soldering iron (generic)

Story

Read more

Schematics

Neopixel to Photon Schematic

Connect the wires

Code

Web code to start a light show

JavaScript
This is the code for your website that starts a light show by passing through a light show mode to your Photon. On a button click, pass through a 'mode' parameter, like 'blue', 'red', or 'rainbow'
import {Injectable} from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import {LogService} from '../../core/services/log.service';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';


@Injectable()
export class PhotonService {
  private requestURl: string;
  private accessToken: string;

  constructor(
    private logger: LogService,
    private http: Http) {
      logger.debug(`Photon initializing...`);
      //device id
      this.requestURl = 'https://api.particle.io/v1/devices/<post your api key here>/startRave/';
      //access token
      this.accessToken = '<post your access token here>';
  }

public startLightShow(mode: string) {

  let params = 'command=' + mode + '&access_token=' + this.accessToken;

  let headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');

  this.http.post(this.requestURl, params, {headers: headers})
    .map(res => res.json())
    .subscribe(
      data => params,
      err => this.handleError(err),
      () => console.log('Post Complete')
    );
}

  private handleError(error: Response) {
      return Observable.throw(error);
  }


}

Credits

Jen Looper

Jen Looper

11 projects • 59 followers
Founder: VueVixens.org, indie web and mobile developer, Developer Relations team member at Microsoft. Queen of the Apps!

Comments