is there a trick to getting the keypad to work via remote?
I am envisioning a time when my kids (or somebody else forget how to work the real life keypads and I need to reset/lock/unlock while away from home.
thanks in advance
I use a vpn connection on my phone to control stuff on my network while away from home.
You can make the keypad dashboard cloud enabled in hubitat, so you can access it away from home.. but I would recommended another more secure way to remotely access it (like a vpn) because this can disable your alarm/etc.
1 Like
I was able to track down the cause of the issue that was preventing setting lock codes from the virtual keypad device. For some reason, when both the "LockCodes" and "SecurityKeypad" capabilities were in a driver, it would cause an issue with the SetCode function call that is automatically populated in the device page.
By removing the "SecurityKeypad" capability, this resolved the issue and you can now add new codes directly to the keypad devices. This should not affect the use of the virtual keypads as laid out in this thread.
However, if you added the virtual keypad to another app like HSM or Nyckelharpa/etc then this functionality will be taken away. If this is an issue for your setup, let me know and I will try to find another way to resolve this issue, or you can manually un-comment the "SecurityKeypad" capability in the device driver and you will regain this functionality, but it may break the ability to add new codes from the keypad device page and you will need to use the "lock code manager" addon.
Virtual Keypad
V1.0.17: 2021-03-10
- removed the SecurityKeypad capability as this was causing issues when present with the LockCodes capability and is not needed for the functionality of this addon
- FIXED code entry/update/delete from the keypad device. You do not need to use the "Lock Code Manager" addon.
Virtual Basic Keypad
V1.0.3: 2021-03-10
- removed the SecurityKeypad capability as this was causing issues when present with the LockCodes capability and is not needed for the functionality of this addon
- FIXED code entry/update/delete from the keypad device. You do not need to use the "Lock Code Manager" addon.
So my wife is having issues using the Virtual Keypad. After 10 years of our old alarm requiring you to mash down the button and hold it for a second to get a beep, she's struggling to get this to work. I found that if I tap and hold on the button for more than a half second or so, it doesn't register the button push. I'm using an Amazon Fire tablet using the Fully Kiosk Browser. I also tried Chrome and see similar behavior.
If I use a Chrome browser on my PC, I can't seem to replicate this issue. I suspect the Android tablet is counting it as a "long press" instead of just a "press". Can the keypad app be made to interpret a "long press" the same as a "press"?
Any other ideas?
Hmm. I think this will be a limitation on any touch screen device. Another issue with a longer press is the device might think you want to scroll the screen and will cancel/negate any click action you may have pressed, for the scroll action.
I sometimes use this to my advantage when clicking on the wrong item on my phone, I will hold it then swipe to try and scroll the app/website and my mis-click won't get registered.
If the 're-training' is too difficult to lessen the power/time for clicking a virtual keypad, a physical keypad option might work better for your wife.
I dont know if we can access long presses on virtual buttons or if that would be a worth while work around to implement as it might interfere with some of the timing or other functions of the virtual keypad.
can you share your json along with css to see if i can incorporate it in my HSM Dashboard
Hope this Helps
Layout for Keypad
{
"localization": "English",
"roundedCorners": 0,
"dateFormat": "MM/DD/YYYY",
"hideLabels": true,
"customColors": [
{
"template": "hsm",
"bgColor": "rgb(158,0,0)",
"iconColor": "",
"state": "disarmed",
"customIcon": ""
},
{
"template": "hsm",
"bgColor": "rgb(1,161,9)",
"iconColor": "",
"state": "armedhome",
"customIcon": ""
}
],
"colWidth": "",
"cloudRefresh": 1,
"hsmPin": "",
"hide3dot": true,
"clockMode": true,
"gridGap": 8,
"tiles": [
{
"rowSpan": 1,
"template": "buttons",
"col": 2,
"colSpan": 1,
"id": 0,
"row": 5,
"device": "2306",
"templateExtra": "0"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 1,
"colSpan": 1,
"id": 1,
"row": 2,
"device": "2306",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 2,
"colSpan": 1,
"id": 2,
"row": 2,
"device": "2306",
"templateExtra": "2"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 3,
"colSpan": 1,
"id": 3,
"row": 2,
"device": "2306",
"templateExtra": "3"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 1,
"colSpan": 1,
"id": 4,
"row": 3,
"device": "2306",
"templateExtra": "4"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 2,
"colSpan": 1,
"id": 5,
"row": 3,
"device": "2306",
"templateExtra": "5"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 3,
"colSpan": 1,
"id": 6,
"row": 3,
"device": "2306",
"templateExtra": "6"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 1,
"colSpan": 1,
"id": 7,
"row": 4,
"device": "2306",
"templateExtra": "7"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 2,
"colSpan": 1,
"id": 8,
"row": 4,
"device": "2306",
"templateExtra": "8"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 3,
"colSpan": 1,
"id": 9,
"row": 4,
"device": "2306",
"templateExtra": "9"
},
{
"rowSpan": 1,
"template": "attribute",
"col": 1,
"colSpan": 3,
"id": 10,
"row": 1,
"device": "2308",
"templateExtra": "InputDisplay"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 3,
"colSpan": 1,
"id": 11,
"row": 5,
"device": "2302",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 4,
"colSpan": 2,
"id": 12,
"row": 2,
"device": "2293",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 4,
"colSpan": 2,
"id": 13,
"row": 3,
"device": "2294",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 4,
"colSpan": 2,
"id": 14,
"row": 4,
"device": "2295",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 4,
"colSpan": 2,
"id": 15,
"row": 5,
"device": "2503",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 1,
"colSpan": 1,
"id": 16,
"row": 5,
"device": "2307",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "hsm",
"col": 4,
"colSpan": 2,
"id": 17,
"row": 1,
"device": "-3",
"templateExtra": "hsmStatus"
},
{
"rowSpan": 1,
"template": "texttile",
"col": 4,
"colSpan": 2,
"id": 18,
"row": 1,
"templateExtra": " "
}
],
"goBack": false,
"modePin": "",
"bgColor": "#ffffff00",
"lanRefresh": 1,
"iconSize": "40",
"cols": 5,
"rowHeight": "",
"customCSS": ".header.flex {\npadding:0 !important;\n}\n\n.wrapper {\noverflow: hidden;\npadding-right: 15px;\n}\n\n.dashBack.flex, .dashName.flex {\ndisplay:none;\n}\n\n.he-tap:before {\ncontent: none;\n}\n\n.tile.button .tile-title, .tile.attribute .tile-title {\nvisibility: hidden;\ndisplay: none;\n}\n\n.tile.button .tile-contents, .tile.attribute .tile-contents {\nheight: calc(100%);\n}\n\n.tile.attribute .tile-primary, .tile.button .tile-primary {\npadding:0;\n}\n\n#tile-1 .tile-primary :before {\ncontent: "1";\n}\n\n#tile-2 .tile-primary :before {\ncontent: "2";\n}\n\n#tile-3 .tile-primary :before {\ncontent: "3";\n}\n\n#tile-4 .tile-primary :before {\ncontent: "4";\n}\n\n#tile-5 .tile-primary :before {\ncontent: "5";\n}\n\n#tile-6 .tile-primary :before {\ncontent: "6";\n}\n\n#tile-7 .tile-primary :before {\ncontent: "7";\n}\n\n#tile-8 .tile-primary :before {\ncontent: "8";\n}\n\n#tile-9 .tile-primary :before {\ncontent: "9";\n}\n\n#tile-0 .tile-primary :before {\ncontent: "0";\n}\n\n#tile-11 .tile-primary :before {\ncontent: "Clear";\n}\n\n#tile-13 .tile-primary :before {\ncontent: "Home";\n}\n\n#tile-14 .tile-primary :before {\ncontent: "Night";\n}\n\n#tile-15 .tile-primary :before {\ncontent: "Disarm";\n}\n\n#tile-12 .tile-primary :before {\ncontent: "Away";\n}\n\n#tile-16 .tile-primary :before {\ncontent: " ";\n}\n#tile-16 {background-color: rgba(0,0,0,0);}\n#tile-10 .tile-primary {font-size: 40px !important;}\n#tile-11 .tile-contents{-moz-transform:scale(.5);zoom:.5}\n#tile-12 .tile-contents{-moz-transform:scale(.75);zoom:.75}\n#tile-13 .tile-contents{-moz-transform:scale(.75);zoom:.75}\n#tile-14 .tile-contents{-moz-transform:scale(.75);zoom:.75}\n#tile-15 .tile-contents{-moz-transform:scale(.75);zoom:.75}\n#tile-18 {background-color: rgba(0,0,0,0);}\n\n#tile-17 .tile-title:after{content:" ";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}\n#tile-17 .tile-title{visibility:hidden",
"hideEvents": false,
"tempScale": "F",
"noColors": false,
"readOnly": false,
"rows": 5,
"hideIconText": true,
"name": "Keypad - Main",
"fontSize": 11
}
CSS for Keypad
{
"localization": "English",
"roundedCorners": 0,
"dateFormat": "MM/DD/YYYY",
"hideLabels": true,
"customColors": [
{
"template": "hsm",
"bgColor": "rgb(158,0,0)",
"iconColor": "",
"state": "disarmed",
"customIcon": ""
},
{
"template": "hsm",
"bgColor": "rgb(1,161,9)",
"iconColor": "",
"state": "armedhome",
"customIcon": ""
}
],
"colWidth": "",
"cloudRefresh": 1,
"hsmPin": "",
"hide3dot": true,
"clockMode": true,
"gridGap": 8,
"tiles": [
{
"rowSpan": 1,
"template": "buttons",
"col": 2,
"colSpan": 1,
"id": 0,
"row": 5,
"device": "2306",
"templateExtra": "0"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 1,
"colSpan": 1,
"id": 1,
"row": 2,
"device": "2306",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 2,
"colSpan": 1,
"id": 2,
"row": 2,
"device": "2306",
"templateExtra": "2"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 3,
"colSpan": 1,
"id": 3,
"row": 2,
"device": "2306",
"templateExtra": "3"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 1,
"colSpan": 1,
"id": 4,
"row": 3,
"device": "2306",
"templateExtra": "4"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 2,
"colSpan": 1,
"id": 5,
"row": 3,
"device": "2306",
"templateExtra": "5"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 3,
"colSpan": 1,
"id": 6,
"row": 3,
"device": "2306",
"templateExtra": "6"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 1,
"colSpan": 1,
"id": 7,
"row": 4,
"device": "2306",
"templateExtra": "7"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 2,
"colSpan": 1,
"id": 8,
"row": 4,
"device": "2306",
"templateExtra": "8"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 3,
"colSpan": 1,
"id": 9,
"row": 4,
"device": "2306",
"templateExtra": "9"
},
{
"rowSpan": 1,
"template": "attribute",
"col": 1,
"colSpan": 3,
"id": 10,
"row": 1,
"device": "2308",
"templateExtra": "InputDisplay"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 3,
"colSpan": 1,
"id": 11,
"row": 5,
"device": "2302",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 4,
"colSpan": 2,
"id": 12,
"row": 2,
"device": "2293",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 4,
"colSpan": 2,
"id": 13,
"row": 3,
"device": "2294",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 4,
"colSpan": 2,
"id": 14,
"row": 4,
"device": "2295",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 4,
"colSpan": 2,
"id": 15,
"row": 5,
"device": "2503",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 1,
"colSpan": 1,
"id": 16,
"row": 5,
"device": "2307",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "hsm",
"col": 4,
"colSpan": 2,
"id": 17,
"row": 1,
"device": "-3",
"templateExtra": "hsmStatus"
},
{
"rowSpan": 1,
"template": "texttile",
"col": 4,
"colSpan": 2,
"id": 18,
"row": 1,
"templateExtra": " "
}
],
"goBack": false,
"modePin": "",
"bgColor": "#ffffff00",
"lanRefresh": 1,
"iconSize": "40",
"cols": 5,
"rowHeight": "",
"customCSS": ".header.flex {\npadding:0 !important;\n}\n\n.wrapper {\noverflow: hidden;\npadding-right: 15px;\n}\n\n.dashBack.flex, .dashName.flex {\ndisplay:none;\n}\n\n.he-tap:before {\ncontent: none;\n}\n\n.tile.button .tile-title, .tile.attribute .tile-title {\nvisibility: hidden;\ndisplay: none;\n}\n\n.tile.button .tile-contents, .tile.attribute .tile-contents {\nheight: calc(100%);\n}\n\n.tile.attribute .tile-primary, .tile.button .tile-primary {\npadding:0;\n}\n\n#tile-1 .tile-primary :before {\ncontent: "1";\n}\n\n#tile-2 .tile-primary :before {\ncontent: "2";\n}\n\n#tile-3 .tile-primary :before {\ncontent: "3";\n}\n\n#tile-4 .tile-primary :before {\ncontent: "4";\n}\n\n#tile-5 .tile-primary :before {\ncontent: "5";\n}\n\n#tile-6 .tile-primary :before {\ncontent: "6";\n}\n\n#tile-7 .tile-primary :before {\ncontent: "7";\n}\n\n#tile-8 .tile-primary :before {\ncontent: "8";\n}\n\n#tile-9 .tile-primary :before {\ncontent: "9";\n}\n\n#tile-0 .tile-primary :before {\ncontent: "0";\n}\n\n#tile-11 .tile-primary :before {\ncontent: "Clear";\n}\n\n#tile-13 .tile-primary :before {\ncontent: "Home";\n}\n\n#tile-14 .tile-primary :before {\ncontent: "Night";\n}\n\n#tile-15 .tile-primary :before {\ncontent: "Disarm";\n}\n\n#tile-12 .tile-primary :before {\ncontent: "Away";\n}\n\n#tile-16 .tile-primary :before {\ncontent: " ";\n}\n#tile-16 {background-color: rgba(0,0,0,0);}\n#tile-10 .tile-primary {font-size: 40px !important;}\n#tile-11 .tile-contents{-moz-transform:scale(.5);zoom:.5}\n#tile-12 .tile-contents{-moz-transform:scale(.75);zoom:.75}\n#tile-13 .tile-contents{-moz-transform:scale(.75);zoom:.75}\n#tile-14 .tile-contents{-moz-transform:scale(.75);zoom:.75}\n#tile-15 .tile-contents{-moz-transform:scale(.75);zoom:.75}\n#tile-18 {background-color: rgba(0,0,0,0);}\n\n#tile-17 .tile-title:after{content:" ";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}\n#tile-17 .tile-title{visibility:hidden",
"hideEvents": false,
"tempScale": "F",
"noColors": false,
"readOnly": false,
"rows": 5,
"hideIconText": true,
"name": "Keypad - Main",
"fontSize": 11
}
Layout for Alarm Dashboard
{
"localization": "English",
"roundedCorners": 12,
"dateFormat": "MM/DD/YYYY",
"hideLabels": true,
"customColors": [
{
"template": "lock",
"bgColor": "rgb(1,176,42)",
"iconColor": "",
"state": "locked",
"customIcon": "he-padlock_locked"
},
{
"template": "lock",
"bgColor": "rgb(126,7,7)",
"iconColor": "",
"state": "unlocked",
"customIcon": "he-padlock_unlocked"
},
{
"template": "hsm",
"bgColor": "rgb(1,176,42)",
"iconColor": "",
"state": "armedhome",
"customIcon": ""
},
{
"template": "hsm",
"bgColor": "rgb(166,0,0)",
"iconColor": "",
"state": "disarmed",
"customIcon": ""
},
{
"template": "hsm",
"bgColor": "rgb(1,176,42)",
"iconColor": "",
"state": "armedaway",
"customIcon": ""
},
{
"template": "hsm",
"bgColor": "rgb(1,176,42)",
"iconColor": "",
"state": "armednight",
"customIcon": ""
},
{
"template": "hsm",
"bgColor": "rgb(166,0,0)",
"iconColor": "",
"state": "alldisarmed",
"customIcon": ""
},
{
"template": "variable-string",
"bgColor": "rgb(0,167,239)",
"iconColor": "",
"state": "default",
"customIcon": ""
},
{
"template": "switches",
"bgColor": "rgb(255,228,1)",
"iconColor": "",
"state": "on",
"customIcon": ""
},
{
"template": "links",
"bgColor": "rgba(0,0,0,0)",
"iconColor": "rgba(0,0,0,0)",
"state": "default",
"customIcon": ""
},
{
"template": "relay",
"bgColor": "rgb(255,228,1)",
"iconColor": "",
"state": "on",
"customIcon": ""
},
{
"template": "variable-number",
"bgColor": "rgb(166,0,0)",
"iconColor": "",
"state": "default",
"customIcon": ""
}
],
"colWidth": "",
"cloudRefresh": 1,
"hsmPin": "MzUyMw==",
"hide3dot": false,
"clockMode": true,
"gridGap": 3,
"tiles": [
{
"rowSpan": 1,
"template": "clock-date",
"col": 1,
"colSpan": 2,
"id": 5,
"row": 1
},
{
"rowSpan": 1,
"template": "relay",
"col": 8,
"colSpan": 1,
"id": 15,
"row": 1,
"bgImage": "",
"device": "1612",
"templateExtra": "1"
},
{
"rowSpan": 4,
"template": "images",
"col": 3,
"refreshInterval": "14400",
"colSpan": 5,
"id": 26,
"row": 1,
"bgImage": "",
"templateExtra": ""
},
{
"rowSpan": 1,
"template": "switches",
"col": 9,
"colSpan": 1,
"id": 29,
"row": 1,
"device": "1611"
},
{
"rowSpan": 1,
"template": "switches",
"col": 8,
"colSpan": 2,
"id": 30,
"row": 2,
"device": "1613",
"customIcon": null
},
{
"rowSpan": 1,
"template": "switches",
"col": 5,
"refreshInterval": "1440",
"colSpan": 2,
"id": 35,
"row": 5,
"bgImage": "",
"device": "2771",
"customIcon": null,
"templateExtra": ""
},
{
"rowSpan": 1,
"template": "variable-number",
"col": 10,
"colSpan": 1,
"id": 42,
"row": 1,
"device": "836"
},
{
"rowSpan": 4,
"template": "attribute",
"col": 8,
"colSpan": 3,
"id": 46,
"row": 3,
"device": "2289",
"templateExtra": "Keypad"
},
{
"rowSpan": 4,
"template": "attribute",
"col": 1,
"colSpan": 2,
"id": 47,
"row": 2,
"device": "2470",
"templateExtra": "myFrame"
},
{
"rowSpan": 1,
"template": "relay",
"col": 8,
"colSpan": 1,
"id": 49,
"row": 1,
"device": "2330",
"customIcon": "he-blank"
},
{
"rowSpan": 1,
"template": "links",
"col": 8,
"colSpan": 1,
"id": 145,
"row": 1,
"device": "0",
"templateExtra": ""
},
{
"rowSpan": 2,
"template": "images",
"col": 1,
"refreshInterval": "120",
"colSpan": 3,
"id": 146,
"row": 5,
"bgImage": "",
"templateExtra": ""
},
{
"rowSpan": 1,
"template": "texttile",
"col": 10,
"colSpan": 1,
"id": 147,
"row": 1,
"templateExtra": " "
}
],
"goBack": false,
"modePin": "",
"bgColor": "black",
"lanRefresh": 1,
"iconSize": "50",
"cols": 10,
"rowHeight": "",
"customCSS": "/* https://api.github.com/repos/ezeek/smartly-base/git/commits/489481060aa2e69821be67ab7092e6e92f582b8a /\n\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\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) format('woff'),url(https://hubitat.ezeek.us/smartly-base/assets/fonts/mtd-public.woff) format('truetype');font-weight:400;font-style:normal;unicode-range:U+E900-EFFF\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-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 {\n font-family: "Material Design Icons"!important\n}\n\n.he-shades_open:before {\n content: "\F0149"\n}\n\n.he-shades_closed:before {\n content: "\F0147"\n}\n\n.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 {\n content: "\F0148"\n}\n\n.he-not_present:before {\n content: "\FA47"\n}\n\n.he-outlet_3:before {\n content: "\F6A4"\n}\n\n.he-outlet_off:before {\n content: "\F6A5"\n}\n\n.he-bulb_off,.he-bulb_on,.he-dimmer_low,.he-dimmer_medium {\n/ margin-top: -15px; */\n margin-bottom: 4px\n}\n\n.he-bulb_off,.he-bulb_on {\n padding: 3px!important\n}\n\n.popup-content .he-bulb_off,.popup-content .he-bulb_on {\n color: #000!important\n}\n\n.popup-content {\n margin-left: auto;\n margin-right: auto\n}\n\n.tile.bulb-color .tile-primary {\n padding-bottom: 0!important;\n overflow: visible\n}\n\n.he-bulb_on:before {\n content: "\F6E8";\n display: block\n}\n\n.he-bulb_off:before {\n content: "\F336"\n}\n\n.he-fire_alarm_clear:before {\n content: "\F392"\n}\n\n.he-fire1:before {\n content: "\F238"\n}\n\n.he-water_wet:before {\n content: "\F58C"\n}\n\n.he-water_dry:before {\n content: "\F58D"\n}\n\n.he-garage_closed:before {\n content: "\F6D8";\n font-size: 120%\n}\n\n.he-garage_open:before {\n content: "\F6D9";\n font-size: 120%\n}\n\n.he-garage_closing:before,.he-garage_opening:before {\n font-size: 120%;\n content: "\F871"\n}\n\n.he-hour-glass:before {\n content: "\F1D8"\n}\n\n.he-running:before {\n content: "\e94d"\n}\n\n.he-motion-sensor:before {\n content: "\e94c"\n}\n\n.he-dimmer_low:before {\n content: "\FA18"\n}\n\n.he-dimmer_medium:before {\n content: "\F521"\n}\n\n.he-dimmer_low:before,.he-dimmer_medium:before {\n margin-top: -5px\n}\n\n.he-window_1:before {\n content: "\F5AE"\n}\n\n.he-window_2:before {\n content: "\F5B1"\n}\n\n.he-door_open:before {\n content: "\F81B"\n}\n\n.he-door_closed:before {\n content: "\F819"\n}\n#tile-30 .tile-primary.off i.material-icons,#tile-30 .tile-primary.on i.material-icons,#tile-36 .tile-primary.off i.material-icons,#tile-36 .tile-primary.on i.material-icons{visibility:hidden}#tile-36 .tile-primary.on i.material-icons:after{content:"\e914";font-family:"Material Design Icons" !important;visibility:hidden}#tile-36 .tile-primary.on i.material-icons:before{content:"\e914";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-36 .tile-primary.off i.material-icons:after{content:"\F405";font-family:"Material Design Icons" !important;visibility:hidden}#tile-36 .tile-primary.off i.material-icons:before{content:"\F405";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-30 .tile-primary i.material-icons{margin-bottom:0px;padding-top:5px}#tile-30 .tile-primary.on i.material-icons:after{content:"\FE68";font-family:"Material Design Icons" !important;visibility:hidden}#tile-30 .tile-primary.on i.material-icons:before{content:"\FE68";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-30 .tile-primary.off i.material-icons:after{content:"\F014B";font-family:"Material Design Icons" !important;visibility:hidden}#tile-30 .tile-primary.off i.material-icons:before{content:"\F014B";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}\n\n//#tile-35 .tile-primary {font-size: 0px !important;}\n#tile-35 {background-color: rgba(0,0,0,0);}\n//#tile-35 .tile-title{visibility:hidden;white-space:nowrap}\n\n\n\n#tile-43 .tile-title{visibility:hidden;white-space:nowrap}\n#tile-23 .tile-title{visibility:hidden;white-space:nowrap}\n#tile-45 .tile-title{visibility:hidden;white-space:nowrap}\n#tile-42 .tile-primary {font-size: 40px !important;}\n#tile-42 .tile-title{visibility:hidden;white-space:nowrap}\n#tile-42 .tile-title:after{content:"Alarm Countdown";left:0;padding:0em 0em 66px 0em;position:absolute;top:0;visibility:visible;width:100%}\n#tile-46 {background-color: rgba(0,0,0,0);}\n#tile-46 .tile-title{visibility:hidden;white-space:nowrap}\n#tile-47 .tile-title{visibility:hidden}\n#tile-47 .tile-title:after{content:" ";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}\n#tile-47 {background-color: rgba(0,0,0,0);}\n#tile-24 .tile-title{visibility:hidden;white-space:nowrap}\n#tile-25 .tile-title{visibility:hidden;white-space:nowrap}\n#tile-48 {background-color: rgba(0,0,0,0);}\n#tile-49 {background-color: rgba(0,0,0,0);}\n#tile-49 .tile-title{visibility:hidden;white-space:nowrap}\n#tile-49 .tile-title:after{content:" ";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}\n#tile-45 .tile-title:after{content:" ";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}\n#tile-45 .tile-title{visibility:hidden}\n#tile-26 {background-color: rgba(0,0,0,0);}\n#tile-145 .tile-title{visibility:hidden;white-space:nowrap}\n#tile-145 {background-color: rgba(0,0,0,0);}\n#tile-145 .tile-primary {font-size: 0px !important;}\n#tile-146 {background-color: rgba(0,0,0,0);}\n#tile-147 {background-color: rgba(0,0,0,0);}\n#tile-148 .tile-title{visibility:hidden}\n#tile-25 .tile-title{visibility:hidden}\n#tile-25 {background-color: rgba(0,0,0,0);}\n#tile-150 .tile-title{visibility:hidden}\n#tile-150 .tile-title:after{content:"Refresh";left:0;padding:0em 0em 3px 0em;position:absolute;top:0;visibility:visible;width:100%}\n#tile-151 {background-color: rgba(0,0,0,0);}\n#tile-151 .tile-title{visibility:hidden}",
"hideEvents": false,
"tempScale": "F",
"noColors": false,
"readOnly": false,
"rows": 6,
"hideIconText": true,
"background": "https://hubitat.ezeek.us/smartly-skins/wander/assets/images/bg_wander.jpg",
"name": "Alarm - Panel",
"fontSize": 16
}
CSS for Alarm Dashboard
/* https://api.github.com/repos/ezeek/smartly-base/git/commits/489481060aa2e69821be67ab7092e6e92f582b8a */
@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) format('woff'),url(https://hubitat.ezeek.us/smartly-base/assets/fonts/mtd-public.woff) format('truetype');font-weight:400;font-style:normal;unicode-range:U+E900-EFFF
}
.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-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-top: -15px; */
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 {
content: "\FA18"
}
.he-dimmer_medium: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"
}
#tile-30 .tile-primary.off i.material-icons,#tile-30 .tile-primary.on i.material-icons,#tile-36 .tile-primary.off i.material-icons,#tile-36 .tile-primary.on i.material-icons{visibility:hidden}#tile-36 .tile-primary.on i.material-icons:after{content:"\e914";font-family:"Material Design Icons" !important;visibility:hidden}#tile-36 .tile-primary.on i.material-icons:before{content:"\e914";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-36 .tile-primary.off i.material-icons:after{content:"\F405";font-family:"Material Design Icons" !important;visibility:hidden}#tile-36 .tile-primary.off i.material-icons:before{content:"\F405";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-30 .tile-primary i.material-icons{margin-bottom:0px;padding-top:5px}#tile-30 .tile-primary.on i.material-icons:after{content:"\FE68";font-family:"Material Design Icons" !important;visibility:hidden}#tile-30 .tile-primary.on i.material-icons:before{content:"\FE68";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}#tile-30 .tile-primary.off i.material-icons:after{content:"\F014B";font-family:"Material Design Icons" !important;visibility:hidden}#tile-30 .tile-primary.off i.material-icons:before{content:"\F014B";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}
//#tile-35 .tile-primary {font-size: 0px !important;}
#tile-35 {background-color: rgba(0,0,0,0);}
//#tile-35 .tile-title{visibility:hidden;white-space:nowrap}
#tile-43 .tile-title{visibility:hidden;white-space:nowrap}
#tile-23 .tile-title{visibility:hidden;white-space:nowrap}
#tile-45 .tile-title{visibility:hidden;white-space:nowrap}
#tile-42 .tile-primary {font-size: 40px !important;}
#tile-42 .tile-title{visibility:hidden;white-space:nowrap}
#tile-42 .tile-title:after{content:"Alarm Countdown";left:0;padding:0em 0em 66px 0em;position:absolute;top:0;visibility:visible;width:100%}
#tile-46 {background-color: rgba(0,0,0,0);}
#tile-46 .tile-title{visibility:hidden;white-space:nowrap}
#tile-47 .tile-title{visibility:hidden}
#tile-47 .tile-title:after{content:" ";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}
#tile-47 {background-color: rgba(0,0,0,0);}
#tile-24 .tile-title{visibility:hidden;white-space:nowrap}
#tile-25 .tile-title{visibility:hidden;white-space:nowrap}
#tile-48 {background-color: rgba(0,0,0,0);}
#tile-49 {background-color: rgba(0,0,0,0);}
#tile-49 .tile-title{visibility:hidden;white-space:nowrap}
#tile-49 .tile-title:after{content:" ";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}
#tile-45 .tile-title:after{content:" ";left:0;padding:.5em .5em 3px .5em;position:absolute;top:0;visibility:visible;width:100%}
#tile-45 .tile-title{visibility:hidden}
#tile-26 {background-color: rgba(0,0,0,0);}
#tile-145 .tile-title{visibility:hidden;white-space:nowrap}
#tile-145 {background-color: rgba(0,0,0,0);}
#tile-145 .tile-primary {font-size: 0px !important;}
#tile-146 {background-color: rgba(0,0,0,0);}
#tile-147 {background-color: rgba(0,0,0,0);}
#tile-148 .tile-title{visibility:hidden}
#tile-25 .tile-title{visibility:hidden}
#tile-25 {background-color: rgba(0,0,0,0);}
#tile-150 .tile-title{visibility:hidden}
#tile-150 .tile-title:after{content:"Refresh";left:0;padding:0em 0em 3px 0em;position:absolute;top:0;visibility:visible;width:100%}
#tile-151 {background-color: rgba(0,0,0,0);}
#tile-151 .tile-title{visibility:hidden}
Virtual Keypad
V1.0.18: 2021-07-02
- added new Button Attribute to keypad device. This will allow you launch a modal overlay with the keypad on a dashboard, instead of having it visible all the time. There are new preferences for the button in the keypad device.
There is a preference setting for screen size % so you can adjust how big the keypad is displayed when shown, and also has a timeout feature so the Keypad modal will close itself after a timeout period incase you forget to close it.
First, ensure the driver is up to date on V1.0.18
Then save the preferences in the Keypad device so the button attribute get populated with the iFrame Code. you should see a new Current State called "Button" with, well, a button next to it. The text can be configured in the Keypad device preferences.
To add the button to a new dashboard, add the Keypad device to the dashboard. Add a new device tile, select the keypad device, and choose "Attribute". Select the "Button" Attribute.
If you already have the keypad iFrame on your dashboard, you can follow this gif or just click the 3 dots, and change the attribute from "Keypad" to "Button", then resize the button to fit your needs and enjoy more dashboard screen real estate.
1 Like
Virtual Keypad
V1.0.19: 2021-07-12
updated autoclose function to reset when manually closed. This will prevent the overlay from closing itself if you open it, then close it, and immediately open the keypad again.
if you are updating from V1.0.18 you will need to go into the Keypad device and save the preferences to rebuild the custom attributes.
Hey @mbarone, Love the new button attribute is there any way to "click" the button from Rule machine. For example when a door opens the keypad would come up automatically?
@scubamikejax904 , thats an interesting idea. Im not sure if that is possible, as the button functionality is using injected JavaScript on the dashboard, which is limited by character count per tile which does limit what functionality can be included.
Also, this injected JavaScript is independent (scoped) from the scripting that runs the dashboards, so there doesnt seem to be a good way to get triggers or set flags based on system events that will trigger/allow the injected JS to do something with. When I have some time Ill take a look at this and see if I can find something that is not too hacky.
If anyone has any ideas or can point at another project that does something similar, Ill take a look at that and see if it can help.
@mbarone i use fully kiosk And found away to call the keypad dashboard through the fully kiosk driver that will get the functionality I'm looking for (not sure if there is an easier way but for now it works). Thank you for your quick response and your awesome work
Can you describe how you did that with the fully kiosk driver? Sounds like a good idea.
Not sure if @scubamikejax904 has another way to do this, but I found a way to do this by using the app:
Fully Kiosk Director
This allows you to do custom things on your Fully Kiosk Browser tablets/devices when motion and other events happen, like "When motion on x device happens, turn off screen saver, and load yyy dashboard, after zzz time go back to home screen"
I do this for one of my FKB tablets to pull up the front door camera when there is motion, then after 30 or 60 seconds go back to my main dashboard.
I haven't used Fully Kiosk Director, because so far I was always able to get things to work directly with the Fully Kiosk Browser Controller driver.
Maybe I'll check out Fully Kiosk Director, since this seems like a good application for it.
Hey @BrianP setup a virtual device using this driver (and follow the instructions in setting up Fully kiosk as the server)
Than In Rule Machine, I have the trigger set as when the door opens to run this rule
My Virtual Device is called Fully, This loads the keypad dashboard when the door opens and the alarm is armed, and then goes back to the main dashboard after 30 seconds
IF (HSM status is Armed Home(F) OR
HSM status is Armed Night(F) OR
HSM status is Armed Away(F) [FALSE]) THEN
loadURL('localip/dashboardlink') on Fully
Delay 0:00:30
loadStartURL() on Fully
END-IF
In Rule Machine
to get the loadURL you need to use run custom action in the actions list
Than Select Run custom action
Under Select capability of action device
I chose Switch
Select your virtual Switch that you created for the driver above
than you can select your commands "loadURL" and "loadStartURL() or what ever command you want to use.
Paramater type is string
Hopefully this will help
Thanks that helped a lot!
So I did not need to install Fully Kiosk Director. Just using Fully Kiosk Browser Controller driver.
Now I have the dashboard come up when I enter, by adding to my rule to make the tablets beep:
Really works well!
Awesome, Glad I could help
@mbarone Trying out the Keypad in my Home dashboard but cannot get the iframe to fill out the entire space. There gaps above and below the "keypad" iframe.
