poolvr/poolvr_template.html at dev · jzitelli/poolvr · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="poolvr.css">

    <title>poolvr {{version}}</title>

{{ json_config }}

  </head>

  <body onload="POOLVR.onLoad()">

    <canvas id="webgl-canvas"></canvas>

    <div id="overlay">

      <h1>poolvr {{ version if version else '' }}</h1>{{version_content if version_content else ''}}

      <div style="display: inline">

        <button id="vrButton"><b>toggle VR</b></button>

        <button id="fsButton"><b>toggle fullscreen</b></button>

      </div>

      <hr>

      <div style="display: inline">
<!--
         <button id="vrButton">toggle VR</button>
        <button id="fsButton">toggle fullscreen</button>
        <br>
 -->
        <div class="panel" id="soundPanel">
            <h3>Sound:</h3>
            <label><input type="checkbox" id="sound"/>enabled</label>
            <label><input type="range" id="volume" min="0.0", max="1.0" step="any"/>vol.</label>
        </div>

        <div class="panel" id="vrPanel">
            <h3>VR:</h3>
            <span id="vrDisplayIndicator">VR display is not available</span>
            <br>
            <br>
            <span id="vrGamepadIndicator">VR gamepad is not available</span>
        </div>

        <div class="panel" id="graphicsPanel">
            <h3>Graphics:</h3>
            <label><input type="checkbox" id="useBasicMaterials"/>EGA mode (max performance)</label>
            <br>
            <label><input type="checkbox" id="useSpotLight"/>Spot light</label>
            <label><input type="checkbox" id="usePointLight"/>Point light</label>
            <br>
            <label><input type="checkbox" id="useShadowMap"/>Shadow maps</label>
        </div>

        <div class="panel" id="leapPanel">
            <h3>Leap Motion:</h3>
            <span id="leapIndicator">disconnected</span>
            <br>
            <label>Websocket address:<input id="leapAddress" type="text" maxlength="18"/></label>
        </div>

      </div>
{{ extra_overlay_content if extra_overlay_content else "" }}
    </div>

{% if config['DEBUG'] %}
    <script src="node_modules/three/build/three.js"></script>
{% else %}
    <script src="node_modules/three/build/three.min.js"></script>
{% endif %}
    <script src="node_modules/three/examples/js/effects/VREffect.js"></script>
    <script src="node_modules/three/examples/js/controls/VRControls.js"></script>
    <script src="node_modules/three/examples/js/objects/ShadowMesh.js"></script>
    <script src="node_modules/three/examples/js/loaders/OBJLoader.js"></script>

    <script src="node_modules/stats.js/build/stats.min.js"></script>

    <script src="node_modules/leapjs/leap-0.6.4.min.js"></script>

    <script src="node_modules/webvr-polyfill/build/webvr-polyfill.js"></script>

    <script src="node_modules/cannon/build/cannon.min.js"></script>

    <script src="node_modules/three.py/js/three.py.js"></script>
    <script src="node_modules/three.py/js/CANNONize.js"></script>

{% if config['DEBUG'] %}
    <script src="build/poolvr.js"></script>
{% else %}
    <script src="build/poolvr.min.js"></script>
{% endif %}

  </body>
</html>