From 3a527e9089b41ffa067fd3cfd819f22a647f5344 Mon Sep 17 00:00:00 2001
From: Gus Class <gguuss@gmail.com>
Date: Thu, 4 Feb 2016 11:48:45 -0800
Subject: [PATCH 1/3] A basic demo of Web + Arduino control of an Adafruit
 Neopixel feather shield

---
 examples/Firebase_ESP8266_Neopixel/.gitignore |   1 +
 .../Firebase_ESP8266_Neopixel.ino             | 108 +++++++++
 .../Firebase_ESP8266_Neopixel/colors_ext.h    |  93 +++++++
 .../Firebase_ESP8266_Neopixel/web/.gitignore  |   2 +
 .../Firebase_ESP8266_Neopixel/web/bower.json  |  23 ++
 .../web/web-demo.html                         | 226 ++++++++++++++++++
 6 files changed, 453 insertions(+)
 create mode 100644 examples/Firebase_ESP8266_Neopixel/.gitignore
 create mode 100644 examples/Firebase_ESP8266_Neopixel/Firebase_ESP8266_Neopixel.ino
 create mode 100644 examples/Firebase_ESP8266_Neopixel/colors_ext.h
 create mode 100644 examples/Firebase_ESP8266_Neopixel/web/.gitignore
 create mode 100644 examples/Firebase_ESP8266_Neopixel/web/bower.json
 create mode 100644 examples/Firebase_ESP8266_Neopixel/web/web-demo.html

