Ui-template node problems

[pvklink]

I finally got my two toggle buttons (DEBUG AND CAM) ready. And now i created two new challenges...

1. The size (height) of the new toggle button; i want this the same as my start button
2. The description on the toggle buttons; it now displays the value off the toggle state, but i like the button value to have another value.

For exampe, if the debug screen is hidden, the button must show "show debug". It now shows debug OFF...

[pvklink]

solved it partially , with a workaround

1. height and width with

<md-button class="md-cornered" style="width: 96px; height: 120px"
        ng-class="msg.payload=='On' ? 'md-accent md-raised ' : 'md-primary'"
        ng-click="msg.payload = (msg.payload=='On' ? 'Off' : 'On');send(msg);"
        title="CAM"
    >
    DEBUG {{msg.payload}}
 </md-button>

2. Hide field by making seperate groups for one or more fields. Groups can be hide/shown

3. Still dont have a solution for the text on the button; i want the text added with XXX for value A and YYY for value b of the payload

[afelix]

@pvklink

DEBUG {{msg.payload}}

For point 3, you’re now displaying “DEBUG “ followed by the contents of msg.payload.
You use a ternary operator for the ng attributes, but you can do the same here, as long as you understand the meaning of {{ foo }}

For example {{ msg.payload === ‘A’ ? ‘XXXX’ : msg.payload === ‘B’ ? ‘YYYY’ : ‘ZZZZ }}

[pvklink]

THANKS afelix, now it is complete!

@but i cant get it working, button is empty...

used

<md-button class="md-cornered" style="width: 96px; height: 120px;"
        ng-class="msg.payload=='On' ? 'md-accent md-raised ' : 'md-primary'"
        ng-click="msg.payload = (msg.payload=='On' ? 'Off' : 'On');send(msg);"
        title="CAM"
    >
{{ msg.payload === ‘On’ ? 'xxx' : msg.payload === ‘Off’ ? ‘yyy’ : ‘zzz' }}

    </md-button>

the input of the template node

[afelix]

That's probably because I was typing it on my phone which defaults to smart quotes and since I was cooking dinner I didn't take the time to fix it. Replace the single quotes by actual single quotes, and put the thing down you wanted to prefix it with.

[pvklink]

i hope dinner went ok..
I will try it, now going to sleep its sleeping time in holland...

[pvklink]

And it works!, see the result..
Thank you @afelix
Perhaps split the button text over 2 lines?

{{ msg.payload === 'On' ? 'Disable CAM' : msg.payload === 'Off' ? 'Enable CAM' : 'CAM' }}

Result

[afelix]

Het was ook bedtijd voor mij, maar dat ziet er goed uit.

Try adding a html break tag between the static word and the dynamic state:

<md-button class="md-cornered" style="width: 96px; height: 120px;" 
ng-class="msg.payload=='On' ? 'md-accent md-raised ' : 'md-primary'" 
ng-click="msg.payload = (msg.payload=='On' ? 'Off' : 'On');send(msg);" title="CAM" >
 {{ msg.payload === 'On' ? 'Disable' : msg.payload === 'Off' ? 'Enable' : 'invalid state' }} <br />CAM
</md-button>

With the break tag and standard term outside of the snippet to prevent the HTML from being escapes by mustache. As for the : 'invalid state' at the end, it can safely be removed to only show “CAM” on the button, it was in the example to show how it worked.

[pvklink]

yes it works, thanks for all your help @afelix. This project is finished.
Up to the next challenge!

<md-button class="md-cornered" style="width: 96px; height: 120px"
        ng-class="msg.payload=='On' ? 'md-accent md-raised ' : 'md-primary'"
        ng-click="msg.payload = (msg.payload=='On' ? 'Off' : 'On');send(msg);"
        title="CAM"
    >
Debug<br>
{{ msg.payload === 'On' ? 'Disable' : msg.payload === 'Off' ? 'Enable' : 'DEBUG' }}

 </md-button>