Phase 10: Graphic Display Setup, Edit Module, Advanced Operating Graphics #10

Merged
cliu merged 4 commits from docs/phase-10-graphics into main 2026-10-01 14:53:40 +10:00
6 changed files with 379 additions and 0 deletions
Showing only changes of commit 2ae5ace753 - Show all commits

View file

@ -0,0 +1,38 @@
---
name: graphics
description: >-
CI Server R1.03 operator graphics: displays, symbols, layouts and HTML displays. Use when the
user wants to create or change a display or symbol in the Edit Module (number field, text,
alarm overview, trend, buttons, actions, parameters, connecting a component to an item),
deploy or remove display files, export displays to HTML / Mobile Operator, open a display in a
web browser (localhost:8080/mobileoperator), validate, search or unlock displays (jwuiutl,
.lck files), find where displays, symbols and layouts are stored (DEPLOY folder,
Layouts.xml), change layouts, menus, toolbars or frames, build dataset forms (*Dia.xml), or
use the AOG library (Advanced Operating Graphics, AOG_Style, AOG symbols, faceplates). Sources
IM 36K10C50-01EN, IM 36K10R30-01EN, IM 36K10C60-01EN.
---
# Graphics: displays, symbols, layouts (R1.03)
Background: `knowledge/manuals/IM36K10C50-01EN.md` (Edit Module, components, sheets, symbols,
`jwuiutl`, display file contents), `IM36K10R30-01EN.md` (folders, layouts, dataset forms, HTML
display), `IM36K10C60-01EN.md` (AOG library).
Rules:
- Drawing is done by the user in the **Edit Module** (GUI). Claude prepares the steps, checks the
saved XML, deploys/exports/validates files and checks the HTML display in the browser.
- Displays and layouts are shared by every operator: changing or deleting existing files only
with the user's approval; keep a copy first (`Layouts-original.xml` is the factory layout file).
- The HTML display needs a CI Server login: the user logs in; Claude never enters passwords.
Reloading the browser page logs out — reopen displays via the display box instead.
- `jwuiutl -vf`, `-u`, `-c`, `-a` rewrite or unlock files of **all** displays: only with approval.
| Task | File | Status |
|---|---|---|
| Build a display in the Edit Module (text, number field, alarm overview, trend) and check the saved XML | `tasks/create-display.md` | verified |
| Deploy / remove display files, export HTML, validate and search with `jwuiutl` | `tasks/deploy-displays.md` | verified |
| Open and check a display in the browser (HTML display / Mobile Operator) | `tasks/deploy-displays.md` §4 | verified |
| Layouts (`Layouts.xml`), menus, toolbars, frames, dual screen | R30 summary §2 | from docs |
| Dataset forms (`*Dia.xml`) and the form description language | R30 summary §3 | from docs |
| Symbols, parameters, actions, localisation, record/playback | C50 summary §1, §4, §5 | from docs |
| AOG library (styles, symbols, faceplates, templates) | C60 summary | from docs |

View file

