Operator screens and process graphics

HMI Shell `<smart-hmi-shell>`

HmiShell is the display frame for operator screens described in ISA-101.

JavaScript TypeScript Angular React Vue Blazor

<smart-hmi-shell> · 17 properties, 2 methods, 4 events · source/modules/smart.hmishell.js

Usage in Blazor

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

<HmiShell @ref="hmiShell" Plant="Northfield plant"
    OnNavigate="OnNavigate" />

@code {
    HmiShell hmiShell;

    void OnNavigate(Event ev)
    {
        HmiShellNavigateEventDetail detail = ev["Detail"];
    }

    // void SetTheme(string theme)
    void Call() => hmiShell.SetTheme("value");
}

Properties

Parameter	Type, default	Description
`Plant` plant	string	Sets or retrieves the plant or site name, the header's first line.
`Area` area	string	Sets or retrieves the area, the first step of the breadcrumb under the plant name.
`Screen` screen	string	Sets or retrieves the name of the screen, shown as the last step of the breadcrumb and included in the accessible name of the shell.
`User` user	string	Sets or retrieves who is logged on. Shown as a button in the header that raises userClick, for a application's log-off or e-signature dialog. Empty hides it.
`UserRole` userRole	string	Sets or retrieves the role of the user, shown next to the name. The property is not named role because role is the ARIA attribute of the component.
`ShowClock` showClock	bool true	Determines whether the 24-hour clock is shown in the header.
`Connection` connection	HmiShellConnection unknown	Sets or retrieves the data connection state, using the state words reported by a Smart.Industrial.Connect session, plus unknown for a screen without a session. The state is shown as a word with an indicator dot and exposed as a live status; a lost connection is announced assertively.
`ConnectionDetail` connectionDetail	string	Sets or retrieves extra text beside the connection word, the gateway's name, a latency.
`Navigation` navigation	IEnumerable<object>	Sets or retrieves the displays as [{ id, label, level, active, alarms, disabled }]. level is the ISA-101 display level (1 to 4) and indents the item. alarms is a number or { critical, warning, advisory }; the badge shows the highest non-zero priority with its count, and the priority word is included in the accessible name of the item. A plain number is treated as critical. Pressing an item raises the navigate event; the application changes the screen.
`Alarms` alarms	IEnumerable<object>	Sets or retrieves the alarms the footer summarises, in the shape AlarmBanner takes: [{ id, tag, message, priority, severity, timestamp, acknowledged, active, shelvedUntil, suppressed, outOfService }], read as ISA-18.2 reads an alarm list. Priority 0 and 1 are critical, 2 warning, 3 and above advisory - a number written as text counts as the number, and a severity (critical, warning, advisory) given on a record wins over its priority. The footer counts the active alarms by priority; counts as unacknowledged both active unacknowledged alarms and alarms that returned to normal before anybody acknowledged them; names the most urgent unacknowledged alarm (by priority, then the newest); and takes its colour from the worst alarm that is active or still unacknowledged. Shelved, suppressed and out-of-service alarms are not active and never named as needing attention; they are counted separately ('2 shelved'). A record without active is active. It acknowledges nothing.
`ShowFooter` showFooter	bool true	Determines whether the alarm strip is shown.
`ShowNavigation` showNavigation	bool true	Determines whether the navigation bar is shown.
`ShowThemeToggle` showThemeToggle	bool false	Determines whether the header offers a switch between lightTheme and darkTheme.
`LightTheme` lightTheme	string industrial	Sets or retrieves the theme the toggle switches to from a dark one.
`DarkTheme` darkTheme	string industrial-dark	Sets or retrieves the theme the toggle switches to from a light one.
`Density` density	HmiShellDensity normal	Sets or retrieves the target density. touch makes every target in the shell at least 44 px and the header taller, for panel PCs and gloved operation; normal is the desktop density. The value is reflected to an attribute used by the stylesheet.
`AnnounceChanges` announceChanges	bool true	Determines whether a change of connection state is read through the live region.

Methods

Method	Description
`void SetTheme(string theme)`	Sets the theme on the shell and on every element inside it that has a theme, so the whole screen switches at once, and raises the themeChange event. `theme` string The theme name.
`Task<bool> IsDark()`	Returns whether the current theme is the dark theme: the darkTheme, or any theme whose name ends in -dark.

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
`OnNavigate` navigate HmiShellNavigateEventDetail	This event is triggered when a display is selected in the navigation bar. The application changes the screen. A held Enter raises it once. `Id` string The display's id. `Item` object The navigation item as the application supplied it. `Index` int Its position in the list.
`OnAlarmsClick` alarmsClick HmiShellAlarmsClickEventDetail	This event is triggered when the alarm strip is pressed - with the mouse, or with Enter or Space, since the strip is a button in the tab order - so that the application can open the alarm list. A control placed in the footer slot by the application does not raise this event. `Alarms` dynamic A copy of the alarm list.
`OnUserClick` userClick HmiShellUserClickEventDetail	This event is triggered when the user button is pressed, for a application's log-off or e-signature dialog. `User` string Who is logged on. `Role` string Their role.
`OnThemeChange` themeChange HmiShellThemeChangeEventDetail	This event is triggered when the theme is switched through the toggle or setTheme, after every element inside the shell has been switched with it. `Theme` string The theme now in force. `PreviousTheme` string The theme before.

Types

`enum HmiShellConnection`

HmiShellConnection.Connected "connected" HmiShellConnection.Connecting "connecting" HmiShellConnection.Reconnecting "reconnecting" HmiShellConnection.Error "error" HmiShellConnection.Closed "closed" HmiShellConnection.Unknown "unknown"

`enum HmiShellDensity`

HmiShellDensity.Normal "normal" HmiShellDensity.Touch "touch"

CSS variables

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

--smart-hmi-shell-height --smart-hmi-shell-gap --smart-hmi-shell-header-height --smart-hmi-shell-target --smart-hmi-shell-canvas --smart-hmi-shell-panel --smart-hmi-shell-border