Angular.js / ionic app for

RGB Demo


A project demonstrating how to connect to using an angular.js system like ionic / cordova. is a platform which replaced Spark Core, allowing anyone who can interact with an API to build connected devices. A REST API, managed by, handles the sharing and broadcast of data directly from the devices. Creation and connection is simultaneous on this platform, even allowing the developer to flash the programmer on the Particle Electron “over the air” on the 3G connection. recommends that users build their own web and mobile apps for operation of their platform. has created an app creation system which allows people who are familiar with the CLI (Command Line Interface) to build apps using the angular.js framework. Using the ionic system, it’s possible to build and publish an app for both android and IOS quite quickly.

This framework pairing with and represents a perfect opportunity for web developers to build IoT devices, using their existing knowledge and capability.

This demo includes a service which I wrote for Particle devices which handles the API communication with an angular.js app. The service handles connection creation, function calls, variable getting, and server sent events created by the device and subscribed to by the app.

Specifications of the app:

  • Use to build in android or in iOS
  • Allow the user to log into and select a device to control
  • Present an interface allowing the user to change the color of each set of lights
  • If another user changes the color of the lights, it should update any connected user

This project allows control of two RGB LED values via cellular networks. There are conversion techniques included for turning a hex color value into a RGB value, and applying that value to an RGB light controller.

It demonstrates the creation of variables, functions and events in the cloud, then how to connect to them using angular.js in an ionic framework.

Install Particle-cli, cordova, ionic globally (may require sudo):

npm i -g particle-cli cordova ionic

Compile particle code:

particle build electron embedded/rgb-demo.ino

Flash a local particle device with compiled code:

particle flash electron --serial embedded/electron_firmware_xxxx.bin

Check Login for

particle login

Start local server with ionic app (for debugging the app)

ionic serve

Add Android platform

ionic platform add android

Build and Run Android platform

ionic run android

If you are looking for the angular service for authentication, variables, functions and events, it’s in the js source code.

If you are looking for RGB Hex Conversion tool for arduino, go to the Arduino Source Code.

More info on ionic can be found on the Ionic Getting Started page and the Ionic CLI repo.