Merge pull request #217 from gguuss/neofixel

proppy · web-flow · commit 7226a6b7dd9d · 2016-11-29T11:06:11.000-08:00
Updates the Web app to work with the new Firebase library
diff --git a/examples/FirebaseNeoPixel_ESP8266/README.md b/examples/FirebaseNeoPixel_ESP8266/README.md
@@ -1,6 +1,6 @@
 # FirebaseNeoPixel
 
-FirebaseNeoPixel is a sample that shows how to set pixel data from Firebase web app.
+FirebaseNeoPixel is a sample that shows how to set pixel data from a Firebase web app.
 
 ## Hardware setup
 
@@ -25,23 +25,24 @@ FirebaseNeoPixel is a sample that shows how to set pixel data from Firebase web
 ## Configuration
 
 1. Start Arduino
-1. Open `File > Examples > FirebaseArduino > FirebaseRoom_ESP8266`
-1. In `FirebaseRoom_ESP8266`: Replace `WIFI_SSID` and `WIFI_PASSWORD` with WiFi credentials
+1. Open `File > Examples > FirebaseArduino > FirebaseNeoPixel_ESP8266`
+1. In `FirebaseNeoPixel_ESP8266`: Replace `WIFI_SSID` and `WIFI_PASSWORD` with WiFi credentials
 1. Go to https://firebase.google.com/console/ and create a new Firebase Project
 1. Go to `Database`
 1. Copy the `Database hostname` (Database URL without `https://` and trailing `/`)
-1. In `FirebaseRoom_ESP8266`: replace `FIREBASE_HOST` with the `Database Hostname`
+1. In `FirebaseNeoPixel_ESP8266`: replace `FIREBASE_HOST` with the `Database Hostname`
 1. Go to  `⚙ > Project Settings > Database > Database secrets`
 1. Click `Firebase Secrets > Show`
 1. Copy the `Database Secret`
-1. In `FirebaseRoom_ESP8266`:  Replace `FIREBASE_AUTH` with `Database Secret`
+1. In `FirebaseNeoPixel_ESP8266`:  Replace `FIREBASE_AUTH` with `Database Secret`
 1. Select the board `Board > ESP8266 Modules > NodeMCU 1.0`
 1. Select the serial port  `Port > /dev/tty...`
 1. Select the upload speed `Upload Speed > 115200`
 1. Click `Sketch > Upload`
 1. Open `public/index.html` with a text editor
-1. Replace `example.firebaseio.com` with the `Firebase Hostname` from step `2.`
-1. Replace `secret_or_token` with `Firebase Secret` from step `5.`
+1. Replace `example.firebaseio.com` with the `Firebase Hostname` used for configuring the Arduino project.
+1. Replace `example.firebaseapp.com` with the `Firebase Domain` from hosting tab of the Firebase Console.
+1. Replace `secret_or_token` with the `Firebase Secret` used to configure the Arduino project.
 1. Deploy the `public` directory to Firebase hosting
 ```
 npm install -g firebase-tools bower
@@ -53,6 +54,7 @@ firebase deploy
 
 ## Play
 
-1. Go to the firebase hosting URL: `firebase-name.firebaseapp.com`
-1. Use the color picker and paint the NeoPixel table
-1. Watch the NeoPixel being updated to the matching color
+1. Go to the firebase hosting URL: `example.firebaseapp.com`.
+1. Initialize the pixel data by copying / pasting example pixel data from the page and clicking **Update**.
+1. Use the color picker and paint the NeoPixel table.
+1. Watch the NeoPixel being updated to the matching color.
diff --git a/examples/FirebaseNeoPixel_ESP8266/public/index.html b/examples/FirebaseNeoPixel_ESP8266/public/index.html
@@ -16,15 +16,16 @@
 -->
 <html>
 <head>
-  <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/3.5.2/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://example.firebaseio.com';
-  var firebaseSecret = secret_or_token;
+  // NOTICE: Retrieve these values from the Firebase console to run the sample.
+  var firebaseDb = 'example.firebaseio.com';
+  var firebaseAuthDomain = 'example.firebaseapp.com';
+  var firebaseApiKey = 'token_or_secret';
 </script>
 <body>
 <h2>Paint Demo</h3>
@@ -113,32 +114,31 @@ <h3>Debugger / tester</h3>
 }
 </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();
-      } });
+<script>
+    // Initialize Firebase
+    var config = {
+      apiKey: firebaseApiKey,
+      authDomain: firebaseAuthDomain,
+      databaseURL: "https://" + firebaseDb,
+      storageBucket: '', // not used
+      messagingSenderId: '', // not used
+    };
+    firebase.initializeApp(config);
+    var pixelData = firebase.database();
 
     /**
      * Explicitly refreshes data from Firebase.
      * TODO: replace with streaming function that listens for events / updates.
      */
     function refreshData() {
-        pixelData.once("value", function(snapshot) {
+        pixelData.ref('/rgbdata/').once("value", function(snapshot) {
           console.log(snapshot.val());
-          document.getElementById('pixelData').value = JSON.stringify(snapshot.val()['rgbdata'], 2);
+          document.getElementById('pixelData').value = JSON.stringify(snapshot.val(), 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);
+            if (snapshot.val()[qString]){
+              var hexString = parseInt(snapshot.val()[qString]).toString(16);
               var zeroPrepend = 6 - hexString.length;
               for (var j=0; j < zeroPrepend; j++){
                 hexString = '0' + hexString;
@@ -161,7 +161,7 @@ <h3>Debugger / tester</h3>
      * the Firebase database. Note that this is best for debugging.
      */
     function pushData() {
-      pixelData.set({'rgbdata': JSON.parse(document.getElementById('pixelData').value)});
+      pixelData.ref('/rgbdata/').set(JSON.parse(document.getElementById('pixelData').value));
       refreshData();
     }
 
@@ -199,7 +199,7 @@ <h3>Debugger / tester</h3>
      */
     function updatePixel(pixelId){
       var path = 'rgbdata/' + pixelId;
-      var pixelRef = pixelData.child(path);
+      var pixelRef = pixelData.ref(path);
       var colorHex =
           rgb2hex(document.getElementById(pixelId).style.backgroundColor)
           .split('#')[1];
