Recipes, orders and scheduled jobs
Recipe Panel <smart-recipe-panel>
RecipePanel lists the recipes a line can be set to and loads one into the plant in a single action.
<smart-recipe-panel> · 7 properties, 0 methods, 2 events · source/modules/smart.recipepanel.js
Usage in TypeScript
The package ships its definitions: RecipePanel is the element type and RecipePanelProperties the properties, both exported from smart-industrial/source/typescript/smart.industrial. document.querySelector('smart-recipe-panel') is typed as RecipePanel.
import { RecipePanel, RecipePanelProperties } from 'smart-industrial/source/typescript/smart.industrial';
const recipePanel = document.querySelector('smart-recipe-panel') as RecipePanel;
recipePanel.selected = 'product-a';
recipePanel.addEventListener('recipeApply', (event: CustomEvent) => console.log(event.detail));
Properties
| Property | Type, default | Description |
|---|---|---|
recipes | array | Sets or retrieves the recipes as [{ id, name, note, entries: [{ tag, label, value, unit }] }]. label is what an operator calls the value; without one the tag is shown, which is what an engineer calls it. Assign a new array to update the component. |
selected | string | Sets or retrieves the id of the recipe whose values are shown. An empty value shows the first recipe. |
label | string | Sets or retrieves the heading of the panel. It is also the accessible name of the group. |
readOnly | boolean | Sets or retrieves whether the panel only shows the recipes. The Load button is removed rather than disabled, because a control that cannot be used should not invite a press; the values are still readable. |
confirm | boolean | Sets or retrieves whether loading asks first. When true, the confirmation names every value that is about to be written. A recipe moves several setpoints at once, so this is on by default. The confirmation is modal - the panel behind it does not respond and Tab stays on its two buttons - and it freezes what it names: Load it sends the recipe as it was shown. If that recipe changes underneath while the question is open (the list is refreshed, another recipe is selected), the question is withdrawn and the panel says so. The second click of the double-click that opened it, a press within 300 ms of opening and a held key do not answer it. |
busy | boolean | Sets or retrieves whether a load is in flight. The application sets it while it writes, so the button cannot be pressed twice and the panel says what it is doing. The panel also sets it itself as it raises recipeApply, so a double press is one load even when the application sets busy only after an await. It is released when the application sets busy to false or sets result, or after ten seconds. |
result | object | null | Sets or retrieves what the last load did, as { name, applied, of, failed: [{ tag, error }], at }. The application sets it when the writes come back. The entries named in failed are marked refused in the values table, so a load that half-succeeded is visible rather than only logged. A load refused as a whole - the role may not load, the session ran out - wrote nothing, and is given as { name, error }, which the panel says in those words rather than as "0 of 5 written". |
Events
The data of an event is in event.detail. recipeSelect reports a choice the recipe panel has already made: it sets selected and then raises the event. recipeApply is a request: the panel raises it only while readOnly and busy are false, asks for confirmation first while confirm is true, writes nothing to the plant, and shows the outcome when the application sets result.
| Event | Description and detail |
|---|---|
recipeApply | This event is triggered when the operator loads a recipe, after the confirmation when one is asked for. The component does not write: the application performs the writes and then sets the result property. It cannot know who is pressing the button or how the writes should be audited, so it does not pretend to. With confirm on, the id and the values are the ones the confirmation showed.id string The id of the recipe.name string The name of the recipe, as the operator saw it.entries any[] The values to write, as [{ tag, value }]. |
recipeSelect | This event is triggered when a recipe is chosen, by pointer or by keyboard. It is also raised when the recipe already shown is chosen again. Nothing is written; only what the panel shows changes.id string The id of the recipe now shown.name string Its name. |
CSS variables
The component declares 4 CSS variables; the CSS page shows how to set them.
--smart-recipe-panel-refused-color --smart-recipe-panel-done-color --smart-recipe-panel-value-font --smart-recipe-panel-list-width