|
3 | 3 | <head> |
4 | 4 | <meta charset="utf-8"> |
5 | 5 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
6 | | - <title>Unity WebGL Player | OpenCVForUnityExample2.5.9</title> |
| 6 | + <title>Unity Web Player | OpenCVForUnityExample2.5.9</title> |
7 | 7 | <link rel="shortcut icon" href="TemplateData/favicon.ico"> |
8 | 8 | <link rel="stylesheet" href="TemplateData/style.css"> |
9 | 9 | </head> |
10 | 10 | <body> |
11 | 11 | <div id="unity-container" class="unity-desktop"> |
12 | | - <canvas id="unity-canvas" width=960 height=600></canvas> |
| 12 | + <canvas id="unity-canvas" width=960 height=600 tabindex="-1"></canvas> |
13 | 13 | <div id="unity-loading-bar"> |
14 | 14 | <div id="unity-logo"></div> |
15 | 15 | <div id="unity-progress-bar-empty"> |
|
18 | 18 | </div> |
19 | 19 | <div id="unity-warning"> </div> |
20 | 20 | <div id="unity-footer"> |
21 | | - <div id="unity-webgl-logo"></div> |
| 21 | + <div id="unity-logo-title-footer"></div> |
22 | 22 | <div id="unity-fullscreen-button"></div> |
23 | 23 | <div id="unity-build-title">OpenCVForUnityExample2.5.9</div> |
24 | 24 | </div> |
25 | 25 | </div> |
26 | 26 | <script> |
27 | | - var container = document.querySelector("#unity-container"); |
28 | 27 | var canvas = document.querySelector("#unity-canvas"); |
29 | | - var loadingBar = document.querySelector("#unity-loading-bar"); |
30 | | - var progressBarFull = document.querySelector("#unity-progress-bar-full"); |
31 | | - var fullscreenButton = document.querySelector("#unity-fullscreen-button"); |
32 | | - var warningBanner = document.querySelector("#unity-warning"); |
33 | 28 |
|
34 | 29 | // Shows a temporary message banner/ribbon for a few seconds, or |
35 | 30 | // a permanent error message on top of the canvas if type=='error'. |
|
38 | 33 | // way that non-critical warnings and error messages are presented to the |
39 | 34 | // user. |
40 | 35 | function unityShowBanner(msg, type) { |
| 36 | + var warningBanner = document.querySelector("#unity-warning"); |
41 | 37 | function updateBannerVisibility() { |
42 | 38 | warningBanner.style.display = warningBanner.children.length ? 'block' : 'none'; |
43 | 39 | } |
|
58 | 54 | var buildUrl = "Build"; |
59 | 55 | var loaderUrl = buildUrl + "/opencvforunityexample.loader.js"; |
60 | 56 | var config = { |
| 57 | + arguments: [], |
61 | 58 | dataUrl: buildUrl + "/opencvforunityexample.data.unityweb", |
62 | 59 | frameworkUrl: buildUrl + "/opencvforunityexample.framework.js.unityweb", |
63 | 60 | codeUrl: buildUrl + "/opencvforunityexample.wasm.unityweb", |
|
82 | 79 | meta.name = 'viewport'; |
83 | 80 | meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'; |
84 | 81 | document.getElementsByTagName('head')[0].appendChild(meta); |
85 | | - container.className = "unity-mobile"; |
| 82 | + document.querySelector("#unity-container").className = "unity-mobile"; |
86 | 83 | canvas.className = "unity-mobile"; |
87 | 84 |
|
88 | 85 | // To lower canvas resolution on mobile devices to gain some |
89 | 86 | // performance, uncomment the following line: |
90 | 87 | // config.devicePixelRatio = 1; |
91 | 88 |
|
92 | | - unityShowBanner('WebGL builds are not supported on mobile devices.'); |
| 89 | + |
93 | 90 | } else { |
94 | 91 | // Desktop style: Render the game canvas in a window that can be maximized to fullscreen: |
95 | | - |
96 | 92 | canvas.style.width = "960px"; |
97 | 93 | canvas.style.height = "600px"; |
98 | 94 | } |
99 | 95 |
|
100 | | - loadingBar.style.display = "block"; |
| 96 | + document.querySelector("#unity-loading-bar").style.display = "block"; |
101 | 97 |
|
102 | 98 | var script = document.createElement("script"); |
103 | 99 | script.src = loaderUrl; |
104 | 100 | script.onload = () => { |
105 | 101 | createUnityInstance(canvas, config, (progress) => { |
106 | | - progressBarFull.style.width = 100 * progress + "%"; |
107 | | - }).then((unityInstance) => { |
108 | | - loadingBar.style.display = "none"; |
109 | | - fullscreenButton.onclick = () => { |
110 | | - unityInstance.SetFullscreen(1); |
111 | | - }; |
112 | | - }).catch((message) => { |
113 | | - alert(message); |
114 | | - }); |
115 | | - }; |
| 102 | + document.querySelector("#unity-progress-bar-full").style.width = 100 * progress + "%"; |
| 103 | + }).then((unityInstance) => { |
| 104 | + document.querySelector("#unity-loading-bar").style.display = "none"; |
| 105 | + document.querySelector("#unity-fullscreen-button").onclick = () => { |
| 106 | + unityInstance.SetFullscreen(1); |
| 107 | + }; |
| 108 | + |
| 109 | + }).catch((message) => { |
| 110 | + alert(message); |
| 111 | + }); |
| 112 | + }; |
| 113 | + |
116 | 114 | document.body.appendChild(script); |
| 115 | + |
117 | 116 | </script> |
118 | 117 | </body> |
119 | 118 | </html> |
0 commit comments