You will want to apply some custom css to the attribute tile for any dashboards you add the keypad iframe to.
/* keypad iframe specific - #tile-25 is the Keypad device attribute: Keypad */
#tile-25 .tile-title {
display:none;
}
#tile-25 .tile-contents {
padding: 0;
height:100%;
}
#tile-25 .tile-primary {
padding: 0;
}
Thanks. Yes, I did added those to the CSS but still having the same issue. The width looks fine. It's the height having those gaps.
/* Keypad iFrame */
#tile-24 .tile-title { display:none; }
#tile-24 .tile-contents { padding: 0; height:100%; }
#tile-24 .tile-primary { padding: 0; }
Solved. Have to add height to tile-primary
#tile-24 .tile-primary { padding: 0; height: 100%; }
Now the issue is the font-size is too big. Have to make adjustment on that.
First, thanks for this keypad control. I've been using Sharptools for several years because this keypad capability is the one thing I simply couldn't do. I got the Virtual Keypad working exactly how I want it EXCEPT for two things.
Any help will be greatly appreciated!
V1.0.20: 2021-07-29
After updating, you will need to go into the keypad device, turn on (default off) the "Try to Auto Center the keypad when in view" preference and save to rebuild the button attribute with the correct configuration.
This may not perfectly center the keypad, but it should be close and prevent it from snapping to the left side of the screen.
see update. Let me know if this works as you would like. I may not be able to get it perfectly centered, so I felt this quick implementation would be close enough and worked well with my setup.
unfortunately, with the way the dashboards are designed, and the way I use iframes to display this custom content, there is no way that I know of to hook the keypad events such as successfully disarm/etc to make the modal auto close or do anything else for that matter. The modal will autoclose on its own after 60 seconds (or whatever you configured), so if your users just "successfully disarm" the keypad and walk away, the keypad will close the modal after the timeout.
Wow! Thanks for the quick response. I will try the update now and report back...
So, this basically works as intended. On my devices it appears a little left of center, but I think I can live with it. I guess I do have one more question: I would like a little more control over the Keypad button when used in the modal scenario. Could there be a way to control the icon on this button? I would love to just make this my Disarm button with an icon and text below the icon saying "Disarm".
Yes, its slightly to the left on my side as well. With the dashboard tiles, we are limited to how many characters are allowed, which really limits the css/scripting I can include in these custom attribute tiles. I try to keep custom code to a minimum as I worry about running out of characters if other people have longer names for their keypad/etc as it gets substituted into the tile template and counts against the total tile character limit. It will cause errors if any tile has over 1024 characters.
So while not ideal, this may be as good as I can make it in the near term without an additional setup requirement of loading a separate javascript file from the hub file system or something. but this will cause other issues including version control as (im pretty sure) HSM cannot directly write/update files stored in the local hub directory.
You should be able to input any html you want for the button text input. I only have a local image for my trash bins (recycling week or not) so here is how you can do it:
add something like this to your keypad config:
<img src="http://[hubIP]/local/[customImage].png" style="height:30px" /> Disarm
you can add a <br /> tag before the "Disarm" to put it on a new line
This will only work for local lan connections.. if you use wan/cloud connections to dashboards, then you will need wan access to the images you want to include.
you may be able to use the built in icons if you use this type of code with the correct class . this may work on remote dashboards unlike the direct image link above using the img tag.
<i class="material-icons he-siren_and_alarm" style="font-size: 30px;"> Disarm</i>
Thanks. I never thought to put HTML in that field. That opens up a whole new world to me. Thanks again for your prompt attention!
On my hub it seems to strip out any HTML I put in the keypad's "Button text to open KeypadiFrame" field. It appears to save it without error, but when I look at it again there is nothing but the text "Disarm" in the field. This is exactly what I've pasted into that field and I've verified that file exists on the hub at that address.
<img src="http://192.168.250.182/local/HubAlarmIcon.png" style="height:30px" />Disarm
edit. html gets stripped when you save these text inputs on 2.2.8+ and will not work as shown below.
hmm.. interesting.. I just tried this example and it worked as well on my end:
and it kept the html in the preferences area after a page reload.
I am currently on hub version 2.2.7.126 (using chrome browser), there may have been an update on 2.2.8 that changes how html is saved/stripped out in the device preferences.
Also, it may not show you the html in the preference area, but if you look at the current states area with the button, it should show the icon/picture and your text like my image above.
This is a bummer. I'm on 2.2.8.141 and it for sure is stripping out the HTML in that field. My button only shows the text after updating. I wonder if there is field type you have specified that Hubitat is now enforcing differently. Like you said it was text only field and they now do not allow HTML in that field type. I suppose their is probably a way to accomplish something similar using just CSS?
Thats a bummer.. Its using type "text", so it shouldnt be an issue unless the HE team implemented a better form of html encoding/stripping to prevent code injection by users in certain circumstances. I checked the release notes for 2.2.8 and didnt see anything specific about this other than a "bug fix" for a built in device driver preference.. not sure if that would affect this.
You can try to get the same result using just css, but will need to be implemented on the dashboard level, not through the keypad device... unfortunately..
untested, but the css you can try would be something like this:
where #tile-16 is your keypad device attribute "button"
#tile-16 .tile-primary button :before {
content: "\ed0d";
}
this content identifier ("\ed0d") is for the he-siren_and_alarm icon as in my example image above. You can try to find the correct id for the image you want.
edit, I did just try this in the dev tools on one of my dashboards, and was not able to get this working the way I thought for some reason.. might need to dig in more when I have more time. maybe format the css slightly differently to select the correct element or that dashboard might be missing the inclusion of the css icon content definitions which might be a custom thing i did a while ago.
edit 2, i finally updated to 2.2.8 and confirm that the html in text entry gets stripped when you save it, and my above work around will not work as my screenshots show.
Thanks, it's much appreciated, but don't spend too much time on it. I'm just being picky at this point. Everything is pretty much working as expected, now I'm just trying to jazz it up, and there's only so much you can do with the Hubitat dashboard anyway.
Great work! Finally a solution i've been trying to figure out for a long time (how to make a virtual keypad). Excuse me for my ignorance, but I cant seem to find out how you exactly arm HSM? Do you make a rule or similar? I have everything else working except what its suppose to do. From all the posts and your instructions, no one seems to mention on how to actually configure it to function (or I am just blind i guess). Thanks again for the good work and I think I will contribute some funds for your work on github.
In HSM add the virtual Keypad under the Arm/Disarm Configuration Options.
thanks, i was just playing around in there but i dont have just the "keypad" listed. I have these options:
Looks like you’ve found it…
which one do i chose? I am trying a simple, input 4 digit code, then sets the HSM. I can only input one number at a time for the button choices..
The armHome button, when pressed on a dashboard will make the call to arm HSM Home itself. No need for a further rule, and no need to actually set anything in HSM for the keypad to work.
In the keypad app, you will choose how the armHome will function.. ie, if it will require a pin, or not, have a delayed action. etc..
Let me know if you have additional questions or if i can clear up anything further.
Download the Hubitat app
