Widget: Universal Keypad

Tags: #<Tag:0x00007f8771162600> #<Tag:0x00007f87711624c0> #<Tag:0x00007f8771162330>

(Lucky) #1

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)

Protect a button with a pin
Widget: Alarm Keypad
Item for input text or numbers
What tablet are you using for habpannel (CHAT)
Widget: Alarm Keypad
(Lucky) #2

< reserved >

(ufa) #3

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

(ufa) #4

its firefox

(Lucky) #5

Fixed. Updated the link on OP

(Gautier) #6


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.

(NB) #7


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

(Andrew Pawelski) #8

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?