Progress circular

[nygma2004]

I am playing around with v-progress-circular in the template node. I added the below code to the template node and when I inject the percentage as a number in msg.payload it updates the progress:

Nice, this is the code in template:

<template>
    <v-progress-circular :rotate="-90" :size="100" :width="15" :model-value="value" color="red">
        {{ value }}%
    </v-progress-circular>
<template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                value: 0
            }
        },
        watch: {
            // watch for any changes of "count"
        },
        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>

Question 1: I understand that I expose the value field in data but I don't understand how my payload got mapped to the value field?

Question 2: I added a copy of this template to the group, given it a different color, and other properties, and also connected to my function node which increments the value for testing. But when I added the second template, the first stopped working. And when I change the first and deploy, it starts working and the other one stops. Why is that?

[Steve-Mcl]

@nygma2004

when I added the second template, the first stopped working. And when I change the first and deploy, it starts working and the other one stops. Why is that?

You would need to share a flow that demonstrate this. It is possible it is a bug but just as likely to be a PEBCAK issue

[nygma2004]

Sure, I added a function to the watch now based on an example I found:

[{"id":"1c3c50b902f0ce1a","type":"ui-template","z":"0e3249ddee2000e3","group":"15a4ba9c21910ccf","page":"","ui":"","name":"Teal progress ","order":0,"width":"2","height":"2","head":"","format":"<template>\n        <v-progress-circular :rotate=\"360\" :size=\"100\" :width=\"15\" :model-value=\"value\" color=\"teal\">\n            {{ value }}%\n        </v-progress-circular>\n</template>\n\n<script>\n    export default {\n        data() {\n            // define variables available component-wide\n            // (in <template> and component functions)\n            return {\n                value: 0\n            }\n        },\n        watch: {\n            // watch for any changes of \"count\"\n            msg: function(){        \n                if(this.msg.payload != undefined){\n                    if(typeof this.msg.payload === \"number\"){                   \n                        value = msg.payload;\n                    }                  \n                }\n            }\n        },\n        computed: {\n            // automatically compute this variable\n            // whenever VueJS deems appropriate\n        },\n        methods: {\n            // expose a method to our <template> and Vue Application\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","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":600,"y":2300,"wires":[[]]},{"id":"7ca0f74e2ea174b2","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"0.25","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":2300,"wires":[["e63f192e812d621c"]]},{"id":"e63f192e812d621c","type":"function","z":"0e3249ddee2000e3","name":"Increase value","func":"let value = context.get(\"value\") ?? 0;\n\nvalue++;\nif (value>100) value=0;\ncontext.set(\"value\", value);\n\nmsg.payload = value;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":390,"y":2300,"wires":[["1c3c50b902f0ce1a","c824f4b3c425f0ec"]]},{"id":"c824f4b3c425f0ec","type":"ui-template","z":"0e3249ddee2000e3","group":"15a4ba9c21910ccf","page":"","ui":"","name":"Red progress ","order":0,"width":"2","height":"2","head":"","format":"<template>\n    <v-progress-circular :rotate=\"-90\" :size=\"100\" :width=\"15\" :model-value=\"value\" color=\"red\">\n        {{ value }}%\n    </v-progress-circular>\n<template>\n\n<script>\n    export default {\n        data() {\n            // define variables available component-wide\n            // (in <template> and component functions)\n            return {\n                value: 0\n            }\n        },\n        watch: {\n            // watch for any changes of \"count\"\n            msg: function(){        \n                if(this.msg.payload != undefined){\n                    if(typeof this.msg.payload === \"number\"){                   \n                        value = msg.payload;\n                    }                  \n                }\n            }\n        },\n        computed: {\n            // automatically compute this variable\n            // whenever VueJS deems appropriate\n        },\n        methods: {\n            // expose a method to our <template> and Vue Application\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","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":600,"y":2340,"wires":[[]]},{"id":"15a4ba9c21910ccf","type":"ui-group","name":"Progress","page":"f4063f293f6a82bd","width":"6","height":"2","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"f4063f293f6a82bd","type":"ui-page","name":"Testing new design","ui":"cb79bc4520925e32","path":"/designtest","icon":"home","layout":"grid","theme":"0d92c765bfad87e6","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"cb79bc4520925e32","type":"ui-base","name":"My UI","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

[Steve-Mcl]

Sorry I should have said, I'm not in a position to check this out today (but I'm sure someone will pop in and have a look at some point)

[nygma2004]

It is not urgent, I am just playing with various components. Moved to timeline in the time being

[hotNipi]

This works fine for me. Also for copied instances.

<template>
        <v-progress-circular :rotate="-90" :size="100" :width="15" :model-value="value" color="teal">
            {{value}}
        </v-progress-circular>
</template>

<script>
    export default {
        data() {
            return {               
                value: 0               
            }
        },
        watch: {
            msg: function(){            
                if(this.msg.payload != undefined){                    
                    this.value = this.msg.payload                    
                }
            }
        }
    }
</script>

[Buckskin]

This also works (I believe this.value is the cure)

<template>
    <v-progress-circular :rotate="-90" :size="100" :width="15" :model-value="value" color="green">
        {{ value }}%
    </v-progress-circular>
<template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                value: 0
            }
        },

        watch: {
            // watch for any changes of "count"
            msg: function() {        

    
            }

        },

        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
            this.$socket.on("msg-input:" + this.id, (msg) => {
                if (msg.payload !== undefined){
                    if (typeof msg.payload === "number"){                   
                        this.value = msg.payload

                    }
                        
                }

            }
        },
        unmounted() {
            // code here when the component is removed from the Dashboard
            // i.e. when the user navigates away from the page
        }
    }
</script>

[nygma2004]

Thanks guys. Not sure what the issue was initially, it works for me as well. Definitely after adding this.value. Sometimes after I deploy I also need to refresh the browser, but that should be the least of my worries.