Instrument readouts and controls

Numeric Keypad `<smart-numeric-keypad>`

NumericKeypad is an on-screen keypad for entering a numeric value such as a setpoint on a touch panel.

JavaScript TypeScript Angular React Vue Blazor

<smart-numeric-keypad> · 12 properties, 6 methods, 4 events · source/modules/smart.numerickeypad.js

Usage in Blazor

The Razor component is <NumericKeypad> in Smart.Blazor.Industrial: every property is a parameter in PascalCase, every event an EventCallback<Event> named On<Event> whose ev["Detail"] is the typed detail class, and the methods are called on the @ref. String choices are enums. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode, for example @rendermode InteractiveServer; a statically rendered component stays empty.

@using Smart.Blazor.Industrial
@* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
@rendermode InteractiveServer

<NumericKeypad @ref="numericKeypad" Min="42"
    OnChange="OnChange" />

@code {
    NumericKeypad numericKeypad;

    void OnChange(Event ev)
    {
        NumericKeypadChangeEventDetail detail = ev["Detail"];
    }

    // void Open()
    void Call() => numericKeypad.Open();
}

Properties

Parameter	Type, default	Description
`Value` value	double	Sets or retrieves the last accepted value, or the value the keypad was opened with. It is shown as the current value while a new value is typed.
`Min` min	double	Sets or retrieves the lowest value accepted. null sets no floor.
`Max` max	double	Sets or retrieves the highest value accepted. null sets no ceiling.
`PrecisionDigits` precisionDigits	int	Sets or retrieves the maximum number of decimal places of the entry. null allows any number of decimals; 0 makes the keypad integer-only and replaces the decimal key with a clear key. A key that would exceed the precision is ignored. Values above 15 are taken as 15, the most decimal places a number holds. A step key finer than the precision moves the entry by at least one decimal place in its direction.
`Unit` unit	string	Sets or retrieves the engineering unit, shown next to the entry, the current value and the limits.
`Label` label	string	Sets or retrieves what is being entered, the tag and the quantity, shown above the entry and in its accessible name.
`AllowNegative` allowNegative	bool true	Determines whether the sign key is offered. Off, the key becomes a clear key.
`Layout` layout	NumericKeypadLayout calculator	Sets or retrieves the digit layout. calculator places 7 8 9 on the top row, as on an HMI keypad; phone places 1 2 3 there.
`ShowLimits` showLimits	bool true	Determines whether the limits are shown under the entry.
`ShowCurrent` showCurrent	bool true	Determines whether the value being replaced stays in view while the new one is typed.
`Steps` steps	IEnumerable<object>	Sets or retrieves quick steps, for example [-10, -1, 1, 10], shown as keys that adjust the entry from the current value.
`Density` density	NumericKeypadDensity normal	Sets or retrieves the key size. touch makes keys 60 px with a wider gap, for a panel PC with gloves. Reflected to an attribute the stylesheet keys on.

Methods

Method	Description
`void Open()`	Starts an entry from a value, shows it as the current value and takes focus. The first key replaces the shown value, as on a calculator. `value` number The value to start from. Defaults to the value property.
`void Press(object key)`	Presses a key: a digit, '.', '-', 'backspace', 'clear', 'enter', 'escape', or a step given as a number. A digit beyond fifteen significant digits is ignored, as a number holds no more. `key` any The key.
`Task<bool> Accept()`	Validates the entry against the limits and the precision. If the entry is valid, sets the value and raises the change event. If it is not, the entry stays on screen, the reason is shown and the invalid event is raised. Returns whether the entry was accepted. Only something typed is accepted: with nothing typed since open, accept or cancel - a second Enter, a double click or a double tap on Enter, a held Enter - it raises nothing and returns false, and it returns false while the keypad is disabled.
`void Cancel()`	Abandons the entry, shows the current value again and raises the cancel event. Raises nothing while the keypad is disabled.
`Task<string> Validate()`	Returns the reason the entry would be rejected ('empty', 'notANumber', 'tooPrecise', 'belowMin' or 'aboveMax'), or null when it would be accepted. A point typed first shows as 0. and is 'empty' until a digit follows: the zero was not typed.
`Task<string> Text()`	Returns the text entered so far.

Events

Every event is an EventCallback<Event>; Event is a dictionary and ev["Detail"] converts to the detail class named under the event.

Event	Description and detail
`OnChange` change NumericKeypadChangeEventDetail	This event is triggered when an entry is accepted. Raised once per entry. `Value` double The value accepted. `PreviousValue` double The value it replaces, or null.
`OnInvalid` invalid NumericKeypadInvalidEventDetail	This event is triggered when an entry is refused. Nothing is written. `Text` string The entry as typed. `Reason` string 'empty', 'notANumber', 'tooPrecise', 'belowMin' or 'aboveMax'.
`OnCancel` cancel no detail	This event is triggered when the entry is abandoned.
`OnInput` input NumericKeypadInputEventDetail	This event is triggered on every key that changes the entry. `Text` string The entry so far.

Types

`enum NumericKeypadLayout`

NumericKeypadLayout.Calculator "calculator" NumericKeypadLayout.Phone "phone"

`enum NumericKeypadDensity`

NumericKeypadDensity.Normal "normal" NumericKeypadDensity.Touch "touch"

CSS variables

The component declares 7 CSS variables; the CSS page shows how to set them.

--smart-numeric-keypad-key-size --smart-numeric-keypad-gap --smart-numeric-keypad-key-background --smart-numeric-keypad-key-border --smart-numeric-keypad-accept --smart-numeric-keypad-accept-text --smart-numeric-keypad-refuse