1616-->
1717< html >
1818< head >
19- < script src ="https://cdn.firebase .com/js/client/2.2.1 /firebase.js "> </ script >
19+ < script src ="https://www.gstatic .com/firebasejs/3.5.2 /firebase.js "> </ script >
2020< script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "> </ script >
2121< script src ="bower_components/webcomponentsjs/webcomponents-lite.js "> </ script >
2222< link rel ="import "href ="./bower_components/polymer-color-picker/polymer-color-picker.html ">
2323</ head >
2424< script >
25- // TODO: Needs security.
26- var firebaseUrl = 'https://example.firebaseio.com' ;
27- var firebaseSecret = secret_or_token ;
25+ // NOTICE: Retrieve these values from the Firebase console to run the sample.
26+ var firebaseDb = 'yourproject.firebaseio.com' ;
27+ var firebaseAuthDomain = 'yourproject.firebaseapp.com' ;
28+ var firebaseApiKey = 'your_api_key' ;
2829</ script >
2930< body >
3031< h2 > Paint Demo</ h3 >
@@ -113,32 +114,31 @@ <h3>Debugger / tester</h3>
113114}
114115</ pre >
115116
116- < script >
117- // Firebase reference and authentication stored globally.
118- // TODO: Encapsualte into objects, move to separate JS file
119- var pixelData = new Firebase ( firebaseUrl ) ;
120- pixelData . authWithCustomToken ( firebaseSecret , function ( error , result ) {
121- if ( error ) {
122- console . log ( "Authentication Failed!" , error ) ;
123- } else {
124- console . log ( "Authenticated successfully with payload:" , result . auth ) ;
125- console . log ( "Auth expires at:" , new Date ( result . expires * 1000 ) ) ;
126- refreshData ( ) ;
127- } } ) ;
117+ < script >
118+ // Initialize Firebase
119+ var config = {
120+ apiKey :firebaseApiKey ,
121+ authDomain :firebaseAuthDomain ,
122+ databaseURL :"https://" + firebaseDb ,
123+ storageBucket :'' , // not used
124+ messagingSenderId :'' , // not used
125+ } ;
126+ firebase . initializeApp ( config ) ;
127+ var pixelData = firebase . database ( ) ;
128128
129129/**
130130 * Explicitly refreshes data from Firebase.
131131 * TODO: replace with streaming function that listens for events / updates.
132132 */
133133function refreshData ( ) {
134- pixelData . once ( "value" , function ( snapshot ) {
134+ pixelData . ref ( '/rgbdata/' ) . once ( "value" , function ( snapshot ) {
135135console . log ( snapshot . val ( ) ) ;
136- document . getElementById ( 'pixelData' ) . value = JSON . stringify ( snapshot . val ( ) [ 'rgbdata' ] , 2 ) ;
136+ document . getElementById ( 'pixelData' ) . value = JSON . stringify ( snapshot . val ( ) , 2 ) ;
137137
138138for ( var i = 0 ; i < 32 ; i ++ ) {
139139var qString = 'pixel' + i ;
140- if ( snapshot . val ( ) [ 'rgbdata' ] [ qString ] ) {
141- var hexString = parseInt ( snapshot . val ( ) [ 'rgbdata' ] [ qString ] ) . toString ( 16 ) ;
140+ if ( snapshot . val ( ) [ qString ] ) {
141+ var hexString = parseInt ( snapshot . val ( ) [ qString ] ) . toString ( 16 ) ;
142142var zeroPrepend = 6 - hexString . length ;
143143for ( var j = 0 ; j < zeroPrepend ; j ++ ) {
144144hexString = '0' + hexString ;
@@ -161,7 +161,7 @@ <h3>Debugger / tester</h3>
161161 * the Firebase database. Note that this is best for debugging.
162162 */
163163function pushData ( ) {
164- pixelData . set ( { ' rgbdata' : JSON . parse ( document . getElementById ( 'pixelData' ) . value ) } ) ;
164+ pixelData . ref ( '/ rgbdata/' ) . set ( JSON . parse ( document . getElementById ( 'pixelData' ) . value ) ) ;
165165refreshData ( ) ;
166166}
167167
@@ -199,7 +199,7 @@ <h3>Debugger / tester</h3>
199199 */
200200function updatePixel ( pixelId ) {
201201var path = 'rgbdata/' + pixelId ;
202- var pixelRef = pixelData . child ( path ) ;
202+ var pixelRef = pixelData . ref ( path ) ;
203203var colorHex =
204204rgb2hex ( document . getElementById ( pixelId ) . style . backgroundColor )
205205. split ( '#' ) [ 1 ] ;