So, got the layout close finally and trying to make the buttons work. If I push the power button it does send the payload I want. If I push the minus button the icon changes so I know at least I got to the right function but the icon color does not change and it does not send the message. If I push the plus button the icon changes and the color does not and no message. Missing a few things apparently.
[{"id":"f2444842153e8653","type":"tab","label":"Thermostat","disabled":false,"info":"","env":[]},{"id":"cb888174fde85212","type":"ui-template","z":"f2444842153e8653","group":"","page":"73e9e33592af85f3","ui":"","name":"Rev7","order":0,"width":0,"height":0,"head":"","format":"<template>\n <v-app style=\"height: 150px; width: 360px\" class=\"pa-0 ma-0\">\n <v-container>\n <v-row no-gutters class=\"pa-0 ma-0\">\n <v-col no-gutters class=\"pa-0 ma-0\">\n <v-sheet class=\"d-flex justify-center align-center TempAmbHeader\">\n Temp Amb\n </v-sheet>\n <v-sheet class=\"d-flex justify-center align-center TempAmbMain\">{{msg.tempAmb}}</v-sheet>\n </v-col>\n <v-col no-gutters>\n <v-row no-gutters class=\"pa-0 ma-0\">\n <v-col no-gutters class=\"pa-0 ma-0\">\n <v-sheet class=\"TempSetHeader\">Temp Set </v-sheet>\n <v-sheet class=\"d-flex justify-center align-center TempSetMain\">{{msg.tempSet}}</v-sheet>\n </v-col>\n <v-col no-gutters class=\"pa-0 ma-0\">\n <v-row no-gutters class=\"pa-0 ma-0\">\n <v-card class=\"d-flex justify-center align-center\" style=\"height: 50px; width: 50px\">\n <v-btn class=\"d-flex justify-center align-center btnPower\" @click=\"Power\">\n <v-icon size=\"40\" class=\"d-flex justify-center align-center Power\">{{icon1}}</v-icon>\n </v-btn>\n </v-card>\n </v-row>\n <v-row no-gutters class=\"pa-0 ma-0\">\n <v-card class=\"d-flex justify-center align-center\" style=\"height: 50px; width: 50px\">\n <v-btn class=\"d-flex justify-center align-center btnPower\" @click=\"Power\">\n <v-icon size=\"40\" class=\"d-flex justify-center align-center Power\">{{icon2}}</v-icon>\n </v-btn>\n </v-card>\n </v-row>\n </v-col>\n </v-row>\n\n <v-col no-gutters class=\"pa-0 ma-0\">\n <v-row no-gutters class=\"pa-0 ma-0\">\n <v-card style=\"height: 40px; width: 15px\"> </v-card>\n\n <v-card class=\"d-flex justify-center align-center\" style=\"height: 50px; width: 50px\">\n <v-btn class=\"d-flex justify-center align-center btnPower\" @click=\"Minus\">\n <v-icon size=\"40\" class=\"d-flex justify-center align-center Power\">{{icon3}}</v-icon>\n </v-btn>\n </v-card>\n\n <v-card style=\"height: 40px; width: 15px\"> </v-card>\n\n <v-card class=\"d-flex justify-center align-center\" style=\"height: 50px; width: 50px\">\n <v-btn class=\"d-flex justify-center align-center btnPower\" @click=\"Plus\">\n <v-icon size=\"40\" class=\"d-flex justify-center align-center Power\">{{icon4}}</v-icon>\n </v-btn>\n </v-card>\n </v-row>\n </v-col>\n </v-col>\n </v-row>\n\n <v-row no-gutters class=\"pa-0 ma-0\">\n <v-col no-gutters class=\"pa-0 ma-0\">\n <v-btn class=\"d-flex justify-center align-center\" stacked @click=\"Fan\">\n <v-icon size=\"40\" class=\"d-flex justify-center align-center iconFan\">{{icon5}}</v-icon>\n </v-btn>\n </v-col>\n <v-col no-gutters class=\"pa-0 ma-0\">\n <v-btn class=\"d-flex justify-center align-center\" stacked @click=\"Cog\">\n <v-icon size=\"40\" class=\"d-flex justify-center align-center iconCog\">{{icon6}}</v-icon>\n </v-btn>\n </v-col>\n </v-row>\n </v-container>\n </v-app>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value: 'OFF',\n icon1: 'mdi-power',\n icon2: 'mdi-fire',\n icon3: 'mdi-minus',\n\t\ticon4: 'mdi-plus',\n icon5: 'mdi-fan',\n icon6: 'mdi-cog',\n }\n },\n\n watch: {\n msg: {\n deep: true,\n handler(newVal) {\n if (newVal.payload === 'power') {\n this.Power()\n }\n if (newVal.payload === 'fan') {\n this.Fan()\n }\n if (newVal.payload === 'cog') {\n this.Cog()\n }\n },\n },\n },\n\n methods: {\n Power() {\n this.icon1 = 'mdi-power'\n this.send({ topic: 'Power', payload: 'power' })\n },\n\n Minus: function () {\n this.icon1 = 'mdi-cog'\n this.$refs.icon1.color = 'green'\n this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608'\n this.$refs.icon2.$el.style.color = 'grey'\n this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608'\n this.$refs.icon3.$el.style.color = 'grey'\n this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608'\n this.send({ topic: 'Minus', payload: '1' })\n },\n\n Plus: function () {\n this.icon1 = 'mdi-bed'\n this.$refs.icon1.$el.style.color = 'grey'\n this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608'\n this.$refs.icon2.$el.style.color = 'green'\n this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608'\n this.$refs.icon3.$el.style.color = 'grey'\n this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608'\n this.send({ topic: 'Plus', payload: '1' })\n },\n\n Fan: function () {\n this.$refs.icon1.$el.style.color = 'red'\n this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608'\n this.$refs.icon2.$el.style.color = 'blue'\n this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608'\n this.$refs.icon3.$el.style.color = 'green'\n this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608'\n this.send({ topic: 'Fan', payload: '1' })\n },\n\t \n Cog: function () {\n this.$refs.icon1.$el.style.color = 'grey'\n this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608'\n this.$refs.icon2.$el.style.color = 'grey'\n this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608'\n this.$refs.icon3.$el.style.color = 'green'\n this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608'\n this.send({ topic: 'Cog', payload: '1' })\n },\n },\n }\n</script>\n\n<style>\n .container {\n padding: 0px;\n }\n\n .TempAmbHeader {\n background-color: black;\n justify-content: center;\n text-align: center;\n height: 25px !important;\n width: 160px !important;\n margin-top: 5px;\n margin-bottom: 1px;\n margin-left: 0px;\n margin-right: 0px;\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 .TempAmbMain {\n background-color: black;\n justify-content: center;\n align-items: center;\n align-content: center;\n height: 125px !important;\n width: 160px !important;\n margin-top: 0px;\n margin-bottom: 2px;\n margin-left: 0px;\n margin-right: 0px;\n font-size: 45px;\n color: white;\n border-bottom: 2px solid #6689a1;\n border-top: 2px solid black;\n border-left: 2px solid #6689a1;\n border-right: 2px solid #6689a1;\n }\n\n .TempSetHeader {\n background-color: black;\n justify-content: center;\n text-align: center;\n height: 25px !important;\n width: 80px !important;\n margin-top: 5px;\n margin-bottom: 1px;\n margin-left: 0px;\n margin-right: 0px;\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 .TempSetMain {\n background-color: black;\n justify-content: center;\n text-align: center;\n height: 75px !important;\n width: 80px !important;\n margin-top: 0px;\n margin-bottom: 2px;\n margin-left: 0px;\n margin-right: 0px;\n font-size: 20px;\n color: white;\n border-bottom: 2px solid #6689a1;\n border-top: 2px solid black;\n border-left: 2px solid #6689a1;\n border-right: 2px solid #6689a1;\n }\n\n .Power {\n background-color: black;\n justify-content: center;\n text-align: center;\n align-items: center;\n height: 45px !important;\n width: 45px !important;\n margin-top: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n margin-right: 0px;\n font-size: 18px;\n //color: white;\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 -v-icon-height: 45px !important;\n -v-icon-width: 45px !important;\n }\n\n .btnPower {\n background-color: black !important;\n //color: white;\n border-radius: 4px !important;\n width: 50px !important;\n height: 50px !important;\n margin-top: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n margin-right: 0px;\n -v-btn-height: 50px !important;\n -v-btn-width: 50px !important;\n }\n\n .Fire {\n background-color: black;\n justify-content: center;\n text-align: center;\n align-items: center;\n height: 45px !important;\n width: 45px !important;\n margin-top: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n margin-right: 0px;\n font-size: 18px;\n //color: white;\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 .btnFire {\n background-color: black !important;\n //color: white;\n border-radius: 4px !important;\n width: 50px !important;\n height: 50px !important;\n margin-top: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n margin-right: 0px;\n -v-btn-height: 50px !important;\n -v-btn-width: 50px !important;\n }\n\n .Plus {\n background-color: black;\n justify-content: center;\n text-align: center;\n align-items: center;\n height: 45px !important;\n width: 45px !important;\n margin-top: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n margin-right: 0px;\n font-size: 18px;\n //color: white;\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 -v-icon-height: 45px !important;\n -v-icon-width: 45px !important;\n }\n\n .Minus {\n background-color: black;\n justify-content: center;\n text-align: center;\n align-items: center;\n height: 45px !important;\n width: 45px !important;\n margin-top: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n margin-right: 0px;\n font-size: 18px;\n //color: white;\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 .iconFan {\n background-color: black;\n justify-content: center;\n text-align: center;\n align-items: center;\n height: 50px !important;\n width: 175px !important;\n margin-bottom: 1px;\n margin-left: 0px;\n margin-right: 0px;\n font-size: 18px;\n //color: white;\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 .iconCog {\n background-color: black;\n justify-content: center;\n text-align: center;\n align-items: center;\n height: 50px !important;\n width: 50px !important;\n margin-bottom: 1px;\n margin-left: 10px;\n margin-right: 0px;\n font-size: 18px;\n //color: white;\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 .MinusbtnBasic {\n background-color: grey !important;\n //color: white;\n border-radius: 4px !important;\n width: 30px !important;\n height: 30px !important;\n margin-top: 3px;\n margin-bottom: 1px;\n margin-left: 20px;\n margin-right: 5px;\n --v-btn-height: 45px !important;\n }\n\n .MinusiconBasic {\n background-color: black !important;\n font-size: 45px;\n height: 35px !important;\n width: 35px !important;\n }\n\n .btnBasic {\n background-color: grey !important;\n //color: white;\n border-radius: 4px !important;\n width: 50px !important;\n height: 50px !important;\n margin-top: 5px;\n margin-bottom: 0px;\n margin-left: 0px;\n margin-right: 0px;\n -v-btn-height: 50px !important;\n -v-btn-width: 50px !important;\n }\n\n .btnBasic1 {\n background-color: grey !important;\n //color: white;\n border-radius: 4px !important;\n width: 60px !important;\n height: 60px !important;\n margin-top: 5px;\n margin-bottom: 0px;\n margin-left: 0px;\n margin-right: 0px;\n -v-btn-height: 50px !important;\n -v-btn-width: 50px !important;\n }\n\n .btnBasic2 {\n background-color: grey !important;\n //color: white;\n border-radius: 4px !important;\n width: 50px !important;\n height: 50px !important;\n margin-top: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n margin-right: 0px;\n -v-btn-height: 50px !important;\n -v-btn-width: 50px !important;\n }\n\n .iconBasic {\n background-color: black !important;\n font-size: 45px;\n height: 45px !important;\n width: 45px !important;\n margin-left: 0px;\n margin-right: 0px;\n -v-icon-height: 45px !important;\n -v-icon-width: 45px !important;\n }\n</style>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:page","className":"","x":310,"y":120,"wires":[["ab871e20b117fd4a"]]},{"id":"ab871e20b117fd4a","type":"debug","z":"f2444842153e8653","name":"debug 54","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":520,"y":120,"wires":[]},{"id":"73e9e33592af85f3","type":"ui-page","name":"Thermostat","ui":"be93d1640cb1fd4c","path":"/Thermostat","icon":"mdi-thermostat","layout":"grid","theme":"42ed612acbaa5b49","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"},{"id":"42ed612acbaa5b49","type":"ui-theme","name":"MainTheme","colors":{"surface":"#ffffff","primary":"#000000","bgPage":"#000000","groupBg":"#000000","groupOutline":"#000000"},"sizes":{"pagePadding":"2px","groupGap":"2px","groupBorderRadius":"4px","widgetGap":"2px"}}]
Any help appreciated.
[edit] just figured out every time I navigate to that page it sends a power message, not sure where that comes from.
