---
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); use the display's own menu *View > Reload* instead (keeps the
  session, confirmed by the user), and the display box to open other displays.
- 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).