Button size using template node

Dashboard
1

Hi all!
I've create a button using the template node. The code to do this is the following:

<md-button class="vibrate filled touched bigfont rounded" style="background-color:black" ng-click="send({payload: msg.payload })"> 

<svg  width="260px" height="90px" version="1.1" viewBox="0 0 800 200">
 <g id="Button_Long">
  
  <rect fill="blue" width="800" height="200"/>
  <g ng-style="{fill: (msg.payload || 0) ? 'lime' : 'red'}">
    <rect width="800" height="200" rx="80" ry="80"/>
  </g>
  
  <rect fill="grey" x="11" y="10" width="778" height="180" rx="90" ry="90"/>
  <g ng-style="{fill: (msg.payload || 0) ? 'lime' : 'red'}">
      
    <text x="400" y="125" style="text-anchor:middle"  font-weight="bold" font-size="80" font-family="Arial">{{(msg.payload||0)? " OPEN " : "CLOSED"}} </text>
    </g>
  </g>
</svg>


</md-button>

In certain condition, I have the need to make invisible the entire button. How can I do? Which parameter have I to add? In which raw of the code? Sorry but I'm not a expert of this type of language.
Thanks in advance
Paolo

2

You can add an angular directive on any element (like your button), using syntax like this:
<md-button class="vibrate filled touched bigfont rounded" style="background-color:black" ng-if="msg.payload!=0" ng-click="send({payload: msg.payload })">

Check out the "ng-if" and other directives for more information

3

wonderful!
it is great!it works!
is there a way to hide a entire group in a dashboard?
thanks a lot shrickus!

4

hi shrickus,
trying your solution i'm noting that I have to refresh the browser page to make effective the changes in the button (due to different value associated to ng-if expression).
how can I update the page automatically as the other objects of the dashboard?
thanks

5

In the dashboard, any ui_group can be collapsed/expanded in-place by passing the right "control" msg -- such as those defined in this sample flow.

As for updating the page "automatically", I'm guessing you mean when new data arrives, you want to see it in some existing widget on the dashboard? If so, then it's just as simple as sending a new payload to whatever widget needs new content to be displayed. In your example, I guess clicking of the button sends the payload correctly, but does not update the display of the button to match? If so, you will need to route the output of the button back to it's own input port -- just be careful to not create an "infinite loop", which causes the cpu to spike and the machine to slow to a crawl...

6

I'm trying to apply the ng-if to an image (a traffic light) using the following code

<md-button class="vibrate filled touched bigfont rounded" style="background-color:white"  ng-if="msg.payload == '1'" ng-click="send({payload:'hide_done'})"> 
<svg .... here the image code
></svg>

</md-button>

The problem is the ng-if condition: it doesn't work when the msg.payload=1.
Do you have any idea to fix the problem?

Thanks a lot
Paolo

7

The javascript == operator should return true when comparing the number 1 to the string '1' -- but perhaps the ng-if expression evaluator does something slightly different... did you try removing the single quotes from the ng-if test? If so, did that make a difference? The other thing to try is to wrap the expression in curly braces (sorry, but i can't remember the syntax.. i always have to look it up).

For more information about what makes a valid angular "expression" and where you can use them, check out the Angular v1 docs site.

8

yes, I've tried removing the single quote, but unfortunately it doesn't change.
I can't understand where is the problem

9

Try to set size for template node to some fixed value. Unfortunately, auto size is failing in many cases. Looks like Dashboard is checking size of the content on first render and then don't change it later so if you have ng-if that initially renders your HTML invisible, then the whole md-card will have height: 0 and opacity: 0 no matter if your condition for ng-if will change later.

I've just tested that on my local NR instance to confirm that buggy behavior.

10

That is intentional and not buggy behaviour. Changing the size may cause the whole screen to rearrange its layout which would look horrible.

11

it looks like the problem is the expression.
with the following expression:
ng-if="msg.payload!=0"
it works!