Dynamically hide or show custom UI node content

Developing Nodes
1

Hi folks,

In my new custom UI node I would like to be able to hide or show my component dynamically. We had a rather similar discussion some time ago, but then we wanted "always" to hide or show the content.

This is how it works:

image

  1. The UI node shows its content, i.e. a DIV element with a video element inside.
  2. The user clicks a button to hide the video.
  3. My UI node sends a message to my client-side to hide the content.
  4. In the client side, I hide the video element by removing it from its parent (i.e. the div element):
    // Watch input messages arriving from the Node-RED flow
$scope.$watch('msg', function(newVal, oldVal) {
   ...
   switch(newVal.payload) {
      case "show_video":
         // Add the video element to the DOM tree
         $scope.divElement.appendChild($scope.videoElement);
         break;
      case "hide_video":
         // Remove the video element from the DOM tree
         $scope.divElement.removeChild($scope.videoElement);
         break;
   }
})

As you can see in the screenshot, the video element is hidden but the empty space remains.
When I look in the Chrome inspector, I see indeed (while my div has height 100%) that the md-card element has fixed dimensions in pixels:

image
image777Ă—69 36.2 KB

Is there any way around this?

[EDIT] or is this against the whole md-card dimension mechanism of the dashboard. Should I instead workaround it by show a dummy image (e.g. like 'press to start playing ...')?

Thanks !!!
Bart

2

Yes fairly much against the design. Groups of nodes are a fixed size. You can hide the entire group or not. Having widgets resize can lead to the layout changing completely which would be very annoying.

1 Like
3

Can understand that! Will workaround it then by showing dummy content. The whole idea in this case is that I don't want to empty the smartphone battery, by always displaying video.

4

AFAIK smartphones are pretty efficient at showing video.. I can watch movies no problem. Its the data transfer that kills the battery

1 Like