I have used a text input node on my dashboard, where I can enter a message:
When I open now an extra dashboard, the same message appears there again automatically.
I can understand that this shared state will be the expected behaviour in most use cases.
However in some cases (e.g. enter a command, send a message, ...) it would be nice if the state wasn't shared. Just like the ui-contextmenu doesn't reply messages on new clients, because we don't want the contextmenu of another user to popup.
Is there any chance this feature will be added, or should I create my own template node with an input element inside?
But I just want to enter some text (e.g. a message, command, ...) on the first window and when I click a button then I want to do something on the server with that text. So I don't want to have my text appear on other browser windows...
I'm now wondering if this is because the dashboard is not multi-user? Perhaps this is not possible, since every widget has state on the server, that is shared by all clients. But with the contextmenu node we have worked around that, because when you open a contextmenu in browser 1 you don't want it to appear also on browser 2. Therefore I thought something like that was also possible with the text-input node somehow...
Perhaps I need to use a template button with an "input" element, but not sure how to set the correct style...
I'd be willing to bet it is. If you put a slider connected to a gauge you will see the same effece. Move the slider in one browser window and the slider and gauge will move in the other window.
(Hmmm, I wonder if this could be used in a magic trick?)
I assume I need to do some changes to the dashboard style (which @hotnipi had shared in the past on this forum), because I don't see any possibilities in the Template node config screen. But not sure how to do that ....
Can anybody guide this CSS noob in the right direction?
Hey @cinhcet,
I totally wasn't aware that this was possible. Thanks a lot for the tip!!!!!!!!
Will try that this evening...
I had considered that also, because I manipulate the storeFrontEndInputAsState for some of my UI nodes (e.g. ContextMenu node). Indeed sharing state doesn't make sense for those nodes. But I assume for the Input-node this flag value might depend on the use case. So you should be able to set it true or false (and to not break existing flows which use shared state), which means an extra checkbox on the config screen I suppose...
So - in the wider context - which other widgets could this sensibly apply to ? Thinking about it I can't think of any - as to my mind all others also double up as display type indicators and so you would always want them to represent the true backend state, whereas for text input I can see this limited use case for "input only" type usage - where leaving the old value around isn't much use. thoughts please.
Don't know if that is the best way to do that...
But as soon as I enter text, the label color becomes ugly blue for some reason, while it should be green (like in the standard Input node):
For a dashboard Input-node, I see this in my developer tools:
Do you have any idea how I can apply that theme color to my template?
Thanks Dave for at least taking this into consideration!
I absolutely agree that this only applies to input type usage. But I need to think about this, before asking you to implement something that perhaps nobody can/will use...
Because I'm afraid that I'm a bit cheating at the moment. I need to build a demo for a UI node, and lots of users might use that demo (simultaneously). So in fact I'm building a multi-user demo on a non-multi-user dashboard. So not the best option, but there is no other way for me to do it (since my UI node only runs in this dashboard)...
For now I will try to workaround it using the proposal from @cinhcet. Once my demo is up and running, I will discuss it here to see if we can find a standard solution...
Yes I had looked at the ui-input. That is where I got the idea to add nr-dashboard-textinput.
But I had no idea at all that an md-cardnested inside another md-card would work:
And it seems indeed to be working fine, for those who ever need it:
This is a great example.
However, how are you then grabbing the entered text? I haven't been able to work that out as I do not want to use a button but rather the same that NR does either by a tab key or enter key being pressed and do not know Angular well enough.
If anybody ever needs it, I had another Template node to display a button. In that Template node, I send the values of the Text Input fields to the server as a message (as soon as the button is clicked):
<md-button ng-click="onClick()">Send text to Node-RED</md-button>
<script>
(function(scope) {
scope.onClick= function() {
// Here I read the values from the my custom text input field (which needs to have id="my_unique_id")
var myTextInputElement = document.getElementById('my_unique_id').value || "My default text";
// Send a message on the output of the Button Template node, containing the value of the text input field
scope.send({
my_text: myTextInputElement
});
}
})(scope);
</script>
Remark: since this code snippet tries to find a text input element on your dashboard with id "my_unique_id", don't forget to apply that id to your text input element:
I copied pasted that code snippet too quickly last evening. I have now edited my code snippet above and added some explanation about "my_unique_id". Should work now.
Unfortunately I don't know what I have done wrong in that example. Hopefully somebody else can help us with this ...
@BartButenaers - I was getting closer after much Googling but I was still missing a final piece.
I will check this out further this afternoon but it appears to be just fine. From what I was reading keyCode is deprecated so event.key is the way to go.
This was the piece I was missing. I couldn't find any doc.
var inputElement = event.target || event.srcElement;
scope.send({payload: inputElement.value});
