Widget: Universal Keypad

Universal Keypad for HABPanel

Keypad.widget.json (10.6 KB)

A universal keypad for HABPanel. Use this for your temperature IoT’s, as a calculator, or just to send a number to an item!


  1. Responsive
  2. Stylable
  3. Customizable
  4. Single receiving item
  5. Controller-less ( no code behind! )
  6. Awesome!







You can style the keypad based on class names
Find the class names through the git repo


Settings are self-explanatory so I will only provide comments on the ones that are not straightforward.

  • Mask Character - this will mask the output box
  • Clear on Submit - if this is checked, the model is also cleared. This will NOT clear your item, only the UI client side.
  • Output Box Clickable - if enabled, you will be able to click on the box just like an input box.
  • Units - Some of the settings require UNITs so do not forget to include them.
  • Background - You can set using any CSS-valid value. Examples:
    • url(’//path/to/an/online/image’)
    • inherit
    • black
    • transparent
    • #FFFFFF
    • rgb(0,0,0)

To Do

  1. Immediately send command to item on click. (this will not have the output box)

< reserved >

with every click on a number my browser ask me for saving password ?

its firefox

Fixed. Updated the link on OP


I would like to use this widget but I have some layout issues (see picture). I have the same result on latest versions of Firefox, Chrome or Safari on Mac.

Any idea on how to fix that ?

All settings are default, except the checkbox to avoid putting it in a container.


I’ve the same problem as @tarag.
Do you have a solution for that?

Can anyone provide some code that when pressing an existing switch widget it would then pop this keypad up as a prompt to enter a code and then on OK it closes the pop up?

It looks like this if you leave “Spacing” empty. As soon as you fill this field - even if it is zero - it shows the keypad layout with three rows.


I installed this widget and it works great. Thanks for the hard work. There is a problem: when the page is viewed in a mobile device, in portrait mode, the rendering is not correct. Can anyone tell me how to fix this?

In landscape mode:

In portrait mode:



This is great and just what I was looking for.

Is there a way I can remove the animation when pressing the numbers? This is quite laggy on my fire 7 tablets.


It’s all in the css

Hi There.
What would be really useful is an option to clear the “Receiving Item” after a certain interval to prevent the PIN number lying there unused.


Which you can easily do with a rule.

Yes, you could. I just thought it would be more elegant and cleaner to have the Keypad Widget do the cleanup. Also concerned about conflicting the “cleanup” rule with any usage rules. But if not possible then will go with plan B. Thanks

Great Keypad, Congratulation!
I am looking for a keypad to get float numbers (with decimal point).
Thanks for any hints how to find an existing custom widget.