Keypad Visualization

Keypad Visualization

The numeric keypad contains 10 digits that range from 0-9, it also contains an asterisk (*) and a number sign (#).

You have the option to customize the content of the keypad by creating buttons that will appear along with the digits.

In the Visualization tab of your widget, you can customize the look of the keypad and see the results in real-time.

Colors

  • Main: This is the color of the digits of the widget.
  • Click: This is the color that will appear when you click on a digit.

Visualization

  • Show asterisk: Shows or hides the asterisk in the widget. If you choose to hide it, a new slot for a button will appear in that position.
  • Show number sign: Shows or hides the number sign in the widget. If you choose to hide it, a new slot for a button will appear in that position.
  • Show right column: If you select this option, a column will appear on the right side, allowing you to set 4 new buttons.
  • Show bottom row: If you select this option, a column will appear on the bottom side, allowing you to set 4 new buttons.
  • Show asterisks when typing: If you select this option, a digits bar will appear on the top side showing an asterisk for each digit the user types.

Whenever you see a dashed slot, it means there is a space for you to set a button in that position. To create a button, just press that slot and a new popup will appear.

Button Configuration

In each button configuration, you have some options to customize the visuals and functionality of your button.

  • Content type: The type of content that will be inside of the button. You can put text here or simply an icon.
  • Value: This is the value that will be sent to the device or analysis when a user submits the keypad. Learn more about Keypad's Data Manipulation.
  • Background color: The color of the button's background. The font color will be automatically adjusted to either black or white for a better contrast with your color.
  • Enabled: Indicates if the button is enabled or not. Disabled buttons cannot be clicked.
  • Remove Button: If you click this option, this button will be removed from the keypad. You can still create another button in the same slot as this one.

    • Related Articles

    • Keypad Widget

      Keypad allows the user to submit a pin code along with an optional action string. This widget is ideal to represent an alarm or to request a PIN code to unlock a resource. Creating your own To add it to your dashboard, choose the Keypad widget from ...

    • Creating Keypad Widgets

      This article will demonstrate how to create a Keypad Widget using the TagoIO Node.js SDK. In order for you to create keypad widgets, this is the structure that you will need to send to the account.dashboards.widgets.create method. {   "analysis_run": ...

    • Keypad Data Manipulation

      The keypad will send the data by pressing a custom button or just by inputting a combination and waiting 3 seconds. Whenever a pin code is submitted, the structure sent to the variable will be: DIGITS,ACTION So, for instance, if your user has clicked ...

    • Language Preferences

      The TagoIO admin that is used for the development of applications is displayed only in English. However, users that access your RUN application can visualize in any language that you set in your Dictionary. These end-users are also called 'RUN ...

    • Tile Widget

      Tiles allow you to simplify how users interact with your dashboards by providing a more intuitive and beautiful set of options. Use Tile to display clickable images that will redirect user to another website, dashboard or tab.  Creating your own To ...