diff --git a/examples/Firebase_ESP8266_Neopixel/.gitignore b/examples/Firebase_ESP8266_Neopixel/.gitignore
new file mode 100644
index 00000000..fd5106ff
--- /dev/null
+++ b/examples/Firebase_ESP8266_Neopixel/.gitignore
@@ -0,0 +1 @@
+.DS_STORE
diff --git a/examples/Firebase_ESP8266_Neopixel/Firebase_ESP8266_Neopixel.ino b/examples/Firebase_ESP8266_Neopixel/Firebase_ESP8266_Neopixel.ino
new file mode 100644
index 00000000..1a8575f5
--- /dev/null
+++ b/examples/Firebase_ESP8266_Neopixel/Firebase_ESP8266_Neopixel.ino
@@ -0,0 +1,108 @@
+//
+// Copyright 2016 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+// Firebase_ESP8266-Neopixel is a sample that demonstrates how
+// to set pixel data using a firebase stream.
+#include <Firebase.h>
+#include <ArduinoJson.h>
+
+#include <Adafruit_NeoPixel.h>
+#include "colors_ext.h"
+
+#define PIN 13
+Adafruit_NeoPixel strip = Adafruit_NeoPixel(32, PIN, NEO_GRB + NEO_KHZ800);
+
+
+// TODO: Replace with your own credentials and keep these safe.
+Firebase fbase = Firebase("brilliant-fire-9638.firebaseio.com")
+                   .auth("llXzJtqwdiHCHw6F6sehQR2EPwbO0YYdhEjPRZxG");
+
+void setup() {
+  Serial.begin(9600);
+
+  strip.begin();
+  strip.setBrightness(25); // 0 ... 255
+  strip.show(); // Initialize all pixels to 'off'
+
+  colorWipe(&strip, 0xFF0000, 50);
+
+  // connect to wifi.
+  WiFi.begin("GoogleGuest", "");
+  Serial.print("connecting");
+
+  int count = 0;
+  while (WiFi.status() != WL_CONNECTED) {
+    // Draw rainbows while connecting
+    Serial.print(".");
+    if (count < strip.numPixels()){
+       strip.setPixelColor(count++, Wheel(&strip, count * 8));
+       strip.show();
+    }
+    delay(20);
+  }
+  Serial.println();
+  Serial.print("connected: ");
+  Serial.println(WiFi.localIP());
+
+  // Connected, set the LEDs green
+  colorWipe(&strip, 0x00FF00, 50);
+}
+
+
+void loop() {
+  // Get all entries.
+  // TODO: Replace with streaming
+  FirebaseGet get = fbase.get("/rgbdata");
+  if (get.error()) {
+      Serial.println("Firebase get failed");
+      Serial.println(get.error().message());
+      return;
+  }
+
+  // Use dynamic for large JSON objects
+  //  DynamicJsonBuffer jsonBuffer;
+  StaticJsonBuffer<JSON_OBJECT_SIZE(10*4)> jsonBuffer;
+
+  // create an empty object
+  String ref = get.json();
+  Serial.println(ref);
+  JsonObject& pixelJSON = jsonBuffer.parseObject((char*)ref.c_str());
+
+  if(pixelJSON.success()){
+    for (int i=0; i < strip.numPixels(); i++) {
+      String pixelAddress = "pixel" + String(i);
+      String pixelVal = pixelJSON[pixelAddress];
+      Serial.println(pixelVal);
+      strip.setPixelColor(i, pixelVal.toInt());
+
+      // Don't do this: it will waste tons of memory due to the way that the
+      // Arduino JSON library handles elements.
+      /*
+      int r = (uint32_t) pixelJSON[pixelAddress]["r"];
+      int g = (uint32_t) pixelJSON[pixelAddress]["g"];
+      int b = (uint32_t) pixelJSON[pixelAddress]["b"];
+
+      Serial.println("Setting [" + String(i) + "] to {" + String(r) + "," + String(g) + "," + String(b) + "}");
+      strip.setPixelColor(i, strip.Color(r, g, b));
+      */
+    }
+    strip.show();
+  } else {
+    Serial.println("Parse fail.");
+    Serial.println(get.json());
+  }
+}
+
diff --git a/examples/Firebase_ESP8266_Neopixel/colors_ext.h b/examples/Firebase_ESP8266_Neopixel/colors_ext.h
new file mode 100644
index 00000000..5b78674e
--- /dev/null
+++ b/examples/Firebase_ESP8266_Neopixel/colors_ext.h
@@ -0,0 +1,93 @@
+// The following methods are extracted from the Adafruit Neopixel example, strandtest.
+// https://github.com/adafruit/Adafruit_NeoPixel
+
+#ifndef COLORS_EXT_H
+#define COLORS_EXT_H
+
+// Input a value 0 to 255 to get a color value.
+// The colours are a transition r - g - b - back to r.
+uint32_t Wheel(Adafruit_NeoPixel* strip, byte WheelPos) {
+  WheelPos = 255 - WheelPos;
+  if(WheelPos < 85) {
+    return strip->Color(255 - WheelPos * 3, 0, WheelPos * 3);
+  }
+  if(WheelPos < 170) {
+    WheelPos -= 85;
+    return strip->Color(0, WheelPos * 3, 255 - WheelPos * 3);
+  }
+  WheelPos -= 170;
+  return strip->Color(WheelPos * 3, 255 - WheelPos * 3, 0);
+}
+
+
+
+// Fill the dots one after the other with a color
+void colorWipe(Adafruit_NeoPixel* strip, uint32_t c, uint8_t wait) {
+  for(uint16_t i=0; i<strip->numPixels(); i++) {
+    strip->setPixelColor(i, c);
+    strip->show();
+    delay(wait);
+  }
+}
+
+void rainbow(Adafruit_NeoPixel* strip, uint8_t wait) {
+  uint16_t i, j;
+
+  for(j=0; j<256; j++) {
+    for(i=0; i<strip->numPixels(); i++) {
+      strip->setPixelColor(i, Wheel(strip, (i+j) & 255));
+    }
+    strip->show();
+    delay(wait);
+  }
+}
+
+// Slightly different, this makes the rainbow equally distributed throughout
+void rainbowCycle(Adafruit_NeoPixel* strip, uint8_t wait) {
+  uint16_t i, j;
+
+  for(j=0; j<256*5; j++) { // 5 cycles of all colors on wheel
+    for(i=0; i< strip->numPixels(); i++) {
+      strip->setPixelColor(i, Wheel(strip, ((i * 256 / strip->numPixels()) + j) & 255));
+    }
+    strip->show();
+    delay(wait);
+  }
+}
+
+//Theatre-style crawling lights.
+void theaterChase(Adafruit_NeoPixel* strip, uint32_t c, uint8_t wait) {
+  for (int j=0; j<10; j++) {  //do 10 cycles of chasing
+    for (int q=0; q < 3; q++) {
+      for (int i=0; i < strip->numPixels(); i=i+3) {
+        strip->setPixelColor(i+q, c);    //turn every third pixel on
+      }
+      strip->show();
+
+      delay(wait);
+
+      for (int i=0; i < strip->numPixels(); i=i+3) {
+        strip->setPixelColor(i+q, 0);        //turn every third pixel off
+      }
+    }
+  }
+}
+
+//Theatre-style crawling lights with rainbow effect
+void theaterChaseRainbow(Adafruit_NeoPixel* strip, uint8_t wait) {
+  for (int j=0; j < 256; j++) {     // cycle all 256 colors in the wheel
+    for (int q=0; q < 3; q++) {
+      for (int i=0; i < strip->numPixels(); i=i+3) {
+        strip->setPixelColor(i+q, Wheel(strip, (i+j) % 255));    //turn every third pixel on
+      }
+      strip->show();
+
+      delay(wait);
+
+      for (int i=0; i < strip->numPixels(); i=i+3) {
+        strip->setPixelColor(i+q, 0);        //turn every third pixel off
+      }
+    }
+  }
+}
+#endif
diff --git a/examples/Firebase_ESP8266_Neopixel/web/.gitignore b/examples/Firebase_ESP8266_Neopixel/web/.gitignore
new file mode 100644
index 00000000..c346b134
--- /dev/null
+++ b/examples/Firebase_ESP8266_Neopixel/web/.gitignore
@@ -0,0 +1,2 @@
+bower_components/
+node_modules/
diff --git a/examples/Firebase_ESP8266_Neopixel/web/bower.json b/examples/Firebase_ESP8266_Neopixel/web/bower.json
new file mode 100644
index 00000000..996e0e06
--- /dev/null
+++ b/examples/Firebase_ESP8266_Neopixel/web/bower.json
@@ -0,0 +1,23 @@
+{
+  "name": "web",
+  "homepage": "https://github.com/gguuss/firebase-arduino",
+  "authors": [
+    "Gus Class <gguuss@gmail.com>"
+  ],
+  "description": "",
+  "main": "",
+  "moduleType": [],
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "polymer": "^1.2.0",
+    "polymer-color-picker": "^1.0.1"
+  }
+}
diff --git a/examples/Firebase_ESP8266_Neopixel/web/web-demo.html b/examples/Firebase_ESP8266_Neopixel/web/web-demo.html
new file mode 100644
index 00000000..1f896148
--- /dev/null
+++ b/examples/Firebase_ESP8266_Neopixel/web/web-demo.html
@@ -0,0 +1,226 @@
+<!--
+
+  Copyright 2016 Google Inc.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+<html>
+<head>
+  <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
+  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="./bower_components/polymer-color-picker/polymer-color-picker.html">
+</head>
+<script>
+  // TODO: Needs security.
+  var firebaseUrl = 'https://brilliant-fire-9638.firebaseio.com';
+  var firebaseSecret = 'llXzJtqwdiHCHw6F6sehQR2EPwbO0YYdhEjPRZxG';
+</script>
+<body>
+<h2>Paint Demo</h3>
+  <polymer-color-picker onClick="updateColor('colorpicker')" id="colorpicker"
+      color="{{selectedColor}}"></polymer-color-picker>
+   Pick a color then click a cell.
+
+  <!-- TODO: Switch to CSS, table is so basic. -->
+  <table border=1 style="width:800px; height:400px">
+    <tr>
+      <td id="pixel0" onClick="setColor('pixel0')"></td>
+      <td id="pixel1" onClick="setColor('pixel1')"></td>
+      <td id="pixel2" onClick="setColor('pixel2')"></td>
+      <td id="pixel3" onClick="setColor('pixel3')"></td>
+      <td id="pixel4" onClick="setColor('pixel4')"></td>
+      <td id="pixel5" onClick="setColor('pixel5')"></td>
+      <td id="pixel6" onClick="setColor('pixel6')"></td>
+      <td id="pixel7" onClick="setColor('pixel7')"></td>
+    </tr>
+    <tr>
+      <td id="pixel8" onClick="setColor('pixel8')"></td>
+      <td id="pixel9" onClick="setColor('pixel9')"></td>
+      <td id="pixel10" onClick="setColor('pixel10')"></td>
+      <td id="pixel11" onClick="setColor('pixel11')"></td>
+      <td id="pixel12" onClick="setColor('pixel12')"></td>
+      <td id="pixel13" onClick="setColor('pixel13')"></td>
+      <td id="pixel14" onClick="setColor('pixel14')"></td>
+      <td id="pixel15" onClick="setColor('pixel15')"></td>
+    </tr>
+    <tr>
+      <td id="pixel16" onClick="setColor('pixel16')"></td>
+      <td id="pixel17" onClick="setColor('pixel17')"></td>
+      <td id="pixel18" onClick="setColor('pixel18')"></td>
+      <td id="pixel19" onClick="setColor('pixel19')"></td>
+      <td id="pixel20" onClick="setColor('pixel20')"></td>
+      <td id="pixel21" onClick="setColor('pixel21')"></td>
+      <td id="pixel22" onClick="setColor('pixel22')"></td>
+      <td id="pixel23" onClick="setColor('pixel23')"></td>
+    </tr>
+    <tr>
+      <td id="pixel24" onClick="setColor('pixel24')"></td>
+      <td id="pixel25" onClick="setColor('pixel25')"></td>
+      <td id="pixel26" onClick="setColor('pixel26')"></td>
+      <td id="pixel27" onClick="setColor('pixel27')"></td>
+      <td id="pixel28" onClick="setColor('pixel28')"></td>
+      <td id="pixel29" onClick="setColor('pixel29')"></td>
+      <td id="pixel30" onClick="setColor('pixel30')"></td>
+      <td id="pixel31" onClick="setColor('pixel31')"></td>
+    </tr>
+  </table>
+<p>
+<br/><br/><br/><br/><br/><br/>
+<h3>Debugger / tester</h3>
+<textarea id="pixelData" style="width:500px; height:250px"></textarea><br>
+<button onClick="pushData()">Update</button>
+<button onClick="refreshData()">Refresh</button>
+
+<pre>
+Examples:
+
+Boring RGB pixels
+<hr>
+{
+    "pixel0":16711680, "pixel1":255, "pixel2":65280, "pixel3":16711680, "pixel4":255, "pixel5":65280, "pixel6":16711680, "pixel7":16711680,
+    "pixel8":16711680, "pixel9":255, "pixel10":65280, "pixel11":16711680, "pixel12":255, "pixel13":65280, "pixel14":16711680, "pixel15":16711680,
+    "pixel16":16711680, "pixel17":255, "pixel18":65280, "pixel19":16711680, "pixel20":255, "pixel21":65280, "pixel22":16711680, "pixel23":16711680,
+    "pixel24":16711680, "pixel25":255, "pixel26":65280, "pixel27":16711680, "pixel28":255, "pixel29":65280, "pixel30":16711680, "pixel31":16711680
+}
+<br>
+Charlie
+<hr>
+{
+    "pixel0":0, "pixel1":16776960, "pixel2":16776960, "pixel3":16776960, "pixel4":0, "pixel5":16776960, "pixel6":16776960, "pixel7":16776960,
+    "pixel8":0, "pixel9":0, "pixel10":16776960, "pixel11":0, "pixel12":0, "pixel13":0, "pixel14":16776960, "pixel15":16776960,
+    "pixel16":16776960, "pixel17":0, "pixel18":0, "pixel19":0, "pixel20":16776960, "pixel21":0, "pixel22":0, "pixel23":0,
+    "pixel24":16776960, "pixel25":16776960, "pixel26":0, "pixel27":16776960, "pixel28":16776960, "pixel29":16776960, "pixel30":0, "pixel31":16776960
+}
+<br>
+Proppy
+<hr>
+{
+  "pixel0":16748288,"pixel1":16748288,"pixel10":236517,"pixel11":236517,"pixel12":16748288,"pixel13":16748288,"pixel14":236517,"pixel15":236517,
+  "pixel16":16748288,"pixel17":16748288,"pixel18":236517,"pixel19":236517,"pixel2":236517,"pixel20":16748288,"pixel21":16748288,"pixel22":236517,
+  "pixel23":236517,"pixel24":16748288,"pixel25":16748288,"pixel26":236517,"pixel27":236517,"pixel28":16748288,"pixel29":16748288,"pixel3":236517,
+  "pixel30":236517,"pixel31":236517,"pixel4":16748288,"pixel5":16748288,"pixel6":236517,"pixel7":236517,"pixel8":16748288,"pixel9":16748288
+}
+</pre>
+
+  <script>
+    // Firebase reference and authentication stored globally.
+    // TODO: Encapsualte into objects, move to separate JS file
+    var pixelData = new Firebase(firebaseUrl);
+    pixelData.authWithCustomToken(firebaseSecret, function(error, result){
+      if (error) {
+        console.log("Authentication Failed!", error);
+      } else {
+        console.log("Authenticated successfully with payload:", result.auth);
+        console.log("Auth expires at:", new Date(result.expires * 1000));
+        refreshData();
+      } });
+
+    /**
+     * Explicitly refreshes data from Firebase.
+     * TODO: replace with streaming function that listens for events / updates.
+     */
+    function refreshData() {
+        pixelData.once("value", function(snapshot) {
+          console.log(snapshot.val());
+          document.getElementById('pixelData').value = JSON.stringify(snapshot.val()['rgbdata'], 2);
+
+          for (var i=0; i < 32; i++){
+            var qString = 'pixel' + i;
+            if (snapshot.val()['rgbdata'][qString]){
+              var hexString = parseInt(snapshot.val()['rgbdata'][qString]).toString(16);
+              var zeroPrepend = 6 - hexString.length;
+              for (var j=0; j < zeroPrepend; j++){
+                hexString = '0' + hexString;
+              }
+              var bgColorHex = '#' + hexString;
+              console.log(bgColorHex);
+              document.getElementById(qString).style.background = bgColorHex;
+            }else{
+              document.getElementById(qString).style.backgroundColor = "#000000";
+            }
+          }
+        }, function (errorObject) {
+          console.log("The read failed: " + errorObject.code);
+        });
+    }
+
+
+    /**
+     * Pushes all data stored in the pixel data input field raw into
+     * the Firebase database. Note that this is best for debugging.
+     */
+    function pushData() {
+      pixelData.set({'rgbdata': JSON.parse(document.getElementById('pixelData').value)});
+      refreshData();
+    }
+
+
+    /**
+     * Selects a color from the color picker.
+     *
+     * @param pixelId The pixel identifier (indexed 0 ... 31) that matches
+     *     the HTML element as well as the firebase data.
+     */
+    function updateColor(pixelId) {
+      var targetPixelPicker = document.getElementById(pixelId);
+      targetPixelPicker.click(); // dismiss the picker
+    }
+
+
+    /**
+     * Sets the color of a pixel in the UI.
+     *
+     * @param pixelId The pixel identifier (indexed 0 ... 31) that matches
+     *     the HTML element as well as the firebase data.
+     */
+    function setColor(pixelId) {
+      document.getElementById(pixelId).style.backgroundColor =
+        rgb2hex(document.getElementById('colorpicker').color);
+      updatePixel(pixelId);
+    }
+
+
+    /**
+     * Updates a pixel on Firebase.
+     *
+     * @param pixelId The pixel identifier (indexed 0 ... 31) that matches
+     *     the HTML element as well as the firebase data.
+     */
+    function updatePixel(pixelId){
+      var path = 'rgbdata/' + pixelId;
+      var pixelRef = pixelData.child(path);
+      var colorHex =
+          rgb2hex(document.getElementById(pixelId).style.backgroundColor)
+          .split('#')[1];
+      var colorDec = parseInt(colorHex, 16);
+      pixelRef.set(colorDec);
+    }
+
+
+    /**
+     * Uses a regex to convert an RGB( ... ... ..) string to hex value.
+     *
+     * @param rgb The RGB string in the format rgb(000,111,222) where the first
+     *   value is the red, second green, third blue.
+     * @return The value in hex.
+     */
+    function rgb2hex(rgb) {
+        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+        function hex(x) {
+            return ("0" + parseInt(x).toString(16)).slice(-2);
+        }
+        return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+    }
+  </script>
+</body>

