Webengine menu demo

This demo works with the mouse as well as with the hands in VR.

Python code:

menu-webengine.vpb
1setNodeInteractableInVR(findNode("CurvedDisplay"), True)

First webengine (“WebEngine_Display”)

webengine/display.html
 1<!DOCTYPE html>
 2<html>
 3<head>
 4    <meta content="text/html; charset=UTF-8">
 5    <meta name="author" content="Pascal Seifert">
 6    <title>Display</title>
 7    <link rel="stylesheet" type="text/css" href="main.css"/>
 8    <script type="text/javascript" src="script.js"></script>
 9</head>
10<body>
11    <div id="displaycolor">My Display</div>
12</body>
13</html>

Second webengine (“WebEngine_Tools”)

webengine/menu.html
 1<!DOCTYPE html>
 2<html>
 3<head>
 4    <meta content="text/html; charset=UTF-8">
 5    <meta name="author" content="Pascal Seifert">
 6    <title>Materials</title>
 7    <link id="light-style" rel="stylesheet" type="text/css" href="light.css"/>
 8    <link id="dark-style" rel="stylesheet" type="text/css" href="main.css"/>
 9    <script type="text/javascript" src="script.js"></script>
10</head>
11<body>
12    <div class="menu">
13        <div class="toolbar">
14            <div class="header">Stylesheet</div>
15            <div class="switch">
16                <div id="checkbox-left" onclick="fn12()">
17                    <div id="circle-left"></div>
18                </div>
19                <div id="checkbox-right" onclick="fn11()">
20                    <div id="circle-right"></div>
21                </div>
22            </div>
23        </div>
24        <div class="toolbar">
25            <div class="header">Tools</div>
26            <div class="button" onclick="cl1()">
27                <svg class="icon1"/>Wire
28            </div>
29            <div class="button" onclick="cl2()">
30                <svg class="icon2"/>Clipping
31            </div> 
32            <div class="button" onclick="cl3()">
33                <svg class="icon3"/>Ruler
34            </div> 
35            <div class="button" onclick="cl4()">
36                <svg class="icon4"/>RayT.
37            </div>
38        </div>
39        <div class="toolbar">
40            <div class="header">Color</div>
41            <div class="button" onclick="cl5()">
42                <img class="png" src="assets/MatPink.png"/>Pink
43            </div>
44            <div class="button" onclick="cl6()">
45                <img class="png" src="assets/MatBlue.png"/>Blue
46            </div> 
47            <div class="button" onclick="cl7()">
48                <img class="png" src="assets/MatGreen.png"/>Green
49            </div> 
50            <div class="button" onclick="cl8()">
51                <img class="png" src="assets/MatYellow.png"/>Yellow
52            </div>
53        </div>
54        <div class="toolbar">
55            <div class="header">Screen</div>
56            <div class="button" onclick="cl9()">
57                <img class="png" src="assets/BlackScreen.png"/>Black
58            </div>
59            <div class="button" onclick="cl10()">
60                <img class="png" src="assets/WhiteScreen.png"/>White
61            </div> 
62        </div>
63    </div>
64</body>
65</html>

Javascript code

webengine/script.js
  1/* Receive python commands from VRED */
  2
  3/*
  4function setInnerHtml(id, html) {
  5  const e = document.getElementById(id);
  6  if (e) {
  7    e.innerHTML = html;
  8    return true;
  9  }
 10  return false;
 11}
 12*/
 13
 14
 15/* Tools Functions */
 16/* Wire Toggle */
 17
 18function cl1() {
 19    vred.executePython("setWireframe(SWITCH_TOGGLE)");
 20    // example how to call a python command with a return value.
 21    //vred.executePythonCommand("getFov()", function(value) {
 22    //    window.alert(value);
 23    //});
 24};
 25
 26/* Clipping Toggle */
 27
 28var cl2 = (function() {
 29    var first = true;
 30    return function() {
 31        first ? fn1() : fn2();
 32        first = !first;
 33    }
 34})();
 35
 36function fn1(){
 37  vred.executePython("enableClippingPlane(true)");
 38};
 39
 40function fn2(){
 41  vred.executePython("enableClippingPlane(false)");
 42};
 43
 44/* Ruler Toggle */
 45
 46var cl3 = (function() {
 47    var first = true;
 48    return function() {
 49        first ? fn3() : fn4();
 50        first = !first;
 51    }
 52})();
 53
 54function fn3(){
 55  vred.executePython("showRuler(true)");
 56};
 57
 58function fn4(){
 59  vred.executePython("showRuler(false)");
 60};
 61
 62/* Ray Toggle */
 63
 64var cl4 = (function() {
 65    var first = true;
 66    return function() {
 67        first ? fn5() : fn6();
 68        first = !first;
 69    }
 70})();
 71
 72function fn5(){
 73  vred.executePython("toggleRaytracing(true)");
 74};
 75
 76function fn6(){
 77  vred.executePython("toggleRaytracing(false)");
 78};
 79
 80
 81/* Materials Functions */
 82/* Switch Material Color */
 83
 84function cl5() {
 85  vred.executePython("value=setSwitchMaterialChoice('SwitchMaterial', 0)");
 86};
 87
 88function cl6() {
 89  vred.executePython("value=setSwitchMaterialChoice('SwitchMaterial', 1)");
 90};
 91
 92function cl7() {
 93  vred.executePython("value=setSwitchMaterialChoice('SwitchMaterial', 2)");
 94};
 95
 96function cl8() {
 97  vred.executePython("value=setSwitchMaterialChoice('SwitchMaterial', 3)");
 98};
 99
100
101/* DisplayUI Functions */
102/* Screen Color */
103
104function cl9(){
105        vred.executePython("vrWebEngineService.getWebEngine('WebEngine_Display').sendEvent('Color1', '')");
106};
107
108function cl10(){
109        vred.executePython("sendToWebEngine('WebEngine_Display', 'Color2', '')");
110};
111
112/* Display EventListener´s Function*/
113
114changecolor1 = function(event){
115    
116    var fieldNameElement = document.getElementById("displaycolor");
117            fieldNameElement.style.backgroundColor = '#000000';
118            fieldNameElement.textContent = "Black Screen";   
119};
120
121document.addEventListener("Color1", changecolor1);
122
123changecolor2 = function(event){
124    
125        var fieldNameElement = document.getElementById("displaycolor");
126            fieldNameElement.style.backgroundColor = '#FFFFFF';
127            fieldNameElement.textContent = "White Screen";
128};
129
130document.addEventListener("Color2", changecolor2);
131
132/*Switch*/
133
134changestyle1 = function(event){
135    
136            document.getElementById("dark-style").disabled = true;
137            document.getElementById("light-style").disabled = false;
138};
139
140document.addEventListener("Style1", changestyle1);
141
142function fn11(){
143    
144            document.getElementById("dark-style").disabled = true;
145            document.getElementById("light-style").disabled = false;
146            vred.executePython("vrWebEngineService.getWebEngine('WebEngine_Tools').sendEvent('Style1', '')");
147};
148
149changestyle2 = function(event){
150    
151            document.getElementById("dark-style").disabled = false;
152            document.getElementById("light-style").disabled = true;
153};
154
155document.addEventListener("Style2", changestyle2);
156
157function fn12(){
158    
159            document.getElementById("dark-style").disabled = false;
160            document.getElementById("light-style").disabled = true;
161            vred.executePython("vrWebEngineService.getWebEngine('WebEngine_Tools').sendEvent('Style2', '')");
162};