@ -0,0 +1,50 @@
---
task: Build a display in the Edit Module and check the saved file
version: R1.03
source: IM 36K10C50-01EN §1.2, §1.7, §2, §4.8.1; practiced on CI-Eng-Sample (display CIENG_Tank) 2026-10-01
status: verified
---
# Build a display (Edit Module)
The user draws; Claude gives the steps and checks the result. Example = the sample display
`examples/CI-Eng-Sample/displays/CIENG_Tank.xml`.
## Steps for the user
1. Start the Edit Module and log in.
2. *File > New Display*, name `<DisplayName>`; tick **HTML display** if it should also run in a
browser (the editor then hides unsupported components and properties).
3. Add components from the component bar, for example:
- **Text** — title.
- **Number field** — in the Properties sheet click **Value**, open the connection dialog,
*Items* tab, pick `<Section>.<Tag>`.
- **Alarm Overview** — right-click > *Component Properties*; *Filter* tab for an ASA, section
or tag filter; *Types* tab for current/historical.
- **Trend** — component properties, pen 1 = `<Section>.<Tag>` (a new trend has 5 empty pens;
the item must be in a storage group).
4. *File > Save* (or *Save with Revision Information*). Close the tab when done: an open
display is locked (`<DisplayName>.lck`) and `jwuiutl` skips it.
## Check the saved file
Folder `%TLS_WAP_PATH%\cfg\operatorInterfaces\DEPLOY\displays\` (and with HTML mode also
`%TLS_WAP_PATH%\mobileoperator\operatorInterfaces\DEPLOY\displays\<DisplayName>.html`).
```
grep -n "<html>\|<width>\|<height>\|itemName\|itemId\|<source" <DisplayName>.xml
```
- `<html>true</html>` = HTML mode; `<width>`/`<height>` must be set for the HTML display.
- Item connections: `<itemName>` + `<itemId>` (node.group.number…); trend pens:
`<source type="sourceID" uri="ci:/item/<item>"/>` (`uri=""` = empty pen).
- The name is what counts: after the item was deleted and loaded again (new id) the display
still validated and a new session showed live values; already-open sessions kept showing the
old value until reopened.
## Verified (CIENG_Tank, 2026-10-01)
Text `CI-Eng-Sample Tank 1`, number field on `TANK1.LEVEL` (live: 72 → 61), alarm overview
(no filter; listed the TANK1.LEVEL alarms), trend pen `TANK1.LEVEL` (legend
`CI-Eng-Sample.TANK1.LEVEL [CIENG_SCAN10S]` = highest-priority storage group). In the HTML
display the trend drew no line (ISS-041).

View file

@ -0,0 +1,56 @@
---
task: Deploy, remove, export, validate and search displays; open them in the browser
version: R1.03
source: IM 36K10C50-01EN §1.5; IM 36K10R30-01EN §1.1, §4; practiced on CI-Eng-Sample 2026-10-01
status: verified
---
# Deploy and check displays
No admin rights needed (`C:\Users\Public\Yokogawa\tls\wap`). `jwuiutl.cmd` is in `tls\com`
(on `PATH`); call it through `cmd` (`cmd /c "jwuiutl.cmd …"`).
## 1. Deploy / remove (sample scripts)
`examples/CI-Eng-Sample/displays/deploy_displays.cmd`: copies `CIENG_Tank.xml` to
`%TLS_WAP_PATH%\cfg\operatorInterfaces\DEPLOY\displays\` and runs
`jwuiutl.cmd -e HTML -i -f DEPLOY CIENG_Tank` (HTML into
`%TLS_WAP_PATH%\mobileoperator\operatorInterfaces\DEPLOY\displays\`).
`remove_displays.cmd` deletes both files (close the display in the Edit Module first).
Deploy after `load.cmd` so the items exist.
For another display: copy `<name>.xml` into `DEPLOY\displays` and export it the same way.
Displays with symbols also need the symbol files in `DEPLOY\symbols`.
## 2. Validate (report only)
```
cmd /c "jwuiutl.cmd -d -v -i -l <scratch>\validate.txt"
```
Per display: `Validating <name>` then `Info: No problems found`, or `*** Validation failed for
display <name>:` with `Problem: <component>: Connected item is not found (<item>)`. Skipped:
`*** Display locked <name>` (open in the Edit Module or a stale `.lck`; `-u` unlocks — with
approval), displays saved by a newer version. `-vf` re-saves all displays — only with approval.
## 3. Search
```
cmd /c "jwuiutl.cmd -d -m <term> > <scratch>\match.txt 2>&1"
```
CSV `Type, File, Component` per match; `-M` adds actions and properties. Use it before deleting
or renaming items to find the displays that use them.
## 4. Open in the browser (HTML display)
`http://localhost:8080/mobileoperator/?d=<display>` (`&l=<layout>`). The user logs in with a CI
Server user. The page shows the operator frame (menu, navigation buttons, alarm banner, status
line). To switch displays type the name in the display box and press Enter — **reloading the
page ends the session**. Check live values by writing a test value (`itmval -p`, test items only).
## Verified (2026-10-01)
Remove → deploy recreated both files; `-e HTML` output identical to the Edit Module's HTML;
validation of `CIENG_Tank` *No problems found* (also after a sample reload with new item ids);
search worked; browser showed live values. HTML trend without line: ISS-041.

