HowTo: Masked HMI input on a (custom) numpad

Share Info & Ideas
,
1

As already described in this article, here’s a more detailed description how to implement masked input with a NumPad keyboard (as with the Password widget on an alphanumeric keyboard), for example if only a PIN is wished for user authentication.

  1. Add the masked password font as attached in the above article to your AS project. It simply converts any numeric value to a “*”.
    image

  2. Add a new style (called “maskedInput” in my case) and set the new font to the “valueFontName” property of the Numpad widget (in my case the custom “widgets.MyStyle.Numpad”.
    image

  3. Place the NumericInput widget on the content and set the property “numPadStyle” to the new style “maskedInput”.

    image
    image730×768 23.1 KB

Result:
image

(you can remove the “min” and “max” fields on the NumPad of course).

5 Likes
2

Thanks for that. This is exactly what I was looking for :wink:

3

Hi All,

just one side note / caveat:

This approach relays on the assumption, that the entered value is shown with a font, having number characters replaced by asterisks. Please keep in mind that at the end of the day this is just a CSS setting, which can be easily changed (e.g. if you have access to the developer tools). Also, if for any reason this patched font cannot be downloaded, the browser would substitute with a normal font, showing the numbers.

So please consider the security needs!

CHH

4 Likes
4

:clap: :clap:
What a great case.

2 Likes