Hello everyone !
In a D2 ui-template node, I created a button that opens a dialog containing two sliders and a switch ; I managed to dynamically change the slider values with two inject nodes, but when I change the slider values from the dashboard, I can't get their values out and into a debug node.
I'm having trouble with the " this.$socket.emit " I think, am I using it wrong ? (Sorry if this is a dumb question)
[
{
"id": "cb52285651c139ca",
"type": "ui-template",
"z": "4e58b6fb.8aa1b",
"group": "099be5983fda69d4",
"page": "",
"ui": "",
"name": "Bouton magasin",
"order": 0,
"width": "6",
"height": "1",
"head": "",
"format": "<template>\n <div>\n <v-btn\n :class=\"buttonClass\"\n @click=\"showDialog = true\"\n >Référence AAA</v-btn>\n\n <v-dialog v-model=\"showDialog\" max-width=\"600px\">\n <v-card>\n <v-card-title class=\"text-h5\">Référence AAA</v-card-title>\n <v-card-text>\n <v-row>\n <v-col cols=\"6\">\n <div>Gauche : {{ gaucheValue }}</div>\n <v-slider\n v-model=\"gaucheValue\"\n thumb-label=\"always\"\n step=\"1\"\n min=\"0\"\n max=\"2\"\n @change=\"sendValue('gauche', gaucheValue)\"\n ></v-slider>\n </v-col>\n <v-col cols=\"6\">\n <div>Droite : {{ droiteValue }}</div>\n <v-slider\n v-model=\"droiteValue\"\n thumb-label=\"always\"\n step=\"1\"\n min=\"0\"\n max=\"2\"\n @change=\"sendValue('droite', droiteValue)\"\n ></v-slider>\n </v-col>\n </v-row>\n <v-row>\n <v-col cols=\"12\">\n <v-switch\n v-model=\"ruptureSwitch\"\n label=\"Rupture\"\n @change=\"sendValue('rupture', ruptureSwitch)\"\n ></v-switch>\n </v-col>\n </v-row>\n </v-card-text>\n <v-card-actions>\n <v-btn color=\"blue darken-1\" text @click=\"showDialog = false\">Close</v-btn>\n </v-card-actions>\n </v-card>\n </v-dialog>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n showDialog: false,\n gaucheValue: 1,\n droiteValue: 1,\n ruptureSwitch: false,\n state: '', // Initial state\n };\n },\n computed: {\n buttonClass() {\n if (this.ruptureSwitch && this.gaucheValue + this.droiteValue === 0) {\n return 'greydisabled';\n } else if (!this.ruptureSwitch && this.gaucheValue + this.droiteValue === 0) {\n return 'red';\n } else if (this.ruptureSwitch) {\n return 'grey';\n } else {\n return 'green';\n }\n },\n },\n mounted() {\n this.$socket.on(\"msg-input:\" + this.id, (msg) => {\n this.gaucheValue = msg.gauche || this.gaucheValue;\n this.droiteValue = msg.droite || this.droiteValue;\n });\n },\n methods: {\n sendValue(type, value) {\n this.$socket.emit(\"msg-output\", { topic: type, payload: value });\n },\n },\n};\n</script>\n\n<style>\n.greydisabled {\n // pointer-events: none;\n background-color: grey;\n color: black;\n}\n\n.grey {\n background-color: grey;\n color: black;\n}\n\n.green {\n background-color: #55aa73;\n color: black;\n}\n\n.red {\n // pointer-events: none;\n background-color: #e14c42;\n color: black;\n}\n\n.switch {\n color: black;\n font-size: 1.3em;\n}\n</style>\n",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 360,
"y": 1260,
"wires": [
[
"799c9583a4639b69"
]
]
},
{
"id": "24692592e592a3ec",
"type": "inject",
"z": "4e58b6fb.8aa1b",
"name": "gauche 2",
"props": [
{
"p": "gauche",
"v": "2",
"vt": "num"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 180,
"y": 1260,
"wires": [
[
"cb52285651c139ca"
]
]
},
{
"id": "1840fea357e8c84a",
"type": "inject",
"z": "4e58b6fb.8aa1b",
"name": "droite 2",
"props": [
{
"p": "droite",
"v": "2",
"vt": "num"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 190,
"y": 1300,
"wires": [
[
"cb52285651c139ca"
]
]
},
{
"id": "799c9583a4639b69",
"type": "debug",
"z": "4e58b6fb.8aa1b",
"name": "debug 371",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 530,
"y": 1260,
"wires": []
},
{
"id": "099be5983fda69d4",
"type": "ui-group",
"name": "Référence XXX",
"page": "f7c84ba6694cf8fd",
"width": "6",
"height": "1",
"order": -1,
"showTitle": true,
"className": "cxxx",
"visible": "true",
"disabled": "false"
},
{
"id": "f7c84ba6694cf8fd",
"type": "ui-page",
"name": "MAG",
"ui": "f4139e7488bf5f07",
"path": "/MAG",
"icon": "home",
"layout": "grid",
"theme": "684392cc1527bd04",
"order": 2,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "f4139e7488bf5f07",
"type": "ui-base",
"name": "UI Name",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false
},
{
"id": "684392cc1527bd04",
"type": "ui-theme",
"name": "Theme Name",
"colors": {
"surface": "#7d7d7d",
"primary": "#0094ce",
"bgPage": "#a3a3a3",
"groupBg": "#dedede",
"groupOutline": "#dedede"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]
Thanks in advance !