View file

@ -0,0 +1,98 @@
---
manual: IM 36K10C50-01EN
title: Edit Module
edition: 3rd Edition, Sep. 2023
version: R1.03
status: display CIENG_Tank built by the user in the Edit Module (text, number field, alarm overview, trend) and checked as XML and HTML 2026-10-01; jwuiutl search, validate and HTML export verified; other components, symbols, actions and the tutorial from docs
---
# Edit Module (R1.03)
The Edit Module draws displays and symbols for the operator interface (CI View) and the HTML
display. Displays are XML files (`IM36K10R30-01EN.md` §1). Section numbers refer to the manual.
## 1. Window and files (§1)
- Window: sheets, component bar, graphic sheet, symbols sheet, menu, toolbar, edit area.
- *File > New Display* (Ctrl+N), *New Symbol* (Ctrl+Shift+N), *Save* (Ctrl+S), *Save with
Revision Information* (who/when/why, kept in `revisionHistory`), *Save As*, *Save Selection
as* (new symbol or display), print area, print. Open displays are locked (`<name>.lck`);
autosave writes `<name>.xml.autosave`.
- *Edit > Find* searches the open display; `jwuiutl -m` searches all.
- **HTML display** check box (new display dialog / display properties): the editor then offers
only HTML-supported components, properties and actions, and saving also writes the HTML file.
HTML mode can be switched off later. Not for enterprise displays. The tab icon shows normal /
HTML / HTML with unsupported content.
- Localisation: *Tools > Configure Localization* → *Extract Text*, add locale, translate;
global and per-file tables; the operator's locale decides.
- *Playback > Record* records operator/editor sessions; *Open viewer* plays them back.
## 2. `jwuiutl` — batch operations (§1.5)
`jwuiutl.cmd` (in `tls\com`, Java; runs from a normal prompt):
| Option | Use |
|---|---|
| `-d` / `-s` | Only displays / only symbols (`-p <palette>`, `-g <group>`) |
| `-v` | Validate (connected items exist, components defined); report only. `-l <file>` writes the result, `-i` shows progress (`Validating <name>` / `Info: No problems found`) |
| `-vf` | Force validation and **save** every display/symbol |
| `-u` | Unlock locked files (`.lck` left by a crashed editor) |
| `-c` / `-a` | Clean up temporary files / validate + unlock + clean up |
| `-m <terms>` / `-M <terms>` | Print matching components (CSV) / with actions and properties |
| `-e HTML [-o <dir>] [-f <deployment>] [<display>]` | Export HTML displays |
| `-b`, `-z`, `-h true/false` | Also save `.xml.bin` (faster loading) / compressed / set HTML mode |
| `-un`, `-pw` | User for enterprise displays |
**Verified on the test system:** `-d -m TANK1` and `-d -v -i -l` ran without errors; locked
displays and displays saved by a newer version are skipped (`*** Display locked <name>`,
`… created with a newer version of CI Server (R1.04.0.0)`); `-e HTML -i -f DEPLOY CIENG_Tank`
wrote `mobileoperator\operatorInterfaces\DEPLOY\displays\CIENG_Tank.html`.
## 3. Components (§2)
Shapes (rectangle, ellipse, arc, polygon, spline, line, links), text / text field / text area
/ password field, number and number field, icon, rectangular and circular scales, radial, data
bar, spinner, slider, push/toggle button, check box, radio button, combo box, list box, date
and time field, **alarm overview** (current/historical; acknowledge, block, shelve, link display,
export; dialog tabs Types, Columns, Filter, Alarm link display, Appearance, Header and footer,
Fetching, Alarm Shelving, Enterprise, Advanced, Attributes), list of blocked items, alarm
sound, dataset tables (view/edit dataset records), report, **trend** (pens on items with
history; shows limits; time slider and controls; definitions can be saved from the operator
interface), DTS trend, micro trend, playback indicator, calculation/function, JavaScript
function, web browser, PDF viewer, navigation tree, display generator, map viewer.
## 4. Sheets (§4)
Visualization (displays/symbols tree), zoom, visibility groups (shown by zoom factor),
**parameters** (default read-only ones such as `name`, `attachedObject`, `client`, `server`,
`mouseX`; user-defined with scope; `$name` in command lines), messages, symbols, **properties**
(connect a property to an item attribute, parameter or dataset field; linear transformations;
writable properties: value, item name parts, id, units, description, status number/text,
control status, option bits), layers, attributes, edit history (undo/redo), **actions** (open /
close display, execute command, read/write parameters; triggered by component events).
## 5. Symbols (§5)
*File > New Symbol*; put it on a palette (attributes sheet); external user-defined parameters
become properties of each instance; after changing a symbol run *Tools > Validate all
Symbols* and *Validate all Displays* (with all tabs closed); a symbol can be linked to a
PROCESS Service class so each instance shows one object; data location (display, operator's
CI Portal, display's server, enterprise, node).
## 6. What the display file stores (verified with CIENG_Tank)
- `<coreObjectDefinition type="displayDefinition">` with `<html>true</html>`, `<width>`,
`<height>`, grid, revision history, visibility groups, layers.
- Components as elements (`text`, `numberField`, `alarmOverview`, `chart` = trend).
- Item connections in `<globalSection>`: `<itemName>CI-Eng-Sample.TANK1.LEVEL</itemName>` **and**
`<itemId>1.1.248.0.0.1.1.7</itemId>`. Trend pens: `<source uri="ci:/item/<item>"/>`; a new
trend has 5 empty pens.
- **After a sample remove/reload the item got id 268** while the file kept 248: `jwuiutl -v` still
reported *No problems found*, and a newly opened session showed the live value — the name is
what counts. Sessions that were already open kept the old binding (value frozen) until the
display was opened in a new session.
## 7. Tutorial (§6)
Builds wheels, faceplates, valve symbols, indicators, PID faceplates with mode and setpoint
dialogs, scales, limit colours, tag info and pinning buttons — a guided exercise in the GUI.

View file

@ -0,0 +1,54 @@
---
manual: IM 36K10C60-01EN
title: Advanced Operating Graphics
edition: 3rd Edition, Sep. 2023
version: R1.03
status: from docs; installed AOG displays checked read-only (DEPLOY\displays, mobileoperator) 2026-10-01
---
# Advanced Operating Graphics — AOG library (R1.03)
A ready-made library of symbols and displays in a consistent, high-performance HMI style,
used from the Edit Module's Visualization sheet. Section numbers refer to the manual.
## 1. Symbols (§1.1)
| Kind | Purpose | Palettes / examples |
|---|---|---|
| Equipment symbols | Static equipment, no live data | `AOG_ContainersAndVessels` (AOG_Tank, AOG_Vessel, AOG_Reactor, …), `AOG_HeatTransfer`, `AOG_Indicator`, `AOG_MaterialHandling`, `AOG_Mixing`, `AOG_Rotating` (pumps, compressors, turbine), `AOG_Separators`, `AOG_ValvesAndActuators`, `AOG_Electrical`, `AOG_Filters`, `AOG_Others` (Yokogawa systems such as AOG_CentumFCS, AOG_ProsafeRS, AOG_StardomFCN, AOG_FAM3, AOG_DTS; field devices; stations) |
| Item symbols | Show and change one or more item attributes | indicators (bar, needle, circular, radial, number, text, on/off, manual, alarm, trend), valves (2-way, 3-way, on/off), selection box, name/info |
| Object symbols (`AOG_O…`) | Same, driven by PROCESS Service object signals | e.g. `AOG_ONumberIndicator`, `AOG_OHorizontalBarIndicator` |
| Navigation symbol, components | Navigation between displays | |
## 2. Displays (§1.2)
Standard displays: `AOG_Default`, `AOG_DisplayTemplate` (start for new displays), `AOG_Style`
(global style parameters), `AOG_MenuMain`, alarm displays (`AOG_AlarmBanner`, `AOG_AlarmCurrent`,
`AOG_AlarmHistory`, `AOG_AlarmShelved`), `AOG_AuditTrail`, `AOG_ItemFaceplate`,
`AOG_ItemTuningPanel`, `AOG_ObjectFaceplate`, `AOG_ObjectTuningPanel`, `AOG_SetItemMode`,
`AOG_SetObjectMode`, `AOG_SetNumberPV/SV/SL/SH/SLL/SHH`, `AOG_LockStatus`, `AOG_TrendOpen`,
OPC UA method call displays; plus demo displays. **Installed**: these are in
`DEPLOY\displays`, and the alarm, audit, default, menu, style, trend and UA method displays also
exist as HTML displays.
## 3. Global style parameters (§1.1, §2.1.1)
Defined once on the `AOG_Style` display (*Parameters* tab) and used by all AOG symbols:
colours (`AOG_C…`: alarm high/medium/low/diagnostic/off, display background, equipment
running/off/not running, fluid and gas lines, indicator background/limit/normal/outline/signal,
manual control, selector, text 1–4), strokes (`AOG_S…`), fonts (`AOG_FT1–4`), engineering unit
texts (`AOG_EF1` flow, `AOG_EL1` level, `AOG_EP1` pressure, `AOG_ET1/2` temperature), on/off
texts, `AOG_BlinkOnNotAcknowledged`. Changing a value changes every symbol that uses it.
## 4. Building an HMI (§2)
Edit Module → (optionally) adjust `AOG_Style` and save → *New display* or start from
`AOG_DisplayTemplate` → place AOG symbols from the Visualization sheet → connect them to items
or objects → save → open in the operator interface. New symbols can be made in the same style.
## 5. Enterprise (§3)
Enterprise displays and AOG item/object symbols for enterprise engineering (items/objects on
several servers; locations chosen per symbol).
Not practiced: the sample display uses plain components; AOG symbols need the Edit Module GUI.

View file

@ -0,0 +1,83 @@
---
manual: IM 36K10R30-01EN
title: Graphic Display Setup
edition: 3rd Edition, Sep. 2023
version: R1.03
status: HTML display (Mobile Operator) verified with CI-Eng-Sample display CIENG_Tank 2026-10-01; layout file and form folders checked read-only; layout editing, dataset forms, form language and dual screen from docs
---
# Graphic Display Setup (R1.03)
How the operator interface is framed (layouts), how custom dataset forms are added, and how
displays run in a web browser (HTML display, "Mobile Operator"). Section numbers refer to the
manual. Building displays: `IM36K10C50-01EN.md`; AOG library: `IM36K10C60-01EN.md`.
## 1. Files and folders (installed)
| What | Where (`%TLS_WAP_PATH%` = `C:\Users\Public\Yokogawa\tls\wap`) |
|---|---|
| Displays (operator interface) | `cfg\operatorInterfaces\DEPLOY\displays\<name>.xml` (plus `.lck` while open in the Edit Module, `.autosave`) |
| Symbols | `cfg\operatorInterfaces\DEPLOY\symbols\` (≈ 3100 files incl. the AOG library) |
| Layouts | `cfg\operatorInterfaces\DEPLOY\layouts\Layouts.xml` (+ `Layouts.readme`, `Layouts-original.xml`) |
| Components, locales, thresholds | `cfg\operatorInterfaces\DEPLOY\components\`, `locales\`, `thresholds\` |
| HTML displays | `mobileoperator\operatorInterfaces\DEPLOY\displays\<name>.html` |
| Dataset forms | `cfg\dialog\dialogs\<name>Dia.xml` (components `<name>Com.xml`, definitions `JToolsGlobalDef.xml`); texts in `cfg\properties\` |
`DEPLOY` is the deployment name (a user's *Operator Interface Deployment* field selects another;
empty = `deploy`).
## 2. Layouts (§1)
- `Layouts.xml` holds several `<layout>` elements under `<layouts>` (common options such as
`debugActivationKey="CONTROL SHIFT F6"` for the graphics debugger, Java only). A layout =
menu, toolbar, **frame set (required)**, status line.
- Layout options: `name`, `icon`, `title` (`$<frame>` = title of the display in that frame),
`drawBorder`, `sizingAllowed`, `minimizingAllowed`, `closingAllowed`, `alwaysOnTop`, `modal`,
`lookAndFeel`, `initialPosition` (… `fitFrames`), `initialPositionX/Y`, `initialSize`,
`initialSizeWidth/Height`, `maximumOpen`, print orientation and margins (Java only).
- Menu items (§1.5, e.g. `menu.file.login`, `menu.view.reload`), toolbar (§1.6), status line
items (§1.7, e.g. graphics queue level), frames and tabs (§1.8), translations (§1.9).
- Which layout opens: *In layout* of an *Open display* action (Edit Module), or the user's
*Layout* field (Engineering Module, Authorization > Users); empty = `default`.
- Dual screen (§1.10): copy the layout and the banner display as `<name>_1` / `<name>_2` and let
each banner open its main display in its own layout.
- **Installed layouts**: `mobile`, `default`, `sxga1f/r`, `uxga1f/r`, `wxga1f/r`, `wsxga1f/r`,
`wsxgap1f/r`, `wuxga1f/r`, `ResizablePopup`, `FixedPopup`, `popup`, `Splash`, `tuningpanel`,
`faceplate`, `SelectMode`, `Setpoint`, `mapviewer` (`f` fixed / `r` resizable per screen
size). The test system's `Layouts.xml` also has a custom layout added by the author; keep a copy
of the original before editing.
## 3. Dataset forms (§2, §3)
Engineering-Module-style forms for operators: write `<name>Dia.xml` in `cfg\dialog\dialogs`
(never change the existing forms there), optionally a property file per language, then place a
*Dataset form* component on a display. Objects: `label`, `textField`, `checkBox`, `comboBox`,
`panel`, `component` (`JhmiRecordNameCom`, `JhmiTreeComboBoxCom`, `JhmiSelectAvailableCom`,
`JhmiTimeSelectorCom`); `meta` links an object to a dataset field: `field=`, `mixedValue=`,
`choices=<dataset>[,<field>[,<filter>]]`, `none=`, `available=`/`selected=`, `label=`,
`dateVisible=`, `visibility=`. Layout by `column`, `top="+"`, `right="*"`. Localisation via
property files and language codes (§3.5).
## 4. HTML display / Mobile Operator (§4)
- Export: Edit Module saves the HTML version automatically when the display has **HTML
display** ticked; or `jwuiutl -e HTML -i [-o <path>] [-f <deployment>] [<display>]` (without
`-o` it writes into `mobileoperator\operatorInterfaces\<deployment>`). **Verified**: both give
identical HTML (except a time stamp).
- Open: `http(s)://<host>:8080|8443/mobileoperator?d=<display>&l=<layout>&u=<user>` or *Open* of
*Mobile Operator* on the Remote Connect page. Login with a CI Server user (manual, or SSO via
`https://<host>:8443/auth/mbl`); user profile fields used: password, authorization group, ASA,
shelving group, process areas, logoff timeout, deployment, initial display, locale (layout
not). Login control: `dssana.sup` interface *mobile operator*.
- **Verified**: `http://localhost:8080/mobileoperator/?d=CIENG_Tank` showed the CI View-like
frame (menu, navigation buttons, alarm banner, status line) and the display; the number field
updated live; the alarm overview listed the sample's alarms. **Reloading the browser page ends
the session** (login again); open other displays with the display box instead.
- Differences from the Java operator interface (§4.7): layout windows live inside the browser
window (no resizing of embedded layouts); displays need explicit width/height; names are
case-sensitive; zoom and pan not supported; some mouse/keyboard events and actions missing;
no enterprise displays. Components supported (§4.8): alarm overview, display, group, symbol,
trend, visibility group/layer, parameters, web browser (with listed properties).
- Full screen F11, Chrome shortcuts or `chrome.exe --app=http://<host>:<port>`.
- **Test system**: the HTML trend of `CIENG_Tank` drew no line although history existed; browser
console `Mismatch between number of labels … and number of columns in array (51)` (ISS-041).