(Deprecated) Interact with webengines (calculator demo with haptic feedback)

Deprecated class vrOpenVRController. See vrDeviceService, vrdVRDevice, vrdDeviceInteraction instead. This example shows a calculator implemented in Javascript and running in a webengine. The calculators buttons are controllable with the hands. The buttons provide OpenVR compatible haptic feedback. This is an adavanced version of the demo found here.

Python code:

deprecated_VR_examples/VR-hands-webengine-buttonVibration-openvr.vpb
 1calculatorNode = findNode("Calculator")
 2
 3setNodeInteractableInVR(calculatorNode, True)
 4
 5lastCollidingHand = Hand_Undefined
 6
 7# Deprecated class vrOpenVRController. See vrDeviceService, vrdVRDevice, vrdDeviceInteraction instead.
 8controller0 = vrOpenVRController("Controller0")
 9controller0.setVisualizationMode(Visualization_Hand )
10controller1 = vrOpenVRController("Controller1")
11controller1.setVisualizationMode(Visualization_Hand )
12
13
14def vibrate(controller):
15    controller.triggerHapticPulse(0,3000)
16
17# This function is called through VRED WebInterface from the javascript
18# embedded in the Calculator webengine on "mouse down" event.
19def requestVibration():
20    global lastCollidingHand
21    if lastCollidingHand == Hand_Left:
22        if controller0.getHandRole() == Hand_Left:
23            vibrate(controller0)
24        elif controller1.getHandRole() == Hand_Left:
25            vibrate(controller1)
26    elif lastCollidingHand == Hand_Right:
27        if controller0.getHandRole() == Hand_Right:
28            vibrate(controller0)
29        elif controller1.getHandRole() == Hand_Right:
30            vibrate(controller1)
31
32    lastCollidingHand = Hand_Undefined
33
34
35def handTouchStarted(touchedNodeId, fingerId, controller):
36    global lastCollidingHand
37    if touchedNodeId == calculatorNode.getID():
38        lastCollidingHand = controller.getHandRole()
39        #print "handTouchStarted: {}".format(str(lastCollidingHand))
40
41
42controller0.connectSignal("handTouchStarted", handTouchStarted, controller0)
43controller1.connectSignal("handTouchStarted", handTouchStarted, controller1)

Webengine script:

VR-hands-webengine-buttonVibration-openvr.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>
125/* Helper functions */
126
127
128function vibrate() {
129  vred.executePython("requestVibration()");
130};
131
132
133function c(val){
134  vibrate();
135  document.getElementById("display").value=val;
136}
137
138function math(val){
139  vibrate();
140  document.getElementById("display").value+=val;
141}
142
143function e(){
144  vibrate();
145
146  try{
147   c(eval(document.getElementById("display").value));
148  }
149  catch(e){
150   c('Error');
151  }
152}
153</script>
154</body>