Question

在 firebase 中，我有以下孩子：

import timeit
from skimage import measure
import numpy as np

binary_image = np.array([
        [0,1,0,0,1,1,0,1,1,0,0,1],
        [0,1,0,1,1,1,0,1,1,1,0,1],
        [0,0,0,0,0,0,0,1,1,1,0,0],
        [0,1,1,1,1,0,0,0,0,1,0,0],
        [0,0,0,0,0,0,0,1,1,1,0,0],
        [0,0,1,0,0,0,0,0,0,0,0,0],
        [0,1,0,0,1,1,0,1,1,0,0,1],
        [0,0,0,0,0,0,0,1,1,1,0,0],
        [0,1,1,1,1,0,0,0,0,1,0,0],
        ])

print(f"\n\n2d array of type: {type(binary_image)}:")
print(binary_image)

labels = measure.label(binary_image)

print(f"\n\n2d array with connected blobs labelled of type {type(labels)}:")
print(labels)

def extract_blobs_from_labelled_array(labelled_array):
    """Return a list containing coordinates of pixels in each blob."""
    props = measure.regionprops(labelled_array)
    blobs = [p.coords for p in props]
    return blobs


if __name__ == "__main__":
    print("\n\nBeginning extract_blobs_from_labelled_array timing\n")
    print("Time taken:")
    print(
        timeit.timeit(
            'extract_blobs_from_labelled_array(labels)', 
            globals=globals(),
            number=1
            )
        )
    print("\n\n")

想法是这些孩子的值改变了HTML中的整数属性值，为此我做了如下代码

HTML：

Temperature: 40
busvoltageOUT1: 10.192
busvoltageOUT2: 0.872
current_mAOUT1: 372.3
current_mAOUT2: -0.1
loadvoltageOUT1: 10.22893
loadvoltageOUT2: 0.87197
object: "abracadabra"
shuntvoltageOUT1: 36.93
shuntvoltageOUT2: -0.03

JS：

    <div id = "progress-circle" class = "progress-circle" data-progress = "0" data-exact = "0"> </div>

我一年前编写了这段 Javascript 代码，它运行得很好，但随着最新的 Javascript 更新，我的代码停止工作。但是，我仍然找不到错误，控制台也不显示错误...

提前感谢您的帮助！

Answer 1

你的数据库结构是什么样的？您需要在ref()中输入您要查找的资源路径。

database.ref("/path/to/resource").once("value").then((snap) => {
  const data = snap.val()
  const loadvoltageOUT1 = data.loadvoltageOUT1;
  // Similarly get other fields

  const integer = loadvoltageOUT1.toFixed();
  const exact = loadvoltageOUT1.toFixed(2);


  var div = document.getElementById ("progress-circle");
  div.setAttribute("data-progress", integer);
  div.setAttribute("exact-data", exact);
  $('# progress-circle').attr('data-exact', exact);
        
  if (loadvoltageOUT1 <1) {
    $ (". VRango"). Text ("Battery Disconnected or Completely Damaged");
  }
});

您可以类似地获取指定路径中的其他字段。确保引用正确。

Answer 2

对于那些需要它的人，这就是您可以解决问题的方法（在唯一答案的帮助下），应该澄清您需要jquery

    // ------ BATTERY VOLTAGE ------
    
    // get selected information from firebase
    
   firebase.database (). ref (). on ('value', (snap) => {
   const data = snap.val ()
   const loadvoltageOUT1 = data.loadvoltageOUT1;
  
   // convert the obtained values to integral and exact numbers

   const integer = loadvoltageOUT1.toFixed ();
   const exact = loadvoltageOUT1.toFixed (2);
      
   // set the received information to the css circles

   var div = document.getElementById ("progress-circle1");
   div.setAttribute ("data-progress", integer);
   div.setAttribute ("exact-data", exact);
   $ ('# progress-circle'). attr ('data-exact', exact);
        
  
});

如何仅使用 JS、HTML 和 CSS 从 Firebase 检索和显示数据

2 个答案: