Interact with webengines (calculator demo)

This example shows a calculator implemented in Javascript and running in a webengine. The calculators buttons are controllable with the hands.

Python code:

VR-hands-webengine.vpb
1calculatorNode = findNode("Calculator")
2setNodeInteractableInVR(calculatorNode, True)

Webengine script:

VR-hands-webengine.vpb
  1<!DOCTYPE html>
  2<html>
  3<head>
  4<meta charset="UTF-8">
  5<meta name="author" content="Pascal Seifert">
  6<style>
  7    *{
  8    box-sizing:  border-box;
  9    font-family: sans-serif;
 10    user-select:  none;
 11    -webkit-user-select: none;
 12}
 13
 14  body{
 15  background-color: #000;
 16  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 17  font-size: 36px;
 18}
 19
 20main{
 21  position: absolute;
 22  top: 0;
 23  left: 0;
 24  width: 400px;
 25  height: 570px;
 26  display: flex;
 27  flex-direction: column;
 28}
 29
 30#display{
 31  border: none;
 32  width: 100%;
 33  background-color: #000;
 34  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 35  font-size: 72px;
 36  text-align: right;
 37  margin-right: 10px;
 38  color:  white;
 39}
 40
 41main > div{
 42  flex: 5;
 43  display: flex;
 44  flex-direction: row;
 45}
 46
 47main > div > div{
 48  flex: 4;
 49  display: flex;
 50  color: Black;
 51  text-align: center;
 52  border: 1px solid #000;
 53  justify-content: center;
 54  flex-flow: column wrap;
 55  background-color: #89a4c2;
 56}
 57
 58main > div > div:hover{
 59  background-color: #7094bb;
 60}
 61
 62main > div > div:active{
 63  transform:  scale(0.95);
 64}
 65
 66.sign{
 67  background-color: #b9d39e;
 68  color: White;
 69}
 70
 71.sign:hover{
 72  background-color: #a7cd8c;
 73  color: White;
 74}
 75
 76.operator{
 77  background-color: #ff8000;
 78  color: White;
 79}
 80
 81.operator:hover{
 82  background-color: #e0750a;
 83}
 84</style>
 85
 86<title>HTML Calculator</title>
 87</head>
 88<body>
 89  <main>
 90    <div class="display"><input type="text" id="display" readonly>
 91    </div>
 92    <div>
 93      <div class="sign" value="AC" onmousedown='c("")'>AC</div>
 94      <div class="sign" value="(" onmousedown='math("(")'>(</div>
 95      <div class="sign" value=")" onmousedown='math(")")'>)</div>
 96      <div class="operator" onmousedown='math("/")'>&divide;</div>
 97    </div>
 98    <div>
 99      <div value="7" onmousedown='math("7")'>7</div>
100      <div value="8" onmousedown='math("8")'>8</div>
101      <div value="9" onmousedown='math("9")'>9</div>
102      <div class="operator" onmousedown='math("*")'>&times;</div>
103    </div>
104    <div>
105      <div value="4" onmousedown='math("4")'>4</div>
106      <div value="5" onmousedown='math("5")'>5</div>
107      <div value="6" onmousedown='math("6")'>6</div>
108      <div class="operator" onmousedown='math("-")'>-</div>
109    </div>
110    <div>
111      <div value="1" onmousedown='math("1")'>1</div>
112      <div value="2" onmousedown='math("2")'>2</div>
113      <div value="3" onmousedown='math("3")'>3</div>
114      <div class="operator" onmousedown='math("+")'>+</div>
115    </div>
116    <div>
117      <div value="" onmousemove='math("")'></div>
118      <div value="0" onmousedown='math("0")'>0</div>
119      <div value="," onmousedown='math(".")'>,</div>
120      <div class="operator" onmousedown='e()'>=</div>
121    </div>
122  </main>
123
124<script>function c(val){
125  document.getElementById("display").value=val;
126}
127
128function math(val){
129  document.getElementById("display").value+=val;
130}
131
132function e(){
133  try{
134   c(eval(document.getElementById("display").value));
135  }
136  catch(e){
137   c('Error');
138  }
139}
140</script>
141</body>