Yes I did think when writing the title that it reminded me of “Ruth Rendell Mysteries”.
There are times when I consider taking up a new career in bricklaying and this is one of them.
So I’m working with Node-Red and the UI (node-red-contrib-ui) which has a FUNCTION node which lets you use a weird combination of JavaScript and something called “Angular”. I am failing to get to grips with this one..
So right now the UI has a button – and it has a text box – but not on the same line – and this to me seems like an obvious marriage.
So Imagine the scenario.. you press the button which merely returns “1” to Node-Red so you know it has been pressed. Either as a result of that action or for other reasons you want the text on the right (or icons representing the text) to say – for the sake of example “Active”, “Sleep”,”Standby” – in other words an arbitrary message which is affected by the button press.
So here was my first attempt – using the “template” node in the UI.
<div layout=”row” layout-align=”space-between”>
<md-button class=”md-raised” ng-click=”send({payload: ‘1’})”>
Press
</md-button >
<p>
{{msg.payload}}
</p>
</div>
It all seemed obvious to me – you press the button and it sends “1” – you send an input to the node and it prints the incoming message.
At this point you will get a clear picture of just how far off the mark I am here – could be too much Christmas cheer or course.
Pressing the button returned “1” to Node-Red alright – however it also set the text on the right. Worse, sending a message “Active” to the node input put up the message as I needed – but ALSO sent that to the output. It just is NOT making sense to me. I want the button press to go back out – but incoming messages to go to that text area ONLY.
Here is my kluge to get around all of this.
The inject node on the left sends “Active” when pressed. The function (2nd left) copies this from msg.payload to msg2.payload. The modified template uses msg.payload2 for it’s text section.
<div layout=”row” layout-align=”space-between”>
<md-button class=”md-raised” ng-click=”send({payload: ‘1’})”>
Press
</md-button >
<p>
{{msg.payload2}}
</p>
</div>
And the last function only passes the message if it sees “1” in msg.payload.
Update: Even THAT doesn’t work… press the button – fine – press the inject – fine – press the button – it wipes the panel on the right!!
The template node in node-red-contrib-ui is clearly very powerful for creating user interface elements but I suspect it is going to take a variety of examples to give some of us the mental tools we need to make best use of it.
Any more takers on the above – there has to be a way to get this to work properly!