Screenshot erstellen

Im UI-Client gibt es eine Funktionalität um Screenshots zu erstellen. Diese Funktion kann über JavaScript aus der Applikation heraus angestoßen werden.

tcuiclient.postMessage("System.screenshot",
    {
        "path": "",
        "fileName": "",
        "querySelectorAll": "" ,
        "selectorIndex": 0
    }
).then((result) => {});

Parameter

Name	Typ	Beschreibung
path	string	Pfadangabe auf dem System, wo der Screenshot gespeichert werden soll. "C:\\tmp"
fileName	string	Namen des Screenshots. Der Name wird um ein Zeitstempel und zusätzlich um einen Index erweitert. Der Index wird hochgezählt, sofern mehrere Elemente gefunden wurden. "testScreenshot-2026-02-09T08-15-01.108Z-0"
querySelectorAll	string	QuerySelector mit dem nach Elementen auf der Website gesucht werden soll. Die Syntax ist identisch mit dem "document.querySelectorAll" aus JavaScript oder TypeScript.
selectorIndex (optional)	number	Index des Elementes von dem ein Screenshot erstellt werden soll. Wurden über den querySelector mehr als ein Element gefunden, werden ohne "selectorIndex" von allen Elementen ein Screenshot erstellt. Durch Angabe von "selectorIndex" wird nur ein Screenshot des n-ten Elementes gemacht. 0

Callback

Typ	Beschreibung
result	result: Enthält bei erfolgreicher Ausführung den Wert 0 andernfalls den Error Code. resultMessage: Enthält bei erfolgreicher Ausführung eine Text Liste über alle erstellten Screenshots. Im Fehlerfall steht hier eine Fehlermeldung.

Typ

Beschreibung

result

result:
Enthält bei erfolgreicher Ausführung den Wert 0 andernfalls den Error Code.

resultMessage:
Enthält bei erfolgreicher Ausführung eine Text Liste über alle erstellten Screenshots. Im Fehlerfall steht hier eine Fehlermeldung.

Beispiel (Dev-Tools):

1. Starten Sie den UI-Client

2. Öffnen Sie die Developer Tools

3. Öffnen Sie die Beckhoff CMI

window.location.href = 'https://cmi.beckhoff-cloud.com/Application';

4. Führen Sie den Code zum Erstellen eines Screenshots aus. Passen Sie den Code wenn nötig an.

tcuiclient.postMessage("System.screenshot",
    {
        "path": "C:\\tmp",
        "fileName": "testScreenshot",
        "querySelectorAll": "#MachineBig_Historize>.TcHmi_Controls_System_TcHmiContainer-template"
    }
).then((result) => {});

5. Gehen Sie zum Ordner C:\tmp

Ein Screenshot vom Historized Container wurde erfolgreich erstellt.
Screenshot erstellen 1:

	Die Screenshot Funktionalität ist ab der Version 1.11.1 verfügbar.