Widget: Universal Keypad

[luckymallari (Lucky)]

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!

Features:

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

Demo

Responsive

Stylable

Customizable

Code

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

LuckyMallari/HABPanel-keypad

Settings

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)

[luckymallari (Lucky)]

< reserved >

[colognebroker (ufa)]

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

[colognebroker (ufa)]

its firefox

[luckymallari (Lucky)]

Fixed. Updated the link on OP

[tarag (Gautier)]

Hi,

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.

[nibi79 (NB)]

Hi,

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

[Andrew_Pawelski]

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?

[Aurelio (Aurelio Caliaro)]

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.

[xgon (Alexandre Gonçalves)]

Hi,

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:

Thanks!

[CurtisFeatures (Jamie Curtis)]

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.

Thanks

[luckymallari (Lucky)]

It’s all in the css

[Mark_VG (Mark)]

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.

Mark

[luckymallari (Lucky)]

Which you can easily do with a rule.

[Mark_VG (Mark)]

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

[geronimo1 (Tom Turbo)]

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.

[mbk (matt x)]

Great widget Lucky. I was digging into the code, and it all makes sense to me except at the end where the " <button class=“key btn_ok”…" line employs the expression (config.isClearOnSubmit && (gwk_data.current=‘’) || true)"

Can you perhaps explain this? Specifically, I can surmise that if the “config.isClearOnSubmit” option is set to false then the “&&” will prevent (gwk_data.current=‘’ from executing and thus the entered code will not be erased (and visa versa), but I don’t know what to make of the “|| true” part…what is that trying to accomplish?