Div height 0 after deploy

Developing Nodes
1

Hi folks,

I would like to publish my node-red-contrib-ui-heatmap node on npm, but @dceejay reported that it raises following exception:

DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source height is 0.

Spend quite some time to it, but cannot figure it out. And the error occurs quite a lot, so it is a blocking issue ...

How my node works

  • I generate an (empty) DIV element, which fills the entire space that the dashboard provides me:
    function HTML(config) { 
     <div id="heatMapContainer` + config.id + `" style="width:100%; height:100%;" ng-init='init(` + configAsJson + `)'></div>`;
     return html;
 }
  • Then I pass this DIV element to the third-party heatmap library, which will add a CANVAS as a child element, that fills the enitire space of the DIV element:
    $scope.$watch('msg', function(msg) {
   var parentDiv = document.getElementById('heatMapContainer' + $scope.config.id);
                            
   if (!$scope.heatMapInstance) {
      $scope.h337Config = {
         container: parentDiv,
         ...
      }
                             
      $scope.heatMapInstance = h337.create($scope.h337Config);
   }
}

And that works fine: a heatmap is displayed and fills nicely the available space on the dashboard.

Remark: I wanted to create the heatmap in the initController function. However then the height was 0, resulting in the same error. So I moved my code here: as soon as the first message arrives, I create the heatmap instance, and store it on the AngularJs scope. When a next message arrives, the heatmap instance already exist (on the AngularJs scope) and it will not be created again ...

Error situation

When I change something in my heatmap node config screen and deploy it, then the $scope.heatMapInstance seems to be undefined.

QUESTION 1 : I assume that is normal behaviour, but can somebody please explain a bit how this works ???

Since the heatmap doesn't exist yet (on the AngularJs scope), a new heatmap instance will be created. But 'sometimes' the height of my DIV appears to be 0 (but most of the time it just contains the correct height in pixels):

image
image698Ă—549 63 KB

QUESTION 2 : Does anybody understand why this height is 0 and how I can workaround it???

Thanks a lot !!!!!
Bart

2

I don't 100% understand what is going wrong, but I have found a workaround (which is sufficient for me at this time):

1 Like