时间戳

首页 > 解决方案 > p5 Javascript 更新 Firestore 数据库中的绘图元素

javascript - p5 Javascript 更新 Firestore 数据库中的绘图元素

问题描述

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

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

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中的数据？ 控制台图像

标签： javascriptgoogle-cloud-firestorep5.js

解决方案

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

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();
}

推荐阅读