Request for independence of entry and exit from MSG

[diegodamacenosantos]

Description

I would like to request the independence of incoming and outgoing messages from the ui-template node. Currently, if I expel a msg.payload.state message, it is recorded and can be retrieved when the page is reloaded, but if I send a msg.payload.power to the node, it deletes all saved messages and when the node is reloaded, I do not recover them the state. I will provide the code for the air element I am creating for analysis.

[ { "id": "08d418f6c50ce6e4", "type": "ui-template", "z": "9a66516c0bb63179", "group": "3c42623b2836b722", "page": "", "ui": "", "name": "ar condicionado", "order": 0, "width": "1", "height": "1", "head": "", "format": "<template>\n <div class=\"contaner_ar_condicionado_3\">\n <div class=\"group_title_icon_ar_condicionado_3\">\n <div class=\"title_ar_condicionado_3\">\n {{ inteiro }}° - Ar Condicionado\n <v-icon class=\"icon_state_ar_condicionado_3\" ref=\"icon_state_ar_condicionado_3\">{{ icon_state }}</v-icon>\n </div>\n </div>\n <div class=\"group_buttons_ar_condicionado_3\">\n <v-btn class=\"button_ar_condicionado_3\" variant=\"text\" @click=\"soma\">\n <v-icon class=\"icon_ar_condicionado_3\">mdi-plus-thick</v-icon>\n </v-btn>\n <v-btn class=\"button_ar_condicionado_3\" variant=\"text\" @click=\"alternar\">\n <v-icon class=\"icon_ar_condicionado_3\" ref=\"icon_ar_condicionado_3\">mdi-power</v-icon>\n </v-btn>\n <v-btn class=\"button_ar_condicionado_3\" variant=\"text\" @click=\"subtracao\">\n <v-icon class=\"icon_ar_condicionado_3\">mdi-minus</v-icon>\n </v-btn>\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n value: '',\n inteiro: 16,\n memoria: \"\",\n icon_state: \"mdi-checkbox-blank-circle\"\n };\n },\n mounted() { \n this.$socket.on('widget-load:' + this.id, (msg) => {\n this.value = msg.payload.state;\n this.inteiro = msg.payload.selecao;\n if (this.inteiro == 0) {\n this.inteiro = 16;\n } else {\n this.inteiro = msg.payload.selecao;\n }\n if (this.value == \"ON\") {\n this.on();\n } else {\n this.off();\n }\n });\n },\n methods: {\n alternar() {\n if (this.value === 'ON') {\n this.off(); \n this.value = \"OFF\";\n this.inteiro = 16;\n this.send({ payload: { state: \"OFF\", selecao: 0 }}); \n } else {\n this.on(); \n this.value = \"ON\";\n this.send({ payload: { state: \"ON\", selecao: 16 }}); \n }\n },\n soma() {\n if (this.inteiro < 30) {\n this.on(); \n this.value = \"ON\";\n this.inteiro++;\n setTimeout(() => { \n if (this.inteiro != this.memoria) {\n this.memoria = this.inteiro;\n this.send({ payload: { state: \"ON\", selecao: this.inteiro }});\n } else {\n this.memoria = this.inteiro;\n }\n }, 3000); \n }\n },\n subtracao() {\n if (this.inteiro > 16) {\n this.on(); \n this.value = \"ON\";\n this.inteiro--;\n setTimeout(() => {\n if (this.inteiro != this.memoria) {\n this.memoria = this.inteiro;\n this.send({ payload: { state: \"ON\", selecao: this.inteiro }});\n } else {\n this.memoria = this.inteiro;\n }\n }, 3000); \n } else {\n this.off(); \n this.value = \"OFF\";\n this.send({ payload: { state: \"OFF\", selecao: 0 }}); \n }\n },\n on() { \n this.$refs.icon_ar_condicionado_3.$el.style.color = '#32CD32'; \n },\n off() { \n this.$refs.icon_ar_condicionado_3.$el.style.color = '#A9A9A9';\n },\n stateOn() {\n this.$refs.icon_state_ar_condicionado_3.$el.style.color = '#32CD32';\n },\n stateOff() {\n this.$refs.icon_state_ar_condicionado_3.$el.style.color = '#A9A9A9';\n }\n },\n watch: {\n msg: function() { \n if (this.msg.topic.power > 15) {\n this.stateOn();\n } else if (this.msg.topic.power <= 15) {\n this.stateOff();\n }\n }\n }\n}\n</script>\n\n<style>\n.contaner_ar_condicionado_3 {\n display: flex;\n margin: auto;\n flex-direction: column;\n height: 75px;\n width: 225px;\n background-color: #4F4F4F;\n border: 1px solid #000000;\n border-radius: 18px;\n}\n\n.group_title_icon_ar_condicionado_3 {\n display: flex; \n align-items: center; \n margin: 3px auto 0px auto;\n}\n\n.group_buttons_ar_condicionado_3 {\n display: flex;\n justify-content: space-around; \n margin: 5px auto auto auto;\n}\n\n.button_ar_condicionado_3 {\n background-color: transparent;\n}\n\n.icon_ar_condicionado_3 {\n font-size: 30px;\n}\n\n.icon_state_ar_condicionado_3 {\n font-size: 14px;\n margin-left: 8px; \n}\n\n.title_ar_condicionado_3 {\n font-size: 14px;\n display: flex;\n align-items: center;\n}\n</style>\n", "storeOutMessages": true, "passthru": false, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 400, "y": 4420, "wires": [ [ "e26a61ea5b6ba0f9" ] ] }, { "id": "3c42623b2836b722", "type": "ui-group", "name": "Refrigeração", "page": "c4dcb127abec7894", "width": "4", "height": "1", "order": -1, "showTitle": true, "className": "", "visible": "true", "disabled": "false" }, { "id": "c4dcb127abec7894", "type": "ui-page", "name": "Casa", "ui": "85df8d80890b47f2", "path": "/casa", "icon": "home", "layout": "flex", "theme": "5732a03e0ac74c0e", "order": 2, "className": "", "visible": "true", "disabled": "false" }, { "id": "85df8d80890b47f2", "type": "ui-base", "name": "Base", "path": "/dashboard", "includeClientData": true, "acceptsClientConfig": [ "ui-notification", "ui-control" ], "showPathInSidebar": false, "navigationStyle": "default" }, { "id": "5732a03e0ac74c0e", "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" } } ]

Have you provided an initial effort estimate for this issue?

I can not provide an initial effort estimate

[colinl]

The trick at the moment is to save the state in context and add it in to incoming messages.

[diegodamacenosantos]

Visually illustrate it for me, please.

[colinl]

Add a node on the output of the template that saves the state data from msg.state, or wherever you have put it, into flow context. Then add another node on the input of the template that loads the flow context data into msg.data before passing it to the template.