Dashboard 2 template

[juntiedt]

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>

[marcus-j-davies]

4 lines @juntiedt

I only just started experimenting with D2 - so better wait for others

[TotallyInformation]

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.

[Steve-Mcl]

<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

[HaroldPetersInskipp]

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>

[joepavitt]

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

[joepavitt]

@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

[HaroldPetersInskipp]

@joepavitt

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

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.

[joepavitt]

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:

1. Wire a ui-event node, which emits an event on every page view. And pass the defaults as a message to this node.
2. 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

[joepavitt]

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

[HaroldPetersInskipp]

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.

[juntiedt]

Many thanks for your support!
attached 2 pictures:

1. dashboard 1:
   

   

2. dashboard 2:
   

   

[bakman2]

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.

[joepavitt]

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)