Help with Ui-template node (Dashboard 2.0)

General
1

Hi

I´m pretty new to Node-Red and coding in general and i was wondering if someone could point me in the right direction. I´m trying to get the "v-badge" to change colour depending on the value of msg.payload but I´m kinda stuck on how to do this.
I have tried to read the documentation but this has not help me succeed, anyone here that can show me an example ?

[
    {
        "id": "4b4e4e46b683846c",
        "type": "ui-template",
        "z": "ae80617df141ddb4",
        "group": "5c66023267e5559e",
        "page": "",
        "ui": "",
        "name": "used",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n  <v-toolbar color=\"white\">\n    <v-spacer></v-spacer>\n\n    <v-btn class=\"text-none\" stacked @click=\"send({payload: 'Sensor 1 - Settings'})\">\n      <v-badge :color=\"badgeColor\" dot>\n        <v-icon large>mdi-wrench</v-icon>\n      </v-badge>\n    </v-btn>\n\n    <v-spacer></v-spacer>\n  </v-toolbar>\n</template>\n\n<script>\n    export default {\n        data() {\n            // define variables available component-wide\n            // (in <template> and component functions)\n            \n        },\n        watch: {\n            // watch for any changes of \"count\"\n            \n        },\n        computed: {\n            // automatically compute this variable\n            // whenever VueJS deems appropriate\n            \n        },\n        methods: {\n            // expose a method to our <template> and Vue Application\n            \n        },\n        mounted() {\n            // code here when the component is first loaded\n        },\n        unmounted() {\n            // code here when the component is removed from the Dashboard\n            // i.e. when the user navigates away from the page\n        }\n    }\n</script>\n<style>\n    /* define any styles here - supports raw CSS */\n    \n</style>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1190,
        "y": 2840,
        "wires": [
            []
        ]
    },
    {
        "id": "5c66023267e5559e",
        "type": "ui-group",
        "name": "Table Cell Types",
        "page": "bbc7b44a426b2b01",
        "width": "12",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "bbc7b44a426b2b01",
        "type": "ui-page",
        "name": "UI Table Example",
        "ui": "fec96c46c06bcf70",
        "path": "/table",
        "icon": "table",
        "layout": "grid",
        "theme": "c2ff5ba1f92a0f0e",
        "order": 5,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "fec96c46c06bcf70",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "c2ff5ba1f92a0f0e",
        "type": "ui-theme",
        "name": "Default",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]
2

Hi

Try this, i added the variable necessary and the method to process the messages.

It expects the color in msg.payload, like:

msg.payload = "red"

<template>
  <v-toolbar color="white">
    <v-spacer></v-spacer>
    <v-btn class="text-none" stacked @click="send({payload: 'Sensor 1 - Settings'})">
      <v-badge :color="badgeColor" dot>
        <v-icon large>mdi-wrench</v-icon>
      </v-badge>
    </v-btn>

    <v-spacer></v-spacer>
  </v-toolbar>
</template>

<script>
    export default {
    data () {
      return {
                // define variables available component-wide
                badgeColor: 'red'
            }
        },
        watch: {
            // watch for messages received from NodeRed
            msg: function() {
                if(this.msg.payload != undefined){
                    this.badgeColor = this.msg.payload;
                }
            }
            
        },
        computed: {
            // automatically compute this variable
            // whenever VueJS deems appropriate
            
        },
        methods: {
            // expose a method to our <template> and Vue Application
            
        },
        mounted() {
            // code here when the component is first loaded
        },
        unmounted() {
            // code here when the component is removed from the Dashboard
            // i.e. when the user navigates away from the page
        }
    }
</script>
<style>
    /* define any styles here - supports raw CSS */
    
</style>
3

Works like a charm, thanks for pointing me in the right direction!

1 Like
4

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