Iframe ve Faceplate

Iframe (Harici URL Gömme)

Iframe, SVG ekran içine harici web sayfası gömer. Grafana dashboard, IP kamera, harici web uygulaması, PDF doküman gibi içerikleri SCADA ekranına entegre eder.

Kullanım

Alan	Değer
Type	Iframe
Uygun SVG Öğeleri	<rect> (foreignObject), <g>
Expression Type	Url

SVG Hazırlığı

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

Expression Örnekleri

Statik URL:

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

IP Kamera:

http://192.168.1.50/video.cgi

Dinamik URL — Expression:

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

Kullanım Senaryoları

İçerik	URL Formatı
Grafana Dashboard	https://grafana/d/xxx?kiosk
IP Kamera MJPEG	http://camera-ip/video
PDF Rapor	/files/reports/daily.pdf
Custom Menu HTML	Platform dahili Custom Menu sayfası
Harici Web App	Herhangi bir web uygulaması

---

Faceplate (Bileşen Yerleştirme)

Faceplate, önceden tasarlanmış tekrar kullanılabilir SVG bileşenini animation ekranına yerleştirir. Aynı sembolü farklı parametrelerle birden fazla kez kullanmayı sağlar.

Kullanım

Alan	Değer
Type	Faceplate
Uygun SVG Öğeleri	<g>, <rect>, <image>
Expression Type	Faceplate

SVG Hazırlığı

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

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

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

Yapılandırma

Her alan için aynı Faceplate, farklı placeholder değerleri:

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 motor, 1 faceplate tasarımı, 3 placeholder seti.

Menu (Menü Açma)

Menu tipi, tıklandığında Custom Menu sayfasını açar.

Alan	Değer
Type	Menu
Expression Type	Custom Menu
Expression	Custom Menu adı

Detaylı bilgi: Faceplate → | Custom Menus →