Dynamically hide or show custom UI node content

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:


  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
          case "hide_video":
             // Remove the video element from the DOM tree

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:

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 !!!

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

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.

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

1 Like