Button Row Node

[Toshi Bass]

Could someone explain to me in Idiot speak, how to change the icon for the Button Row Node (The icon must be one of (https://klarsys.github.io/angular-material-icons/).)

[Andrei Tătar]

Here are the steps:

1 Open https://klarsys.github.io/angular-material-icons/

2. Chose an icon from that page

3. Set the icon name in the icon field of the button

[Toshi Bass]

Aha supa-easy when you know how to do it ! That's brilliant.

How easy is it to show second icon in place of first after pressing it ?

[Andrei Tătar]

The button row doesn't have a state (yet) so the icon doesn't change.

It just generates a message with the specified payload when one of the buttons is clicked.

It wouldn't be very hard to have a state, but how would it work? Like a list of radio buttons (meaning only one of the buttons is pressed at a time)? Like a list of checkboxes (meaning all of the buttons could be pressed at a time)? How do you change the state from node-red? etc.

[Peter Scargill]

Ok.. .you asked... button row - well we already have radio buttons - so my suggestion would be not to change the icon but just the colour.  So perhaps when defining each button you leave a default or select an icon (it would be nice if that icon set actually had some home control icons - hot, cold etc) and maybe when the button is on it is in your choice of colour, when off is black? Just a thought.

Another option for buttons would be to allow for pushbuttons - ie they send something when you press them - and something else when you release them.... I note that this is available in BLYNK and so we may as well have the best of what others are doing.  

Incidentally, might be just me but a very popular use of sliders is for RGB control. A block with 3 short vertical sliders labelled RGB - with a red, green and blue slider - RGB, returning a single RGB value perhaps (usually a 3-byte number)...  just saying. PERSONALLY I now use CMYK or at least the 3 slider version - ie hue, saturation, brightness -  because non-techies find that easier to use... maybe have both options...

Pete.

[Toshi Bass]

I had a bit more time to mess with this ui , its actually its very cool and quite stable, I love the paragraph node, just for a laugh I pasted in some existing code I have that displays on a webpage a couple of picam feeds with servos attached it worked first time see attached, I could probably use the Button row to control the servos by why bother they work fine as they are. 

Anyway I can now see the uses of Button row and in reality maybe it doesn't need the icon to change perhaps Petes comment would be nice (incidentally I am also using blynk for mobile control of esp's and stuff but its no good for a desktop view), what becomes apparently to me is the ui is missing some kind of button with feedback, I like the Button widget but it needs to change colour and text when pressed and be able to pickup the current state from either a variable 0 or 1  or the state of a gpio pin high or low, I know you could use the Switch node but for what I am doing I need a push button to toggle a relay and tell me what the current state is.

Keep up the good work this ui is very young but already its quite impressive and can only get better.

Toshi

[Peter Scargill]

Make sure you have TODAY’s Node-Red changes and TODAY’s UYI updates – it just keeps getting better. I’m getting a feeling about this one… could be a winner.

--
You received this message because you are subscribed to a topic in the Google Groups "Node-RED UI" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red-contrib-ui/zBRHo2HGx3A/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red-contri...@googlegroups.com.
To post to this group, send email to node-red-...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red-contrib-ui/58ceae68-e6c9-4b55-a36b-28d0785a3690%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Andrei Tătar]

And here is an example using the template node to obtain a button row that changes icon/color/what you want.

<div flex layout="row" layout-align="space-around center">

    <md-button ng-repeat="b in buttons" class="md-icon-button" ng-click="click(b)">

        <ng-md-icon icon="{{msg.payload[b.payload]?b.icon2:b.icon}}"

                    ng-style="{color: msg.payload[b.payload]?b.color2:b.color}"></ng-md-icon>

    </md-button>

</div>

<script>

    scope.buttons = [{

        icon: 'pause', color: 'black',

        icon2: 'play_arrow', color2: 'red',

        payload: 'play',

    }, {

        icon: 'alarm', color: 'black',

        icon2: 'alarm', color2: 'red',

        payload: 'alarm',

    }];

    

    scope.click = function(b) {

        if (!this.msg) this.msg = {};

        if (!this.msg.payload) this.msg.payload = {};

        this.msg.payload[b.payload] = !this.msg.payload[b.payload];

        this.send(this.msg);

    }.bind(scope);

</script>