when I deploy here is what my screen looks like
After I push a button here is what my screen looks like
My flow is setup to push to the template the same setup every time. I would expect to see the different cells return to a set configuration after 4 seconds but they don't. I have tried for two days so many different code configurations I'm getting lost. Time to yell for help.
[{"id":"05daba1cbc7fb101","type":"function","z":"763f73a520fc8a76","name":"Timer Running","func":"\n\n\nlet ZoneData = [];\n\nZoneData[0] = false;\nZoneData[1] = true;\nZoneData[2] = false;\nZoneData[3] = true;\nZoneData[4] = false;\nZoneData[5] = true;\n msg = {\n payload: ZoneData,\n }\n return msg;\n\n\n\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":2340,"y":160,"wires":[["0672422db903f679","c9b39a90a8a4576b"]]},{"id":"c9b39a90a8a4576b","type":"debug","z":"763f73a520fc8a76","name":"debug 3","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":2540,"y":200,"wires":[]},{"id":"0672422db903f679","type":"ui-template","z":"763f73a520fc8a76","group":"f39cf9ca3b0aa2b9","page":"","ui":"","name":"Zone Testing","order":13,"width":"3","height":"1","head":"","format":"<template>\n <v-container>\n\n <v-col>\n <v-row class=\"topone\">Zone Status Testing</v-row>\n </v-col>\n\n <v-col>\n <v-row>\n <v-card class=\"topthree\">Zone 1</v-card>\n <v-card class=\"topthree\">Zone 2</v-card>\n <v-card class=\"topthree\">Zone 3</v-card>\n </v-row>\n </v-col>\n\n <!-- Row 1: Sunday to Wednesday -->\n <v-col>\n <v-row>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zone1\" :class=\"{ 'active': isActive['zone1'] }\">{{ buttonText['zone1'] }}</v-btn>\n </v-card>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zone2\" :class=\"{ 'active': isActive['zone2'] }\">{{ buttonText['zone2'] }}</v-btn>\n </v-card>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zone3\" :class=\"{ 'active': isActive['zone3'] }\">{{ buttonText['zone3'] }}</v-btn>\n </v-card>\n </v-row>\n </v-col>\n\n <v-col>\n <v-row>\n <v-card class=\"topthree\">Zone 4</v-card>\n <v-card class=\"topthree\">Zone 5</v-card>\n <v-card class=\"topthree\">Zone 6</v-card>\n </v-row>\n </v-col>\n\n <!-- Row 2: Thursday to Saturday -->\n <v-col>\n <v-row>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zone4\" :class=\"{ 'active': isActive['zone4'] }\">{{ buttonText['zone4'] }}</v-btn>\n </v-card>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zone5\" :class=\"{ 'active': isActive['zone5'] }\">{{ buttonText['zone5'] }}</v-btn>\n </v-card>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zone6\" :class=\"{ 'active': isActive['zone6'] }\">{{ buttonText['zone6'] }}</v-btn>\n </v-card>\n </v-row>\n </v-col>\n\n\n </v-container>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n isActive: {\n zone1: false,\n zone2: false,\n zone3: false,\n zone4: false,\n zone5: false,\n zone6: false,\n },\n buttonText: {\n zone1: 'Off',\n zone2: 'Off',\n zone3: 'Off',\n zone4: 'Off',\n zone5: 'Off',\n zone6: 'Off',\n }\n };\n },\n\n watch: {\n msg: {\n deep: true,\n handler(newVal) {\n if (newVal.payload[0] == true) {\n this.buttonText['zone1'] = \"Active\";\n this.isActive['zone1'] = true;\n }\n if (newVal.payload[0] == false) {\n this.buttonText['zone1'] = \"Off\";\n this.isActive['zone1'] = false;\n }\n\n if (newVal.payload[1] == true) {\n this.buttonText['zone2'] = \"Active\";\n this.isActive['zone2'] = true;\n }\n if (newVal.payload[1] == false) {\n this.buttonText['zone2'] = \"Off\";\n this.isActive['zone2'] = false;\n }\n\n if (newVal.payload[2] == true) {\n this.buttonText['zone3'] = \"Active\";\n this.isActive['zone3'] = true;\n }\n if (newVal.payload[2] == false) {\n this.buttonText['zone3'] = \"Off\";\n this.isActive['zone3'] = !this.isActive;\n }\n\n },\n },\n },\n\n methods: {\n zone1() {\n this.send({ payload: 'zone1' })\n this.isActive = !this.isActive // Toggle isActive state\n if (this.clicked) {\n this.buttonText['zone1'] = 'Off'\n this.isActive = false\n this.send({ topic: 'zone1active', payload: false });\n } else {\n this.buttonText['zone1'] = 'Active'\n this.isActive = true\n this.send({ topic: 'zone1active', payload: true });\n }\n this.clicked = !this.clicked\n },\n zone2() {\n this.send({ payload: 'zone2' })\n this.isActive = !this.isActive // Toggle isActive state\n if (this.clicked) {\n this.buttonText['zone2'] = 'Off'\n this.isActive = false\n this.send({ topic: 'zone2active', payload: false });\n } else {\n this.buttonText['zone2'] = 'Active'\n this.isActive = true\n this.send({ topic: 'zone2active', payload: true });\n }\n this.clicked = !this.clicked\n },\n zone3() {\n this.send({ payload: 'zone3' })\n this.isActive = !this.isActive // Toggle isActive state\n if (this.clicked) {\n this.buttonText['zone3'] = 'Off'\n this.isActive = false\n this.send({ topic: 'zone3active', payload: false });\n } else {\n this.buttonText['zone3'] = 'Active'\n this.isActive = true\n this.send({ topic: 'zone3active', payload: true });\n }\n this.clicked = !this.clicked\n },\n zone4() {\n this.send({ payload: 'zone4' })\n this.isActive = !this.isActive // Toggle isActive state\n if (this.clicked) {\n this.buttonText['zone4'] = 'Off'\n this.isActive = false\n this.send({ topic: 'zone4active', payload: false });\n } else {\n this.buttonText['zone4'] = 'Active'\n this.isActive = true\n this.send({ topic: 'zone4active', payload: true });\n }\n this.clicked = !this.clicked\n },\n zone5() {\n this.send({ payload: 'zone5' })\n this.isActive = !this.isActive // Toggle isActive state\n if (this.clicked) {\n this.buttonText['zone5'] = 'Off'\n this.isActive = false\n this.send({ topic: 'zone5active', payload: false });\n } else {\n this.buttonText['zone5'] = 'Active'\n this.isActive = true\n this.send({ topic: 'zone5active', payload: true });\n }\n this.clicked = !this.clicked\n },\n zone6() {\n this.send({ payload: 'zone6' })\n this.isActive = !this.isActive // Toggle isActive state\n if (this.clicked) {\n this.buttonText['zone6'] = 'Off'\n this.isActive = false\n this.send({ topic: 'zone6active', payload: false });\n } else {\n this.buttonText['zone6'] = 'Active'\n this.isActive = true\n this.send({ topic: 'zone6active', payload: true });\n }\n this.clicked = !this.clicked\n },\n },\n\n};\n</script>\n\n<style>\n.root {\n \n}\n\n.topone {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 270px;\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.bottomone {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 270px;\n height: 40px; /* Adjust height as needed */\n background-color: black !important;\n border-top: 3px solid #6689a1;\n border-bottom: 3px solid #6689a1;\n border-left: 3px solid #6689a1;\n border-right: 3px solid #6689a1;\n //font-size: 40px;\n font-family: \"Times New Roman\", Times, serif;\n font-style: normal;\n}\n\n.bottomtwo {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 130px;\n height: 80px; /* Adjust height as needed */\n background-color: black;\n border-top: 3px solid #6689a1;\n border-bottom: 3px solid #6689a1;\n border-left: 3px solid #6689a1;\n border-right: 3px solid #6689a1;\n}\n\n.topthree {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 90px;\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.bottomthree {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 90px;\n height: 80px; /* Adjust height as needed */\n background-color: black;\n border-top: 3px solid #6689a1;\n border-bottom: 3px solid #6689a1;\n border-left: 3px solid #6689a1;\n border-right: 3px solid #6689a1;\n}\n\n.time{\n color: white;\n font-size: 12px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 270px;\n height: 40px; /* Adjust height as needed */\n background-color: black;\n border-top: 3px solid #dd7f00;\n border-bottom: 3px solid #dd7f00;\n border-left: 3px solid #dd7f00;\n border-right: 3px solid #dd7f00;\n}\n\n.active {\n background-color: green; /* Changed background color when active */\n}\n\n</style>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":2530,"y":120,"wires":[[]]},{"id":"62043c6f074725a6","type":"inject","z":"763f73a520fc8a76","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"4","crontab":"","once":true,"onceDelay":"5","topic":"","payload":"1","payloadType":"str","x":2170,"y":160,"wires":[["05daba1cbc7fb101"]]},{"id":"f39cf9ca3b0aa2b9","type":"ui-group","name":"MainPage","page":"1b352f1ce9069293","width":"3","height":1,"order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"1b352f1ce9069293","type":"ui-page","name":"Sprinkler","ui":"94623a7f1f14d705","path":"/Sprinkler","icon":"home","layout":"grid","theme":"ccd391fe59d04f39","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":1,"className":"","visible":"true","disabled":"false"},{"id":"94623a7f1f14d705","type":"ui-base","name":"Main","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true},{"id":"ccd391fe59d04f39","type":"ui-theme","name":"Sprink","colors":{"surface":"#000000","primary":"#000000","bgPage":"#000000","groupBg":"#000000","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
So here I am looking for help
Thanks
[EDIT]on pi4b latest node red 4.08, node 22, all nodes updated to latest yesterday
