# Manipulate v-color-picker in the template node

**URL:** <https://discourse.nodered.org/t/manipulate-v-color-picker-in-the-template-node/93072>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [11 November 2024 14:33 UTC](https://discourse.nodered.org/t/manipulate-v-color-picker-in-the-template-node/93072 "2024-11-11T14:33:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [11 November 2024 14:33 UTC](https://discourse.nodered.org/t/manipulate-v-color-picker-in-the-template-node/93072/1 "2024-11-11T14:33:05Z")

</div>

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?

```auto
[
    {
        "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"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 November 2024 18:13 UTC](https://discourse.nodered.org/t/manipulate-v-color-picker-in-the-template-node/93072/2 "2024-11-11T18:13:55Z")

</div>

you could always just use a `watch` on the `color` variable

![chrome_vQKHI18Ly9](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/7/e766dffa76fba55cdea2bb83f3a50dfbc509cd2a.gif)

```auto
<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](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#sending-messages-to-node-red)

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [11 November 2024 19:20 UTC](https://discourse.nodered.org/t/manipulate-v-color-picker-in-the-template-node/93072/3 "2024-11-11T19:20:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [14 November 2024 14:21 UTC](https://discourse.nodered.org/t/manipulate-v-color-picker-in-the-template-node/93072/4 "2024-11-14T14:21:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [15 November 2024 09:36 UTC](https://discourse.nodered.org/t/manipulate-v-color-picker-in-the-template-node/93072/5 "2024-11-15T09:36:35Z")

</div>

Problem solved. 🙂

info here [vue color picker](https://vuetifyjs.com/en/components/color-pickers/#elevation)

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 November 2024 09:37 UTC](https://discourse.nodered.org/t/manipulate-v-color-picker-in-the-template-node/93072/6 "2024-11-29T09:37:13Z")

</div>

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