Gotcha! I got it to work like you said. I am trying with a pin and I was missing to add the arm/home/away/ect button to the dashboard. I was just inputting my 4 digit code and expecting it to execute to arm. Makes sense now. Thanks for the quick responses!
to clarify for anyone, I didnt install any armed tiles yet (missing the top right tile in my dashboard)
In HPM, your donate link is redirecting back to the same page of installed programs in HPM and not to a "paypal" or similar.
Figured I post a SS of my keypad (SS is my pc, formats alot better on the Fire 8 tablet). Again great work on this app!
1 Like
Can you share the css for this? I love it!
1 Like
Thanks! I cant figure out how to condense the code (json and css) into a reply. I also made another toned down version and changed a couple of buttons and spacing.
CSS
/* ------- DO NOT EDIT - Smartly Base CSS ------- */
/* https://api.github.com/repos/ezeek/smartly-base/git/commits/9fffaf1db0bc8106b575c1ce65b5547ce9cbe1b8 */
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Barlow Condensed Regular'),local('BarlowCondensed-Regular'),url(https://fonts.gstatic.com/s/barlowcondensed/v4/HTx3L3I-JCGChYJ8VI-L6OO_au7B6xHT2g.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face {
font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:local('Barlow Condensed Medium'),local('BarlowCondensed-Medium'),url(https://fonts.gstatic.com/s/barlowcondensed/v4/HTxwL3I-JCGChYJ8VI-L6OO_au7B4-Lwz3bWuQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
#app,body {
font-family: 'Barlow Condensed',sans-serif
}
@font-face {
font-family:"Material Design Icons";src:url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.eot?#iefix&v=4.9.95) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.ttf) format("truetype");font-weight:400;font-style:normal;unicode-range:U+F000-FFFFF
}
@font-face {
font-family:'Material Design Icons';src:url(https://hubitat.ezeek.us/smartly-base/assets/fonts/mtd-public.woff?v=1.08) format('woff'),url(https://hubitat.ezeek.us/smartly-base/assets/fonts/mtd-public.woff?v=1.065) format('truetype');font-weight:400;font-style:normal;unicode-range:U+E900-EFFF,U+0000-008E
}
.he-bulb_off:before,.he-bulb_on:before,.he-dimmer_low:before,.he-dimmer_medium:before,.he-door_closed:before,.he-door_open:before,.he-fire1:before,.he-fire_alarm_clear:before,.he-garage_closed:before,.he-garage_closing:before,.he-garage_open:before,.he-garage_opening:before,.he-hour-glass:before,.he-motion-sensor:before,.he-motion_detector_3:before,.he-motion_detector_3_filled:before,.he-not_present:before,.he-outlet_3:before,.he-outlet_off:before,.he-running:before,.he-shades_closed:before,.he-shades_partially_open:before,.he-switch_2:before,.he-switch_2_flipped:before,.he-water_dry:before,.he-water_wet:before,.he-window_1:before,.he-window_2:before,.tile.dashboard .tile-primary::before,.tile.shades .tile-primary i.material-icons{font-family:"Material Design Icons"!important}.he-shades_open:before{content:"\F0149"}.he-shades_closed:before{content:"\F0147"}.tile.shades .tile-primary.closing i.material-icons:before,.tile.shades .tile-primary.opening i.material-icons:before,.tile.shades .tile-primary.partially.open i.material-icons:before{content:"\F0148"}.he-not_present:before{content:"\FA47"}.he-outlet_3:before{content:"\F6A4"}.he-outlet_off:before{content:"\F6A5"}.he-bulb_off,.he-bulb_on,.he-dimmer_low,.he-dimmer_medium{margin-bottom:4px}.he-bulb_off,.he-bulb_on{padding:3px!important}.popup-content .he-bulb_off,.popup-content .he-bulb_on{color:#000!important}.popup-content{margin-left:auto;margin-right:auto}.tile.bulb-color .tile-primary{padding-bottom:0!important;overflow:visible}.he-bulb_on:before{content:"\F6E8";display:block}.he-bulb_off:before{content:"\F336"}.he-fire_alarm_clear:before{content:"\F392"}.he-fire1:before{content:"\F238"}.he-water_wet:before{content:"\F58C"}.he-water_dry:before{content:"\F58D"}.he-garage_closed:before{content:"\F6D8";font-size:120%}.he-garage_open:before{content:"\F6D9";font-size:120%}.he-garage_closing:before,.he-garage_opening:before{font-size:120%;content:"\F871"}.he-hour-glass:before{content:"\F1D8"}.he-running:before{content:"\e94d"}.he-motion-sensor:before{content:"\e94c"}.he-dimmer_low:before,.he-switch_2:before{content:"\FA18"}.he-dimmer_medium:before,.he-switch_2_flipped:before{content:"\F521"}.he-dimmer_low:before,.he-dimmer_medium:before{margin-top:-5px}.he-window_1:before{content:"\F5AE"}.he-window_2:before{content:"\F5B1"}.he-door_open:before{content:"\F81B"}.he-door_closed:before{content:"\F819"}.text-tile{background:0 0!important;color:#000;padding:0 10px;margin:0}.text-tile .justify-center,.text-tile .text-center{text-align:unset;justify-content:unset}.tile.date>div{background-color:#fff}.tile.date .flex{line-height:normal;font-size:100%}.tile.date .border-black{border:0;border-radius:20px}.tile.date .text-25{font-size:80%}.tile.date .day,.tile.date .weekday,.tile.date .year{padding:0}.tile.attribute,.tile.clock,.tile.dashboard,.tile.date-clock,.tile.mode,.tile.music-player{border:2px solid #fff}.tile.date-clock .tile-primary{font-weight:500;color:#fff}.tile.date-clock .tile-primary div{font-size:80%!important;font-weight:400;padding-left:10px}.tile.date-clock .tile-contents{margin-top:0;height:calc(100%)!important}.tile.date-clock small{margin-left:3px}.tile.dashboard{overflow:visible;background-color:rgba(255,255,255,.5);height:50%;margin-top:auto;margin-bottom:auto}.tile.dashboard .tile-title{display:none}.tile.dashboard .tile-primary{color:#000;align-self:center;padding:0;margin:0;display:inline-block}.tile.dashboard .tile-contents{margin-top:0;display:flex;justify-content:center;vertical-align:middle;height:100%}.tile.thermostat>.absolute.bottom-0{top:2em;left:1em;text-align:center;width:calc(100% - 2em);font-weight:500;line-height:1em;height:1em}.tile.thermostat .w-full.my-1{position:absolute;bottom:0}.tile.thermostat .heating.pt-1{padding-bottom:21px}.tile.thermostat .cooling .inline-block,.tile.thermostat .heating .inline-block{font-size:25px;vertical-align:super}.tile.thermostat .cooling .inline-block br,.tile.thermostat .heating .inline-block br{content:" ";padding:5px}.tile.link{border:2px solid #fff}.tile.link .tile-title{display:none}.tile.link .tile-contents{height:calc(100%);padding:0;margin:0}.tile.link .tile-primary{padding:0;margin:0}.tile.link .tile-primary div{margin-top:0}.tile.link .tile-primary div:hover{margin-top:-4px}.tile.dimmer .tile-primary .dimmer{margin-bottom:7px;margin-top:3px}.tile.shades .dimmer{margin-top:6px}.tile.image .inset-auto img{object-fit:cover}.tile.energy{border:2px solid rgba(236,255,34)}.tile.hsm{overflow:hidden}.tile.hsm .popup-content .top-0.right-0.absolute{padding:.5em 1em;margin:0;width:auto!important}.vue-slider{padding:0 0 5px!important}.tile{text-shadow:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin-left:1px}.dashName{font-size:25px;text-shadow:none;margin-left:10px}.tile-secondary{display:none}.tile-title{position:relative;left:auto;right:auto;padding:7px 6px 1px;font-weight:500;line-height:1.2em;letter-spacing:1px;opacity:.8;overflow:unset}.tile-title::after{white-space:pre-wrap}.dashBack{text-shadow:none;padding-left:5px}.he-logo-mark:before{font-size:40px}.tile-tertiary{padding:5px;position:absolute;left:8px;bottom:auto;font-size:85%;top:auto;right:auto;opacity:.8}.tile-contents{height:calc(80%);width:calc(100%);padding:0 4px}.text-green-600{color:rgba(0,255,105,.75);text-shadow:none}.dashboard div .header{padding:10px 10px 10px 15px}.wrapper{margin-left:0;margin-bottom:0;padding-left:15px;width:calc(100%);overflow:auto}.tile-edit{top:auto;bottom:10px;opacity:.3}.tile-primary{padding-bottom:calc(10%);overflow:visible}smartly{grid-column-end:-1;grid-row-end:-1;display:inline-block;height:calc(100% + 25px);z-index:-1;width:calc(100% + 15px)}@media (min-width:768px) and (max-width:1000px){.md:w-2/3{width:80%}}.navHeader{height:3em}.navHeader div.navLink.float-right:first-child,.navHeader div.navLink:last-child{background-color:red;font-weight:700;padding:0 1em}.navHeader div.navLink.float-right,.navHeader>.flex>div{text-transform:uppercase;font-size:1.3em;margin:0 4px;height:auto;text-align:center;padding:0 .5em;background-color:#323232;border-radius:20px;display:inline-table}.navHeader>.flex>div.pl-2{display:none}#app>.popup-container .menu .overflow-auto .flex .cursor-pointer{border:1px solid gray;margin:.5em 0 0 .5em;padding:1em;border-radius:6px;line-height:.5em}#app>.popup-container .exportBox{margin-top:1em}.md:w-1/2 .md:w-1/2{width:50%}.deviceSelect .devices .search input,.selectTemplate .templates .search input{padding:5px;border-radius:8px;margin-left:5px;width:100%}.deviceSelect .devices .search,.selectTemplate .templates .search{padding:1em;font-size:160%}.devices .deviceList,.templates .templates{font-size:1.5em}[type=checkbox],[type=radio]{height:1em;width:1em;margin:.25em 0}h4{font-size:1.2em;margin:.5em 0;opacity:.8;font-weight:500}h3{margin-bottom:auto}.text-lg,h3,label span{font-size:1.5em;display:inline-block}.text-lg,h3{color:#000;overflow:visible;margin-left:.5em;border-bottom:1px solid rgba(0,0,0,.5);width:auto;margin-top:auto}label span{margin-top:-1px;padding-top:.25em;vertical-align:top;margin-bottom:.5em}button,input,select,textarea{font-size:180%}h1,h2,h3,h4{font-family:'Barlow Condensed',sans-serif}.popup-content .top-0.right-0.absolute{background-color:red;color:#fff;font-weight:700}@media (max-width:767px){#app .popup-container .menu{width:98%}.md:w-2/3{width:96%}#app>.popup-container .menu .overflow-auto .flex .cursor-pointer,.navHeader div.navLink.float-right,.navHeader i.material-icons,.navHeader>.flex>div{font-size:1em}.navHeader{height:2.5em}}.tile-primary>div{margin-top:4px}.text-lg{margin-bottom:.5em}.tile.date-clock .tile-title{padding:0;margin:0;height:2px}@media (max-width:767px){.popup-content.h-85p{height:auto}}.tile.thermostat i{display:inline-block}.tile.dashboard .tile-edit{bottom:auto;top:1px}@media screen and (max-width:1284px) and (min-width:1280px){.tile.dashboard{zoom:unset}}@media screen and (max-width:1924px) and (min-width:1920px){.tile.dashboard{zoom:unset}}.tile.date>div.h-full.w-full{font-size:1.5em!important}.tile.date div.weekday,.tile.date div.year{font-size:140%!important;line-height:.75em}.tile.date div.day{font-size:250%!important;font-weight:700}.mt-12{margin-top:5em}.mt-16{margin-top:7em}[class*=" battery-"]>i.material-icons::before{font-family:"Material Design Icons"}.battery-100>i.material-icons::before,.battery-99>i.material-icons::before{content:"\F079"}.battery-91>i.material-icons::before,.battery-92>i.material-icons::before,.battery-93>i.material-icons::before,.battery-94>i.material-icons::before,.battery-95>i.material-icons::before,.battery-96>i.material-icons::before,.battery-97>i.material-icons::before,.battery-98>i.material-icons::before{content:"\F082"}.battery-81>i.material-icons::before,.battery-82>i.material-icons::before,.battery-83>i.material-icons::before,.battery-84>i.material-icons::before,.battery-85>i.material-icons::before,.battery-86>i.material-icons::before,.battery-87>i.material-icons::before,.battery-88>i.material-icons::before,.battery-89>i.material-icons::before,.battery-90>i.material-icons::before{content:"\F081"}.battery-71>i.material-icons::before,.battery-72>i.material-icons::before,.battery-73>i.material-icons::before,.battery-74>i.material-icons::before,.battery-75>i.material-icons::before,.battery-76>i.material-icons::before,.battery-77>i.material-icons::before,.battery-78>i.material-icons::before,.battery-79>i.material-icons::before,.battery-80>i.material-icons::before{content:"\F080"}.battery-61>i.material-icons::before,.battery-62>i.material-icons::before,.battery-63>i.material-icons::before,.battery-64>i.material-icons::before,.battery-65>i.material-icons::before,.battery-66>i.material-icons::before,.battery-67>i.material-icons::before,.battery-68>i.material-icons::before,.battery-69>i.material-icons::before,.battery-70>i.material-icons::before{content:"\F07F"}.battery-51>i.material-icons::before,.battery-52>i.material-icons::before,.battery-53>i.material-icons::before,.battery-54>i.material-icons::before,.battery-55>i.material-icons::before,.battery-56>i.material-icons::before,.battery-57>i.material-icons::before,.battery-58>i.material-icons::before,.battery-59>i.material-icons::before,.battery-60>i.material-icons::before{content:"\F07E"}.battery-41>i.material-icons::before,.battery-42>i.material-icons::before,.battery-43>i.material-icons::before,.battery-44>i.material-icons::before,.battery-45>i.material-icons::before,.battery-46>i.material-icons::before,.battery-47>i.material-icons::before,.battery-48>i.material-icons::before,.battery-49>i.material-icons::before,.battery-50>i.material-icons::before{content:"\F07D"}.battery-31>i.material-icons::before,.battery-32>i.material-icons::before,.battery-33>i.material-icons::before,.battery-34>i.material-icons::before,.battery-35>i.material-icons::before,.battery-36>i.material-icons::before,.battery-37>i.material-icons::before,.battery-38>i.material-icons::before,.battery-39>i.material-icons::before,.battery-40>i.material-icons::before{content:"\F07C"}.battery-21>i.material-icons::before,.battery-22>i.material-icons::before,.battery-23>i.material-icons::before,.battery-24>i.material-icons::before,.battery-25>i.material-icons::before,.battery-26>i.material-icons::before,.battery-27>i.material-icons::before,.battery-28>i.material-icons::before,.battery-29>i.material-icons::before,.battery-30>i.material-icons::before{content:"\F07B"}.battery-11>i.material-icons::before,.battery-12>i.material-icons::before,.battery-13>i.material-icons::before,.battery-14>i.material-icons::before,.battery-15>i.material-icons::before,.battery-16>i.material-icons::before,.battery-17>i.material-icons::before,.battery-18>i.material-icons::before,.battery-19>i.material-icons::before,.battery-20>i.material-icons::before{content:"\F07A"}.tile.battery .tile-primary{grid-template-columns:repeat(2,50%);display:grid;height:calc(100%);align-items:center;grid-template-rows:100%}.tile.battery .tile-primary>i.material-icons{text-align:right}.tile.battery .tile-primary>div{text-align:left}.tile.battery{background-color:rgba(0,255,105,.75);color:rgba(0,0,0,.66)}.tile.battery .tile-primary,.tile.humidity .tile-primary,.tile.temperature .tile-primary,.tile.illuminance .tile-primary,.tile.energy .tile-primary,.tile.power .tile-primary,.tile.attribute .tile-primary{width:100%;margin-top:-3px;padding-left:5px;line-height:1em}.tile.humidity .tile-contents .tile-edit{bottom:20px}.tile.battery .tile-contents{display:block}.dashboard>div>.header,.tile.text-tile{color:#fff}#app>.dashboard{-moz-transform-origin:0 0}html[style*="background-color: darkgray;"] .tile.text-tile,html[style*="background-color: gold;"] .tile.text-tile,html[style*="background-color: ivory;"] .tile.text-tile,html[style*="background-color: lightcyan;"] .tile.text-tile,html[style*="background-color: lightgray;"] .tile.text-tile,html[style*="background-color: silver;"] .tile.text-tile,html[style*="background-color: skyblue;"] .tile.text-tile,html[style*="background-color: tan;"] .tile.text-tile,html[style*="background-color: white;"] .tile.text-tile,html[style*="background-color: whitesmoke;"] .tile.text-tile,html[style*="background-color: darkgray;"] #grid-header,html[style*="background-color: gold;"] #grid-header,html[style*="background-color: ivory;"] #grid-header,html[style*="background-color: lightcyan;"] #grid-header,html[style*="background-color: lightgray;"] #grid-header,html[style*="background-color: silver;"] #grid-header,html[style*="background-color: skyblue;"] #grid-header,html[style*="background-color: tan;"] #grid-header,html[style*="background-color: white;"] #grid-header,html[style*="background-color: whitesmoke;"] #grid-header,html[style*="background-color: darkgray;"] .dashboard>div>.header,html[style*="background-color: gold;"] .dashboard>div>.header,html[style*="background-color: ivory;"] .dashboard>div>.header,html[style*="background-color: lightcyan;"] .dashboard>div>.header,html[style*="background-color: lightgray;"] .dashboard>div>.header,html[style*="background-color: silver;"] .dashboard>div>.header,html[style*="background-color: skyblue;"] .dashboard>div>.header,html[style*="background-color: tan;"] .dashboard>div>.header,html[style*="background-color: white;"] .dashboard>div>.header,html[style*="background-color: whitesmoke;"] .dashboard>div>.header{color:#000}.showSidePanelBtn{text-shadow:none}@media{body,html,.dashboard{-webkit-text-size-adjust:auto}.tile-title{font-size:95%!important}.tile-primary{overflow:visible!important}.tile.bulb-color .tile-primary>div{margin:0}.tile.dashboard .tile-edit{bottom:auto;top:0}.inset-auto:after{font-size:1.3em!important}.tile.dashboard{margin-top:calc(12%);margin-bottom:calc(12%)}}.tile.water .tile-secondary,.tile.motion .tile-secondary,.tile.mmulti .tile-secondary{display:block;opacity:.8;font-size:85%;padding:5px;position:absolute;right:1.25em;width:unset}.tile.bulb-color .tile-primary>div{margin-top:-3px}.tile.bulb .tile-primary>div{margin-top:0}.tile.thermostat{display:grid;grid-template-rows:1.8em auto}.tile.thermostat>.absolute.bottom-0{grid-row:1;position:relative;padding-top:.5em;top:unset;height:2em}.tile.thermostat>.flex.items-stretch{grid-row:2;display:grid;grid-template-rows:3.4em auto;grid-template-columns:calc(100%);height:auto}.tile.thermostat>.flex.items-stretch .cooling.w-full{grid-row:1}.tile.thermostat>.flex.items-stretch>.flex{display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;width:100%;grid-row:2;flex-flow:wrap-reverse}.tile.thermostat>.flex>.flex>.heating.pt-1,.tile.thermostat>.flex>.flex>.cooling.w-full{min-width:10em;min-height:10em;margin:0;border-radius:1em;-webkit-flex-grow:1;flex-grow:1;width:50%;margin:0;padding:0}.tile.thermostat>.flex>.flex>.heating.pt-1>.inline-block,.tile.thermostat>.flex>.flex>.cooling.w-full>.inline-block{display:inline-flex}.tile.thermostat .w-full.my-1{width:100%}.tile.thermostat .tile-edit{top:.75em}.tile.thermostat .w-full.my-1>div{width:3px!important}.tile.thermostat .w-full.my-1>div.inline-block{width:unset!important;padding:2px 2px 5px;min-width:32%}.tile.thermostat .cooling .inline-block br,.tile.thermostat .heating .inline-block br{content:" ";padding:2px}.tile.thermostat .w-full.my-1>div.inline-block:nth-child(1){border-radius:.5em 0 0 .5em}.tile.thermostat .w-full.my-1>div.inline-block:nth-child(3){border-radius:0 .5em .5em 0}.tile.thermostat .w-full.my-1{position:relative;bottom:unset;margin:0;margin-bottom:.5em}.tile.thermostat .p-1{padding:0}.tile.image{position:relative}html[style*="background-color: darkgray;"] #loading-overlay,html[style*="background-color: gold;"] #loading-overlay,html[style*="background-color: ivory;"] #loading-overlay,html[style*="background-color: lightcyan;"] #loading-overlay,html[style*="background-color: lightgray;"] #loading-overlay,html[style*="background-color: silver;"] #loading-overlay,html[style*="background-color: skyblue;"] #loading-overlay,html[style*="background-color: tan;"] #loading-overlay,html[style*="background-color: white;"] #loading-overlay,html[style*="background-color: whitesmoke;"] #loading-overlay{background-color:rgba(255,255,255,.9);color:#000;z-index:99999;position:fixed}
/* ------- DO NOT EDIT - Custom Skin CSS ------- */
/* studio-dark: https://api.github.com/repos/ezeek/smartly-skins/git/commits/b99d5307229b9ec436e4df019064e376a7bb4775 */
/* ------- DO NOT EDIT - Smartly Generated CSS below ------- */
.dashboard div .header{-moz-transform:scale(.6);opacity:.2;position:fixed;right:1em;top:0em;z-index:2;zoom:.6}.wrapper{height:100%;margin-top:0;padding-top:1em}#tile-11 .tile-title,.dashBack,.dashName{display:none}.dashboard div .header>.flex-auto.justify-end,.dashboard div .header>.flex-auto.justify-end>.flex{display:flex}#tile-11 .tile-contents,#tile-16 .tile-contents{color:rgba(255, 255, 255, 1.0) !important;height:100%}#tile-11 .tile-primary,#tile-16 .tile-primary{color:rgba(255, 255, 255, 1.0) !important;padding-bottom:0px}#tile-0 .tile-title,#tile-1 .tile-title,#tile-2 .tile-title,#tile-3 .tile-title,#tile-4 .tile-title,#tile-5 .tile-title,#tile-6 .tile-title,#tile-7 .tile-title,#tile-8 .tile-title,#tile-9 .tile-title{display:none;white-space:unset}#tile-0 .tile-contents,#tile-1 .tile-contents,#tile-2 .tile-contents,#tile-3 .tile-contents,#tile-4 .tile-contents,#tile-5 .tile-contents,#tile-6 .tile-contents,#tile-7 .tile-contents,#tile-8 .tile-contents,#tile-9 .tile-contents{color:rgba(192, 255, 0, 1.0) !important;height:100%}#tile-0 .tile-primary,#tile-1 .tile-primary,#tile-2 .tile-primary,#tile-3 .tile-primary,#tile-4 .tile-primary,#tile-5 .tile-primary,#tile-6 .tile-primary,#tile-7 .tile-primary,#tile-8 .tile-primary,#tile-9 .tile-primary{color:rgba(192, 255, 0, 1.0) !important;padding-bottom:0px}#tile-16 .tile-title{display:none;visibility:hidden;white-space:nowrap}#tile-10 .tile-contents,#tile-10 .tile-primary,#tile-10 .tile-primary:after,#tile-10 .tile-primary:before,#tile-11 .tile-primary:after,#tile-11 .tile-primary:before,#tile-16 .tile-primary:after,#tile-17 .tile-contents,#tile-17 .tile-primary:after{color:rgba(255, 255, 255, 1.0) !important}#tile-11,#tile-16{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 255, 255, 0.0) !important;border-style:solid !important;border-width:1px;color:rgba(255, 255, 255, 1.0) !important}#tile-0 .tile-primary:after,#tile-0 .tile-primary:before,#tile-1 .tile-primary:after,#tile-1 .tile-primary:before,#tile-13 .tile-contents,#tile-13 .tile-primary,#tile-13 .tile-primary:after,#tile-13 .tile-primary:before,#tile-2 .tile-primary:after,#tile-2 .tile-primary:before,#tile-3 .tile-primary:after,#tile-3 .tile-primary:before,#tile-4 .tile-primary:after,#tile-4 .tile-primary:before,#tile-5 .tile-primary:after,#tile-5 .tile-primary:before,#tile-6 .tile-primary:after,#tile-6 .tile-primary:before,#tile-7 .tile-primary:after,#tile-7 .tile-primary:before,#tile-8 .tile-primary:after,#tile-8 .tile-primary:before,#tile-9 .tile-primary:after,#tile-9 .tile-primary:before{color:rgba(192, 255, 0, 1.0) !important}#tile-0,#tile-1,#tile-4,#tile-5,#tile-6,#tile-7,#tile-8,#tile-9{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 255, 255, 0.7) !important;border-style:solid !important;border-width:1px;color:rgba(192, 255, 0, 1.0) !important}#tile-10{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 255, 255, 0.7) !important;border-style:solid !important;border-width:1px;color:rgba(255, 255, 255, 1.0) !important}#tile-2{background-color:rgba(37, 10, 10, 0.0) !important;border-color:rgba(255, 255, 255, 0.7) !important;border-style:solid !important;border-width:1px;color:rgba(192, 255, 0, 1.0) !important}#tile-3{background-color:rgba(255, 0, 0, 0.0) !important;border-color:rgba(255, 255, 255, 0.7) !important;border-style:solid !important;border-width:1px;color:rgba(192, 255, 0, 1.0) !important}#tile-12 .tile-contents,#tile-12 .tile-primary,#tile-12 .tile-primary:after,#tile-12 .tile-primary:before{color:rgba(255, 0, 0, 1.0) !important}#tile-12{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 0, 0, 0.7) !important;border-style:solid !important;border-width:1px;color:rgba(255, 0, 0, 1.0) !important}#tile-13{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(192, 255, 0, 0.7) !important;border-style:solid !important;border-width:1px;color:rgba(192, 255, 0, 1.0) !important}#tile-14 .tile-contents,#tile-14 .tile-primary,#tile-14 .tile-primary:after,#tile-14 .tile-primary:before{color:rgba(255, 98, 0, 1.0) !important}#tile-14{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 98, 0, 0.7) !important;border-style:solid !important;border-width:1px;color:rgba(255, 98, 0, 1.0) !important}#tile-15 .tile-contents,#tile-15 .tile-primary,#tile-15 .tile-primary:after,#tile-15 .tile-primary:before{color:rgba(255, 168, 0, 0.9) !important}#tile-15{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 168, 0, 0.7) !important;border-style:solid !important;border-width:1px;color:rgba(255, 168, 0, 0.9) !important}#tile-16 .tile-primary:before{color:rgba(255, 255, 255, 1.0) !important;margin-right:5px}#tile-17 .tile-primary{color:rgba(255, 255, 255, 1.0) !important;line-height:1.2em}#tile-17 .tile-primary:before{color:rgba(255, 255, 255, 1.0) !important;content:"\FA47";display:block !important;font-family:"Material Design Icons" !important;font-size:40px;line-height:1.2em;margin-right:5px;opacity:.7;visibility:visible}#tile-17{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 255, 255, 0.7) !important;border-style:solid !important;border-width:1px;color:rgba(255, 255, 255, 1.0) !important;height:100%}#tile-1 .tile-primary i.material-icons:after{content:"\31";font-family:"Material Design Icons" !important;visibility:hidden}#tile-1 .tile-primary i.material-icons:before{content:"\31";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-4 .tile-primary i.material-icons:after{content:"\34";font-family:"Material Design Icons" !important;visibility:hidden}#tile-4 .tile-primary i.material-icons:before{content:"\34";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-7 .tile-primary i.material-icons:after{content:"\37";font-family:"Material Design Icons" !important;visibility:hidden}#tile-7 .tile-primary i.material-icons:before{content:"\37";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-10 .tile-primary i.material-icons:after{content:"\F190";font-family:"Material Design Icons" !important;visibility:hidden}#tile-10 .tile-primary i.material-icons:before{content:"\F190";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-2 .tile-primary i.material-icons:after{content:"\32";font-family:"Material Design Icons" !important;visibility:hidden}#tile-2 .tile-primary i.material-icons:before{content:"\32";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-5 .tile-primary i.material-icons:after{content:"\35";font-family:"Material Design Icons" !important;visibility:hidden}#tile-5 .tile-primary i.material-icons:before{content:"\35";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-8 .tile-primary i.material-icons:after{content:"\38";font-family:"Material Design Icons" !important;visibility:hidden}#tile-8 .tile-primary i.material-icons:before{content:"\38";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-0 .tile-primary i.material-icons:after{content:"\30";font-family:"Material Design Icons" !important;visibility:hidden}#tile-0 .tile-primary i.material-icons:before{content:"\30";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-3 .tile-primary i.material-icons:after{content:"\33";font-family:"Material Design Icons" !important;visibility:hidden}#tile-3 .tile-primary i.material-icons:before{content:"\33";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-6 .tile-primary i.material-icons:after{content:"\36";font-family:"Material Design Icons" !important;visibility:hidden}#tile-6 .tile-primary i.material-icons:before{content:"\36";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-9 .tile-primary i.material-icons:after{content:"\39";font-family:"Material Design Icons" !important;visibility:hidden}#tile-9 .tile-primary i.material-icons:before{content:"\39";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-12 .tile-primary i.material-icons:after,#tile-14 .tile-primary i.material-icons:after{content:"\e931";font-family:"Material Design Icons" !important;visibility:hidden}#tile-12 .tile-primary i.material-icons:before,#tile-14 .tile-primary i.material-icons:before{content:"\e931";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-13 .tile-primary i.material-icons:after{content:"\e932";font-family:"Material Design Icons" !important;visibility:hidden}#tile-13 .tile-primary i.material-icons:before{content:"\e932";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-15 .tile-primary i.material-icons:after{content:"\FEEA";font-family:"Material Design Icons" !important;visibility:hidden}#tile-15 .tile-primary i.material-icons:before{content:"\FEEA";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-17 .tile-primary div{display:inline-block}#tile-0 .tile-primary i.material-icons,#tile-1 .tile-primary i.material-icons,#tile-10 .tile-primary i.material-icons,#tile-12 .tile-primary i.material-icons,#tile-13 .tile-primary i.material-icons,#tile-14 .tile-primary i.material-icons,#tile-15 .tile-primary i.material-icons,#tile-2 .tile-primary i.material-icons,#tile-3 .tile-primary i.material-icons,#tile-4 .tile-primary i.material-icons,#tile-5 .tile-primary i.material-icons,#tile-6 .tile-primary i.material-icons,#tile-7 .tile-primary i.material-icons,#tile-8 .tile-primary i.material-icons,#tile-9 .tile-primary i.material-icons{margin-bottom:0px;padding-top:5px}#tile-10 .tile-title{visibility:hidden;white-space:nowrap}#tile-12 .tile-title,#tile-13 .tile-title,#tile-14 .tile-title,#tile-15 .tile-title{justify-content:left;padding-left:.75em;padding-right:.75em;text-align:left !important;visibility:hidden;white-space:nowrap}#tile-10 .tile-title:after{content:"Clear Input";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-12 .tile-title:after{content:"Arm Away";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-13 .tile-title:after{content:"Disarm";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-14 .tile-title:after{content:"Arm Home";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-15 .tile-title:after{content:"Cancel Alerts";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-16 .tile-title:after{content:"Information";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}
/* ------- CUSTOM CSS BELOW THIS LINE - This CSS will be preserved during updates ------- */
/* It looks like you didn't delete your existing css before updating for the first time.. that's ok. Here is is, but we commented it out.
.header.flex {
padding:0 !important;
}
.wrapper {
overflow: hidden;
padding-right: 5px;
}
.dashBack.flex, .dashName.flex {
display:none;
}
.he-tap:before {
content: none;
}
.tile.button .tile-title, .tile.attribute .tile-title {
visibility: hidden;
display: none;
}
.tile.button .tile-contents, .tile.attribute .tile-contents {
height: calc(100%);
}
.tile.attribute .tile-primary, .tile.button .tile-primary {
padding:0;
}
#tile-1 .tile-primary :before {
content: "1";
}
#tile-2 .tile-primary :before {
content: "2";
}
#tile-3 .tile-primary :before {
content: "3";
}
#tile-4 .tile-primary :before {
content: "4";
}
#tile-5 .tile-primary :before {
content: "5";
}
#tile-6 .tile-primary :before {
content: "6";
}
#tile-7 .tile-primary :before {
content: "7";
}
#tile-8 .tile-primary :before {
content: "8";
}
#tile-9 .tile-primary :before {
content: "9";
}
#tile-0 .tile-primary :before {
content: "0";
}
#tile-10 .tile-primary :before {
#content: "Clear";
}
#tile-14 .tile-primary :before {
content: "Re-Arm";
}
#tile-15 .tile-primary :before {
content: "Arm";
}
#tile-16 .tile-primary :before {
content: "Disarm";
}
#tile-13 .tile-primary :before {
content: "Away";
}
#tile-12 .tile-primary :before {
content: "Party";
}
Add your custom CSS in the space below.. */
2 Likes
CSS
/* ------- DO NOT EDIT - Smartly Base CSS ------- */
/* https://api.github.com/repos/ezeek/smartly-base/git/commits/9fffaf1db0bc8106b575c1ce65b5547ce9cbe1b8 */
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Barlow Condensed Regular'),local('BarlowCondensed-Regular'),url(https://fonts.gstatic.com/s/barlowcondensed/v4/HTx3L3I-JCGChYJ8VI-L6OO_au7B6xHT2g.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face {
font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:local('Barlow Condensed Medium'),local('BarlowCondensed-Medium'),url(https://fonts.gstatic.com/s/barlowcondensed/v4/HTxwL3I-JCGChYJ8VI-L6OO_au7B4-Lwz3bWuQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
#app,body {
font-family: 'Barlow Condensed',sans-serif
}
@font-face {
font-family:"Material Design Icons";src:url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.eot?#iefix&v=4.9.95) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.ttf) format("truetype");font-weight:400;font-style:normal;unicode-range:U+F000-FFFFF
}
@font-face {
font-family:'Material Design Icons';src:url(https://hubitat.ezeek.us/smartly-base/assets/fonts/mtd-public.woff?v=1.08) format('woff'),url(https://hubitat.ezeek.us/smartly-base/assets/fonts/mtd-public.woff?v=1.065) format('truetype');font-weight:400;font-style:normal;unicode-range:U+E900-EFFF,U+0000-008E
}
.he-bulb_off:before,.he-bulb_on:before,.he-dimmer_low:before,.he-dimmer_medium:before,.he-door_closed:before,.he-door_open:before,.he-fire1:before,.he-fire_alarm_clear:before,.he-garage_closed:before,.he-garage_closing:before,.he-garage_open:before,.he-garage_opening:before,.he-hour-glass:before,.he-motion-sensor:before,.he-motion_detector_3:before,.he-motion_detector_3_filled:before,.he-not_present:before,.he-outlet_3:before,.he-outlet_off:before,.he-running:before,.he-shades_closed:before,.he-shades_partially_open:before,.he-switch_2:before,.he-switch_2_flipped:before,.he-water_dry:before,.he-water_wet:before,.he-window_1:before,.he-window_2:before,.tile.dashboard .tile-primary::before,.tile.shades .tile-primary i.material-icons{font-family:"Material Design Icons"!important}.he-shades_open:before{content:"\F0149"}.he-shades_closed:before{content:"\F0147"}.tile.shades .tile-primary.closing i.material-icons:before,.tile.shades .tile-primary.opening i.material-icons:before,.tile.shades .tile-primary.partially.open i.material-icons:before{content:"\F0148"}.he-not_present:before{content:"\FA47"}.he-outlet_3:before{content:"\F6A4"}.he-outlet_off:before{content:"\F6A5"}.he-bulb_off,.he-bulb_on,.he-dimmer_low,.he-dimmer_medium{margin-bottom:4px}.he-bulb_off,.he-bulb_on{padding:3px!important}.popup-content .he-bulb_off,.popup-content .he-bulb_on{color:#000!important}.popup-content{margin-left:auto;margin-right:auto}.tile.bulb-color .tile-primary{padding-bottom:0!important;overflow:visible}.he-bulb_on:before{content:"\F6E8";display:block}.he-bulb_off:before{content:"\F336"}.he-fire_alarm_clear:before{content:"\F392"}.he-fire1:before{content:"\F238"}.he-water_wet:before{content:"\F58C"}.he-water_dry:before{content:"\F58D"}.he-garage_closed:before{content:"\F6D8";font-size:120%}.he-garage_open:before{content:"\F6D9";font-size:120%}.he-garage_closing:before,.he-garage_opening:before{font-size:120%;content:"\F871"}.he-hour-glass:before{content:"\F1D8"}.he-running:before{content:"\e94d"}.he-motion-sensor:before{content:"\e94c"}.he-dimmer_low:before,.he-switch_2:before{content:"\FA18"}.he-dimmer_medium:before,.he-switch_2_flipped:before{content:"\F521"}.he-dimmer_low:before,.he-dimmer_medium:before{margin-top:-5px}.he-window_1:before{content:"\F5AE"}.he-window_2:before{content:"\F5B1"}.he-door_open:before{content:"\F81B"}.he-door_closed:before{content:"\F819"}.text-tile{background:0 0!important;color:#000;padding:0 10px;margin:0}.text-tile .justify-center,.text-tile .text-center{text-align:unset;justify-content:unset}.tile.date>div{background-color:#fff}.tile.date .flex{line-height:normal;font-size:100%}.tile.date .border-black{border:0;border-radius:20px}.tile.date .text-25{font-size:80%}.tile.date .day,.tile.date .weekday,.tile.date .year{padding:0}.tile.attribute,.tile.clock,.tile.dashboard,.tile.date-clock,.tile.mode,.tile.music-player{border:2px solid #fff}.tile.date-clock .tile-primary{font-weight:500;color:#fff}.tile.date-clock .tile-primary div{font-size:80%!important;font-weight:400;padding-left:10px}.tile.date-clock .tile-contents{margin-top:0;height:calc(100%)!important}.tile.date-clock small{margin-left:3px}.tile.dashboard{overflow:visible;background-color:rgba(255,255,255,.5);height:50%;margin-top:auto;margin-bottom:auto}.tile.dashboard .tile-title{display:none}.tile.dashboard .tile-primary{color:#000;align-self:center;padding:0;margin:0;display:inline-block}.tile.dashboard .tile-contents{margin-top:0;display:flex;justify-content:center;vertical-align:middle;height:100%}.tile.thermostat>.absolute.bottom-0{top:2em;left:1em;text-align:center;width:calc(100% - 2em);font-weight:500;line-height:1em;height:1em}.tile.thermostat .w-full.my-1{position:absolute;bottom:0}.tile.thermostat .heating.pt-1{padding-bottom:21px}.tile.thermostat .cooling .inline-block,.tile.thermostat .heating .inline-block{font-size:25px;vertical-align:super}.tile.thermostat .cooling .inline-block br,.tile.thermostat .heating .inline-block br{content:" ";padding:5px}.tile.link{border:2px solid #fff}.tile.link .tile-title{display:none}.tile.link .tile-contents{height:calc(100%);padding:0;margin:0}.tile.link .tile-primary{padding:0;margin:0}.tile.link .tile-primary div{margin-top:0}.tile.link .tile-primary div:hover{margin-top:-4px}.tile.dimmer .tile-primary .dimmer{margin-bottom:7px;margin-top:3px}.tile.shades .dimmer{margin-top:6px}.tile.image .inset-auto img{object-fit:cover}.tile.energy{border:2px solid rgba(236,255,34)}.tile.hsm{overflow:hidden}.tile.hsm .popup-content .top-0.right-0.absolute{padding:.5em 1em;margin:0;width:auto!important}.vue-slider{padding:0 0 5px!important}.tile{text-shadow:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin-left:1px}.dashName{font-size:25px;text-shadow:none;margin-left:10px}.tile-secondary{display:none}.tile-title{position:relative;left:auto;right:auto;padding:7px 6px 1px;font-weight:500;line-height:1.2em;letter-spacing:1px;opacity:.8;overflow:unset}.tile-title::after{white-space:pre-wrap}.dashBack{text-shadow:none;padding-left:5px}.he-logo-mark:before{font-size:40px}.tile-tertiary{padding:5px;position:absolute;left:8px;bottom:auto;font-size:85%;top:auto;right:auto;opacity:.8}.tile-contents{height:calc(80%);width:calc(100%);padding:0 4px}.text-green-600{color:rgba(0,255,105,.75);text-shadow:none}.dashboard div .header{padding:10px 10px 10px 15px}.wrapper{margin-left:0;margin-bottom:0;padding-left:15px;width:calc(100%);overflow:auto}.tile-edit{top:auto;bottom:10px;opacity:.3}.tile-primary{padding-bottom:calc(10%);overflow:visible}smartly{grid-column-end:-1;grid-row-end:-1;display:inline-block;height:calc(100% + 25px);z-index:-1;width:calc(100% + 15px)}@media (min-width:768px) and (max-width:1000px){.md:w-2/3{width:80%}}.navHeader{height:3em}.navHeader div.navLink.float-right:first-child,.navHeader div.navLink:last-child{background-color:red;font-weight:700;padding:0 1em}.navHeader div.navLink.float-right,.navHeader>.flex>div{text-transform:uppercase;font-size:1.3em;margin:0 4px;height:auto;text-align:center;padding:0 .5em;background-color:#323232;border-radius:20px;display:inline-table}.navHeader>.flex>div.pl-2{display:none}#app>.popup-container .menu .overflow-auto .flex .cursor-pointer{border:1px solid gray;margin:.5em 0 0 .5em;padding:1em;border-radius:6px;line-height:.5em}#app>.popup-container .exportBox{margin-top:1em}.md:w-1/2 .md:w-1/2{width:50%}.deviceSelect .devices .search input,.selectTemplate .templates .search input{padding:5px;border-radius:8px;margin-left:5px;width:100%}.deviceSelect .devices .search,.selectTemplate .templates .search{padding:1em;font-size:160%}.devices .deviceList,.templates .templates{font-size:1.5em}[type=checkbox],[type=radio]{height:1em;width:1em;margin:.25em 0}h4{font-size:1.2em;margin:.5em 0;opacity:.8;font-weight:500}h3{margin-bottom:auto}.text-lg,h3,label span{font-size:1.5em;display:inline-block}.text-lg,h3{color:#000;overflow:visible;margin-left:.5em;border-bottom:1px solid rgba(0,0,0,.5);width:auto;margin-top:auto}label span{margin-top:-1px;padding-top:.25em;vertical-align:top;margin-bottom:.5em}button,input,select,textarea{font-size:180%}h1,h2,h3,h4{font-family:'Barlow Condensed',sans-serif}.popup-content .top-0.right-0.absolute{background-color:red;color:#fff;font-weight:700}@media (max-width:767px){#app .popup-container .menu{width:98%}.md:w-2/3{width:96%}#app>.popup-container .menu .overflow-auto .flex .cursor-pointer,.navHeader div.navLink.float-right,.navHeader i.material-icons,.navHeader>.flex>div{font-size:1em}.navHeader{height:2.5em}}.tile-primary>div{margin-top:4px}.text-lg{margin-bottom:.5em}.tile.date-clock .tile-title{padding:0;margin:0;height:2px}@media (max-width:767px){.popup-content.h-85p{height:auto}}.tile.thermostat i{display:inline-block}.tile.dashboard .tile-edit{bottom:auto;top:1px}@media screen and (max-width:1284px) and (min-width:1280px){.tile.dashboard{zoom:unset}}@media screen and (max-width:1924px) and (min-width:1920px){.tile.dashboard{zoom:unset}}.tile.date>div.h-full.w-full{font-size:1.5em!important}.tile.date div.weekday,.tile.date div.year{font-size:140%!important;line-height:.75em}.tile.date div.day{font-size:250%!important;font-weight:700}.mt-12{margin-top:5em}.mt-16{margin-top:7em}[class*=" battery-"]>i.material-icons::before{font-family:"Material Design Icons"}.battery-100>i.material-icons::before,.battery-99>i.material-icons::before{content:"\F079"}.battery-91>i.material-icons::before,.battery-92>i.material-icons::before,.battery-93>i.material-icons::before,.battery-94>i.material-icons::before,.battery-95>i.material-icons::before,.battery-96>i.material-icons::before,.battery-97>i.material-icons::before,.battery-98>i.material-icons::before{content:"\F082"}.battery-81>i.material-icons::before,.battery-82>i.material-icons::before,.battery-83>i.material-icons::before,.battery-84>i.material-icons::before,.battery-85>i.material-icons::before,.battery-86>i.material-icons::before,.battery-87>i.material-icons::before,.battery-88>i.material-icons::before,.battery-89>i.material-icons::before,.battery-90>i.material-icons::before{content:"\F081"}.battery-71>i.material-icons::before,.battery-72>i.material-icons::before,.battery-73>i.material-icons::before,.battery-74>i.material-icons::before,.battery-75>i.material-icons::before,.battery-76>i.material-icons::before,.battery-77>i.material-icons::before,.battery-78>i.material-icons::before,.battery-79>i.material-icons::before,.battery-80>i.material-icons::before{content:"\F080"}.battery-61>i.material-icons::before,.battery-62>i.material-icons::before,.battery-63>i.material-icons::before,.battery-64>i.material-icons::before,.battery-65>i.material-icons::before,.battery-66>i.material-icons::before,.battery-67>i.material-icons::before,.battery-68>i.material-icons::before,.battery-69>i.material-icons::before,.battery-70>i.material-icons::before{content:"\F07F"}.battery-51>i.material-icons::before,.battery-52>i.material-icons::before,.battery-53>i.material-icons::before,.battery-54>i.material-icons::before,.battery-55>i.material-icons::before,.battery-56>i.material-icons::before,.battery-57>i.material-icons::before,.battery-58>i.material-icons::before,.battery-59>i.material-icons::before,.battery-60>i.material-icons::before{content:"\F07E"}.battery-41>i.material-icons::before,.battery-42>i.material-icons::before,.battery-43>i.material-icons::before,.battery-44>i.material-icons::before,.battery-45>i.material-icons::before,.battery-46>i.material-icons::before,.battery-47>i.material-icons::before,.battery-48>i.material-icons::before,.battery-49>i.material-icons::before,.battery-50>i.material-icons::before{content:"\F07D"}.battery-31>i.material-icons::before,.battery-32>i.material-icons::before,.battery-33>i.material-icons::before,.battery-34>i.material-icons::before,.battery-35>i.material-icons::before,.battery-36>i.material-icons::before,.battery-37>i.material-icons::before,.battery-38>i.material-icons::before,.battery-39>i.material-icons::before,.battery-40>i.material-icons::before{content:"\F07C"}.battery-21>i.material-icons::before,.battery-22>i.material-icons::before,.battery-23>i.material-icons::before,.battery-24>i.material-icons::before,.battery-25>i.material-icons::before,.battery-26>i.material-icons::before,.battery-27>i.material-icons::before,.battery-28>i.material-icons::before,.battery-29>i.material-icons::before,.battery-30>i.material-icons::before{content:"\F07B"}.battery-11>i.material-icons::before,.battery-12>i.material-icons::before,.battery-13>i.material-icons::before,.battery-14>i.material-icons::before,.battery-15>i.material-icons::before,.battery-16>i.material-icons::before,.battery-17>i.material-icons::before,.battery-18>i.material-icons::before,.battery-19>i.material-icons::before,.battery-20>i.material-icons::before{content:"\F07A"}.tile.battery .tile-primary{grid-template-columns:repeat(2,50%);display:grid;height:calc(100%);align-items:center;grid-template-rows:100%}.tile.battery .tile-primary>i.material-icons{text-align:right}.tile.battery .tile-primary>div{text-align:left}.tile.battery{background-color:rgba(0,255,105,.75);color:rgba(0,0,0,.66)}.tile.battery .tile-primary,.tile.humidity .tile-primary,.tile.temperature .tile-primary,.tile.illuminance .tile-primary,.tile.energy .tile-primary,.tile.power .tile-primary,.tile.attribute .tile-primary{width:100%;margin-top:-3px;padding-left:5px;line-height:1em}.tile.humidity .tile-contents .tile-edit{bottom:20px}.tile.battery .tile-contents{display:block}.dashboard>div>.header,.tile.text-tile{color:#fff}#app>.dashboard{-moz-transform-origin:0 0}html[style*="background-color: darkgray;"] .tile.text-tile,html[style*="background-color: gold;"] .tile.text-tile,html[style*="background-color: ivory;"] .tile.text-tile,html[style*="background-color: lightcyan;"] .tile.text-tile,html[style*="background-color: lightgray;"] .tile.text-tile,html[style*="background-color: silver;"] .tile.text-tile,html[style*="background-color: skyblue;"] .tile.text-tile,html[style*="background-color: tan;"] .tile.text-tile,html[style*="background-color: white;"] .tile.text-tile,html[style*="background-color: whitesmoke;"] .tile.text-tile,html[style*="background-color: darkgray;"] #grid-header,html[style*="background-color: gold;"] #grid-header,html[style*="background-color: ivory;"] #grid-header,html[style*="background-color: lightcyan;"] #grid-header,html[style*="background-color: lightgray;"] #grid-header,html[style*="background-color: silver;"] #grid-header,html[style*="background-color: skyblue;"] #grid-header,html[style*="background-color: tan;"] #grid-header,html[style*="background-color: white;"] #grid-header,html[style*="background-color: whitesmoke;"] #grid-header,html[style*="background-color: darkgray;"] .dashboard>div>.header,html[style*="background-color: gold;"] .dashboard>div>.header,html[style*="background-color: ivory;"] .dashboard>div>.header,html[style*="background-color: lightcyan;"] .dashboard>div>.header,html[style*="background-color: lightgray;"] .dashboard>div>.header,html[style*="background-color: silver;"] .dashboard>div>.header,html[style*="background-color: skyblue;"] .dashboard>div>.header,html[style*="background-color: tan;"] .dashboard>div>.header,html[style*="background-color: white;"] .dashboard>div>.header,html[style*="background-color: whitesmoke;"] .dashboard>div>.header{color:#000}.showSidePanelBtn{text-shadow:none}@media{body,html,.dashboard{-webkit-text-size-adjust:auto}.tile-title{font-size:95%!important}.tile-primary{overflow:visible!important}.tile.bulb-color .tile-primary>div{margin:0}.tile.dashboard .tile-edit{bottom:auto;top:0}.inset-auto:after{font-size:1.3em!important}.tile.dashboard{margin-top:calc(12%);margin-bottom:calc(12%)}}.tile.water .tile-secondary,.tile.motion .tile-secondary,.tile.mmulti .tile-secondary{display:block;opacity:.8;font-size:85%;padding:5px;position:absolute;right:1.25em;width:unset}.tile.bulb-color .tile-primary>div{margin-top:-3px}.tile.bulb .tile-primary>div{margin-top:0}.tile.thermostat{display:grid;grid-template-rows:1.8em auto}.tile.thermostat>.absolute.bottom-0{grid-row:1;position:relative;padding-top:.5em;top:unset;height:2em}.tile.thermostat>.flex.items-stretch{grid-row:2;display:grid;grid-template-rows:3.4em auto;grid-template-columns:calc(100%);height:auto}.tile.thermostat>.flex.items-stretch .cooling.w-full{grid-row:1}.tile.thermostat>.flex.items-stretch>.flex{display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;width:100%;grid-row:2;flex-flow:wrap-reverse}.tile.thermostat>.flex>.flex>.heating.pt-1,.tile.thermostat>.flex>.flex>.cooling.w-full{min-width:10em;min-height:10em;margin:0;border-radius:1em;-webkit-flex-grow:1;flex-grow:1;width:50%;margin:0;padding:0}.tile.thermostat>.flex>.flex>.heating.pt-1>.inline-block,.tile.thermostat>.flex>.flex>.cooling.w-full>.inline-block{display:inline-flex}.tile.thermostat .w-full.my-1{width:100%}.tile.thermostat .tile-edit{top:.75em}.tile.thermostat .w-full.my-1>div{width:3px!important}.tile.thermostat .w-full.my-1>div.inline-block{width:unset!important;padding:2px 2px 5px;min-width:32%}.tile.thermostat .cooling .inline-block br,.tile.thermostat .heating .inline-block br{content:" ";padding:2px}.tile.thermostat .w-full.my-1>div.inline-block:nth-child(1){border-radius:.5em 0 0 .5em}.tile.thermostat .w-full.my-1>div.inline-block:nth-child(3){border-radius:0 .5em .5em 0}.tile.thermostat .w-full.my-1{position:relative;bottom:unset;margin:0;margin-bottom:.5em}.tile.thermostat .p-1{padding:0}.tile.image{position:relative}html[style*="background-color: darkgray;"] #loading-overlay,html[style*="background-color: gold;"] #loading-overlay,html[style*="background-color: ivory;"] #loading-overlay,html[style*="background-color: lightcyan;"] #loading-overlay,html[style*="background-color: lightgray;"] #loading-overlay,html[style*="background-color: silver;"] #loading-overlay,html[style*="background-color: skyblue;"] #loading-overlay,html[style*="background-color: tan;"] #loading-overlay,html[style*="background-color: white;"] #loading-overlay,html[style*="background-color: whitesmoke;"] #loading-overlay{background-color:rgba(255,255,255,.9);color:#000;z-index:99999;position:fixed}
/* ------- DO NOT EDIT - Custom Skin CSS ------- */
/* studio-dark: https://api.github.com/repos/ezeek/smartly-skins/git/commits/b99d5307229b9ec436e4df019064e376a7bb4775 */
/* ------- DO NOT EDIT - Smartly Generated CSS below ------- */
.dashboard div .header{-moz-transform:scale(.6);opacity:.2;position:fixed;right:1em;top:0em;z-index:2;zoom:.6}.wrapper{height:100%;margin-top:0;padding-top:1em}#tile-0 .tile-title,#tile-1 .tile-title,#tile-10 .tile-title,#tile-11 .tile-title,#tile-2 .tile-title,#tile-3 .tile-title,#tile-4 .tile-title,#tile-5 .tile-title,#tile-6 .tile-title,#tile-7 .tile-title,#tile-8 .tile-title,#tile-9 .tile-title,.dashBack,.dashName{display:none}.dashboard div .header>.flex-auto.justify-end,.dashboard div .header>.flex-auto.justify-end>.flex{display:flex}#tile-11 .tile-contents{color:rgba(255, 184, 0, 1.0) !important;height:100%}#tile-11 .tile-primary{-moz-transform:scale(2.0);color:rgba(255, 184, 0, 1.0) !important;padding-bottom:0px;zoom:2.0}#tile-0 .tile-contents,#tile-1 .tile-contents,#tile-10 .tile-contents,#tile-2 .tile-contents,#tile-3 .tile-contents,#tile-4 .tile-contents,#tile-5 .tile-contents,#tile-6 .tile-contents,#tile-7 .tile-contents,#tile-8 .tile-contents,#tile-9 .tile-contents{-moz-transform:scale(2.0);color:rgba(0, 255, 182, 1.0) !important;height:100%;zoom:2.0}#tile-0 .tile-primary,#tile-1 .tile-primary,#tile-10 .tile-primary,#tile-2 .tile-primary,#tile-3 .tile-primary,#tile-4 .tile-primary,#tile-5 .tile-primary,#tile-6 .tile-primary,#tile-7 .tile-primary,#tile-8 .tile-primary,#tile-9 .tile-primary{color:rgba(0, 255, 182, 1.0) !important;padding-bottom:0px}#tile-16 .tile-title{display:none;visibility:hidden;white-space:nowrap}#tile-16 .tile-contents{color:rgba(0, 138, 255, 1.0) !important;height:100%}#tile-16 .tile-primary{-moz-transform:scale(2.0);color:rgba(0, 138, 255, 1.0) !important;padding-bottom:0px;zoom:2.0}#tile-12 .tile-contents,#tile-14 .tile-contents,#tile-17 .tile-contents{-moz-transform:scale(2.0);color:rgba(255, 0, 0, 1.0) !important;zoom:2.0}#tile-13 .tile-contents{-moz-transform:scale(2.0);color:rgba(0, 255, 182, 1.0) !important;zoom:2.0}#tile-15 .tile-contents{-moz-transform:scale(2.0);color:rgba(255, 184, 0, 1.0) !important;zoom:2.0}#tile-11 .tile-primary:after,#tile-11 .tile-primary:before,#tile-15 .tile-primary,#tile-15 .tile-primary:after,#tile-15 .tile-primary:before{color:rgba(255, 184, 0, 1.0) !important}#tile-11{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(0, 138, 255, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(255, 184, 0, 1.0) !important}#tile-0 .tile-primary:after,#tile-0 .tile-primary:before,#tile-1 .tile-primary:after,#tile-1 .tile-primary:before,#tile-10 .tile-primary:after,#tile-10 .tile-primary:before,#tile-13 .tile-primary,#tile-13 .tile-primary:after,#tile-13 .tile-primary:before,#tile-2 .tile-primary:after,#tile-2 .tile-primary:before,#tile-3 .tile-primary:after,#tile-3 .tile-primary:before,#tile-4 .tile-primary:after,#tile-4 .tile-primary:before,#tile-5 .tile-primary:after,#tile-5 .tile-primary:before,#tile-6 .tile-primary:after,#tile-6 .tile-primary:before,#tile-7 .tile-primary:after,#tile-7 .tile-primary:before,#tile-8 .tile-primary:after,#tile-8 .tile-primary:before,#tile-9 .tile-primary:after,#tile-9 .tile-primary:before{color:rgba(0, 255, 182, 1.0) !important}#tile-0,#tile-1,#tile-10,#tile-4,#tile-5,#tile-6,#tile-7,#tile-8,#tile-9{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(0, 255, 182, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(0, 255, 182, 1.0) !important}#tile-2{background-color:rgba(37, 10, 10, 0.0) !important;border-color:rgba(0, 255, 182, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(0, 255, 182, 1.0) !important}#tile-3{background-color:rgba(255, 0, 0, 0.0) !important;border-color:rgba(0, 255, 182, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(0, 255, 182, 1.0) !important}#tile-12 .tile-primary,#tile-12 .tile-primary:after,#tile-12 .tile-primary:before,#tile-14 .tile-primary,#tile-14 .tile-primary:after,#tile-14 .tile-primary:before,#tile-17 .tile-primary,#tile-17 .tile-primary:after,#tile-17 .tile-primary:before{color:rgba(255, 0, 0, 1.0) !important}#tile-17{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 0, 0, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(255, 0, 0, 1.0) !important}#tile-12,#tile-14{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 184, 0, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(255, 0, 0, 1.0) !important}#tile-13{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 184, 0, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(0, 255, 182, 1.0) !important}#tile-15{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 184, 0, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(255, 184, 0, 1.0) !important}#tile-16 .tile-primary:after,#tile-16 .tile-primary:before{color:rgba(0, 138, 255, 1.0) !important}#tile-16{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 255, 255, 0.0) !important;border-style:solid !important;border-width:1px;color:rgba(0, 138, 255, 1.0) !important}#tile-1 .tile-primary i.material-icons:after{content:"\31";font-family:"Material Design Icons" !important;visibility:hidden}#tile-1 .tile-primary i.material-icons:before{content:"\31";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-4 .tile-primary i.material-icons:after{content:"\34";font-family:"Material Design Icons" !important;visibility:hidden}#tile-4 .tile-primary i.material-icons:before{content:"\34";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-7 .tile-primary i.material-icons:after{content:"\37";font-family:"Material Design Icons" !important;visibility:hidden}#tile-7 .tile-primary i.material-icons:before{content:"\37";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-2 .tile-primary i.material-icons:after{content:"\32";font-family:"Material Design Icons" !important;visibility:hidden}#tile-2 .tile-primary i.material-icons:before{content:"\32";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-5 .tile-primary i.material-icons:after{content:"\35";font-family:"Material Design Icons" !important;visibility:hidden}#tile-5 .tile-primary i.material-icons:before{content:"\35";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-8 .tile-primary i.material-icons:after{content:"\38";font-family:"Material Design Icons" !important;visibility:hidden}#tile-8 .tile-primary i.material-icons:before{content:"\38";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-0 .tile-primary i.material-icons:after{content:"\30";font-family:"Material Design Icons" !important;visibility:hidden}#tile-0 .tile-primary i.material-icons:before{content:"\30";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-3 .tile-primary i.material-icons:after{content:"\33";font-family:"Material Design Icons" !important;visibility:hidden}#tile-3 .tile-primary i.material-icons:before{content:"\33";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-6 .tile-primary i.material-icons:after{content:"\36";font-family:"Material Design Icons" !important;visibility:hidden}#tile-6 .tile-primary i.material-icons:before{content:"\36";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-9 .tile-primary i.material-icons:after{content:"\39";font-family:"Material Design Icons" !important;visibility:hidden}#tile-9 .tile-primary i.material-icons:before{content:"\39";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-17 .tile-primary i.material-icons:after{content:"\F09F";font-family:"Material Design Icons" !important;visibility:hidden}#tile-17 .tile-primary i.material-icons:before{content:"\F09F";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-12 .tile-primary i.material-icons:after,#tile-14 .tile-primary i.material-icons:after{content:"\e931";font-family:"Material Design Icons" !important;visibility:hidden}#tile-12 .tile-primary i.material-icons:before,#tile-14 .tile-primary i.material-icons:before{content:"\e931";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-13 .tile-primary i.material-icons:after{content:"\e932";font-family:"Material Design Icons" !important;visibility:hidden}#tile-13 .tile-primary i.material-icons:before{content:"\e932";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-15 .tile-primary i.material-icons:after{content:"\FEEA";font-family:"Material Design Icons" !important;visibility:hidden}#tile-15 .tile-primary i.material-icons:before{content:"\FEEA";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-12 .tile-title,#tile-13 .tile-title,#tile-14 .tile-title,#tile-15 .tile-title,#tile-17 .tile-title{visibility:hidden;white-space:unset}#tile-17 .tile-title:after{content:"Sound Siren";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-12 .tile-title:after{content:"Arm Away";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-13 .tile-title:after{content:"Disarm";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-14 .tile-title:after{content:"Arm Home";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-15 .tile-title:after{content:"Cancel Alerts";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-16 .tile-title:after{content:"Information";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-12 .tile-primary i.material-icons,#tile-13 .tile-primary i.material-icons,#tile-14 .tile-primary i.material-icons,#tile-15 .tile-primary i.material-icons,#tile-17 .tile-primary i.material-icons{margin-bottom:0px;padding-top:5px}
/* ------- CUSTOM CSS BELOW THIS LINE - This CSS will be preserved during updates ------- */
/* It looks like you didn't delete your existing css before updating for the first time.. that's ok. Here is is, but we commented it out.
.header.flex {
padding:0 !important;
}
.wrapper {
overflow: hidden;
padding-right: 5px;
}
.dashBack.flex, .dashName.flex {
display:none;
}
.he-tap:before {
content: none;
}
.tile.button .tile-title, .tile.attribute .tile-title {
visibility: hidden;
display: none;
}
.tile.button .tile-contents, .tile.attribute .tile-contents {
height: calc(100%);
}
.tile.attribute .tile-primary, .tile.button .tile-primary {
padding:0;
}
#tile-1 .tile-primary :before {
content: "1";
}
#tile-2 .tile-primary :before {
content: "2";
}
#tile-3 .tile-primary :before {
content: "3";
}
#tile-4 .tile-primary :before {
content: "4";
}
#tile-5 .tile-primary :before {
content: "5";
}
#tile-6 .tile-primary :before {
content: "6";
}
#tile-7 .tile-primary :before {
content: "7";
}
#tile-8 .tile-primary :before {
content: "8";
}
#tile-9 .tile-primary :before {
content: "9";
}
#tile-0 .tile-primary :before {
content: "0";
}
#tile-10 .tile-primary :before {
#content: "Clear";
}
#tile-14 .tile-primary :before {
content: "Re-Arm";
}
#tile-15 .tile-primary :before {
content: "Arm";
}
#tile-16 .tile-primary :before {
content: "Disarm";
}
#tile-13 .tile-primary :before {
content: "Away";
}
#tile-12 .tile-primary :before {
content: "Party";
}
Add your custom CSS in the space below.. */
Json
{
"localization": "English",
"roundedCorners": 15,
"dateFormat": "MM/DD/YYYY",
"hideLabels": false,
"customColors": [
{
"template": "dimmer",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "rgb(255,255,255)",
"state": "on"
},
{
"template": "dimmer",
"bgColor": "rgba(255,255,255,.9)",
"iconColor": "rgb(80,80,80)",
"state": "off"
},
{
"template": "motion",
"bgColor": "rgba(255,255,255,0.9)",
"iconColor": "rgb(0,0,0)",
"state": "inactive"
},
{
"template": "motion",
"bgColor": "rgba(255,248,46,.9)",
"iconColor": "rgb(0,0,0)",
"state": "active"
},
{
"template": "switches",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "rgb(255,255,255)",
"state": "on"
},
{
"template": "switches",
"bgColor": "rgba(255,255,255,.9)",
"iconColor": "rgb(80,80,80)",
"state": "off"
},
{
"template": "multi",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "closed"
},
{
"template": "multi",
"bgColor": "rgba(210, 13, 13, 0.9)",
"iconColor": "rgb(255,255,255)",
"state": "open"
},
{
"template": "window",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "closed"
},
{
"template": "window",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "open"
},
{
"template": "door",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "closed"
},
{
"template": "door",
"bgColor": "rgb(251,104,14)",
"state": "open"
},
{
"template": "fan",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "",
"state": "low"
},
{
"template": "fan",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "",
"state": "medium-low"
},
{
"template": "fan",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "",
"state": "medium"
},
{
"template": "fan",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "",
"state": "medium-high"
},
{
"template": "fan",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "",
"state": "high"
},
{
"template": "garage-control",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "closed"
},
{
"template": "garage-control",
"bgColor": "rgba(210, 13, 13, 0.9)",
"iconColor": "rgb(255,255,255)",
"state": "open"
},
{
"template": "garage-control",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "opening"
},
{
"template": "garage-control",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "closing"
},
{
"template": "garage",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "closed"
},
{
"template": "garage",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "open"
},
{
"template": "garage",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "opening"
},
{
"template": "garage",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "closing"
},
{
"template": "shades",
"bgColor": "hsla(0,0%,50.2%,.5)",
"iconColor": "",
"state": "off"
},
{
"template": "shades",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "",
"state": "on"
},
{
"template": "shades",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "opening"
},
{
"template": "shades",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "closing"
},
{
"template": "shades",
"bgColor": "rgb(67,166,52)",
"iconColor": "",
"state": "open"
},
{
"template": "door-control",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "opening"
},
{
"template": "door-control",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "open"
},
{
"template": "door-control",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "closed"
},
{
"template": "lock",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "locked"
},
{
"template": "lock",
"bgColor": "rgba(251,104,14,.9)",
"state": "unlocked"
},
{
"template": "water",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "wet"
},
{
"template": "water",
"bgColor": "rgba(0,243,255,0.9)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "dry"
},
{
"template": "smoke",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "detected"
},
{
"template": "smoke",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "clear"
},
{
"template": "bulb",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "rgb(255,255,255)",
"state": "on"
},
{
"template": "bulb",
"bgColor": "rgba(255,255,255,.9)",
"iconColor": "rgb(80,80,80)",
"state": "off"
},
{
"template": "presence",
"bgColor": "rgba(27,176,116,0.9)",
"iconColor": "rgb(255,255,255)",
"state": "present"
},
{
"template": "presence",
"bgColor": "",
"iconColor": "",
"state": "not present"
},
{
"template": "temperature",
"bgColor": "rgba(37,147,187,.9)",
"iconColor": "rgb(255,255,255)",
"state": "default"
},
{
"template": "contact",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "closed"
},
{
"template": "contact",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "open"
},
{
"template": "bulb-color",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "rgb(255,255,255)",
"state": "on"
},
{
"template": "bulb-color",
"bgColor": "rgba(255,255,255,.9)",
"iconColor": "rgba(80,80,80)",
"state": "off"
},
{
"template": "carbon-monoxide",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "detected"
},
{
"template": "carbon-monoxide",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "clear"
},
{
"template": "outlet",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "rgb(255,255,255)",
"state": "on"
},
{
"template": "outlet",
"bgColor": "rgba(255,255,255,0.9)",
"iconColor": "rgb(80,80,80)",
"state": "off"
},
{
"template": "humidity",
"bgColor": "rgba(58,186,161,.85)",
"iconColor": "rgb(255,255,255)",
"state": "default"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "default"
},
{
"template": "music-player",
"bgColor": "rgba(20,20,20,.9)",
"iconColor": "",
"state": "default",
"customIcon": ""
},
{
"template": "battery",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "10"
},
{
"template": "battery",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "9"
},
{
"template": "battery",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "8"
},
{
"template": "battery",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "7"
},
{
"template": "battery",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "6"
},
{
"template": "battery",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "5"
},
{
"template": "battery",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "4"
},
{
"template": "battery",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "3"
},
{
"template": "battery",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "2"
},
{
"template": "battery",
"bgColor": "rgba(210,13,13,.9)",
"iconColor": "rgb(255,255,255)",
"state": "1"
}
],
"colWidth": "",
"cloudRefresh": 5,
"hsmPin": "",
"hide3dot": true,
"clockMode": true,
"gridGap": 5,
"tiles": [
{
"template": "smartly",
"rowSpan": 0,
"col": -3,
"colSpan": 0,
"id": 0,
"row": -3,
"device": "smartly",
"templateExtra": "{"tiles":{"11":{"id":11,"template":"attribute","templateExtra":"hsmStatus","pos":1,"mods":{"unit":{"value":null},"numeric":{"value":"unchecked"},"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":true},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(255, 184, 0, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(0, 138, 255, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"1":{"id":1,"template":"buttons","templateExtra":"1","pos":2,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":true},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(0, 255, 182, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(0, 255, 182, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":"31","class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"4":{"id":4,"template":"buttons","templateExtra":"4","pos":3,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":true},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(0, 255, 182, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(0, 255, 182, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":"34","class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"7":{"id":7,"template":"buttons","templateExtra":"7","pos":4,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":true},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(0, 255, 182, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(0, 255, 182, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":"37","class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"10":{"id":10,"template":"buttons","templateExtra":null,"pos":5,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":true},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(0, 255, 182, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(0, 255, 182, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"2":{"id":2,"template":"buttons","templateExtra":"2","pos":6,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":true},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(0, 255, 182, 1.0)"},"color_bg":{"value":"rgba(37, 10, 10, 0.0)"},"border":{"value":"rgba(0, 255, 182, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":"32","class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"5":{"id":5,"template":"buttons","templateExtra":"5","pos":7,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":true},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(0, 255, 182, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(0, 255, 182, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":"35","class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"8":{"id":8,"template":"buttons","templateExtra":"8","pos":8,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":true},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(0, 255, 182, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(0, 255, 182, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":"38","class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"0":{"id":0,"template":"buttons","templateExtra":"0","pos":9,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":true},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(0, 255, 182, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(0, 255, 182, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":"30","class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"3":{"id":3,"template":"buttons","templateExtra":"3","pos":10,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":true},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(0, 255, 182, 1.0)"},"color_bg":{"value":"rgba(255, 0, 0, 0.0)"},"border":{"value":"rgba(0, 255, 182, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":"33","class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"6":{"id":6,"template":"buttons","templateExtra":"6","pos":11,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":true},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(0, 255, 182, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(0, 255, 182, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":"36","class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"9":{"id":9,"template":"buttons","templateExtra":"9","pos":12,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":true},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(0, 255, 182, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(0, 255, 182, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":"39","class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"17":{"id":17,"template":"buttons","templateExtra":"","pos":13,"mods":{"title":{"value":"Sound Siren"},"text_alignment":{"value":null},"remove_title":{"value":"unchecked"},"nudge":{"value":true},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(255, 0, 0, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(255, 0, 0, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":"F09F","class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"12":{"id":12,"template":"buttons","templateExtra":"","pos":14,"mods":{"title":{"value":"Arm Away"},"text_alignment":{"value":null},"remove_title":{"value":"unchecked"},"nudge":{"value":true},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(255, 0, 0, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(255, 184, 0, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":"e931","class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"13":{"id":13,"template":"buttons","templateExtra":"","pos":15,"mods":{"title":{"value":"Disarm"},"text_alignment":{"value":null},"remove_title":{"value":"unchecked"},"nudge":{"value":true},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(0, 255, 182, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(255, 184, 0, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":"e932","class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"14":{"id":14,"template":"buttons","templateExtra":"","pos":16,"mods":{"title":{"value":"Arm Home"},"text_alignment":{"value":null},"remove_title":{"value":"unchecked"},"nudge":{"value":true},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(255, 0, 0, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(255, 184, 0, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":"e931","class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"15":{"id":15,"template":"buttons","templateExtra":"","pos":17,"mods":{"title":{"value":"Cancel Alerts"},"text_alignment":{"value":null},"remove_title":{"value":"unchecked"},"nudge":{"value":true},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(255, 184, 0, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(255, 184, 0, 1.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":"FEEA","class":"he-tap"},"pressed":{"code":null,"class":"pressed"}}},"16":{"id":16,"template":"attribute","templateExtra":"InputDisplay","pos":18,"mods":{"unit":{"value":null},"numeric":{"value":"unchecked"},"title":{"value":"Information"},"text_alignment":{"value":null},"remove_title":{"value":true},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":"2.0"},"color_fg":{"value":"rgba(0, 138, 255, 1.0)"},"color_bg":{"value":"rgba(255, 255, 255, 0.0)"},"border":{"value":"rgba(255, 255, 255, 0.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}}},"settings":{"commit":"9621aa326d944b39fea8ea373ba73507a6c7d388","calibration":{"source":"\/var\/www\/html\/smartly\/assets\/data\/device_cals.json","colwidth":60,"gridgap":15,"colcount":16},"iconSize":"30","fontSize":"14"},"dashboard":{"mods":{"cal_devices":null,"cal_devices_2col":null,"header":{"value":"stealth_top_right"},"hide_scrollbars":{"value":null},"parallax":{"value":null},"chroma_battery":{"value":null},"chroma_temperature":{"value":"chroma_temperature"},"chroma_humidity":{"value":"chroma_humidity"}}}}"
},
{
"rowSpan": 6,
"template": "attribute",
"col": 13,
"colSpan": 4,
"id": 11,
"row": 1,
"device": -3,
"templateExtra": "hsmStatus"
},
{
"rowSpan": 6,
"template": "buttons",
"col": 1,
"buttonCommand": "push",
"colSpan": 4,
"id": 1,
"row": 7,
"device": "258",
"templateExtra": "1"
},
{
"rowSpan": 6,
"template": "buttons",
"col": 1,
"buttonCommand": "push",
"colSpan": 4,
"id": 4,
"row": 13,
"device": "258",
"templateExtra": "4"
},
{
"rowSpan": 6,
"template": "buttons",
"col": 1,
"buttonCommand": "push",
"colSpan": 4,
"id": 7,
"row": 19,
"device": "258",
"templateExtra": "7"
},
{
"rowSpan": 6,
"template": "buttons",
"col": 1,
"buttonCommand": "push",
"colSpan": 4,
"id": 10,
"row": 25,
"device": "257",
"templateExtra": null,
"customIcon": "refresh"
},
{
"rowSpan": 6,
"template": "buttons",
"col": 5,
"buttonCommand": "push",
"colSpan": 4,
"id": 2,
"row": 7,
"device": "258",
"templateExtra": "2"
},
{
"rowSpan": 6,
"template": "buttons",
"col": 5,
"buttonCommand": "push",
"colSpan": 4,
"id": 5,
"row": 13,
"device": "258",
"templateExtra": "5"
},
{
"rowSpan": 6,
"template": "buttons",
"col": 5,
"buttonCommand": "push",
"colSpan": 4,
"id": 8,
"row": 19,
"device": "258",
"templateExtra": "8"
},
{
"rowSpan": 6,
"template": "buttons",
"col": 5,
"buttonCommand": "push",
"colSpan": 4,
"id": 0,
"row": 25,
"device": "258",
"templateExtra": "0"
},
{
"rowSpan": 6,
"template": "buttons",
"col": 9,
"buttonCommand": "push",
"colSpan": 4,
"id": 3,
"row": 7,
"device": "258",
"templateExtra": "3"
},
{
"rowSpan": 6,
"template": "buttons",
"col": 9,
"buttonCommand": "push",
"colSpan": 4,
"id": 6,
"row": 13,
"device": "258",
"templateExtra": "6"
},
{
"rowSpan": 6,
"template": "buttons",
"col": 9,
"buttonCommand": "push",
"colSpan": 4,
"id": 9,
"row": 19,
"device": "258",
"templateExtra": "9"
},
{
"rowSpan": 6,
"template": "buttons",
"col": 13,
"buttonCommand": "push",
"colSpan": 4,
"id": 17,
"row": 7,
"device": "528",
"templateExtra": "",
"customIcon": "he-siren_and_alarm"
},
{
"rowSpan": 6,
"template": "buttons",
"col": 13,
"buttonCommand": "push",
"colSpan": 4,
"id": 12,
"row": 13,
"device": "248",
"templateExtra": ""
},
{
"rowSpan": 6,
"template": "buttons",
"col": 9,
"buttonCommand": "push",
"colSpan": 4,
"id": 13,
"row": 25,
"device": "251",
"templateExtra": ""
},
{
"rowSpan": 6,
"template": "buttons",
"col": 13,
"buttonCommand": "push",
"colSpan": 4,
"id": 14,
"row": 19,
"device": "249",
"templateExtra": ""
},
{
"rowSpan": 6,
"template": "buttons",
"col": 13,
"buttonCommand": "push",
"colSpan": 4,
"id": 15,
"row": 25,
"device": "256",
"templateExtra": "1"
},
{
"rowSpan": 6,
"template": "attribute",
"col": 1,
"buttonCommand": "push",
"colSpan": 12,
"id": 16,
"row": 1,
"device": "260",
"templateExtra": "InputDisplay"
}
],
"goBack": true,
"modePin": "",
"bgColor": "black",
"lanRefresh": 1,
"iconSize": "30",
"cols": 15,
"rowHeight": "",
"customCSS": "/* ------- DO NOT EDIT - Smartly Base CSS ------- /\r\n\r\n/ https://api.github.com/repos/ezeek/smartly-base/git/commits/9fffaf1db0bc8106b575c1ce65b5547ce9cbe1b8 /\r\n\r\n@font-face {\n font-family: 'Barlow Condensed';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: local('Barlow Condensed Regular'),local('BarlowCondensed-Regular'),url(https://fonts.gstatic.com/s/barlowcondensed/v4/HTx3L3I-JCGChYJ8VI-L6OO_au7B6xHT2g.woff2) format('woff2');\n unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD\n}\n\n@font-face {\n font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:local('Barlow Condensed Medium'),local('BarlowCondensed-Medium'),url(https://fonts.gstatic.com/s/barlowcondensed/v4/HTxwL3I-JCGChYJ8VI-L6OO_au7B4-Lwz3bWuQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD\n}\n\n#app,body {\n font-family: 'Barlow Condensed',sans-serif\n}\n\n@font-face {\n font-family:"Material Design Icons";src:url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.eot?#iefix&v=4.9.95) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.ttf) format("truetype");font-weight:400;font-style:normal;unicode-range:U+F000-FFFFF\n}\n\n@font-face {\n font-family:'Material Design Icons';src:url(https://hubitat.ezeek.us/smartly-base/assets/fonts/mtd-public.woff?v=1.08) format('woff'),url(https://hubitat.ezeek.us/smartly-base/assets/fonts/mtd-public.woff?v=1.065) format('truetype');font-weight:400;font-style:normal;unicode-range:U+E900-EFFF,U+0000-008E\n}\n\n.he-bulb_off:before,.he-bulb_on:before,.he-dimmer_low:before,.he-dimmer_medium:before,.he-door_closed:before,.he-door_open:before,.he-fire1:before,.he-fire_alarm_clear:before,.he-garage_closed:before,.he-garage_closing:before,.he-garage_open:before,.he-garage_opening:before,.he-hour-glass:before,.he-motion-sensor:before,.he-motion_detector_3:before,.he-motion_detector_3_filled:before,.he-not_present:before,.he-outlet_3:before,.he-outlet_off:before,.he-running:before,.he-shades_closed:before,.he-shades_partially_open:before,.he-switch_2:before,.he-switch_2_flipped:before,.he-water_dry:before,.he-water_wet:before,.he-window_1:before,.he-window_2:before,.tile.dashboard .tile-primary::before,.tile.shades .tile-primary i.material-icons{font-family:"Material Design Icons"!important}.he-shades_open:before{content:"\F0149"}.he-shades_closed:before{content:"\F0147"}.tile.shades .tile-primary.closing i.material-icons:before,.tile.shades .tile-primary.opening i.material-icons:before,.tile.shades .tile-primary.partially.open i.material-icons:before{content:"\F0148"}.he-not_present:before{content:"\FA47"}.he-outlet_3:before{content:"\F6A4"}.he-outlet_off:before{content:"\F6A5"}.he-bulb_off,.he-bulb_on,.he-dimmer_low,.he-dimmer_medium{margin-bottom:4px}.he-bulb_off,.he-bulb_on{padding:3px!important}.popup-content .he-bulb_off,.popup-content .he-bulb_on{color:#000!important}.popup-content{margin-left:auto;margin-right:auto}.tile.bulb-color .tile-primary{padding-bottom:0!important;overflow:visible}.he-bulb_on:before{content:"\F6E8";display:block}.he-bulb_off:before{content:"\F336"}.he-fire_alarm_clear:before{content:"\F392"}.he-fire1:before{content:"\F238"}.he-water_wet:before{content:"\F58C"}.he-water_dry:before{content:"\F58D"}.he-garage_closed:before{content:"\F6D8";font-size:120%}.he-garage_open:before{content:"\F6D9";font-size:120%}.he-garage_closing:before,.he-garage_opening:before{font-size:120%;content:"\F871"}.he-hour-glass:before{content:"\F1D8"}.he-running:before{content:"\e94d"}.he-motion-sensor:before{content:"\e94c"}.he-dimmer_low:before,.he-switch_2:before{content:"\FA18"}.he-dimmer_medium:before,.he-switch_2_flipped:before{content:"\F521"}.he-dimmer_low:before,.he-dimmer_medium:before{margin-top:-5px}.he-window_1:before{content:"\F5AE"}.he-window_2:before{content:"\F5B1"}.he-door_open:before{content:"\F81B"}.he-door_closed:before{content:"\F819"}.text-tile{background:0 0!important;color:#000;padding:0 10px;margin:0}.text-tile .justify-center,.text-tile .text-center{text-align:unset;justify-content:unset}.tile.date>div{background-color:#fff}.tile.date .flex{line-height:normal;font-size:100%}.tile.date .border-black{border:0;border-radius:20px}.tile.date .text-25{font-size:80%}.tile.date .day,.tile.date .weekday,.tile.date .year{padding:0}.tile.attribute,.tile.clock,.tile.dashboard,.tile.date-clock,.tile.mode,.tile.music-player{border:2px solid #fff}.tile.date-clock .tile-primary{font-weight:500;color:#fff}.tile.date-clock .tile-primary div{font-size:80%!important;font-weight:400;padding-left:10px}.tile.date-clock .tile-contents{margin-top:0;height:calc(100%)!important}.tile.date-clock small{margin-left:3px}.tile.dashboard{overflow:visible;background-color:rgba(255,255,255,.5);height:50%;margin-top:auto;margin-bottom:auto}.tile.dashboard .tile-title{display:none}.tile.dashboard .tile-primary{color:#000;align-self:center;padding:0;margin:0;display:inline-block}.tile.dashboard .tile-contents{margin-top:0;display:flex;justify-content:center;vertical-align:middle;height:100%}.tile.thermostat>.absolute.bottom-0{top:2em;left:1em;text-align:center;width:calc(100% - 2em);font-weight:500;line-height:1em;height:1em}.tile.thermostat .w-full.my-1{position:absolute;bottom:0}.tile.thermostat .heating.pt-1{padding-bottom:21px}.tile.thermostat .cooling .inline-block,.tile.thermostat .heating .inline-block{font-size:25px;vertical-align:super}.tile.thermostat .cooling .inline-block br,.tile.thermostat .heating .inline-block br{content:" ";padding:5px}.tile.link{border:2px solid #fff}.tile.link .tile-title{display:none}.tile.link .tile-contents{height:calc(100%);padding:0;margin:0}.tile.link .tile-primary{padding:0;margin:0}.tile.link .tile-primary div{margin-top:0}.tile.link .tile-primary div:hover{margin-top:-4px}.tile.dimmer .tile-primary .dimmer{margin-bottom:7px;margin-top:3px}.tile.shades .dimmer{margin-top:6px}.tile.image .inset-auto img{object-fit:cover}.tile.energy{border:2px solid rgba(236,255,34)}.tile.hsm{overflow:hidden}.tile.hsm .popup-content .top-0.right-0.absolute{padding:.5em 1em;margin:0;width:auto!important}.vue-slider{padding:0 0 5px!important}.tile{text-shadow:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin-left:1px}.dashName{font-size:25px;text-shadow:none;margin-left:10px}.tile-secondary{display:none}.tile-title{position:relative;left:auto;right:auto;padding:7px 6px 1px;font-weight:500;line-height:1.2em;letter-spacing:1px;opacity:.8;overflow:unset}.tile-title::after{white-space:pre-wrap}.dashBack{text-shadow:none;padding-left:5px}.he-logo-mark:before{font-size:40px}.tile-tertiary{padding:5px;position:absolute;left:8px;bottom:auto;font-size:85%;top:auto;right:auto;opacity:.8}.tile-contents{height:calc(80%);width:calc(100%);padding:0 4px}.text-green-600{color:rgba(0,255,105,.75);text-shadow:none}.dashboard div .header{padding:10px 10px 10px 15px}.wrapper{margin-left:0;margin-bottom:0;padding-left:15px;width:calc(100%);overflow:auto}.tile-edit{top:auto;bottom:10px;opacity:.3}.tile-primary{padding-bottom:calc(10%);overflow:visible}smartly{grid-column-end:-1;grid-row-end:-1;display:inline-block;height:calc(100% + 25px);z-index:-1;width:calc(100% + 15px)}@media (min-width:768px) and (max-width:1000px){.md\:w-2\/3{width:80%}}.navHeader{height:3em}.navHeader div.navLink.float-right:first-child,.navHeader div.navLink:last-child{background-color:red;font-weight:700;padding:0 1em}.navHeader div.navLink.float-right,.navHeader>.flex>div{text-transform:uppercase;font-size:1.3em;margin:0 4px;height:auto;text-align:center;padding:0 .5em;background-color:#323232;border-radius:20px;display:inline-table}.navHeader>.flex>div.pl-2{display:none}#app>.popup-container .menu .overflow-auto .flex .cursor-pointer{border:1px solid gray;margin:.5em 0 0 .5em;padding:1em;border-radius:6px;line-height:.5em}#app>.popup-container .exportBox{margin-top:1em}.md\:w-1\/2 .md\:w-1\/2{width:50%}.deviceSelect .devices .search input,.selectTemplate .templates .search input{padding:5px;border-radius:8px;margin-left:5px;width:100%}.deviceSelect .devices .search,.selectTemplate .templates .search{padding:1em;font-size:160%}.devices .deviceList,.templates .templates{font-size:1.5em}[type=checkbox],[type=radio]{height:1em;width:1em;margin:.25em 0}h4{font-size:1.2em;margin:.5em 0;opacity:.8;font-weight:500}h3{margin-bottom:auto}.text-lg,h3,label span{font-size:1.5em;display:inline-block}.text-lg,h3{color:#000;overflow:visible;margin-left:.5em;border-bottom:1px solid rgba(0,0,0,.5);width:auto;margin-top:auto}label span{margin-top:-1px;padding-top:.25em;vertical-align:top;margin-bottom:.5em}button,input,select,textarea{font-size:180%}h1,h2,h3,h4{font-family:'Barlow Condensed',sans-serif}.popup-content .top-0.right-0.absolute{background-color:red;color:#fff;font-weight:700}@media (max-width:767px){#app .popup-container .menu{width:98%}.md\:w-2\/3{width:96%}#app>.popup-container .menu .overflow-auto .flex .cursor-pointer,.navHeader div.navLink.float-right,.navHeader i.material-icons,.navHeader>.flex>div{font-size:1em}.navHeader{height:2.5em}}.tile-primary>div{margin-top:4px}.text-lg{margin-bottom:.5em}.tile.date-clock .tile-title{padding:0;margin:0;height:2px}@media (max-width:767px){.popup-content.h-85p{height:auto}}.tile.thermostat i{display:inline-block}.tile.dashboard .tile-edit{bottom:auto;top:1px}@media screen and (max-width:1284px) and (min-width:1280px){.tile.dashboard{zoom:unset}}@media screen and (max-width:1924px) and (min-width:1920px){.tile.dashboard{zoom:unset}}.tile.date>div.h-full.w-full{font-size:1.5em!important}.tile.date div.weekday,.tile.date div.year{font-size:140%!important;line-height:.75em}.tile.date div.day{font-size:250%!important;font-weight:700}.mt-12{margin-top:5em}.mt-16{margin-top:7em}[class=" battery-"]>i.material-icons::before{font-family:"Material Design Icons"}.battery-100>i.material-icons::before,.battery-99>i.material-icons::before{content:"\F079"}.battery-91>i.material-icons::before,.battery-92>i.material-icons::before,.battery-93>i.material-icons::before,.battery-94>i.material-icons::before,.battery-95>i.material-icons::before,.battery-96>i.material-icons::before,.battery-97>i.material-icons::before,.battery-98>i.material-icons::before{content:"\F082"}.battery-81>i.material-icons::before,.battery-82>i.material-icons::before,.battery-83>i.material-icons::before,.battery-84>i.material-icons::before,.battery-85>i.material-icons::before,.battery-86>i.material-icons::before,.battery-87>i.material-icons::before,.battery-88>i.material-icons::before,.battery-89>i.material-icons::before,.battery-90>i.material-icons::before{content:"\F081"}.battery-71>i.material-icons::before,.battery-72>i.material-icons::before,.battery-73>i.material-icons::before,.battery-74>i.material-icons::before,.battery-75>i.material-icons::before,.battery-76>i.material-icons::before,.battery-77>i.material-icons::before,.battery-78>i.material-icons::before,.battery-79>i.material-icons::before,.battery-80>i.material-icons::before{content:"\F080"}.battery-61>i.material-icons::before,.battery-62>i.material-icons::before,.battery-63>i.material-icons::before,.battery-64>i.material-icons::before,.battery-65>i.material-icons::before,.battery-66>i.material-icons::before,.battery-67>i.material-icons::before,.battery-68>i.material-icons::before,.battery-69>i.material-icons::before,.battery-70>i.material-icons::before{content:"\F07F"}.battery-51>i.material-icons::before,.battery-52>i.material-icons::before,.battery-53>i.material-icons::before,.battery-54>i.material-icons::before,.battery-55>i.material-icons::before,.battery-56>i.material-icons::before,.battery-57>i.material-icons::before,.battery-58>i.material-icons::before,.battery-59>i.material-icons::before,.battery-60>i.material-icons::before{content:"\F07E"}.battery-41>i.material-icons::before,.battery-42>i.material-icons::before,.battery-43>i.material-icons::before,.battery-44>i.material-icons::before,.battery-45>i.material-icons::before,.battery-46>i.material-icons::before,.battery-47>i.material-icons::before,.battery-48>i.material-icons::before,.battery-49>i.material-icons::before,.battery-50>i.material-icons::before{content:"\F07D"}.battery-31>i.material-icons::before,.battery-32>i.material-icons::before,.battery-33>i.material-icons::before,.battery-34>i.material-icons::before,.battery-35>i.material-icons::before,.battery-36>i.material-icons::before,.battery-37>i.material-icons::before,.battery-38>i.material-icons::before,.battery-39>i.material-icons::before,.battery-40>i.material-icons::before{content:"\F07C"}.battery-21>i.material-icons::before,.battery-22>i.material-icons::before,.battery-23>i.material-icons::before,.battery-24>i.material-icons::before,.battery-25>i.material-icons::before,.battery-26>i.material-icons::before,.battery-27>i.material-icons::before,.battery-28>i.material-icons::before,.battery-29>i.material-icons::before,.battery-30>i.material-icons::before{content:"\F07B"}.battery-11>i.material-icons::before,.battery-12>i.material-icons::before,.battery-13>i.material-icons::before,.battery-14>i.material-icons::before,.battery-15>i.material-icons::before,.battery-16>i.material-icons::before,.battery-17>i.material-icons::before,.battery-18>i.material-icons::before,.battery-19>i.material-icons::before,.battery-20>i.material-icons::before{content:"\F07A"}.tile.battery .tile-primary{grid-template-columns:repeat(2,50%);display:grid;height:calc(100%);align-items:center;grid-template-rows:100%}.tile.battery .tile-primary>i.material-icons{text-align:right}.tile.battery .tile-primary>div{text-align:left}.tile.battery{background-color:rgba(0,255,105,.75);color:rgba(0,0,0,.66)}.tile.battery .tile-primary,.tile.humidity .tile-primary,.tile.temperature .tile-primary,.tile.illuminance .tile-primary,.tile.energy .tile-primary,.tile.power .tile-primary,.tile.attribute .tile-primary{width:100%;margin-top:-3px;padding-left:5px;line-height:1em}.tile.humidity .tile-contents .tile-edit{bottom:20px}.tile.battery .tile-contents{display:block}.dashboard>div>.header,.tile.text-tile{color:#fff}#app>.dashboard{-moz-transform-origin:0 0}html[style*="background-color: darkgray;"] .tile.text-tile,html[style*="background-color: gold;"] .tile.text-tile,html[style*="background-color: ivory;"] .tile.text-tile,html[style*="background-color: lightcyan;"] .tile.text-tile,html[style*="background-color: lightgray;"] .tile.text-tile,html[style*="background-color: silver;"] .tile.text-tile,html[style*="background-color: skyblue;"] .tile.text-tile,html[style*="background-color: tan;"] .tile.text-tile,html[style*="background-color: white;"] .tile.text-tile,html[style*="background-color: whitesmoke;"] .tile.text-tile,html[style*="background-color: darkgray;"] #grid-header,html[style*="background-color: gold;"] #grid-header,html[style*="background-color: ivory;"] #grid-header,html[style*="background-color: lightcyan;"] #grid-header,html[style*="background-color: lightgray;"] #grid-header,html[style*="background-color: silver;"] #grid-header,html[style*="background-color: skyblue;"] #grid-header,html[style*="background-color: tan;"] #grid-header,html[style*="background-color: white;"] #grid-header,html[style*="background-color: whitesmoke;"] #grid-header,html[style*="background-color: darkgray;"] .dashboard>div>.header,html[style*="background-color: gold;"] .dashboard>div>.header,html[style*="background-color: ivory;"] .dashboard>div>.header,html[style*="background-color: lightcyan;"] .dashboard>div>.header,html[style*="background-color: lightgray;"] .dashboard>div>.header,html[style*="background-color: silver;"] .dashboard>div>.header,html[style*="background-color: skyblue;"] .dashboard>div>.header,html[style*="background-color: tan;"] .dashboard>div>.header,html[style*="background-color: white;"] .dashboard>div>.header,html[style*="background-color: whitesmoke;"] .dashboard>div>.header{color:#000}.showSidePanelBtn{text-shadow:none}@media{body,html,.dashboard{-webkit-text-size-adjust:auto}.tile-title{font-size:95%!important}.tile-primary{overflow:visible!important}.tile.bulb-color .tile-primary>div{margin:0}.tile.dashboard .tile-edit{bottom:auto;top:0}.inset-auto:after{font-size:1.3em!important}.tile.dashboard{margin-top:calc(12%);margin-bottom:calc(12%)}}.tile.water .tile-secondary,.tile.motion .tile-secondary,.tile.mmulti .tile-secondary{display:block;opacity:.8;font-size:85%;padding:5px;position:absolute;right:1.25em;width:unset}.tile.bulb-color .tile-primary>div{margin-top:-3px}.tile.bulb .tile-primary>div{margin-top:0}.tile.thermostat{display:grid;grid-template-rows:1.8em auto}.tile.thermostat>.absolute.bottom-0{grid-row:1;position:relative;padding-top:.5em;top:unset;height:2em}.tile.thermostat>.flex.items-stretch{grid-row:2;display:grid;grid-template-rows:3.4em auto;grid-template-columns:calc(100%);height:auto}.tile.thermostat>.flex.items-stretch .cooling.w-full{grid-row:1}.tile.thermostat>.flex.items-stretch>.flex{display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;width:100%;grid-row:2;flex-flow:wrap-reverse}.tile.thermostat>.flex>.flex>.heating.pt-1,.tile.thermostat>.flex>.flex>.cooling.w-full{min-width:10em;min-height:10em;margin:0;border-radius:1em;-webkit-flex-grow:1;flex-grow:1;width:50%;margin:0;padding:0}.tile.thermostat>.flex>.flex>.heating.pt-1>.inline-block,.tile.thermostat>.flex>.flex>.cooling.w-full>.inline-block{display:inline-flex}.tile.thermostat .w-full.my-1{width:100%}.tile.thermostat .tile-edit{top:.75em}.tile.thermostat .w-full.my-1>div{width:3px!important}.tile.thermostat .w-full.my-1>div.inline-block{width:unset!important;padding:2px 2px 5px;min-width:32%}.tile.thermostat .cooling .inline-block br,.tile.thermostat .heating .inline-block br{content:" ";padding:2px}.tile.thermostat .w-full.my-1>div.inline-block:nth-child(1){border-radius:.5em 0 0 .5em}.tile.thermostat .w-full.my-1>div.inline-block:nth-child(3){border-radius:0 .5em .5em 0}.tile.thermostat .w-full.my-1{position:relative;bottom:unset;margin:0;margin-bottom:.5em}.tile.thermostat .p-1{padding:0}.tile.image{position:relative}html[style*="background-color: darkgray;"] #loading-overlay,html[style*="background-color: gold;"] #loading-overlay,html[style*="background-color: ivory;"] #loading-overlay,html[style*="background-color: lightcyan;"] #loading-overlay,html[style*="background-color: lightgray;"] #loading-overlay,html[style*="background-color: silver;"] #loading-overlay,html[style*="background-color: skyblue;"] #loading-overlay,html[style*="background-color: tan;"] #loading-overlay,html[style*="background-color: white;"] #loading-overlay,html[style*="background-color: whitesmoke;"] #loading-overlay{background-color:rgba(255,255,255,.9);color:#000;z-index:99999;position:fixed}\r\n\r\n/* ------- DO NOT EDIT - Custom Skin CSS ------- /\r\n\r\n/ studio-dark: https://api.github.com/repos/ezeek/smartly-skins/git/commits/b99d5307229b9ec436e4df019064e376a7bb4775 /\r\n\r\n/ ------- DO NOT EDIT - Smartly Generated CSS below ------- /\r\n\r\n.dashboard div .header{-moz-transform:scale(.6);opacity:.2;position:fixed;right:1em;top:0em;z-index:2;zoom:.6}.wrapper{height:100%;margin-top:0;padding-top:1em}#tile-0 .tile-title,#tile-1 .tile-title,#tile-10 .tile-title,#tile-11 .tile-title,#tile-2 .tile-title,#tile-3 .tile-title,#tile-4 .tile-title,#tile-5 .tile-title,#tile-6 .tile-title,#tile-7 .tile-title,#tile-8 .tile-title,#tile-9 .tile-title,.dashBack,.dashName{display:none}.dashboard div .header>.flex-auto.justify-end,.dashboard div .header>.flex-auto.justify-end>.flex{display:flex}#tile-11 .tile-contents{color:rgba(255, 184, 0, 1.0) !important;height:100%}#tile-11 .tile-primary{-moz-transform:scale(2.0);color:rgba(255, 184, 0, 1.0) !important;padding-bottom:0px;zoom:2.0}#tile-0 .tile-contents,#tile-1 .tile-contents,#tile-10 .tile-contents,#tile-2 .tile-contents,#tile-3 .tile-contents,#tile-4 .tile-contents,#tile-5 .tile-contents,#tile-6 .tile-contents,#tile-7 .tile-contents,#tile-8 .tile-contents,#tile-9 .tile-contents{-moz-transform:scale(2.0);color:rgba(0, 255, 182, 1.0) !important;height:100%;zoom:2.0}#tile-0 .tile-primary,#tile-1 .tile-primary,#tile-10 .tile-primary,#tile-2 .tile-primary,#tile-3 .tile-primary,#tile-4 .tile-primary,#tile-5 .tile-primary,#tile-6 .tile-primary,#tile-7 .tile-primary,#tile-8 .tile-primary,#tile-9 .tile-primary{color:rgba(0, 255, 182, 1.0) !important;padding-bottom:0px}#tile-16 .tile-title{display:none;visibility:hidden;white-space:nowrap}#tile-16 .tile-contents{color:rgba(0, 138, 255, 1.0) !important;height:100%}#tile-16 .tile-primary{-moz-transform:scale(2.0);color:rgba(0, 138, 255, 1.0) !important;padding-bottom:0px;zoom:2.0}#tile-12 .tile-contents,#tile-14 .tile-contents,#tile-17 .tile-contents{-moz-transform:scale(2.0);color:rgba(255, 0, 0, 1.0) !important;zoom:2.0}#tile-13 .tile-contents{-moz-transform:scale(2.0);color:rgba(0, 255, 182, 1.0) !important;zoom:2.0}#tile-15 .tile-contents{-moz-transform:scale(2.0);color:rgba(255, 184, 0, 1.0) !important;zoom:2.0}#tile-11 .tile-primary:after,#tile-11 .tile-primary:before,#tile-15 .tile-primary,#tile-15 .tile-primary:after,#tile-15 .tile-primary:before{color:rgba(255, 184, 0, 1.0) !important}#tile-11{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(0, 138, 255, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(255, 184, 0, 1.0) !important}#tile-0 .tile-primary:after,#tile-0 .tile-primary:before,#tile-1 .tile-primary:after,#tile-1 .tile-primary:before,#tile-10 .tile-primary:after,#tile-10 .tile-primary:before,#tile-13 .tile-primary,#tile-13 .tile-primary:after,#tile-13 .tile-primary:before,#tile-2 .tile-primary:after,#tile-2 .tile-primary:before,#tile-3 .tile-primary:after,#tile-3 .tile-primary:before,#tile-4 .tile-primary:after,#tile-4 .tile-primary:before,#tile-5 .tile-primary:after,#tile-5 .tile-primary:before,#tile-6 .tile-primary:after,#tile-6 .tile-primary:before,#tile-7 .tile-primary:after,#tile-7 .tile-primary:before,#tile-8 .tile-primary:after,#tile-8 .tile-primary:before,#tile-9 .tile-primary:after,#tile-9 .tile-primary:before{color:rgba(0, 255, 182, 1.0) !important}#tile-0,#tile-1,#tile-10,#tile-4,#tile-5,#tile-6,#tile-7,#tile-8,#tile-9{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(0, 255, 182, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(0, 255, 182, 1.0) !important}#tile-2{background-color:rgba(37, 10, 10, 0.0) !important;border-color:rgba(0, 255, 182, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(0, 255, 182, 1.0) !important}#tile-3{background-color:rgba(255, 0, 0, 0.0) !important;border-color:rgba(0, 255, 182, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(0, 255, 182, 1.0) !important}#tile-12 .tile-primary,#tile-12 .tile-primary:after,#tile-12 .tile-primary:before,#tile-14 .tile-primary,#tile-14 .tile-primary:after,#tile-14 .tile-primary:before,#tile-17 .tile-primary,#tile-17 .tile-primary:after,#tile-17 .tile-primary:before{color:rgba(255, 0, 0, 1.0) !important}#tile-17{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 0, 0, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(255, 0, 0, 1.0) !important}#tile-12,#tile-14{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 184, 0, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(255, 0, 0, 1.0) !important}#tile-13{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 184, 0, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(0, 255, 182, 1.0) !important}#tile-15{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 184, 0, 1.0) !important;border-style:solid !important;border-width:1px;color:rgba(255, 184, 0, 1.0) !important}#tile-16 .tile-primary:after,#tile-16 .tile-primary:before{color:rgba(0, 138, 255, 1.0) !important}#tile-16{background-color:rgba(255, 255, 255, 0.0) !important;border-color:rgba(255, 255, 255, 0.0) !important;border-style:solid !important;border-width:1px;color:rgba(0, 138, 255, 1.0) !important}#tile-1 .tile-primary i.material-icons:after{content:"\31";font-family:"Material Design Icons" !important;visibility:hidden}#tile-1 .tile-primary i.material-icons:before{content:"\31";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-4 .tile-primary i.material-icons:after{content:"\34";font-family:"Material Design Icons" !important;visibility:hidden}#tile-4 .tile-primary i.material-icons:before{content:"\34";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-7 .tile-primary i.material-icons:after{content:"\37";font-family:"Material Design Icons" !important;visibility:hidden}#tile-7 .tile-primary i.material-icons:before{content:"\37";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-2 .tile-primary i.material-icons:after{content:"\32";font-family:"Material Design Icons" !important;visibility:hidden}#tile-2 .tile-primary i.material-icons:before{content:"\32";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-5 .tile-primary i.material-icons:after{content:"\35";font-family:"Material Design Icons" !important;visibility:hidden}#tile-5 .tile-primary i.material-icons:before{content:"\35";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-8 .tile-primary i.material-icons:after{content:"\38";font-family:"Material Design Icons" !important;visibility:hidden}#tile-8 .tile-primary i.material-icons:before{content:"\38";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-0 .tile-primary i.material-icons:after{content:"\30";font-family:"Material Design Icons" !important;visibility:hidden}#tile-0 .tile-primary i.material-icons:before{content:"\30";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-3 .tile-primary i.material-icons:after{content:"\33";font-family:"Material Design Icons" !important;visibility:hidden}#tile-3 .tile-primary i.material-icons:before{content:"\33";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-6 .tile-primary i.material-icons:after{content:"\36";font-family:"Material Design Icons" !important;visibility:hidden}#tile-6 .tile-primary i.material-icons:before{content:"\36";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-9 .tile-primary i.material-icons:after{content:"\39";font-family:"Material Design Icons" !important;visibility:hidden}#tile-9 .tile-primary i.material-icons:before{content:"\39";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-17 .tile-primary i.material-icons:after{content:"\F09F";font-family:"Material Design Icons" !important;visibility:hidden}#tile-17 .tile-primary i.material-icons:before{content:"\F09F";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-12 .tile-primary i.material-icons:after,#tile-14 .tile-primary i.material-icons:after{content:"\e931";font-family:"Material Design Icons" !important;visibility:hidden}#tile-12 .tile-primary i.material-icons:before,#tile-14 .tile-primary i.material-icons:before{content:"\e931";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-13 .tile-primary i.material-icons:after{content:"\e932";font-family:"Material Design Icons" !important;visibility:hidden}#tile-13 .tile-primary i.material-icons:before{content:"\e932";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-15 .tile-primary i.material-icons:after{content:"\FEEA";font-family:"Material Design Icons" !important;visibility:hidden}#tile-15 .tile-primary i.material-icons:before{content:"\FEEA";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-12 .tile-title,#tile-13 .tile-title,#tile-14 .tile-title,#tile-15 .tile-title,#tile-17 .tile-title{visibility:hidden;white-space:unset}#tile-17 .tile-title:after{content:"Sound Siren";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-12 .tile-title:after{content:"Arm Away";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-13 .tile-title:after{content:"Disarm";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-14 .tile-title:after{content:"Arm Home";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-15 .tile-title:after{content:"Cancel Alerts";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-16 .tile-title:after{content:"Information";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}#tile-12 .tile-primary i.material-icons,#tile-13 .tile-primary i.material-icons,#tile-14 .tile-primary i.material-icons,#tile-15 .tile-primary i.material-icons,#tile-17 .tile-primary i.material-icons{margin-bottom:0px;padding-top:5px}\r\n\r\n/ ------- CUSTOM CSS BELOW THIS LINE - This CSS will be preserved during updates ------- /\r\n\r\n\r\n/ It looks like you didn't delete your existing css before updating for the first time.. that's ok. Here is is, but we commented it out.\n\n.header.flex {\n padding:0 !important;\n}\n\n.wrapper {\n overflow: hidden;\n padding-right: 5px;\n}\n\n.dashBack.flex, .dashName.flex {\n display:none;\n}\n\n.he-tap:before {\n content: none;\n}\n\n.tile.button .tile-title, .tile.attribute .tile-title {\n visibility: hidden;\n display: none;\n}\n\n.tile.button .tile-contents, .tile.attribute .tile-contents {\n height: calc(100%);\n}\n\n.tile.attribute .tile-primary, .tile.button .tile-primary {\n padding:0;\n}\n\n#tile-1 .tile-primary :before {\n content: "1";\n}\n\n#tile-2 .tile-primary :before {\n content: "2";\n}\n\n#tile-3 .tile-primary :before {\n content: "3";\n}\n\n#tile-4 .tile-primary :before {\n content: "4";\n}\n\n#tile-5 .tile-primary :before {\n content: "5";\n}\n\n#tile-6 .tile-primary :before {\n content: "6";\n}\n\n#tile-7 .tile-primary :before {\n content: "7";\n}\n\n#tile-8 .tile-primary :before {\n content: "8";\n}\n\n#tile-9 .tile-primary :before {\n content: "9";\n}\n\n#tile-0 .tile-primary :before {\n content: "0";\n}\n\n#tile-10 .tile-primary :before {\n #content: "Clear";\n}\n\n#tile-14 .tile-primary :before {\n content: "Re-Arm";\n}\n\n#tile-15 .tile-primary :before {\n content: "Arm";\n}\n\n#tile-16 .tile-primary :before {\n content: "Disarm";\n}\n\n#tile-13 .tile-primary :before {\n content: "Away";\n}\n\n#tile-12 .tile-primary :before {\n content: "Party";\n} \n\nAdd your custom CSS in the space below.. */\r\n",
"hideEvents": true,
"tempScale": "F",
"noColors": false,
"readOnly": false,
"rows": 29,
"hideIconText": false,
"background": "",
"name": "Alarm",
"fontSize": 10
}
Put the code in between the details tag
[details="Summary"]
This text will be hidden, but can expand
[/details]
And nice job on the keypad design! Thanks for sharing.
Aha! i have learned another new thing...thanks for your help and of course VK!
regarding i-frame: I found adding attribute button works versus keypad attribute. Maybe i did something wrong but thats what worked for me. Also, how can i remove the close/refresh banner?
The attribute 'button' is designed to only take up 1 tile space on a dashboard like the link to dashboard buttons. when clicked, should show a full screen overlay of the keypad. The overlay is hidden by default, which is why you see the close/refresh buttons when it is open.
If you want the keypad always visible on your dashboard (without the refresh/close buttons) then you should use the attribute 'keypad' which will show your full keypad in a single tile on the dashboard (provided directions were followed in the first post)
I hope that makes sense and clarifies any condusion.
makes sense. understood there are two ways to display the keypad but what I am asking is the overlay mode, anyway to i can adjust the css to remove the close/refresh? what i am getting at is i am trying to nudge my dashboard up to take that hidden tile space. remember i did a custom css and when my keyboard overlay pops up, it doesnt show the whole thing. i have to scroll up to see the bottom buttons. without the hidden relay showing, it display fine.
just to add: i got the keypad attribute to work, i didnt understand at first it was suppose to embedd versus overlay..
I have been immersed in Hubitat for 2 weeks. I am not trained as a coder/scripter but I can follow directions and get around the block. I am having difficulty with getting Virtual Basic Keypad operational. I have installed it using both package manager and hands on from GitHub, jic.
Here's some of the pertinent log
dev:852021-10-18 14:29:44.317 errorjava.lang.NullPointerException: Cannot invoke method contains() on null object on line 133 (method push)
dev:852021-10-18 14:29:44.238 debugcheckInputCode - armAway
dev:852021-10-18 14:29:39.076 debugresetInputDisplay
dev:852021-10-18 14:29:39.073 debugclearCode
dev:852021-10-18 14:28:52.033 debugresetInputDisplay
dev:852021-10-18 14:28:52.025 debugclearCode
dev:852021-10-18 14:28:52.018 debugclearPanicCount
dev:852021-10-18 14:28:46.987 debugpanicAlarm press 1
dev:852021-10-18 14:28:44.904 debugresetInputDisplay
dev:852021-10-18 14:28:44.893 debugclearCode
I do have several functional dashboard's working. Getting PIN functionality is what I am missing at the moment. Background: I have been using a DSC alarm system for 3 decades. I am using that user/interface experience as my foundation on which to build. From what I have learned/discovered here in the past couple weeks my present game plan is to attempt to merge past and present. Insights as to how I might proceed, what I am missing, etc. appreciated.
Hey @otrdriver
Please try the full Virtual Keypad version.
The Virtual Basic Keypad was designed for a very specific use case, and most users will fall under the normal full version.
Uninstall the current version and follow the first post to setup the full version of VK (controlled from an app), and post back if you continue to have issues.
I had headed down that path but that installation was more "helpful(?)/directed" than I was comfortable. It's an old age, thing. I will give it a go because that's the future. I will share accordingly. Thank You for sharing your efforts.
I have a somewhat unusual question. I'm not even sure if this is possible...
Is it possible to have a key code have limited functionality? Meaning, it only works to perform certain functions? Kind of like a "limited access".
I hope I am making sense.
Concept makes sense. It is not available on a single keypad currently.
You could setup a 2nd keypad with limited functionality, but you would then need to manage which keypad the user can interact with (likely different dashboards based on mode/etc), which may not fit your use case.
Without trying a few things I don't know if this will be compatible with setting lock codes from lock code manager.
Not sure when ill have time to take a look.
1 Like
I hadn't considered the 2nd keypad concept. Interesting idea. I know lock code manager does let you define what codes work on what devices. I'm going to do some brainstorming on this.
