Safety and interlocks
<smart-permissive>Permissive displays a list of conditions that a start requires or that a running device depends on, with whether each condition is met.
Required conditions that are not met block the start, bypassed conditions count as met and are listed separately, and advisory conditions never block. In interlock mode the condition that went unhealthy first is marked from the timestamps supplied by the application. A bypass request raises the bypassRequest event and is not applied by the component.
<smart-permissive>smart-industrial/source/modules/smart.permissive.jsPermissiveModule from smart-industrial/angular/permissivePermissive from smart-industrial/react/permissive<Permissive> in Smart.Blazor.Industrial
Install the package, load the two stylesheets and the component's module, and put the element on the page. The element below is the first one of the demo. Put the script after the module, in a <script type="module">, so that it runs once the component is defined.
npm install smart-industrial
<link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.default.css" /> <link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.industrial-elements.css" /> <script type="module" src="node_modules/smart-industrial/source/modules/smart.permissive.js"></script> <smart-permissive id="start" label="P-2101A start permissives" allow-bypass></smart-permissive>
const permissive = document.getElementById('start');
permissive.conditions = [
{ id: 'level', label: 'Feed tank level above 20 %', satisfied: false, value: '14.2 %', tag: 'LT-2201' },
{ id: 'valve', label: 'Suction valve open', satisfied: true, tag: 'ZSO-2202' },
{ id: 'seal', label: 'Seal water pressure', satisfied: true, required: false, tag: 'PT-2203' }
];
// raised when a bypass control is pressed
permissive.addEventListener('bypassRequest', (event) => {
const { id, bypass } = event.detail;
// record the bypass under the plant's rules, then report it back:
permissive.conditions = permissive.conditions.map((c) => c.id === id ? { ...c, bypassed: bypass } : c);
});
// the same values as properties
permissive.label = 'P-2101A start permissives';
permissive.allowBypass = true;
The getting started guide covers the bundle, the ISA-101 themes and the license key; the connectivity guide covers feeding the properties from plant tags.
The properties the demo sets, then the next ones; the API page lists all 8 with their types and defaults.
| Name | Type, default | Description |
|---|---|---|
conditions | array | Sets or retrieves the conditions as [{ id, label, satisfied, required, bypassed, bypassedBy, tag, value, description, timestamp }]. required defaults to true; an advisory condition is listed but never blocks. timestamp is the time the condition last changed state and is used to determine the first-out condition. Assign a new array to update the component. Flags given as text, as a tag database may hand them over, are read as such: 'false', '0', 'no', 'off' and '' are not set. |
label | string | Sets or retrieves the title of the list, usually the device name and the purpose of the list. |
showSatisfied | boolean | Determines whether met conditions are listed. When off, a long list shows only the conditions that block; the verdict still counts every condition. |
allowBypass | boolean | Determines whether a bypass control is offered on each required condition that blocks, and a removal control on each bypassed one. The control raises bypassRequest and changes nothing itself. |
mode | string | Sets or retrieves the type of the list. A permissive list gates a start, and the verdict reads ready or not permitted. An interlock list trips a running device, the verdict reads healthy or tripped, and the first-out condition is marked. |
showFirstOut | boolean | Determines whether the earliest unsatisfied required condition, by timestamp, is marked as first-out. Applies in interlock mode only. Conditions without a timestamp cannot be first-out, and a tie is reported as no first-out. |
showTimestamps | boolean | Determines whether each condition shows how long it has been in its state, from its timestamp. The ages tick without the rows being rebuilt. |
announceChanges | boolean | Determines whether a change of verdict is read through the live region, assertively for a trip, politely otherwise. |
The events carry their data in event.detail. bypassRequest is a request: the bypass button appears only while allowBypass is true, and the component keeps the condition as it is until the application sets bypassed on it in conditions. readyChange reports a change of the overall verdict, and conditionClick reports a click on a row.
| Event | Description and detail |
|---|---|
readyChange | This event is triggered when the verdict changes, a start becomes possible or a device trips, and not on every redraw. It also fires when the list is emptied (ready false, nothing blocking) and when it is filled again.ready boolean Whether every required condition is met or bypassed.blocking any[] The ids of the required conditions not met.firstOut string The id of the first-out condition, or null. |
bypassRequest | This event is triggered when a bypass control is pressed. The list is not changed; the application applies the bypass, records who applied it, and returns an updated list. It is raised once per press: the control waits for the application's updated list, or five seconds, before it asks again. Each bypass control is named after its condition.id string The condition's id.bypass boolean True to apply a bypass, false to remove one.condition object The condition as the application supplied it. |
conditionClick | This event is triggered when a condition row is clicked, so that the application can open the faceplate or trend of the tag.id string The condition's id.condition object The condition as the application supplied it. |
| Method | Description |
|---|---|
summary() | Returns a summary of the list as { total, required, satisfied, unsatisfied, bypassed, ready, blocking, firstOut }, where blocking is the ids of the required conditions that are not met and firstOut is an id or null. With no conditions, ready is false: an empty list permits nothing. |
conditionById(id) | Returns the condition with the given id, as the application supplied it, or null. |
The same element with its wrapper. Each page has the installation steps and the full demo in that framework.
import { PermissiveModule } from 'smart-industrial/angular/permissive';
// Angular 14 and later; an NgModule application lists PermissiveModule in its imports
@Component({
standalone: true,
imports: [PermissiveModule],
template: `<smart-permissive [allowBypass]="true"
(onBypassRequest)="onBypassRequest($event)">
</smart-permissive>`
})
import { Permissive } from 'smart-industrial/react/permissive';
<Permissive allowBypass
onBypassRequest={(event: CustomEvent) => onBypassRequest(event.detail)} />
import 'smart-industrial/source/modules/smart.permissive.js';
<smart-permissive :allow-bypass="true"
@bypassRequest="onBypassRequest"></smart-permissive>
@using Smart.Blazor.Industrial
@rendermode InteractiveServer
<Permissive AllowBypass="true"
OnBypassRequest="OnBypassRequest" />
The Permissive is a list of conditions and a verdict, all as text. The verdict is shown as a word as well as a colour, each condition carries its state in its accessible name, and a change of the verdict is announced through the live region: politely when a start becomes possible and assertively when a device trips. The bypass controls are a composite widget with one tab stop and arrow key navigation.
| Key | Action |
|---|---|
| Tab | Moves into the bypass controls, landing on the one that holds the tab stop, and out again. The controls are one stop however many there are; without allowBypass the list has no stop at all. |
| Arrow Up/Down | Moves between the bypass controls. |
| Home / End | Moves to the first / last control. |
| Enter or Space | Raises bypassRequest for the focused condition. The list is not changed; the application applies the bypass and hands back the updated conditions. |
The accessibility page has every attribute, key and announcement; the WCAG 2.2 conformance report covers the whole library.
The component follows the theme on the page: the default theme, or the ISA-101 light and dark themes that ship with the package. It declares 6 CSS variables of its own, among them --smart-permissive-blocked-color, --smart-permissive-blocked-fill, --smart-permissive-bypass-color, --smart-permissive-bypass-fill. The CSS page lists them; the themes guide covers the tokens every component shares.
Batch Copilot Localization Settings