Instrument readouts and controls

Thermometer `<smart-thermometer>`

Thermometer shows a temperature as the instrument that measures it: a bulb that always holds the liquid, a capillary stem above it and a column standing at the reading.

JavaScript TypeScript Angular React Vue Blazor

<smart-thermometer> · 43 properties, 2 methods, 2 events · source/modules/smart.thermometer.js

Usage in Blazor

The Razor component is <Thermometer> 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

<Thermometer @ref="thermometer" Bulb="true" Interactive="true"
    OnChange="OnChange" />

@code {
    Thermometer thermometer;

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

    // void ResetExtremes()
    void Call() => thermometer.ResetExtremes();
}

Properties

Parameter	Type, default	Description
`Bulb` bulb	bool true	Draws the reservoir at the foot of the stem. Set it to false for an instrument drawn into a panel cut-out, where the bulb sits behind the fascia. Boolean attributes are presence-based, so bulb="false" in markup leaves the bulb on; set the property from script to turn it off.
`Coerce` coerce	bool false	When true, the reading is snapped to the nearest step of interval, counted from min. It takes effect only when customInterval is true.
`ColorByRange` colorByRange	bool false	Gives the column and the bulb the colour of the alarm band the reading has reached, so the liquid carries the severity. Requires ranges and showRanges.
`CustomInterval` customInterval	bool false	When true, interval sets the spacing of the major marks, the step of the arrow keys and the grid coerce snaps to. When false, the scale picks a round spacing that gives about eight major marks, and an arrow key moves a hundredth of the scale.
`CustomTicks` customTicks	object ["0","50","100"]	Reserved: the component does not apply it yet. The marks stand at round values of the scale, or every interval when customInterval is true.
`DateLabelFormatString` dateLabelFormatString	string d	Reserved: the component does not apply it yet. The scale is always numeric.
`DecimalSeparator` decimalSeparator	string .	Sets or gets the character written between the integer and the fractional part of a number, such as "." or ",", in the readout, the tick labels, the marker titles and the accessible text. Left at "." it follows locale: a German, French or Spanish locale writes a comma, as Intl.NumberFormat does for that locale; any other character is used as set. Digits are never grouped. A value given as a string is always read with a period.
`Interactive` interactive	bool false	Lets the reading be set by pointer or keyboard. A thermometer reads by default: it has role="meter" and is out of the tab order. With interactive on, it has role="slider" and takes focus.
`Interval` interval	int 1	Sets or gets the spacing of the major marks, the step of the arrow keys and the grid coerce snaps to, in the unit of the scale. It takes effect only when customInterval is true.
`Inverted` inverted	bool false	Specifies the orientation of the gauge. When set to true, the starting and ending positions of the gauge are reversed, causing the gauge to be displayed in the opposite direction. If false, the gauge follows its default direction. Use this option to customize the gauge's flow based on your application's requirements.
`Label` label	string	The name of what is being measured. It is used as the accessible name of the component.
`LabelFormatFunction` labelFormatFunction	object	Reserved: the component does not apply it yet. The mark labels are written at the precision their spacing needs, with decimalSeparator.
`LabelsVisibility` labelsVisibility	LabelsVisibility all	Sets or gets which labels of the major marks are drawn: all of them, the two at the ends of the scale, or none.
`LocalizeFormatFunction` localizeFormatFunction	function \| null	A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify how localized strings are structured or displayed before they are delivered to your application, enabling support for advanced formatting, variable interpolation, or context-specific adaptations.
`LogarithmicScale` logarithmicScale	bool false	Controls whether the element displays data using a logarithmic scale. When enabled, values are plotted on a logarithmic axis, which is useful for visualizing data that spans several orders of magnitude. When disabled, a standard linear scale is used.
`Max` max	object 100	Sets or gets the top of the scale. A reading above it is kept as written: the column stands at the top of the stem and OVER is shown on the bulb.
`MechanicalAction` mechanicalAction	DragMechanicalAction switchWhileDragging	Reserved: the component does not apply it yet. With interactive on, a press on the stem sets the reading at once and raises change; the column is not dragged.
`Min` min	object 0	Sets or gets the bottom of the scale. A reading below it is kept as written: the column stands at the foot of the stem and UNDER is shown on the bulb.
`Mode` mode	ScaleMode numeric	Reserved: the component does not apply it yet. The scale is always numeric.
`Name` name	string	Reserved: the component does not apply it yet. The thermometer has no form field, so the reading is not submitted with a form.
`PrecisionDigits` precisionDigits	int	Sets or gets how many digits are shown after the decimal point in the readout, the marker titles and the accessible text. null shows the reading as written, to at most twelve significant digits.
`Quality` quality	ThermometerQuality good	Sets or retrieves the quality of the reading: good, uncertain, bad or stale. Reflected to an attribute so the stylesheet can show it: the column and the bulb are hatched for bad and dimmed for uncertain and stale, and the word UNCERTAIN, BAD or STALE is shown on the bulb so it is legible without colour. The quality is also added to the accessible name, for example "Reactor R-101, quality bad". A reading whose quality is not good must never look, or read out, as though it were. Carried onto the element by Smart.Industrial.Connect bindings.
`Ranges` ranges	IEnumerable<object>	Sets or gets the alarm bands, as objects with startValue, endValue and className; the stylesheet colours each band by its class. With showRanges the bands are painted along the stem behind the column, and colorByRange gives the column and the bulb the class of the band the reading is in.
`Readonly` readonly	bool false	When the element is set to read-only, users are unable to modify its value or content; they can view the information but cannot interact with or edit the element in any way.
`RightToLeft` rightToLeft	bool false	Sets or gets whether the Left and Right arrow keys are swapped for a right-to-left language, such as Arabic or Hebrew. A CSS direction of rtl on the component has the same effect. The property does not mirror the drawing.
`ScalePosition` scalePosition	ThermometerScalePosition near	Sets or gets which side of the stem carries the scale. When secondaryUnit is set, the second scale takes the other side.
`ScaleType` scaleType	ScaleType floatingPoint	Reserved: the component does not apply it yet. The reading is not rounded to an integer; use precisionDigits to set the digits shown.
`ScientificNotation` scientificNotation	bool false	Reserved: the component does not apply it yet. Numbers are written in decimal form.
`SecondaryUnit` secondaryUnit	ThermometerSecondaryUnit none	Draws a second scale on the other side in another temperature unit. It is ticked at round values of its own unit and placed by converting each mark back, so the two scales do not line up, exactly as on a dual-scale instrument. It requires the unit property to be a temperature the component recognises: °C, °F or K. Asking for a second unit is a request for a second scale, so it takes the side the first one is not on whatever scalePosition says; scalePosition: none draws no scales at all.
`Setpoint` setpoint	double	The temperature the process was asked for. null for an instrument that is only watching.
`ShowExtremes` showExtremes	bool false	Draws the maximum and minimum markers, at the highest and lowest reading since resetExtremes() was last called, as a max-min thermometer does.
`ShowRanges` showRanges	bool false	This property determines whether the gauge’s range indicators are displayed on the gauge component. When set to true, the range segments (such as colored bands or sections representing value intervals) will be visible on the gauge; when set to false, these range indicators will be hidden.
`ShowSetpoint` showSetpoint	bool false	Draws the setpoint marker across the stem.
`ShowUnit` showUnit	bool true	Prints the unit above the scale and after the digital reading. It is on by default: a temperature without its unit does not say whether 40 is a warm day or a cool oven.
`ShowValue` showValue	bool false	Shows the digital reading below the instrument, at the precision set by precisionDigits, or -- when there is no reading.
`SignificantDigits` significantDigits	number \| null	Reserved: the component does not apply it yet. Use precisionDigits to set the digits shown.
`TicksPosition` ticksPosition	TicksPosition scale	Reserved: the component does not apply it yet. The ticks are always drawn on the scale beside the stem.
`TicksVisibility` ticksVisibility	TicksVisibility minor	Sets or gets which ticks the scale draws: the major ticks only, the major and the minor ticks, or none.
`Unit` unit	string °C	The unit the scale is written in. It is a temperature by default rather than the scale engine's kilograms, and its value decides what secondaryUnit can convert from: °C, °F or K.
`UnlockKey` unlockKey	string	Provides a way to retrieve or assign the unlockKey property, which is a unique code required to activate or gain access to the product's full features. Use this property to securely manage the product's access control.
`Validation` validation	Validation strict	Reserved: the component does not apply it yet. The reading is never clamped to min and max; a reading past either end is shown as OVER or UNDER.
`Value` value	object 0	Sets or retrieves the reading, as a number or a numeric string, in the unit of the scale. It is kept as written: a reading past min or max pins the column at that end and shows UNDER or OVER. A value that is not a finite number, such as null, NaN or an empty string, is shown as no reading: an empty stem, -- in the readout and NO DATA on the bulb. With coerce and customInterval, the reading is snapped to the interval.
`WordLength` wordLength	WordLength int32	Reserved: the component does not apply it yet.

