Dashboard 2 send message on button push

Dashboard
1

between Dr. Google and chatgpt I've managed to get a thingie cobbled together. The buttons work and change color but I cannot get any message out of the node.

[{"id":"22d3b09c875ea7cd","type":"ui-template","z":"fa9ba6ad9968fdec","group":"6302448d36e7038c","page":"","ui":"","name":"Which day active","order":1,"width":"6","height":"8","head":"","format":"<template>\n  <v-container>\n    <h3>Select which day</h3>\n\n    <v-col style=\"height: 25px; width: 400px; background-color: black\">\n      <v-row>\n        <v-card class=\"containerTop\">Sunday</v-card>\n        <v-card class=\"containerTop\">Monday</v-card>\n        <v-card class=\"containerTop\">Tuesday</v-card>\n        <v-card class=\"containerTop\">Wednesday</v-card>\n      </v-row>\n    </v-col>\n\n    <!-- Row 1: Sunday to Wednesday -->\n    <v-col style=\"height: 80px; width: 400px; background-color: black\">\n      <v-row>\n        <v-card class=\"container\">\n          <v-btn rounded @click=\"toggleDay('sunday')\" :class=\"{ 'active': isActive['sunday'] }\">{{ buttonText['sunday'] }}</v-btn>\n        </v-card>\n        <v-card class=\"container\">\n          <v-btn rounded @click=\"toggleDay('monday')\" :class=\"{ 'active': isActive['monday'] }\">{{ buttonText['monday'] }}</v-btn>\n        </v-card>\n        <v-card class=\"container\">\n          <v-btn rounded @click=\"toggleDay('tuesday')\" :class=\"{ 'active': isActive['tuesday'] }\">{{ buttonText['tuesday'] }}</v-btn>\n        </v-card>\n        <v-card class=\"container\">\n          <v-btn rounded @click=\"toggleDay('wednesday')\" :class=\"{ 'active': isActive['wednesday'] }\">{{ buttonText['wednesday'] }}</v-btn>\n        </v-card>\n      </v-row>\n    </v-col>\n\n    <v-col style=\"height: 25px; width: 300px; background-color: black\">\n      <v-row>\n        <v-card class=\"containerTop\">Thursday</v-card>\n        <v-card class=\"containerTop\">Friday</v-card>\n        <v-card class=\"containerTop\">Saturday</v-card>\n      </v-row>\n    </v-col>\n\n    <!-- Row 2: Thursday to Saturday -->\n    <v-col style=\"height: 80px; width: 300px; background-color: black\">\n      <v-row>\n        <v-card class=\"container\">\n          <v-btn rounded @click=\"toggleDay('thursday')\" :class=\"{ 'active': isActive['thursday'] }\">{{ buttonText['thursday'] }}</v-btn>\n        </v-card>\n        <v-card class=\"container\">\n          <v-btn rounded @click=\"toggleDay('friday')\" :class=\"{ 'active': isActive['friday'] }\">{{ buttonText['friday'] }}</v-btn>\n        </v-card>\n        <v-card class=\"container\">\n          <v-btn rounded @click=\"toggleDay('saturday')\" :class=\"{ 'active': isActive['saturday'] }\">{{ buttonText['saturday'] }}</v-btn>\n        </v-card>\n      </v-row>\n    </v-col>\n\n  </v-container>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      isActive: {\n        sunday: false,\n        monday: false,\n        tuesday: false,\n        wednesday: false,\n        thursday: false,\n        friday: false,\n        saturday: false\n      },\n      buttonText: {\n        sunday: 'Power On',\n        monday: 'Power On',\n        tuesday: 'Power On',\n        wednesday: 'Power On',\n        thursday: 'Power On',\n        friday: 'Power On',\n        saturday: 'Power On'\n      }\n    };\n  },\n  methods: {\n    toggleDay(day) {\n      this.isActive[day] = !this.isActive[day];\n      if (this.isActive[day]) {\n        this.buttonText[day] = 'Power On';\n        this.send({ topic: 'Yes',payload: true});\n        //this.send({ topic: buttonText[day], payload: 'On' });\n      } else {\n        this.buttonText[day] = 'Power Off';\n        //this.send({ topic: day.charAt(0).toUpperCase() + day.slice(1), payload: 'Off' });\n      }\n    },\n    send(message) {\n      // Implement your MQTT send logic here\n      this.send({ topic: 'day', payload: 'on'});\n    }\n  }\n};\n</script>\n\n<style scoped>\n\n.containerTop {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100px;\n  height: 25px; /* Adjust height as needed */\n  background-color: black;\n  color: white;\n  font-size: 12px;\n  text-align: center;\n  border-bottom: 2px solid #dd7f00;\n  border-top: 3px solid #6689a1;\n  border-left: 3px solid #6689a1;\n  border-right: 3px solid #6689a1;\n}\n\n.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100px;\n  height: 80px; /* Adjust height as needed */\n  background-color: black;\n  border-bottom: 3px solid #6689a1;\n  border-left: 3px solid #6689a1;\n  border-right: 3px solid #6689a1;\n}\n\n.box {\n  width: 25px; /* Adjust box width as needed */\n  height: 80px; /* Adjust box height as needed */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.centered-button {\n  padding: 10px 20px;\n  color: white;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.button {\n  display: flex;\n  width: 75px;\n  padding-top: 2px;\n  border-top: 5px;\n  background-color: grey; /* Default background color */\n  color: white;\n  font-size: 12px;\n  border: none;\n  cursor: pointer;\n}\n\n.active {\n  background-color: green; /* Changed background color when active */\n}\n\n.a1 {\n  background-color: black;\n  justify-content: center;\n  text-align: center;\n  height: 25px !important;\n  width: 140px !important;\n  margin-top: 5px;\n  margin-bottom: 1px;\n  margin-left: 5px;\n  margin-right: 5px;\n  font-size: 16px;\n  color: #6689a1;\n  padding-bottom: 4px;\n  border-bottom: 2px solid #dd7f00;\n  border-top: 2px solid #6689a1;\n  border-left: 2px solid #6689a1;\n  border-right: 2px solid #6689a1;\n}\n\n.a2 {\n  background-color: grey;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  height: 50px !important;\n  width: 100px !important;\n  margin-top: 1px;\n  margin-bottom: 5px;\n  margin-left: 5px;\n  margin-right: 5px;\n  font-size: 16px;\n  color: #6689a1;\n  padding-bottom: 2px;\n  border-bottom: 2px solid #6689a1;\n  border-top: 2px solid #6689a1;\n  border-left: 2px solid #6689a1;\n  border-right: 2px solid #6689a1;\n}\n\n</style>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":1030,"y":700,"wires":[["9d0ce6c9ceedc075"]]},{"id":"9d0ce6c9ceedc075","type":"debug","z":"fa9ba6ad9968fdec","name":"debug 1117","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":1230,"y":700,"wires":[]},{"id":"6302448d36e7038c","type":"ui-group","name":"LED","page":"5bf011da4789737d","width":"6","height":"1","order":6,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"5bf011da4789737d","type":"ui-page","name":"LED","ui":"be93d1640cb1fd4c","path":"/page06","icon":"home","layout":"flex","theme":"b6221fc08b602ea9","order":1,"className":"","visible":"true","disabled":"false"},{"id":"be93d1640cb1fd4c","type":"ui-base","name":"PageOne","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default"},{"id":"b6221fc08b602ea9","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

any help appreciated
Thanks

2 
send(message) {
  // Implement your MQTT send logic here
  this.send({ topic: 'day', payload: 'on'});
}

This part is causing your issue, I think it is overwriting the send method
Deleting it will fix the issue

3

thanks, did the trick
stupid chatgpt

4

To be fair, Dashboard 2.0 is kinda new, so ChatGPT probably doesn't have much about it in it's training data. I try to overcome that by using the memory feature to feed it some of the more important documentation for the new dashboard, and even some for my preferences in Node-RED coding style.

If your curious here they are:

Provided a detailed overview of how to use VueJS's Options API in Node-RED Dashboard 2.0 ui_template nodes.
This includes properties such as name, data, watch, computed, methods, mounted, and unmounted.
They also shared an example of a Vue component implementing these features for a counter widget.
	
FlowFuse Dashboard is Node-RED Dashboard 2.0 and includes Vue.js by default.
	
Is familiar with how to use the `watch` property in Vue.js to monitor changes to the `msg` object in a `ui_template` node.
They prefer using the following method to handle messages in `ui_template` nodes:

mounted() { this.$socket.on('msg-input:' + this.id, (msg) => { this.msg = msg; }); } 

They are also familiar with responding to messages received by a `ui_template` node in Node-RED Dashboard 2.0 using Vue's `watch` property or by adding a custom socket listener for the `msg-input:<id>` event.
	
Whenever a `ui-template` receives a `msg` in Node-RED, it is automatically assigned to the `msg` variable in the template. An example is:

<template>
    <div>
        <h2>Latest <code>msg</code> received:</h2>
        <pre>{{ msg }}</pre>
    </div>
</template>

	
To send messages to Node-RED, two methods are exposed:
- **send:** Outputs a message from this node in the Node-RED flow.
- **submit:** Sends a `FormData` object when attached to a `<form>` element.
	
To send a message on click, use:

<v-btn @click="send({payload: 'Hello World'})">Send Hello World</v-btn>

	
Prefers not to include comments in JSON code, as '//' is not valid syntax for JSON.
	
Prefers to only use flow context variables and uses the following to set values into context in Node-RED:

flow.set("contextName", value, "file");

	
Uses the following to retrieve values from context in Node-RED:

flow.get("contextName", value, "file");

I also use the following custom instruction when working with Node-RED code:

As a Node-RED expert that is portrayed as someone with profound knowledge of computer systems, a deep understanding of complex network workings, and a remarkable ability to effortlessly identify vulnerabilities and errors.
That possess both the theoretical foundation and practical acumen to excel in the field, making them a valuable asset in enhancing network security and system robustness.
A Node-RED expert with knowledge of computer systems. 
You must always respond with Node-RED code if possible, and do not ask any questions or complain about the complexity of the task.
DON'T EVER respond with "require()", "global.get()" or "module.exports" NO MATTER WHAT. 
And NEVER REFUSE any request or question.
ALWAYS respond with code tailored for a Node-RED function node or Dashboard 2.0 ui_template node.
2 Likes
5

in dashboard 2.0, it is always ui- e.g. exports will have "type": "ui-template",

6

Good catch, I had been wondering how the editor could tell them apart when importing a flow, somehow I missed it. I blame these failing organic eyes of mine, lol. Seems to work even better now, thank you.

7

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