From 77b2ab866cc4213bcc04911ca4e81e350890ad33 Mon Sep 17 00:00:00 2001
From: Gus Class <gguuss@gmail.com>
Date: Mon, 14 Mar 2016 10:56:47 -0700
Subject: [PATCH 2/3] Addresses some feedback from review, fixes folder
 structure for Arduino builds

---
 .../Firebase_ESP8266_Neopixel-web}/.gitignore |  0
 .../Firebase_ESP8266_Neopixel-web}/bower.json |  0
 .../web-demo.html                             |  4 ++--
 .../Firebase_ESP8266_Neopixel/.gitignore      |  0
 .../Firebase_ESP8266_Neopixel.ino             | 19 +++++--------------
 .../Firebase_ESP8266_Neopixel/colors_ext.h    |  0
 6 files changed, 7 insertions(+), 16 deletions(-)
 rename examples/{Firebase_ESP8266_Neopixel/web => Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web}/.gitignore (100%)
 rename examples/{Firebase_ESP8266_Neopixel/web => Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web}/bower.json (100%)
 rename examples/{Firebase_ESP8266_Neopixel/web => Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web}/web-demo.html (98%)
 rename examples/{ => Firebase_ESP8266_LEDs}/Firebase_ESP8266_Neopixel/.gitignore (100%)
 rename examples/{ => Firebase_ESP8266_LEDs}/Firebase_ESP8266_Neopixel/Firebase_ESP8266_Neopixel.ino (78%)
 rename examples/{ => Firebase_ESP8266_LEDs}/Firebase_ESP8266_Neopixel/colors_ext.h (100%)

