Iframe and Faceplate

Iframe (External URL Embedding)

Iframe embeds an external web page inside the SVG screen. It integrates content such as Grafana dashboards, IP cameras, external web applications, and PDF documents into the SCADA screen.

Usage

Field	Value
Type	Iframe
Suitable SVG Elements	<rect> (foreignObject), <g>
Expression Type	Url

SVG Preparation

<rect id="grafana_embed" x="10" y="300" width="600" height="400"
      fill="#f5f5f5" stroke="#ddd"/>

Expression Examples

Static URL:

https://grafana.company.com/d/energy/panel?orgId=1&kiosk

IP Camera:

http://192.168.1.50/video.cgi

Dynamic URL — Expression:

var projectId = 153;
return "https://grafana.company.com/d/energy?var-project=" + projectId + "&kiosk";

Usage Scenarios

Content	URL Format
Grafana Dashboard	https://grafana/d/xxx?kiosk
IP Camera MJPEG	http://camera-ip/video
PDF Report	/files/reports/daily.pdf
Custom Menu HTML	Platform internal Custom Menu page
External Web App	Any web application

---

Faceplate (Component Placement)

Faceplate places a pre-designed reusable SVG component into the animation screen. It allows the same symbol to be used multiple times with different parameters.

Usage

Field	Value
Type	Faceplate
Suitable SVG Elements	<g>, <rect>, <image>
Expression Type	Faceplate

SVG Preparation

<!-- Motor 1 area -->
<g id="motor1_area" transform="translate(100, 200)"/>

<!-- Motor 2 area -->
<g id="motor2_area" transform="translate(350, 200)"/>

<!-- Motor 3 area -->
<g id="motor3_area" transform="translate(600, 200)"/>

Configuration

The same Faceplate for each area, with different placeholder values:

motor1_area:

• Faceplate: Motor_Standard
• Placeholders: {motor_name}=Motor 1, {speed_var}=M1_Speed, {status_var}=M1_Status

motor2_area:

• Faceplate: Motor_Standard
• Placeholders: {motor_name}=Motor 2, {speed_var}=M2_Speed, {status_var}=M2_Status

motor3_area:

• Faceplate: Motor_Standard
• Placeholders: {motor_name}=Motor 3, {speed_var}=M3_Speed, {status_var}=M3_Status

3 motors, 1 faceplate design, 3 placeholder sets.

Menu (Open Menu)

The Menu type opens a Custom Menu page when clicked.

Field	Value
Type	Menu
Expression Type	Custom Menu
Expression	Custom Menu name

Detailed information: Faceplate → | Custom Menus →