p5 Javascript Обновление элементов рисования из базы данных Firestore

Question

Я очень начинающий программист, но мне удалось написать сценарий python на малиновом PI, который успешно обновляет базу данных 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? консоль 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();
}