These 3 lines worked perfectly on Dashboard 1.
What do I have to write to get the same output with dashboard 2?
<div style="color:{{msg.color}}; margin:auto;" <i class="{{msg.icon}}" aria-hidden="true"></i> </div>
<div>
<center> <small><small><small>{{msg.payload}}</small></small></small> </center>
</div>
4 lines @juntiedt ![:smile: :smile:](https://emoji.discourse-cdn.com/twitter/smile.png?v=12)
I only just started experimenting with D2 - so better wait for others
1 Like
D2 uses VueJS. You should read up on how to pass variables to HTML attributes in the Vue docs. The D2 docs probably also have enough info for this as well.
<div :style="{ color: msg.color, margin: 'auto' }">
<i :class="msg.icon" aria-hidden="true"></i>
</div>
<div>
<center><small><small><small>{{ msg.payload }}</small></small></small></center>
</div>
Note however dashboard 2 does not use the old font awesome 4.7 but instead uses the much better MDI icons : Material Design Icons
1 Like
This might get you started but it's somewhat verbose:
<template>
<div>
<div :style="{ color: msg.color, margin: 'auto' }">
<i :class="['mdi', msg.icon || 'mdi-help']" aria-hidden="true"></i>
</div>
<div>
<center>
<small><small><small>{{ msg.payload }}</small></small></small>
</center>
</div>
</div>
</template>
<script>
export default {
data() {
return {
msg: {
payload: "Placeholder",
color: "black",
icon: "mdi-help"
}
};
},
mounted() {
this.$socket.on('msg-input:' + this.id, (msg) => {
this.msg = msg;
});
}
}
</script>
No need to have a custom on input listener to set this.msg
, we do that automatically for all ui-template
nodes: Template ui-template | Node-RED Dashboard 2.0
@Steve-Mcl has given the correct answer here, but we do also have details in the docs that may be helpful for the why: Template ui-template | Node-RED Dashboard 2.0
When I tried:
<template>
<div>
<div :style="{ color: msg.color, margin: 'auto' }">
<i :class="['mdi', msg.icon || 'mdi-help']" aria-hidden="true"></i>
</div>
<div>
<center>
<small><small><small>{{ msg.payload }}</small></small></small>
</center>
</div>
</div>
</template>
<script>
export default {
data() {
return {
msg: {
payload: "Placeholder",
color: "black",
icon: "mdi-help"
}
};
}
}
</script>
I found it wouldn't override the defaults I set with the values from the incoming msg so I had assumed that is what I needed.
Yeah, here you are defining a new msg
variable in your data()
, whoch overrides the one we build by default.
The best way to set defaults is to inject a message with the values. If you want those defaults everytime you view the page, you have two options:
- Wire a
ui-event
node, which emits an event on every page view. And pass the defaults as a message to this node.
- Use Vue's computed variables where you could have a variable
color
that returns msg.color || 'black'
. So, uses the injected color if its defined, otherwise, falls back to the default
Actually, you dont even need the computed variable, as you've already got that same structure inline for the icon.
So, just remove the msg
declaration in data()
and put the || 'black'
logic inline loke you do for the icon
Thank you for teaching me this, It was needed. It had not occurred to me to set the defaults like that with a ui-event
nodes. Way better for stuff with many variables like the main passion project I've been working on.
Many thanks for your support!
attached 2 pictures:
-
dashboard 1:
-
dashboard 2:
1 Like
Perhaps offtopic, but still relevant i think, could the default template code be modified, so that it includes more examples with the mounted
and methods
that show how to listen for incoming payload, because grabbing documentation each time is not ideal.
Here i refer to the this.$socket.on('msg-input:...'
functions.
Absolutelt relevant and a very good idea.
Couls you raise an issue please (I am away for the weekend and dont want to miss/forget this)
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.