Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit7226a6b

Browse files
authored
Merge pull requestFirebaseExtended#217 from gguuss/neofixel
Updates the Web app to work with the new Firebase library
2 parents59f1657 +75114d1 commit7226a6b

File tree

2 files changed

+34
-32
lines changed

2 files changed

+34
-32
lines changed

‎examples/FirebaseNeoPixel_ESP8266/README.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
#FirebaseNeoPixel
22

3-
FirebaseNeoPixel is a sample that shows how to set pixel data from Firebase web app.
3+
FirebaseNeoPixel is a sample that shows how to set pixel data fromaFirebase web app.
44

55
##Hardware setup
66

@@ -25,23 +25,24 @@ FirebaseNeoPixel is a sample that shows how to set pixel data from Firebase web
2525
##Configuration
2626

2727
1. Start Arduino
28-
1. Open`File > Examples > FirebaseArduino >FirebaseRoom_ESP8266`
29-
1. In`FirebaseRoom_ESP8266`: Replace`WIFI_SSID` and`WIFI_PASSWORD` with WiFi credentials
28+
1. Open`File > Examples > FirebaseArduino >FirebaseNeoPixel_ESP8266`
29+
1. In`FirebaseNeoPixel_ESP8266`: Replace`WIFI_SSID` and`WIFI_PASSWORD` with WiFi credentials
3030
1. Go tohttps://firebase.google.com/console/ and create a new Firebase Project
3131
1. Go to`Database`
3232
1. Copy the`Database hostname` (Database URL without`https://` and trailing`/`)
33-
1. In`FirebaseRoom_ESP8266`: replace`FIREBASE_HOST` with the`Database Hostname`
33+
1. In`FirebaseNeoPixel_ESP8266`: replace`FIREBASE_HOST` with the`Database Hostname`
3434
1. Go to`⚙ > Project Settings > Database > Database secrets`
3535
1. Click`Firebase Secrets > Show`
3636
1. Copy the`Database Secret`
37-
1. In`FirebaseRoom_ESP8266`: Replace`FIREBASE_AUTH` with`Database Secret`
37+
1. In`FirebaseNeoPixel_ESP8266`: Replace`FIREBASE_AUTH` with`Database Secret`
3838
1. Select the board`Board > ESP8266 Modules > NodeMCU 1.0`
3939
1. Select the serial port`Port > /dev/tty...`
4040
1. Select the upload speed`Upload Speed > 115200`
4141
1. Click`Sketch > Upload`
4242
1. Open`public/index.html` with a text editor
43-
1. Replace`example.firebaseio.com` with the`Firebase Hostname` from step`2.`
44-
1. Replace`secret_or_token` with`Firebase Secret` from step`5.`
43+
1. Replace`example.firebaseio.com` with the`Firebase Hostname` used for configuring the Arduino project.
44+
1. Replace`example.firebaseapp.com` with the`Firebase Domain` from hosting tab of the Firebase Console.
45+
1. Replace`secret_or_token` with the`Firebase Secret` used to configure the Arduino project.
4546
1. Deploy the`public` directory to Firebase hosting
4647
```
4748
npm install -g firebase-tools bower
@@ -53,6 +54,7 @@ firebase deploy
5354

5455
##Play
5556

56-
1. Go to the firebase hosting URL:`firebase-name.firebaseapp.com`
57-
1. Use the color picker and paint the NeoPixel table
58-
1. Watch the NeoPixel being updated to the matching color
57+
1. Go to the firebase hosting URL:`example.firebaseapp.com`.
58+
1. Initialize the pixel data by copying / pasting example pixel data from the page and clicking**Update**.
59+
1. Use the color picker and paint the NeoPixel table.
60+
1. Watch the NeoPixel being updated to the matching color.

‎examples/FirebaseNeoPixel_ESP8266/public/index.html

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,16 @@
1616
-->
1717
<html>
1818
<head>
19-
<scriptsrc="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
19+
<scriptsrc="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>
2020
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
2121
<scriptsrc="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
2222
<linkrel="import"href="./bower_components/polymer-color-picker/polymer-color-picker.html">
2323
</head>
2424
<script>
25-
// TODO: Needs security.
26-
varfirebaseUrl='https://example.firebaseio.com';
27-
varfirebaseSecret=secret_or_token;
25+
// NOTICE: Retrieve these values from the Firebase console to run the sample.
26+
varfirebaseDb='example.firebaseio.com';
27+
varfirebaseAuthDomain='example.firebaseapp.com';
28+
varfirebaseApiKey='token_or_secret';
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-
varpixelData=newFirebase(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:",newDate(result.expires*1000));
126-
refreshData();
127-
}});
117+
<script>
118+
// Initialize Firebase
119+
varconfig={
120+
apiKey:firebaseApiKey,
121+
authDomain:firebaseAuthDomain,
122+
databaseURL:"https://"+firebaseDb,
123+
storageBucket:'',// not used
124+
messagingSenderId:'',// not used
125+
};
126+
firebase.initializeApp(config);
127+
varpixelData=firebase.database();
128128

129129
/**
130130
* Explicitly refreshes data from Firebase.
131131
* TODO: replace with streaming function that listens for events / updates.
132132
*/
133133
functionrefreshData(){
134-
pixelData.once("value",function(snapshot){
134+
pixelData.ref('/rgbdata/').once("value",function(snapshot){
135135
console.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

138138
for(vari=0;i<32;i++){
139139
varqString='pixel'+i;
140-
if(snapshot.val()['rgbdata'][qString]){
141-
varhexString=parseInt(snapshot.val()['rgbdata'][qString]).toString(16);
140+
if(snapshot.val()[qString]){
141+
varhexString=parseInt(snapshot.val()[qString]).toString(16);
142142
varzeroPrepend=6-hexString.length;
143143
for(varj=0;j<zeroPrepend;j++){
144144
hexString='0'+hexString;
@@ -161,7 +161,7 @@ <h3>Debugger / tester</h3>
161161
* the Firebase database. Note that this is best for debugging.
162162
*/
163163
functionpushData(){
164-
pixelData.set({'rgbdata':JSON.parse(document.getElementById('pixelData').value)});
164+
pixelData.ref('/rgbdata/').set(JSON.parse(document.getElementById('pixelData').value));
165165
refreshData();
166166
}
167167

@@ -199,7 +199,7 @@ <h3>Debugger / tester</h3>
199199
*/
200200
functionupdatePixel(pixelId){
201201
varpath='rgbdata/'+pixelId;
202-
varpixelRef=pixelData.child(path);
202+
varpixelRef=pixelData.ref(path);
203203
varcolorHex=
204204
rgb2hex(document.getElementById(pixelId).style.backgroundColor)
205205
.split('#')[1];

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp