Communicate with AVEVA XR Engage

Save PDF

Last UpdatedOct 29, 2025
4 minute read

Forward: AVEVA XR Engage Extensions view to AVEVA XR ENGAGE

The AVEVA XR Engage Extensions view can send a message to AVEVA XR Engage with a function such as the following.

// message is a JSON object

function send(message) {

window.chrome.webview.postMessage(message);

}

Where message is a JSON message as defined in the previous section.

Reverse: AVEVA XR Engage to AVEVA XR Engage Extensions view

Every time an element is picked by the user in the 3D view, AVEVA XR Engage will send an array of tags as a JSON message to the AVEVA XR Engage Extensions view. An event handler can be used to catch this message.

var resultFromParent = document.getElementById('parentMessage');

window.chrome.webview.addEventListener('message', function (e) {

resultFromParent.innerHTML = e.data;

});

Whenever the extension window is opened, a notification message “XXX Cache is loaded” will be sent to AVEVA XR Engage extension window, which can used for either display purposes or to save the information.

Sample HTML

The sample HTML code below provides an illustration of how the AVEVA XR Engage Extensions message calls can be used to interact with AVEVA XR Engage. The code can be pasted into an empty .html file, and saved to a web server. The tag ids used in this sample should be replaced with tag ids that correspond to the elements in your AVEVA XR Engage 3D model.

Note: Text in color indicates required changes for AVEVA XR Engage 5.1.

<!DOCTYPE html>

<html>

<head>

<title>Example HTML document</title>

body {

margin: 0;

background-color: white;

overflow: visible;

/*width: 100%;

height: 100%;*/

}

</style>

function navigateTo(tagId) {

sendWithOPandTAGID("navigate", tagId);

}

function pick(tagId) {

sendWithOPandTAGID('pick', tagId);

}

function setColor(tagIds) {

var message = { "name": "SetColor", "args": tagIds};

send(message);

}

function resetColors() {

var message = { "name": "ResetColors", "args": [] };

send(message);

}

function setXRayMode(isEnabled) {

var message = { "name": "XRay", "args": [isEnabled] };

send(message);

}

function sendWithOPandTAGID(op, tagId) {

var message = { "name": op, "args": [tagId] };

send(message);

}

function SaveAreaEntry(measureID) {

sendWithOPandTAGID("SaveAreaEntry", measureID);

}

function SelectAreaEntry(measureID) {

sendWithOPandTAGID("SelectAreaEntry", measureID);

}

function InitiateAreaPoints(InitiateInspection) {

sendWithOPandTAGID("InitiateAreaPoints", InitiateInspection);

}

function DeleteAreaEntry(measureID) {

sendWithOPandTAGID("DeleteAreaEntry", measureID);

}

function CreateObject(position) {

var message = { "name": "createobject", "args": position };

send(message);

}

function HighlightObject(ThreeDObjectid) {

sendWithOPandTAGID("highlightobject", ThreeDObjectid);

}

function SetColorToObject(ThreeDObjectid) {

sendWithOPandTAGID("setcolortobject", ThreeDObjectid);

}

function ZoomToObject(ThreeDObjectid) {

sendWithOPandTAGID("zoomtoobject", ThreeDObjectid);

}

function SetPositionOfObject(ThreeDObjectid) {

sendWithOPandTAGID("setpositionofobject", ThreeDObjectid);

}

function GetPositionOfObject(ThreeDObjectid) {

sendWithOPandTAGID("getpositionofobject", ThreeDObjectid);

}

function ShowObject(ThreeDObjectid) {

sendWithOPandTAGID("showobject", ThreeDObjectid);

}

function HideObject(ThreeDObjectid) {

sendWithOPandTAGID("hideobject", ThreeDObjectid);

}

function DeleteObject(ThreeDObjectid) {

sendWithOPandTAGID("deleteobject", ThreeDObjectid);

}

function SetCameraToPositionByDistance(ThreeDObjectid) {

sendWithOPandTAGID("setcameratopositionbydistance", ThreeDObjectid);

}

function SetCameraToPosition(ThreeDObjectid) {

sendWithOPandTAGID("setcameratoposition", ThreeDObjectid);

}

function GetCameraDirection(ThreeDObjectid) {

sendWithOPandTAGID("getcameradirection", ThreeDObjectid);

}

function LookTowardsPosition(position) {

sendWithOPandTAGID("looktowardsposition", position);

}

function GetCameraPosition(ThreeDObjectid) {

sendWithOPandTAGID("getcameraposition", ThreeDObjectid);

}

function SetCameraDirection(ThreeDObjectid) {

sendWithOPandTAGID("setcameradirection", ThreeDObjectid);

}

function SetCameraPostionAndDirection(positionanddirection) {

var message = { "name": "setcamerapostionanddirection", "args": positionanddirection};

send(message);

}

