Manipulate v-color-picker in the template node

Dashboard
1

Hello everyone,

I am currently building my home automation with dashboard 2 and I would like to manage a color selection palette with v-color-picker from Vuetify.
The idea is to drive neopixel LEDs behind my television via an ESP32.
So I need to output the value of msg.payload to the template node output.
Here are the flows that I have set up but I cannot link the v-model to a color variable and manage to have my msg.payload updated as output.
Can you help me?

[
    {
        "id": "fafcb7bae0bd563f",
        "type": "debug",
        "z": "b1bb15bc7a86c740",
        "name": "Sortie couleur",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": true,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "payload",
        "statusType": "auto",
        "x": 440,
        "y": 140,
        "wires": []
    },
    {
        "id": "9fdb885e7e798ce6",
        "type": "ui-template",
        "z": "b1bb15bc7a86c740",
        "group": "d1d8c25ad191487a",
        "page": "",
        "ui": "",
        "name": "Color",
        "order": 2,
        "width": "3",
        "height": "1",
        "head": "",
        "format": "<template>\n  <v-app>\n    <v-container>\n      <!-- v-color-picker component -->\n      <v-color-picker v-model=\"color\" @input=\"onColorChange\" />\n\n      <!-- Afficher la couleur sélectionnée -->\n      <div class=\"mt-3\">\n        <p>Couleur sélectionnée: {{ color }}</p>\n        <div :style=\"{ backgroundColor: color, height: '50px', width: '50px' }\"></div>\n      </div>\n    </v-container>\n  </v-app>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      // Définir une couleur initiale (par exemple, un code hexadécimal)\n      color: '#FF5733', \n    };\n  },\n  methods: {\n    onColorChange(color) {\n      console.log('Couleur sélectionnée:', color); // Affiche la couleur dans la console\n    },\n  },\n};\n</script>\n\n<style scoped>\n/* Ajoute ici tes styles si besoin */\n</style>",
        "storeOutMessages": true,
        "passthru": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 450,
        "y": 80,
        "wires": [
            [
                "fafcb7bae0bd563f"
            ]
        ]
    },
    {
        "id": "8b4df773dbd29951",
        "type": "inject",
        "z": "b1bb15bc7a86c740",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "2",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "Gestion couleurs",
        "payload": "couleurs",
        "payloadType": "str",
        "x": 160,
        "y": 80,
        "wires": [
            [
                "9fdb885e7e798ce6",
                "b4abc239de1d9fef"
            ]
        ]
    },
    {
        "id": "b4abc239de1d9fef",
        "type": "debug",
        "z": "b1bb15bc7a86c740",
        "name": "sortie inject",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": true,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "jsonata",
        "x": 110,
        "y": 140,
        "wires": []
    },
    {
        "id": "d1d8c25ad191487a",
        "type": "ui-group",
        "name": "Lumières intérieures",
        "page": "28ceecc2dd1512f9",
        "width": "6",
        "height": "1",
        "order": 2,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "28ceecc2dd1512f9",
        "type": "ui-page",
        "name": "Gestion des lumières",
        "ui": "acf62d88f4bd3d87",
        "path": "/gestion des lumières",
        "icon": "home",
        "layout": "grid",
        "theme": "18acbce16a65bbb8",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 8,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "acf62d88f4bd3d87",
        "type": "ui-base",
        "name": "Maison",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "18acbce16a65bbb8",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#9ba50e",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#474747",
            "groupOutline": "#000000"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]
2

you could always just use a watch on the color variable

chrome_vQKHI18Ly9

<template>
  <v-app>
    <v-container>
      <v-color-picker v-model="color" />
      <div class="mt-3">
        <p>Couleur sélectionnée: {{ color }}</p>
        <div :style="{ backgroundColor: color, height: '50px', width: '50px' }"></div>
      </div>
    </v-container>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      color: '#FF5733', 
    };
  },
  watch: {
    color() {
      this.send({payload: this.color})
    }
  }
}
</script>

<style scoped>
/* Ajoute ici tes styles si besoin */
</style>

As for sending data to Node-RED from a template, that is this.send as documented here: Template ui-template | Node-RED Dashboard 2.0

3

Great, thank you very much, it works well, I'll keep the link for reference in future cases that I need. Thanks again

4

Hallo Udina,

I am trying to make your DB2 color picker work. As I am not very successful I would very much appreciate if you could share your littel demo flow from above with me.

thanks in advance
Hannes

5

Problem solved. :slightly_smiling_face:

info here vue color picker

<template>
  <div class="d-flex justify-space-around">
    <v-color-picker
      v-model="picker"
      elevation="15"
    ></v-color-picker>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const picker = ref(null)
</script>

<script>
  export default {
    data () {
      return {
        picker: null,
      }
    },
    watch: {
      picker() {
        this.send({payload: this.picker})
    }
  }    
  }
</script>

<style>
    /* define any styles here - supports raw CSS */
    .my-class {
        color: red;
    }
</style>