웹 엔진에서 실행 중인 웹 사이트에서 기능을 트리거하기 위해 Javascript CustomEvent를 사용할 수 있습니다.
CustomEvent()에 대한 설명은 여기에서 확인할 수 있습니다.
CustomEvents는 vrdWebEngine의 sendEvent() 메서드를 사용하여 전송할 수 있습니다. 두 개의 문자열 매개변수를 사용합니다. 첫 번째 매개변수는 CustomEvent의 식별자이고, 두 번째 매개변수는 이벤트 관련 데이터를 포함하거나 빈 문자열일 수 있습니다.
웹 페이지에 삽입되는 Javascript 코드는 다음과 같습니다.
1 var e = new CustomEvent( event
2 {
3 detail: data
4 });
5
6 document.dispatchEvent(e);
이벤트는 항상 DOM 문서를 통해 전송됩니다. 웹 엔진에서 실행되는 Javascript 코드에 해당 이벤트를 수신하고 다른 기능을 트리거하는 이벤트 처리기를 설치할 수 있습니다.
다음은 CustomEvent를 사용하여 웹 페이지의 배경 색상을 변경하는 방법을 보여 주는 간단한 예입니다.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>JavaScript Custom Event</title>
7 </head>
8 <body style="background-color:white;">
9 <div class="note">JavaScript Custom Event</div>
10 <script>
11 document.addEventListener("testEvent", function(event) {
12 document.body.style.background = event.detail.color;
13 });
14 </script>
15 </body>
16 </html>
이렇게 하면 흰색 배경을 가진 페이지가 만들어지고 "testEvent"라는 사용자 지정 이벤트에 대한 이벤트 리스너가 설치됩니다. 이를 사용하려면 VRED에서 새 전면 플레이트를 만들고 "EventFrontPlate"로 이름을 지정합니다. 컨텐츠 유형을 "web"으로 설정하고 위의 html 코드를 복사하여 붙여넣습니다.
이제 기본 웹 엔진의 인스턴스가 필요합니다.
we = vrWebEngineService.getWebEngine("EventFrontPlate")
이제 배경 색상을 빨간색으로 변경하는 이벤트를 만듭니다.
we.sendEvent("testEvent", "{color: 'red'}")
초록색으로 설정할 수도 있습니다.
we.sendEvent("testEvent", "{color: 'green'}")
사용자 지정 데이터를 이벤트에 전달하지 않으려면 두 번째 매개변수에 빈 문자열을 사용하면 됩니다. 여러 CustomEvent가 사용되는 좀 더 복잡한 예제는 웹 엔진 메뉴 데모에서 확인할 수 있습니다.
이 예에서는 사용자 지정 데이터 매개변수에 액세스하고 이를 사용하여 VRED에서 Python 함수를 호출하는 방법을 보여 줍니다. 위의 예와 같이 "EventFrontPlate"라는 전면 플레이트를 작성하고 아래의 html 코드를 사용합니다.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>JavaScript Custom Event</title>
7 </head>
8 <body style="background-color:white;">
9 <div class="note">JavaScript Custom Event</div>
10 <script>
11 document.addEventListener("testEvent", function(event) {
12 vred.executePython("printFromJavascript('" + event.detail.custom + "')");
13 });
14 </script>
15 </body>
16 </html>
VRED에서 다음 Python 함수를 실행해야 합니다.
def printFromJavascript(data):
print(data)
그런 다음 VRED에서 이 이벤트를 호출할 수 있습니다.
we = vrWebEngineService.getWebEngine("EventFrontPlate")
we.sendEvent("testEvent", "{custom: 'test 123'}")
VRED에서 생성하는 사용자 지정 이벤트에 대한 Javascript 코드는 다음과 같습니다.
1 <script>
2 var e = new CustomEvent("testEvent"
3 {
4 detail: {custom: 'test 123' }
5 });
6 </script>
VRED 2021.3에서는 위의 예제와 같이 복잡한 이벤트를 허용하도록 데이터 매개변수가 변경되었습니다. sendToWebEngine()의 서명은 다음과 같습니다.
sendToWebEngine(name, event, data)
VRED 2021.3 이전에는 웹 페이지에 Javascript 코드를 삽입할 때 '데이터' 매개변수를 내부적으로 따옴표로 묶었습니다. 따라서 다음과 같으면
sendToWebEngine("EventFrontPlate", "testEvent", "test 123")
Javascript 코드는 다음과 같습니다.
1 <script>
2 var e = new CustomEvent("testEvent"
3 {
4 detail: "test 123" }
5 });
6 </script>
VRED 2021.3 이상에서는 “test 123”이 자동으로 따옴표로 묶이지 않습니다. 이전 방식을 원하는 경우 다음과 같이 작성해야 합니다.
sendToWebEngine("EventFrontPlate", "testEvent", "'test 123'")
복잡한 이벤트가 가능하려면 이와 같은 변경이 필요합니다. 그렇지 않으면 다음과 같은 호출은
sendToWebEngine("EventFrontPlate", "testEvent", "{custom: 'test 123'}")
다음과 같이 생성됩니다.
1 <script>
2 var e = new CustomEvent("testEvent"
3 {
4 detail: "{custom: 'test 123' }"
5 });
6 </script>
사용자가 따옴표를 제거할 수 없기 때문에 사전 주위의 따옴표가 유효하지 않아 이벤트가 작동하지 않았습니다.
VRED에서는 QtWebengine을 사용하므로 포함된 브라우저를 디버깅하는 데 Qt 메커니즘을 사용할 수 있습니다. 환경 변수 QTWEBENGINE_REMOTE_DEBUGGING을 설정해야 합니다. 이 값은 포트 번호여야 합니다. 예: set QTWEBENGINE_REMOTE_DEBUGGING=9876
VRED가 실행 중이고 웹 엔진 인스턴스가 활성 상태면 Chrome(또는 다른 Chromium 기반 브라우저, 예: Opera 또는 Vivaldi)을 시작하고 내부 원격 디버거를 사용하여 VRED의 웹 엔진에 연결할 수 있습니다. 이렇게 하려면 Chrome에서 URL http://localhost:9876으로 이동합니다.