p5Javascript从Firestore数据库更新绘图元素

Question

我是一个非常初级的程序员，但我已经成功地在树莓PI上编写了一个python脚本，该脚本成功地更新了Firestore数据库并使用JavaScript提取数据。然后，我打算使用这些数据在画布/地图上使用mappa和p5绘制项目。

我可以控制Firestore对象并查看数据，但就我而言，我似乎无法在p5的draw()函数中使用这些数据。还是作为一个全局变量？以下是我尝试做的代码的一个非常简化的版本

db = firebase.firestore();
docRef = db.collection("Aircraft_data").doc("Firebird");
docRef.get().then(function(doc) {
console.log("Document data:", doc.data());
b = doc.data()
return b;
});
function draw(){
text(b["Altitude"], 200, 200);
}

最令人困惑的是，我可以控制台并查看chrome中的数据？控制台img

Answer 1

您正在进行异步调用，这就是为什么您在回调中看到结果，但在以下代码部分中没有看到结果(很可能在回调之前运行)。

P5具有结构函数，draw()是其中之一，并且(默认情况下)是循环的。将您的变量设为全局变量并等待其初始化(或其他)：

let myData; // make it global
function preload() {
db = firebase.firestore();
docRef = db.collection("Aircraft_data").doc("Firebird");
docRef.get().then(function(doc) {
console.log("Document data:", doc.data());
myData = doc.data();
});
}
function draw(){
if(!myData){ //check whether data is loaded. Change condition to proper one.
// if data is not yet arrived just return as draw() is looping
return;
}
// now the data is arrived, myData is initialized, we can continue
text(myData["Altitude"], 200, 200);
//it is possible to stop looping now:
noLoop();
}