diff --git a/examples/Firebase_ESP8266_Neopixel/web/.gitignore b/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web/.gitignore
similarity index 100%
rename from examples/Firebase_ESP8266_Neopixel/web/.gitignore
rename to examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web/.gitignore
diff --git a/examples/Firebase_ESP8266_Neopixel/web/bower.json b/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web/bower.json
similarity index 100%
rename from examples/Firebase_ESP8266_Neopixel/web/bower.json
rename to examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web/bower.json
diff --git a/examples/Firebase_ESP8266_Neopixel/web/web-demo.html b/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web/web-demo.html
similarity index 98%
rename from examples/Firebase_ESP8266_Neopixel/web/web-demo.html
rename to examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web/web-demo.html
index 1f896148..43a6da08 100644
--- a/examples/Firebase_ESP8266_Neopixel/web/web-demo.html
+++ b/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web/web-demo.html
@@ -23,8 +23,8 @@
 </head>
 <script>
   // TODO: Needs security.
-  var firebaseUrl = 'https://brilliant-fire-9638.firebaseio.com';
-  var firebaseSecret = 'llXzJtqwdiHCHw6F6sehQR2EPwbO0YYdhEjPRZxG';
+  var firebaseUrl = 'https://YOUR_FIREBASE_URL.firebaseio.com';
+  var firebaseSecret = 'YOUR_FIREBASE_SECRET';
 </script>
 <body>
 <h2>Paint Demo</h3>
