Help with <script> w/ veutify components

Dashboard 2.0
1

I am trying to calculate the color attribute of a veutify component using

2

Hi @solanus,

What veutify component are you using? Are you trying to set a color or match the colors?

Grey

3

Sorry I’m not sure why but my initial post got cut off.

I am using the “circular progression” component to imitate a temperature gauge.

See below:


{{ msg.payload.temp }}

4

v-progress-circular
:rotate=“0”
:size=“260”
:width=“50”
:model-value=“msg.payload.temp”
color=“gaugeColor”

		{{ msg.payload.temp }}
	/v-progress-circular

script
export default {
data() {
return {
temp: {{ msg.payload.temp }},
}
},
calculated: {
// Generate a color for the temp gauge based on the temp
gaugeColor: function() {
if (this.temp >= 90) return ‘#DD2C00’;
if (this.temp >= 80) return ‘#FF6D00’;
if (this.temp >= 70) return ‘#FFAB00’;
if (this.temp >= 60) return ‘#FFD600’;
if (this.temp >= 50) return ‘#AEEA00’;
if (this.temp >= 40) return ‘#64DD17’;
if (this.temp >= 30) return ‘#00C853’;
if (this.temp >= 20) return ‘#00BFA5’;
if (this.temp >= 10) return ‘#00B8D4’;
return ‘#0091EA’;
}
}
}

5

^^*computed

Also to answer your question I’m trying to make the color of the component change depending on the value of msg.payload.temp

6

Understood. That makes sense. @joepavitt will probably be the best to answer this question.

I will be following along.

Grey

7

Can you export the code for this and paste here?

8

Hi @solanus,

Couple of things that needed addressing:

  • It’s computed, rather than calculated.
  • If you’re binding a variable to an attribute, you need to include a : before the attribute name, so color="gaugeColor" would become :color="gaugeColor"
  • I had to change the quotation marks you were using as Node-RED didn’t seem to like them, not sure if you copied that example from somewhere, or if typed out yourself?
  • Vue gets a little confused if you use msg.payload.temp as when you first load the chart, msg.payload does not exist, so it’s trying to read the property "temp" on a null value. Instead you can use "msg?.payload?.temp" which will check each level for whether it exists first, then bind the value if it does.

A full working version is as follows:

<template>
    <v-progress-circular
        :rotate="0" :size="260" :width="50" :model-value="msg?.payload?.temp" :color="gaugeColor">
        {{ msg?.payload?.temp }}
    </v-progress-circular>
</template>

<script>
export default {
    computed: {
        // Generate a color for the temp gauge based on the temp
        gaugeColor: function() {
             const temp = this.msg?.payload?.temp || 10
            if (temp >= 90) return "#DD2C00";
            if (temp >= 80) return "#FF6D00";
            if (temp >= 70) return "#FFAB00";
            if (temp >= 60) return "#FFD600";
            if (temp >= 50) return "#AEEA00";
            if (temp >= 40) return "#64DD17";
            if (temp >= 30) return "#00C853";
            if (temp >= 20) return "#00BFA5";
            if (temp >= 10) return "#00B8D4";
            return "#0091EA"
        }
    }
}
</script>

Note that I also removed the this.temp variable which wasn’t required as you can just read the msg.payload value directly.

13

Joe thanks for the detailed response, really appreciate it.

Makes a lot of sense!

1 Like
14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.