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 React

The React wrapper is the Thermometer component: every property is a prop, every event a prop named on<Event> that receives the CustomEvent, and the methods are called on the element through a ref.

import { Thermometer } from 'smart-industrial/react/thermometer';

const ref = useRef<Thermometer>(null);

<Thermometer ref={ref} bulb={true} interactive={true}
    onChange={(event: CustomEvent) => console.log(event.detail)} />

// methods are called on the wrapper the ref holds, which calls the element
ref.current?.resetExtremes();

Properties

Prop	Type, default	Description
`bulb`	boolean 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`	boolean 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`	boolean 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`	boolean 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`	Array<number \| Date> ["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`	string d	Reserved: the component does not apply it yet. The scale is always numeric.
`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`	boolean 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`	number 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`	boolean 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`	string	The name of what is being measured. It is used as the accessible name of the component.
`labelFormatFunction`	function \| null	Reserved: the component does not apply it yet. The mark labels are written at the precision their spacing needs, with decimalSeparator.
`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`	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`	boolean 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`	number \| Date 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`	'switchUntilReleased' \| 'switchWhenReleased' \| 'switchWhileDragging' 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`	number \| Date 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`	'date' \| 'numeric' numeric	Reserved: the component does not apply it yet. The scale is always numeric.
`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`	number	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`	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`	{startValue?: number \| Date, endValue?: number \| Date, className?: string}[]	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`	boolean 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`	boolean 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`	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 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`	boolean false	Reserved: the component does not apply it yet. Numbers are written in decimal form.
`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`	number	The temperature the process was asked for. null for an instrument that is only watching.
`showExtremes`	boolean 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`	boolean 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`	boolean false	Draws the setpoint marker across the stem.
`showUnit`	boolean 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`	boolean false	Shows the digital reading below the instrument, at the precision set by precisionDigits, or -- when there is no reading.
`significantDigits`	number \| null	Reserved: the component does not apply it yet. Use precisionDigits to set the digits shown.
`ticksPosition`	TicksPosition scale	Reserved: the component does not apply it yet. The ticks are always drawn on the scale beside the stem.
`ticksVisibility`	TicksVisibility minor	Sets or gets which ticks the scale draws: the major ticks only, the major and the minor ticks, or none.
`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`	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 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`	string \| number \| date 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 int32	Reserved: the component does not apply it yet.

Methods

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

Events

The data of an event is in event.detail. The thermometer sets value as the operator drags or presses an arrow key, only while interactive is true and readonly is false, and then raises change. extremesReset follows a resetExtremes() call once both markers are back at the reading.

Event	Description and detail
`onChange` change	This event is triggered when the reading is changed through the component, which only happens when interactive is enabled. `value` number The new reading.
`onExtremesReset` extremesReset	This event is triggered when the maximum and minimum memory is reset. `value` number The reading both markers were set to.

Types

`type LabelsVisibility`

'all' | 'endPoints' | 'none'

`type DragMechanicalAction`

'switchUntilReleased' | 'switchWhenReleased' | 'switchWhileDragging'

`type ScaleMode`

'date' | 'numeric'

`type ThermometerQuality`

'good' | 'uncertain' | 'bad' | 'stale'

`type ThermometerScalePosition`

'near' | 'far' | 'both' | 'none'

`type ScaleType`

'floatingPoint' | 'integer'

`type ThermometerSecondaryUnit`

'none' | 'celsius' | 'fahrenheit' | 'kelvin'

`type TicksPosition`

'scale' | 'track'

`type TicksVisibility`

'major' | 'minor' | 'none'

`type Validation`

'interaction' | 'strict'

`type WordLength`

'int8' | 'int16' | 'int32' | 'int64' | 'uint8' | 'uint16' | 'uint32' | 'uint64'

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