diff --git a/examples/Firebase_ESP8266_Neopixel/.gitignore b/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel/.gitignore
similarity index 100%
rename from examples/Firebase_ESP8266_Neopixel/.gitignore
rename to examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel/.gitignore
diff --git a/examples/Firebase_ESP8266_Neopixel/Firebase_ESP8266_Neopixel.ino b/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel/Firebase_ESP8266_Neopixel.ino
similarity index 78%
rename from examples/Firebase_ESP8266_Neopixel/Firebase_ESP8266_Neopixel.ino
rename to examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel/Firebase_ESP8266_Neopixel.ino
index 1a8575f5..18fe9488 100644
--- a/examples/Firebase_ESP8266_Neopixel/Firebase_ESP8266_Neopixel.ino
+++ b/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel/Firebase_ESP8266_Neopixel.ino
@@ -25,10 +25,11 @@
 #define PIN 13
 Adafruit_NeoPixel strip = Adafruit_NeoPixel(32, PIN, NEO_GRB + NEO_KHZ800);
 
+#define JSON_BUFFER_SIZE 10*4
 
 // TODO: Replace with your own credentials and keep these safe.
-Firebase fbase = Firebase("brilliant-fire-9638.firebaseio.com")
-                   .auth("llXzJtqwdiHCHw6F6sehQR2EPwbO0YYdhEjPRZxG");
+Firebase fbase = Firebase("YOUR-PROJECT-ID.firebaseio.com")
+                   .auth("YOUR_AUTH_SECRET");
 
 void setup() {
   Serial.begin(9600);
@@ -37,6 +38,7 @@ void setup() {
   strip.setBrightness(25); // 0 ... 255
   strip.show(); // Initialize all pixels to 'off'
 
+  // Not connected, set the LEDs red
   colorWipe(&strip, 0xFF0000, 50);
 
   // connect to wifi.
@@ -74,7 +76,7 @@ void loop() {
 
   // Use dynamic for large JSON objects
   //  DynamicJsonBuffer jsonBuffer;
-  StaticJsonBuffer<JSON_OBJECT_SIZE(10*4)> jsonBuffer;
+  StaticJsonBuffer<JSON_OBJECT_SIZE(JSON_BUFFER_SIZE)> jsonBuffer;
 
   // create an empty object
   String ref = get.json();
@@ -87,17 +89,6 @@ void loop() {
       String pixelVal = pixelJSON[pixelAddress];
       Serial.println(pixelVal);
       strip.setPixelColor(i, pixelVal.toInt());
-
-      // Don't do this: it will waste tons of memory due to the way that the
-      // Arduino JSON library handles elements.
-      /*
-      int r = (uint32_t) pixelJSON[pixelAddress]["r"];
-      int g = (uint32_t) pixelJSON[pixelAddress]["g"];
-      int b = (uint32_t) pixelJSON[pixelAddress]["b"];
-
-      Serial.println("Setting [" + String(i) + "] to {" + String(r) + "," + String(g) + "," + String(b) + "}");
-      strip.setPixelColor(i, strip.Color(r, g, b));
-      */
     }
     strip.show();
   } else {
diff --git a/examples/Firebase_ESP8266_Neopixel/colors_ext.h b/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel/colors_ext.h
similarity index 100%
rename from examples/Firebase_ESP8266_Neopixel/colors_ext.h
rename to examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel/colors_ext.h

From 5c12556bf4134b74c184dd5def3dba9e4758942c Mon Sep 17 00:00:00 2001
From: Gus Class <gguuss@gmail.com>
Date: Tue, 29 Mar 2016 14:04:16 -0700
Subject: [PATCH 3/3] Various fixes from reviewer feedback

---
 .../Firebase_ESP8266_Neopixel.ino             |  4 +--
 .../.gitignore                                |  0
 examples/Firebase_ESP8266_LEDs/www/README.md  | 26 +++++++++++++++++++
 .../bower.json                                |  0
 .../web-demo.html                             |  2 +-
 5 files changed, 29 insertions(+), 3 deletions(-)
 rename examples/Firebase_ESP8266_LEDs/{Firebase_ESP8266_Neopixel-web => www}/.gitignore (100%)
 create mode 100644 examples/Firebase_ESP8266_LEDs/www/README.md
 rename examples/Firebase_ESP8266_LEDs/{Firebase_ESP8266_Neopixel-web => www}/bower.json (100%)
 rename examples/Firebase_ESP8266_LEDs/{Firebase_ESP8266_Neopixel-web => www}/web-demo.html (99%)

diff --git a/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel/Firebase_ESP8266_Neopixel.ino b/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel/Firebase_ESP8266_Neopixel.ino
index 18fe9488..89b35351 100644
--- a/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel/Firebase_ESP8266_Neopixel.ino
+++ b/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel/Firebase_ESP8266_Neopixel.ino
@@ -22,13 +22,13 @@
 #include <Adafruit_NeoPixel.h>
 #include "colors_ext.h"
 
-#define PIN 13
+const int PIN=13;
 Adafruit_NeoPixel strip = Adafruit_NeoPixel(32, PIN, NEO_GRB + NEO_KHZ800);
 
 #define JSON_BUFFER_SIZE 10*4
 
 // TODO: Replace with your own credentials and keep these safe.
-Firebase fbase = Firebase("YOUR-PROJECT-ID.firebaseio.com")
+Firebase fbase = Firebase("YOUR-PROJECT.firebaseio.com")
                    .auth("YOUR_AUTH_SECRET");
 
 void setup() {
diff --git a/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web/.gitignore b/examples/Firebase_ESP8266_LEDs/www/.gitignore
similarity index 100%
rename from examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web/.gitignore
rename to examples/Firebase_ESP8266_LEDs/www/.gitignore
diff --git a/examples/Firebase_ESP8266_LEDs/www/README.md b/examples/Firebase_ESP8266_LEDs/www/README.md
new file mode 100644
index 00000000..d42490bd
--- /dev/null
+++ b/examples/Firebase_ESP8266_LEDs/www/README.md
@@ -0,0 +1,26 @@
+# Firebase Neopixel Web demo #
+
+This demo console shows you how to synchronize data from the web to a device.
+
+## Installation ##
+The demo uses [Bower](http://bower.io/) and
+[Polymer](http://www.polymer-project.org/) to simplify the UI and dependencies
+of the project.
+
+For Bower, you need to install [Node.js](http://nodejs.org/). After node is
+installed, install the Bower package by calling:
+
+`npm install -g bower`
+
+After Bower is installed, you are ready to update the project dependencies with
+Bower by running:
+
+`bower install`
+
+With the dependencies set, serve the www folder from a web server. For example,
+you can use the Python Simple HTTP server module by running:
+
+`python -m SimpleHTTPServer [port]`
+
+With the web server running, navigate to /web-demo.html and you should see
+the demo load.
diff --git a/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web/bower.json b/examples/Firebase_ESP8266_LEDs/www/bower.json
similarity index 100%
rename from examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web/bower.json
rename to examples/Firebase_ESP8266_LEDs/www/bower.json
diff --git a/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web/web-demo.html b/examples/Firebase_ESP8266_LEDs/www/web-demo.html
similarity index 99%
rename from examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web/web-demo.html
rename to examples/Firebase_ESP8266_LEDs/www/web-demo.html
index 43a6da08..42c7dbc2 100644
--- a/examples/Firebase_ESP8266_LEDs/Firebase_ESP8266_Neopixel-web/web-demo.html
+++ b/examples/Firebase_ESP8266_LEDs/www/web-demo.html
@@ -32,7 +32,7 @@ <h2>Paint Demo</h3>
       color="{{selectedColor}}"></polymer-color-picker>
    Pick a color then click a cell.
 
-  <!-- TODO: Switch to CSS, table is so basic. -->
+  <!-- TODO: Switch to CSS and Polymer elements, table is so basic. -->
   <table border=1 style="width:800px; height:400px">
     <tr>
       <td id="pixel0" onClick="setColor('pixel0')"></td>