Web エンジンで実行されている Web サイト内の機能をトリガするには、JavaScript CustomEvents を使用します。
CustomEvent() の説明については、こちらを参照してください。
CustomEvents は、vrdWebEngines の sendEvent() メソッドを使用して送信できます。このメソッドは、2 つの文字列パラメータを取ります。 最初のパラメータは CustomEvent の識別子です。2 番目のパラメータには、イベント固有のデータを含めるか、空の文字列を指定することができます。
Web ページに挿入されている JavaScript コードは次のようになります。
1 var e = new CustomEvent( event
2 {
3 detail: data
4 });
5
6 document.dispatchEvent(e);
イベントは常に DOM ドキュメントを通して送信されます。Web エンジンで実行されている Javascript コードに、これらのイベントをリッスンし、他の機能をトリガするイベント ハンドラを導入することができます。
次に、CustomEvent を使用して Web ページの背景色を変更する方法を示す小規模な例を示します。
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 コードをコピーして貼り付けます。
ここで、基盤となる Web エンジンのインスタンスが必要になります。
we = vrWebEngineService.getWebEngine("EventFrontPlate")
次に、背景色を赤に変更するイベントを作成します。
we.sendEvent("testEvent", "{color: 'red'}")
背景色を緑に設定することもできます。
we.sendEvent("testEvent", "{color: 'green'}")
イベントにカスタム データを渡さない場合は、2 番目のパラメータに空の文字列を使用します。 複数の CustomEvents が使用される、より複雑な例については、「Web エンジン メニューのデモ」を参照してください。
この例では、カスタム データ パラメータにアクセスし、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 コードを Web ページに挿入する際に、「データ」パラメータが内部で引用符で囲まれていました。したがって、次のように呼び出した場合、
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 を実行しているときに Web エンジンのインスタンスがアクティブになっている場合は、Chrome (または Opera や Vivaldi などの他のクロムベースのブラウザ)を起動し、その内部リモート デバッガを使用して VRED の Web エンジンに接続できます。これを行うには、Chrome の URL (http://localhost:9876) に移動します。