index.html 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <!DOCTYPE html>
  2. <!-- Copyright 2012 United States Government, as represented by the Secretary of Defense, Under -->
  3. <!-- Secretary of Defense (Personnel & Readiness). -->
  4. <!-- -->
  5. <!-- Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file -->
  6. <!-- except in compliance with the License. You may obtain a copy of the License at -->
  7. <!-- -->
  8. <!-- http://www.apache.org/licenses/LICENSE-2.0 -->
  9. <!-- -->
  10. <!-- Unless required by applicable law or agreed to in writing, software distributed under the -->
  11. <!-- License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, -->
  12. <!-- either express or implied. See the License for the specific language governing permissions -->
  13. <!-- and limitations under the License. -->
  14. <html>
  15. <!-- The Virtual World Framework client is a collection of scripts and a world specification -->
  16. <!-- passed to an initialization call. In this sample, the world specification is provided -->
  17. <!-- inline for clarity, but it is normally provided by the reflector or may be specified as a -->
  18. <!-- URI and loaded from a network-visible location. -->
  19. <head>
  20. <title>Virtual World Framework</title>
  21. <link rel="icon" type="image/x-icon" href="favicon.ico" />
  22. <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  23. <script type="text/javascript" src="compatibilitycheck.js"></script>
  24. <script type="text/javascript" src="socket.io/socket.io.js"></script>
  25. <!-- <script type="text/javascript" src="socket.io-sessionid-patch.js"></script> -->
  26. <script src="vwf/view/webrtc/dist/adapter-latest.js"></script>
  27. <script type="text/javascript" src="vwf/view/lib/cell.js"></script>
  28. <script type="text/javascript" src="vwf/view/lib/he.js"></script>
  29. <script type="text/javascript" src="vwf/view/lib/draggabilly.pkgd.js"></script>
  30. <script type="text/javascript" src="js/screenfull.min.js"></script>
  31. <link rel="stylesheet" href="vwf/view/lib/mdc/dist/material-components-web.css">
  32. <script src="vwf/view/lib/mdc/dist/material-components-web.js"></script>
  33. <script type="text/javascript" src="require.js"></script>
  34. <script type="text/javascript" src="async.js"></script>
  35. <script type="text/javascript" src="crypto.js"></script>
  36. <script type="text/javascript" src="md5.js"></script>
  37. <script type="text/javascript" src="alea.js"></script>
  38. <script type="text/javascript" src="mash.js"></script>
  39. <script type="text/javascript" src="Class.create.js"></script>
  40. <script type="text/javascript" src="rAF.js"></script>
  41. <script type="text/javascript" src="performance.now-polyfill.js"></script>
  42. <!-- This is the main client library. vwf.js creates a framework manager and attaches it to -->
  43. <!-- the global window object as window.vwf. All access to the framework is through that -->
  44. <!-- reference, and no other objects are globally visible. -->
  45. <script type="text/javascript" src="vwf.js"></script>
  46. <!-- The core framework manages the simulation and synchronizes it across worlds shared by -->
  47. <!-- multiple users. But, the manner in which the simulation is expressed is controlled by -->
  48. <!-- extension modules. There are two flavors. Models directly control the simulation but -->
  49. <!-- cannot accept external input. The model configuration is identical for all participants -->
  50. <!-- in a shared world. Views may accept external input -such as pointer and key events or -->
  51. <!-- directives from a connection to an outside engine that is not visible to all users- but -->
  52. <!-- may only affect the simulation indirectly through the synchronization server. -->
  53. <script type="text/javascript">
  54. // Users can specify which libraries the application will load by adding parameters to the URL.
  55. // Model libraries are specified as a query parameter and view libraries as a hash fragment.
  56. var queryString = window.location.search.substring(1);
  57. var hashString = window.location.hash.substring(2);
  58. var userLibraries = { model: {}, view: {} };
  59. var googleEarth = false;
  60. var match;
  61. var application;
  62. var regex = /([^&=]+)=?([^&]*)/g;
  63. var requireConfig = {
  64. paths: {
  65. jquery: "jquery-1.10.2.min",
  66. "jquery-ui": "jquery-ui-1.10.3.custom.min"
  67. },
  68. shim: {
  69. "jquery-ui": {
  70. deps: ["jquery"],
  71. exports: "$"
  72. },
  73. "jquery-encoder-0.1.0": ["jquery"]
  74. }
  75. };
  76. require(requireConfig, ["jquery", "jquery-encoder-0.1.0"], function ($) {
  77. while (match = regex.exec(queryString)) {
  78. var key = $.encoder.canonicalize(match[1]);
  79. var parameters = $.encoder.canonicalize(match[2]);
  80. if (key == "application") {
  81. // Get the application specification if one is provided in the query string.
  82. application = parameters;
  83. }
  84. else {
  85. try {
  86. parameters = JSON.parse(parameters);
  87. }
  88. catch (e) {
  89. }
  90. userLibraries["model"]["vwf/model/" + key] = (parameters && parameters != "") ? parameters : undefined;
  91. }
  92. }
  93. while (match = regex.exec(hashString)) {
  94. var key = $.encoder.canonicalize(match[1]);
  95. var parameters = $.encoder.canonicalize(match[2]);
  96. try {
  97. parameters = JSON.parse(parameters);
  98. }
  99. catch (e) {
  100. }
  101. userLibraries["view"]["vwf/view/" + key] = (parameters && parameters != "") ? parameters : undefined;
  102. if (key == "google-earth") {
  103. googleEarth = true;
  104. }
  105. }
  106. googleEarth && document.write("<scr" + "ipt type='text/javascript' src='http://www.google.com/jsapi?hl=en&amp;key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw'></scr" + "ipt>");
  107. vwf.loadConfiguration(application, userLibraries, compatibilityCheck);
  108. });
  109. </script>
  110. <!-- This is the common view implementation and an example view that summarizes the -->
  111. <!-- simulation state in HTML on the main page. -->
  112. <link rel="stylesheet" type="text/css" href="index.css" />
  113. <!-- Global Site Tag (gtag.js) - Google Analytics -->
  114. <script async src="https://www.googletagmanager.com/gtag/js?id=UA-11815598-9"></script>
  115. <script>
  116. window.dataLayer = window.dataLayer || [];
  117. function gtag() { dataLayer.push(arguments) };
  118. gtag('js', new Date());
  119. gtag('config', 'UA-11815598-9');
  120. </script>
  121. </head>
  122. <body class="mdc-typography">
  123. <!-- Generic clients may have nearly empty pages, but pages for custom clients may be laid -->
  124. <!-- out in any manner desired. Any view and models that render to the page should be -->
  125. <!-- instructed where to attach their content. -->
  126. <!-- The main content renders to "#vwf-root", the item with the id "vwf-root". -->
  127. <!-- The loading spinner -->
  128. <div id="vwf-loading-spinner" class="pace pace-active">
  129. <div class="pace-activity"></div>
  130. </div>
  131. <div id="incompatibleBrowser">
  132. <div>
  133. <span style="color:#3090C7;">
  134. <br/>
  135. <br/>Your browser does not support Virtual World Framework. Please review our
  136. <a href='https://virtual.wf/requirements.html'>requirements</a> for supported browser versions.</span>
  137. </div>
  138. </div>
  139. <div id="vwf-root"></div>
  140. <div id="ui-controls" class="guiwindow">
  141. <i id="hideui" class="mdc-icon-toggle material-icons" role="button" aria-pressed="true" aria-label="Hide Toollbar" tabindex="0"
  142. data-toggle-on='{"label": "Hide", "content": "grid_on"}' data-toggle-off='{"label": "Show", "content": "grid_off"}'>
  143. grid_on
  144. </i>
  145. <i id="fullscreenui" class="mdc-icon-toggle material-icons" role="button" aria-pressed="true" aria-label="Hide Toollbar" tabindex="0"
  146. data-toggle-on='{"label": "Hide", "content": "fullscreen"}' data-toggle-off='{"label": "Show", "content": "fullscreen_exit"}'>
  147. fullscreen
  148. </i>
  149. </div>
  150. <script>
  151. mdc.autoInit();
  152. window.addEventListener("load", function (event) {
  153. console.log("All resources finished loading!");
  154. });
  155. const iconEl = document.querySelector('#hideui');
  156. iconEl.addEventListener('MDCIconToggle:change', (e) => {
  157. let ui = document.querySelector('.mdc-toolbar');
  158. if (ui) {
  159. let chkAttr = e.detail.isOn;
  160. if (chkAttr) {
  161. ui.style.visibility = 'visible'
  162. } else {
  163. ui.style.visibility = 'hidden'
  164. }
  165. }
  166. });
  167. const fullScreenToggle = document.querySelector('#fullscreenui');
  168. fullScreenToggle.addEventListener('MDCIconToggle:change', (e) => {
  169. if (screenfull.enabled) {
  170. screenfull.toggle();
  171. } else {
  172. // Ignore or do something else
  173. }
  174. });
  175. </script>
  176. </body>
  177. </html>