Methods

Method	Description
`void ResetExtremes()`	Puts the maximum and minimum markers back on the current reading, as the pin on a max-min thermometer does. Raises the extremesReset event.
`void Refresh()`	Redraws the instrument.

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 ThermometerChangeEventDetail	This event is triggered when the reading is changed through the component, which only happens when interactive is enabled. `Value` int The new reading.
`OnExtremesReset` extremesReset ThermometerExtremesResetEventDetail	This event is triggered when the maximum and minimum memory is reset. `Value` int The reading both markers were set to.

Types

`enum ThermometerQuality`

ThermometerQuality.Good "good" ThermometerQuality.Uncertain "uncertain" ThermometerQuality.Bad "bad" ThermometerQuality.Stale "stale"

`enum ThermometerScalePosition`

ThermometerScalePosition.Near "near" ThermometerScalePosition.Far "far" ThermometerScalePosition.Both "both" ThermometerScalePosition.None "none"

`enum ThermometerSecondaryUnit`

ThermometerSecondaryUnit.None "none" ThermometerSecondaryUnit.Celsius "celsius" ThermometerSecondaryUnit.Fahrenheit "fahrenheit" ThermometerSecondaryUnit.Kelvin "kelvin"

CSS variables

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

--smart-thermometer-length --smart-thermometer-stem-width --smart-thermometer-bulb-size --smart-thermometer-liquid --smart-thermometer-tube --smart-thermometer-tube-border --smart-thermometer-tick --smart-thermometer-setpoint