function SetCameraPostionAndLookTowards(camerapositionObjectposition) {

var message = { "name": "setcamerapostionandlooktowards", "args": camerapositionObjectposition };

send(message);

}

function getCurrentCacheInformation(ThreeDObjectid) {

sendWithOPandTAGID("getCurrentCacheInformation", ThreeDObjectid);

}

// message is a JSON object

function send(message) {

var jsonMsg=JSON.stringify(message);

CefSharp.PostMessage(jsonMsg);

}

function Recieve(message)

{

var msg=JSON.stringify(message);

var resultFromParent = document.getElementById('parentMessage');

resultFromParent.innerHTML=msg;

}

</script>

</head>

<body>

Message received: <br />

// Listen to messages from parent window

var resultFromParent = document.getElementById('parentMessage');

window.chrome.webview.addEventListener('message', function (e) {

resultFromParent.innerHTML = e.data;

});

</script>

<p>Testing page for Engage Web Dash.</p>

<button style="width: 200px; height: 30px; font-size:large" onclick="getCurrentCacheInformation()">getCacheInformation</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="navigateTo('TAG0016')">NavigateTo 1</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="setColor(['LightBlue', 'TAG0030', 'TAG0099', 'TAG0018'])">Multi Color Blue 1</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="setColor(['Yellow', 'TAG0030', 'TAG0099', 'TAG0018'])">Multi Color Yellow 2</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="resetColors()">ResetColor</button><br />

<button style="width: 200px; height: 30px; font-size:large" onclick="setXRayMode(true); setColor(['Red', 'TAG0030', 'TAG001', 'TAG0018']);">Xray and color</button>

<p />

<p>Testing page for Measures</p>

<button style="width: 200px; height: 30px; font-size:large" onclick="InitiateAreaPoints('sampleMeasure')">InitiateAreaPoints</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="SelectAreaEntry('0fdc836d-0a40-4b32-bf33-5a97149bf13f')">SelectAreaEntry</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="SaveAreaEntry('{"AreaId":"0fdc836d-0a40-4b32-bf33-5a97149bf13f","Operation":"New","Point1Info":{"Marker":"Marker1","Point":{"X":28088.551073431998,"Y":-4803.5679256533476,"Z":2706.7739119540092},"PickSegID":[18386,331299],"Pid":69881,"PickPointTagName":"AREA-100-STRUC1-PLATFORM1"},"Point2Info":{"Marker":"Marker2","Point":{"X":34504.972379862309,"Y":5528.1248344894339,"Z":29.553026309491543},"PickSegID":[18386,329842],"Pid":69449,"PickPointTagName":"AREA-100-BASEPLATE1"}}')">SaveAreaEntry</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="DeleteAreaEntry('0fdc836d-0a40-4b32-bf33-5a97149bf13f')">DeleteAreaEntry</button>

<p>Testing page for 3D Annotations</p>

<button style="width: 200px; height: 30px; font-size:large" onclick="CreateObject(['{"ObjectId":"symbol1","ObjectShape":0,"Position":{"X":-311000.35,"Y":298628.81,"Z":109961.97},"Color":"Blue","ScaleFactor":{"X":0.5,"Y":0.5,"Z":0.5},"Radius":900}' , '{"ObjectId":"symbol2","ObjectShape":1,"Position":{"X":-311000.35,"Y":298000.81,"Z":109961.97},"Color":"Blue","ScaleFactor":{"X":0.5,"Y":0.5,"Z":0.5}}'])">CreateObject</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="HighlightObject('symbol1')">HighlightObject</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="SetColorToObject('{"ObjectId":"symbol1&quot,"Color":"Red"}')">SetColorToObject</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="ZoomToObject('symbol1')">ZoomToObject</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="SetPositionOfObject('{"ObjectId":"symbol1","Position":{"X":-311000.35,"Y":298628.81,"Z":109000.97}}')">SetPositionOfObject</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="GetPositionOfObject('symbol1')">GetPositionOfObject</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="ShowObject('symbol1')">ShowObject</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="HideObject('symbol1')">HideObject</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="DeleteObject('symbol1')">DeleteObject</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="SetCameraToPosition('{"X":-311000.35,"Y":298628.81,"Z":109961.97}')">SetCameraToPosition</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="SetCameraToPositionByDistance('{"Position":{"X":-311000.35,"Y":298628.81,"Z":109961.97},"Distance":10000.0}')">SetCameraToPositionByDistance</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="LookTowardsPosition('{"X":-311000.35,"Y":298628.81,"Z":109961.97}')">LookTowardsPosition</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="SetCameraDirection('{"X":-468.33,"Y":9291.70,"Z":-2049.195}')">SetCameraDirection</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="GetCameraPosition()">GetCameraPosition</button>

<button style="width: 200px; height: 30px; font-size:large" onclick="GetCameraDirection()">GetCameraDirection</button>

</body>

</html>

AVEVA™ XR Engage Template