Node Red Dashboard template for AC Remote

README.md

I wanted a dashboard flow that looked more like my AC remote. Built this with the Dashboard Template node.

flow.json

[{"id":"1081b4c2.72a9ab","type":"ui_template","z":"7c3a712d.5a7c9","group":"8536044f.ab2f08","name":"Frigidaire","order":0,"width":0,"height":0,"format":"<div>\n    \n<md-card>\n  <md-card-header>\n    <md-card-avatar>\n      <img class=\"md-user-avatar\" src=\"icons/022-512.png\">\n    </md-card-avatar>\n    <md-card-header-text>\n      <span class=\"md-title\">AC</span>\n      <span class=\"md-subhead\">Shop</span>\n    </md-card-header-text>\n  </md-card-header>\n  <md-card-actions layout=\"row\" layout-align=\"start left\">\n    <md-button flex=\"25\" ng-click=\"send({payload: 'POWER'})\"><img class=\"md-user-avatar\" src=\"icons/power.png\" >\n    </md-button>\n  </md-card-actions>\n    <md-card-actions layout=\"row\" layout-align=\"center\">\n    <md-button flex=\"25\" ng-click=\"send({payload: 'TEMP UP'})\"><img class=\"md-user-avatar\" src=\"icons/up.ico\" >\n    <md-tooltip>Temp/Timer</md-tooltip>\n    </md-button>\n  </md-card-actions>\n    <md-card-actions layout=\"row\" layout-align=\"center\">\n    <md-button flex=\"25\" ng-click=\"send({payload: 'FAN SLOWER'})\"><img class=\"md-user-avatar\" src=\"icons/left.ico\" >\n   <md-tooltip>Fan Slower</md-tooltip>\n    </md-button>\n        <md-button flex=\"25\" ng-click=\"send({payload: 'FAN FASTER'})\"><img class=\"md-user-avatar\" src=\"icons/right.ico\" >\n    <md-tooltip>Fan Faster</md-tooltip>\n    </md-button>\n\n  </md-card-actions>\n      <md-card-actions layout=\"row\" layout-align=\"center\">\n    <md-button flex=\"25\" ng-click=\"send({payload: 'TEMP DOWN'})\"><img class=\"md-user-avatar\" src=\"icons/down.ico\" >\n    <md-tooltip>Temp/Timer</md-tooltip>\n    </md-button>\n  </md-card-actions>\n\n  <md-card-actions layout=\"row\" layout-align=\"start center\">\n    <md-button flex=\"25\" ng-click=\"send({payload: 'COOL'})\">cool</md-button>\n    <md-button flex=\"37\" ng-click=\"send({payload: 'ENERGY SAVER'})\">engy saver</md-button>\n    <md-button flex=\"31\" ng-click=\"send({payload: 'FAN ONLY'})\">fan only</md-button>\n  </md-card-actions>\n  <md-card-actions layout=\"row\" layout-align=\"start center\">\n    <md-button flex=\"25\" ng-click=\"send({payload: 'SLEEP'})\">sleep</md-button>\n    <md-button flex=\"31\" ng-click=\"send({payload: 'AUTO FAN'})\">auto fan</md-button>\n    <md-button flex=\"25\" ng-click=\"send({payload: 'TIMER'})\">timer</md-button>\n  </md-card-actions>\n  <md-card-actions layout=\"row\" layout-align=\"center\">\n      <md-button flex=\"25\" ng-click=\"send({payload: 'HEAT'})\">heat</md-button>\n  </md-card-actions>\n\n <md-card-footer>\n              Frigidaire\n </md-card-footer>\n</md-card>\n</div>","storeOutMessages":true,"fwdInMessages":true,"x":430,"y":723,"wires":[["12c4009.d3874ff"]]},{"id":"12c4009.d3874ff","type":"mqtt out","z":"7c3a712d.5a7c9","name":"","topic":"ac-ir-remote","qos":"","retain":"","broker":"960defe1.012ca","x":628,"y":772,"wires":[]},{"id":"8536044f.ab2f08","type":"ui_group","z":"","name":"AC","tab":"cbbf5775.e61d08","disp":false,"width":"6"},{"id":"960defe1.012ca","type":"mqtt-broker","z":"","broker":"192.168.1.17","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"willTopic":"","willQos":"0","willPayload":"","birthTopic":"","birthQos":"0","birthPayload":""},{"id":"cbbf5775.e61d08","type":"ui_tab","z":"","name":"Shop","icon":"dashboard","order":3}]