节点红色仪表板：确定组的宽度和高度

Question

在 NR 仪表板中，我试图确定小部件组的宽度和高度：

var groupWidth = document.getElementById('Home_Test2_cards').offsetWidth;
var groupHeight = document.getElementById('Home_Test2_cards').offsetHeight;

它适用于groupWidth，但不适用于groupHeight。我发现一些参考资料表明，当设置为不可见时，div 不会返回其高度，但这里不是这种情况。有什么方法可以确定高度吗？

使用 jQuery：

调用 var groupHeight = $('#Home_Test2_cards').height(); 有效，但仍然只返回 0。

编辑：

Browser Screenshot

仪表板模板内容：

<script>
(function(scope) {
  scope.$watch('msg.payload', function(data) {
    if (data !== undefined) {
      imageObj.src=data;
    }
  });
}(scope));

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var groupWidth = document.getElementById('Home_Test2_cards').offsetWidth;
//var groupHeight = document.getElementById('Home_Test2_cards').offsetHeigth;
var groupHeight = $('#Home_Test2_cards').height();

console.log('Width:' + groupWidth);
console.log('Height:' + groupHeight);

var imageObj = new Image();
imageObj.onload= function() {
  var wRatio = groupWidth / imageObj.width;
  var hRatio = groupHeight / imageObj.height;
  var ratio = Math.min(wRatio, hRatio);
  context.drawImage(imageObj, 0, 0, canvas.width, canvas.height, 0, 0, imageObj.width*ratio, imageObj.height*ratio);
};
</script> 

<canvas id="myCanvas"></canvas>

根据上面的截图，我预计高度为 351。

Answer 1

node-red Dashboard 包含 JQuery 库，因此您应该可以使用：

var groupWidth = $('#Home_Test2_cards').width;
var groupHeight = $('#Home_Test2_cards').height;