Tutorial — Reusable Motor Faceplate

This tutorial builds a small but complete operator interface:

• a Motor view — one faceplate with a motor symbol, a live load value, a trend and three buttons (−, ON / OFF, +), reusable for any motor,
• a Plant Overview view — a screen with five tiles; a click on a tile opens the same faceplate for that motor.

It uses tags of the Global memory connection, so you can follow it without a device. Every motor has its own pair of tags:

Motor	Load tag	Run tag
1	value	valve
2	value2	valve2
3	value3	valve3
4	value4	valve4
5	value5	valve5

The load tags are numeric (int, 0–100 %) and have logging switched on, so the chart can draw their history. In a real project you would use the tags of your machines — for example machine.motor3.load and machine.motor3.run.

Part 1 — The Motor view

Chart with a live trend

A chart can be placed inside a view exactly like any other element: drag it from the Project tree onto the canvas. To show a running trend, create a classic chart (Charts, not Live Charts — a live chart shows only the current value of a tag, without any history):

1. In the Project tree click Charts, click +, name the chart Motor Load and open it.
2. Open the chart Parameters dialog (toolbar) and add {1} = 1 and {2} = value. Parameters are matched by their number, so {2} receives the same load tag as {2} of the view.
3. Click Add Tag and type Global memory.{2} into the Tag field.
4. Set Mode to Live&Hist. The chart draws the live values of the last minute.

Button commands

Select a button rectangle and use the Set section of the properties panel. See Set Commands.

Button	Tag	Method	Settings
−	Global memory.{2}	Inc/Dec	type dec, value 10, Min 0, Max 100
ON / OFF	Global memory.{3}	Toggle Value	—
+	Global memory.{2}	Inc/Dec	type inc, value 10, Min 0, Max 100

Type the tag into the Tag field of the Set section, for example Global memory.{2}. The text of the ON / OFF button needs the same command as its rectangle — a click on the letters reaches the text, not the rectangle.

The limits keep the load between 0 and 100 %, so repeated clicks on + stop at 100.

Simulation script

Without a machine nothing changes the load, so the trend would stay flat. A short view script plays the role of the motor: while the run tag is 1 the load follows a slow wave with some noise, when it is 0 the load falls to zero. The − and + buttons still work, because the script moves the current value towards its target instead of overwriting it. The script reads the parameters of the view with helper.getProperties() — the second parameter is the load tag and the third one the run tag.

Click Script in the toolbar and enter:

//called when view is first rendered
this.init = async () => {
  //parameters of the view: {2} = load tag name, {3} = run tag name (e.g. value2, valve2)
  const p = await helper.getProperties();
  const param = (i, def) => {
    const x = Array.isArray(p) ? p[i] : undefined;
    if (x === undefined || x === null) return def;
    return typeof x === 'object' ? (x.value ?? def) : x;
  };
  const loadTag = 'Global memory.' + param(1, 'value');
  const runTag = 'Global memory.' + param(2, 'valve');
  //simulated motor: ON/OFF is the run tag, load follows a slow wave, - and + buttons change it
  this.t = 0;
  this.timer = setInterval(async () => {
    this.t += 1;
    const running = Number(await helper.readTagValue(runTag)) === 1;
    let load = Number(await helper.readTagValue(loadTag)) || 0;
    const target = running ? 55 + 25 * Math.sin(this.t / 10) : 0;
    load += (target - load) * 0.25 + (running ? (Math.random() - 0.5) * 6 : 0);
    load = Math.max(0, Math.min(100, Math.round(load)));
    await helper.writeTagValues({ [loadTag]: load });
  }, 1000);
}

//called when view is destroyed
//free all resources such as timers here
this.destroy = async () => {
  clearInterval(this.timer);
}

The timer is started in this.init and stopped in this.destroy. See View Scripts.

Part 2 — The Plant Overview

The overview is an ordinary view with five tiles. Every tile is a rectangle with an Open command; a label sits below the tile, so that no text covers the clickable area.

Part 3 — Try it

Leave edit mode and open Views → Plant Overview from the navigation menu.

Click a tile: the Motor view opens with the parameters of that tile — the title reads Motor 3, the symbol, the buttons and the trend work with value3 and valve3. Click ON / OFF to start the motor and watch the load and the trend; + and − change the load by 10 %. Go back to the overview and open another motor: the same faceplate now shows the data of that motor.

You maintain one faceplate, and every change to it is visible for all motors. To add a sixth motor, create its tags and add one more tile with its own parameter values.