Hi,
@Paul-Reed , thanks
after getting a little bit more experience what the browser does on refresh,
and how the template works, I changed the template button code.
It now keeps the different states after refresh.
[{"id":"459d628e7e182030","type":"ui-template","z":"675c06697bd9d35c","group":"574599296b7cf11f","name":"my ui-template Button 1","order":1,"width":"1","height":"1","head":"","format":"<template>\n <div class=\"container_shutter\">\n <div class=\"title_shutter\">{{labellevel}}</div>\n <v-btn class=\"button_shutter\" size=\"small\" :color=\"icon_color\" @click=\"onClick()\" icon>\n <v-img :src=\"shutter_icon\" height=32 width=32> \n </v-btn>\n </div>\n</template>\n\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n state: \"\", \n //state: \"open\", // !? it does not keep state open,does not enter watch state \n shutter_icon: \"/window-shutter-closing.svg\",\n labellevel: \"Room 1\",\n icon_color: \"yellow\",\n }\n },\n watch: {\n // watch for message\n msg: function () {\n console.log(`!!! watch msg: Message received: ${JSON.stringify(this.msg)}`)\n if(this.msg.payload != undefined) {\n this.state=this.msg.payload;\n }\n },\n // watch for any change of state\n state: function () {\n console.log(`!!! watch state: state: ${JSON.stringify(this.state)}`);\n switch(this.state)\n {\n case \"open\":\n this.shutter_icon=\"/window-shutter-open.svg\";\n this.icon_color=\"yellow\"\n break;\n case \"closing\":\n this.shutter_icon=\"/window-shutter-closing.svg\";\n this.icon_color=\"blue\";\n break;\n case \"closed\":\n this.shutter_icon=\"/window-shutter.svg\";\n this.icon_color=\"grey\";\n break;\n case \"openup\":\n this.shutter_icon=\"/window-shutter-openup.svg\";\n this.icon_color=\"orange\";\n break;\n }\n }\n }, \n methods: {\n // expose a method to our <template> and Vue Application\n onClick: function () {\n console.log(`!!! onClick: Message received: ${JSON.stringify(this.msg)}`)\n switch(this.state)\n {\n case \"open\":\n this.state=\"closing\";\n break;\n case \"closing\":\n this.state=\"closed\";\n break;\n case \"closed\":\n this.state=\"openup\";\n break;\n case \"openup\":\n this.state=\"open\";\n break;\n default: \n this.state=\"open\";\n break;\n\n }\n this.send({payload: this.state});\n }\n },\n }\n</script>\n\n\n<style>\n .container_shutter {\n display: grid;\n border: 1px solid #000000;\n }\n \n .title_shutter {\n margin: auto;\n color: white;\n }\n \n .button_shutter {\n display: grid;\n margin: auto;\n border: 1px solid #000000;\n border-radius: 12px;\n font-size: 14px;\n }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":630,"y":280,"wires":[["b089902018dfe292"]]},{"id":"b089902018dfe292","type":"debug","z":"675c06697bd9d35c","name":"debug 34","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":840,"y":280,"wires":[]},{"id":"79c6d05699c37e32","type":"inject","z":"675c06697bd9d35c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"open","payloadType":"str","x":350,"y":280,"wires":[["459d628e7e182030"]]},{"id":"0f3509c2933094e6","type":"inject","z":"675c06697bd9d35c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"closed","payloadType":"str","x":350,"y":320,"wires":[["459d628e7e182030"]]},{"id":"513f8efc8d26b70f","type":"inject","z":"675c06697bd9d35c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"openup","payloadType":"str","x":350,"y":360,"wires":[["459d628e7e182030"]]},{"id":"da050a532a07c74c","type":"inject","z":"675c06697bd9d35c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"closing","payloadType":"str","x":350,"y":400,"wires":[["459d628e7e182030"]]},{"id":"34e7046ccd59493d","type":"ui-template","z":"675c06697bd9d35c","group":"574599296b7cf11f","name":"my ui-template Button 2","order":2,"width":"1","height":"1","head":"","format":"<template>\n <div class=\"container_shutter\">\n <div class=\"title_shutter\">{{labellevel}}</div>\n <v-btn class=\"button_shutter\" size=\"small\" :color=\"icon_color\" @click=\"onClick()\" icon>\n <v-img :src=\"shutter_icon\" height=32 width=32> \n </v-btn>\n </div>\n</template>\n\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n state: \"\", \n //state: \"open\", // !? it does not keep state open,does not enter watch state \n shutter_icon: \"/window-shutter-closing.svg\",\n labellevel: \"Room 2\",\n icon_color: \"yellow\",\n }\n },\n watch: {\n // watch for message\n msg: function () {\n console.log(`!!! watch msg: Message received: ${JSON.stringify(this.msg)}`)\n if(this.msg.payload != undefined) {\n this.state=this.msg.payload;\n }\n },\n // watch for any change of state\n state: function () {\n console.log(`!!! watch state: state: ${JSON.stringify(this.state)}`);\n switch(this.state)\n {\n case \"open\":\n this.shutter_icon=\"/window-shutter-open.svg\";\n this.icon_color=\"yellow\"\n break;\n case \"closing\":\n this.shutter_icon=\"/window-shutter-closing.svg\";\n this.icon_color=\"blue\";\n break;\n case \"closed\":\n this.shutter_icon=\"/window-shutter.svg\";\n this.icon_color=\"grey\";\n break;\n case \"openup\":\n this.shutter_icon=\"/window-shutter-openup.svg\";\n this.icon_color=\"orange\";\n break;\n }\n }\n }, \n methods: {\n // expose a method to our <template> and Vue Application\n onClick: function () {\n console.log(`!!! onClick: Message received: ${JSON.stringify(this.msg)}`)\n switch(this.state)\n {\n case \"open\":\n this.state=\"closing\";\n break;\n case \"closing\":\n this.state=\"closed\";\n break;\n case \"closed\":\n this.state=\"openup\";\n break;\n case \"openup\":\n this.state=\"open\";\n break;\n default: \n this.state=\"open\";\n break;\n\n }\n this.send({payload: this.state});\n }\n },\n }\n</script>\n\n\n<style>\n .container_shutter {\n display: grid;\n border: 1px solid #000000;\n }\n \n .title_shutter {\n margin: auto;\n color: white;\n }\n \n .button_shutter {\n display: grid;\n margin: auto;\n border: 1px solid #000000;\n border-radius: 12px;\n font-size: 14px;\n }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":630,"y":320,"wires":[[]]},{"id":"2c7ea21ca52dfe73","type":"ui-template","z":"675c06697bd9d35c","group":"574599296b7cf11f","name":"my ui-template Button 3","order":3,"width":"1","height":"1","head":"","format":"<template>\n <div class=\"container_shutter\">\n <div class=\"title_shutter\">{{labellevel}}</div>\n <v-btn class=\"button_shutter\" size=\"small\" :color=\"icon_color\" @click=\"onClick()\" icon>\n <v-img :src=\"shutter_icon\" height=32 width=32> \n </v-btn>\n </div>\n</template>\n\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n state: \"\", \n //state: \"open\", // !? it does not keep state open,does not enter watch state \n shutter_icon: \"/window-shutter-closing.svg\",\n labellevel: \"Room 3\",\n icon_color: \"yellow\",\n }\n },\n watch: {\n // watch for message\n msg: function () {\n console.log(`!!! watch msg: Message received: ${JSON.stringify(this.msg)}`)\n if(this.msg.payload != undefined) {\n this.state=this.msg.payload;\n }\n },\n // watch for any change of state\n state: function () {\n console.log(`!!! watch state: state: ${JSON.stringify(this.state)}`);\n switch(this.state)\n {\n case \"open\":\n this.shutter_icon=\"/window-shutter-open.svg\";\n this.icon_color=\"yellow\"\n break;\n case \"closing\":\n this.shutter_icon=\"/window-shutter-closing.svg\";\n this.icon_color=\"blue\";\n break;\n case \"closed\":\n this.shutter_icon=\"/window-shutter.svg\";\n this.icon_color=\"grey\";\n break;\n case \"openup\":\n this.shutter_icon=\"/window-shutter-openup.svg\";\n this.icon_color=\"orange\";\n break;\n }\n }\n }, \n methods: {\n // expose a method to our <template> and Vue Application\n onClick: function () {\n console.log(`!!! onClick: Message received: ${JSON.stringify(this.msg)}`)\n switch(this.state)\n {\n case \"open\":\n this.state=\"closing\";\n break;\n case \"closing\":\n this.state=\"closed\";\n break;\n case \"closed\":\n this.state=\"openup\";\n break;\n case \"openup\":\n this.state=\"open\";\n break;\n default: \n this.state=\"open\";\n break;\n\n }\n this.send({payload: this.state});\n }\n },\n }\n</script>\n\n\n<style>\n .container_shutter {\n display: grid;\n border: 1px solid #000000;\n }\n \n .title_shutter {\n margin: auto;\n color: white;\n }\n \n .button_shutter {\n display: grid;\n margin: auto;\n border: 1px solid #000000;\n border-radius: 12px;\n font-size: 14px;\n }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":630,"y":360,"wires":[[]]},{"id":"a1777c194605532c","type":"ui-template","z":"675c06697bd9d35c","group":"574599296b7cf11f","name":"my ui-template Button 4","order":4,"width":"1","height":"1","head":"","format":"<template>\n <div class=\"container_shutter\">\n <div class=\"title_shutter\">{{labellevel}}</div>\n <v-btn class=\"button_shutter\" size=\"small\" :color=\"icon_color\" @click=\"onClick()\" icon>\n <v-img :src=\"shutter_icon\" height=32 width=32> \n </v-btn>\n </div>\n</template>\n\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n state: \"\", \n //state: \"open\", // !? it does not keep state open,does not enter watch state \n shutter_icon: \"/window-shutter-closing.svg\",\n labellevel: \"Room 4\",\n icon_color: \"yellow\",\n }\n },\n watch: {\n // watch for message\n msg: function () {\n console.log(`!!! watch msg: Message received: ${JSON.stringify(this.msg)}`)\n if(this.msg.payload != undefined) {\n this.state=this.msg.payload;\n }\n },\n // watch for any change of state\n state: function () {\n console.log(`!!! watch state: state: ${JSON.stringify(this.state)}`);\n switch(this.state)\n {\n case \"open\":\n this.shutter_icon=\"/window-shutter-open.svg\";\n this.icon_color=\"yellow\"\n break;\n case \"closing\":\n this.shutter_icon=\"/window-shutter-closing.svg\";\n this.icon_color=\"blue\";\n break;\n case \"closed\":\n this.shutter_icon=\"/window-shutter.svg\";\n this.icon_color=\"grey\";\n break;\n case \"openup\":\n this.shutter_icon=\"/window-shutter-openup.svg\";\n this.icon_color=\"orange\";\n break;\n }\n }\n }, \n methods: {\n // expose a method to our <template> and Vue Application\n onClick: function () {\n console.log(`!!! onClick: Message received: ${JSON.stringify(this.msg)}`)\n switch(this.state)\n {\n case \"open\":\n this.state=\"closing\";\n break;\n case \"closing\":\n this.state=\"closed\";\n break;\n case \"closed\":\n this.state=\"openup\";\n break;\n case \"openup\":\n this.state=\"open\";\n break;\n default: \n this.state=\"open\";\n break;\n\n }\n this.send({payload: this.state});\n }\n },\n }\n</script>\n\n\n<style>\n .container_shutter {\n display: grid;\n border: 1px solid #000000;\n }\n \n .title_shutter {\n margin: auto;\n color: white;\n }\n \n .button_shutter {\n display: grid;\n margin: auto;\n border: 1px solid #000000;\n border-radius: 12px;\n font-size: 14px;\n }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":630,"y":400,"wires":[[]]},{"id":"574599296b7cf11f","type":"ui-group","name":"group1","page":"2f76f5e68d2a1098","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"2f76f5e68d2a1098","type":"ui-page","name":"test","ui":"91ac914334bc2f74","path":"/page4","icon":"home","layout":"grid","theme":"713e504734925435","order":4,"className":"","visible":true,"disabled":"false"},{"id":"91ac914334bc2f74","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default"},{"id":"713e504734925435","type":"ui-theme","name":"HN Theme","colors":{"surface":"#5c5c5c","primary":"#0094ce","bgPage":"#383838","groupBg":"#4f4f4f","groupOutline":"#858585"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
same control but with mdi icons
[{"id":"a1777c194605532c","type":"ui-template","z":"675c06697bd9d35c","group":"574599296b7cf11f","name":"my ui-template Button 4","order":4,"width":"1","height":"1","head":"","format":"<template>\n <div class=\"container_shutter\">\n <div class=\"title_shutter\">{{labellevel}}</div>\n<!-- <v-btn class=\"button_shutter\" size=\"small\" :color=\"icon_color\" @click=\"onClick()\" icon>\n <v-img :src=\"shutter_icon\" height=32 width=32> \n </v-btn>\n--> \n <v-btn class=\"button_shutter\" size=\"small\" :color=\"icon_color\" @click=\"onClick()\" :icon=\"shutter_icon\" height=32 width=32>\n </v-btn>\n </div>\n</template>\n\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n state: \"\", \n //state: \"open\", // !? it does not keep state open,does not enter watch state \n shutter_icon: \"/window-shutter-closing.svg\",\n labellevel: \"Room 4\",\n icon_color: \"yellow\",\n }\n },\n watch: {\n // watch for message\n msg: function () {\n console.log(`!!! watch msg: Message received: ${JSON.stringify(this.msg)}`)\n if(this.msg.payload != undefined) {\n this.state=this.msg.payload;\n }\n },\n // watch for any change of state\n state: function () {\n console.log(`!!! watch state: state: ${JSON.stringify(this.state)}`);\n switch(this.state)\n {\n case \"open\":\n //this.shutter_icon=\"/window-shutter-open.svg\";\n this.shutter_icon=\"mdi-window-shutter-open\";\n this.icon_color=\"yellow\"\n break;\n case \"closing\":\n //this.shutter_icon=\"/window-shutter-closing.svg\";\n this.shutter_icon=\"mdi-chevron-double-down\";\n this.icon_color=\"blue\";\n break;\n case \"closed\":\n //this.shutter_icon=\"/window-shutter.svg\";\n this.shutter_icon=\"mdi-window-shutter\";\n this.icon_color=\"grey\";\n break;\n case \"openup\":\n //this.shutter_icon=\"/window-shutter-openup.svg\";\n this.shutter_icon=\"mdi-chevron-double-up\";\n this.icon_color=\"orange\";\n break;\n }\n }\n }, \n methods: {\n // expose a method to our <template> and Vue Application\n onClick: function () {\n console.log(`!!! onClick: Message received: ${JSON.stringify(this.msg)}`)\n switch(this.state)\n {\n case \"open\":\n this.state=\"closing\";\n break;\n case \"closing\":\n this.state=\"closed\";\n break;\n case \"closed\":\n this.state=\"openup\";\n break;\n case \"openup\":\n this.state=\"open\";\n break;\n default: \n this.state=\"open\";\n break;\n\n }\n this.send({payload: this.state});\n }\n },\n }\n</script>\n\n\n<style>\n .container_shutter {\n display: grid;\n border: 1px solid #000000;\n }\n \n .title_shutter {\n margin: auto;\n color: white;\n }\n \n .button_shutter {\n display: grid;\n margin: auto;\n border: 1px solid #000000;\n border-radius: 12px;\n font-size: 14px;\n }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":630,"y":400,"wires":[[]]},{"id":"574599296b7cf11f","type":"ui-group","name":"group1","page":"2f76f5e68d2a1098","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"2f76f5e68d2a1098","type":"ui-page","name":"test","ui":"91ac914334bc2f74","path":"/page4","icon":"home","layout":"grid","theme":"713e504734925435","order":4,"className":"","visible":true,"disabled":"false"},{"id":"91ac914334bc2f74","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default"},{"id":"713e504734925435","type":"ui-theme","name":"HN Theme","colors":{"surface":"#5c5c5c","primary":"#0094ce","bgPage":"#383838","groupBg":"#4f4f4f","groupOutline":"#858585"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
