OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <!-- | |
4 Copyright (c) 2011 The Native Client Authors. All rights reserved. | |
5 Use of this source code is governed by a BSD-style license that can be | |
6 found in the LICENSE file. | |
7 --> | |
8 <head> | |
9 <title>Flocking Geese Speed Comparison</title> | |
10 <meta HTTP-EQUIV="Pragma" CONTENT="no-cache"> | |
11 <meta HTTP-EQUIV="Expires" CONTENT="-1"> | |
12 <link href="css/flocking_geese.css" rel="stylesheet" type="text/css"> | |
13 <link href="css/form_input.css" rel="stylesheet" type="text/css"> | |
14 <link href="css/info_panel.css" rel="stylesheet" type="text/css"> | |
15 <link href="css/load_progress.css" rel="stylesheet" type="text/css"> | |
16 <link href="css/slider.css" rel="stylesheet" type="text/css"> | |
17 <link href="css/speedometer.css" rel="stylesheet" type="text/css"> | |
18 | |
19 <!-- <script src="closure-library/closure/goog/base.js"></script> --> | |
20 <script type="text/javascript" src="js/closure.js"></script> | |
21 <script type="text/javascript" src="js/check_browser.js"></script> | |
22 <script type="text/javascript" src="js/flock.js"></script> | |
23 <script type="text/javascript" src="js/flocking_geese.js"></script> | |
24 <script type="text/javascript" src="js/frame_counter.js"></script> | |
25 <script type="text/javascript" src="js/goose.js"></script> | |
26 <script type="text/javascript" src="js/load_progress.js"></script> | |
27 <script type="text/javascript" src="js/slider.js"></script> | |
28 <script type="text/javascript" src="js/slider_event.js"></script> | |
29 <script type="text/javascript" src="js/speedometer.js"></script> | |
30 <script type="text/javascript"> | |
31 goog.require('Flock'); | |
32 goog.require('FlockingGeese'); | |
33 goog.require('FrameCounter'); | |
34 goog.require('Goose'); | |
35 goog.require('LoadProgress'); | |
36 goog.require('Slider'); | |
37 goog.require('SliderEvent'); | |
38 goog.require('Speedometer'); | |
39 goog.require('Speedometer.Attributes'); | |
40 </script> | |
41 | |
42 <script type="text/javascript"> | |
43 // Check for Native Client support in the browser. | |
44 var isValidBrowser = false; | |
45 var browserSupportStatus = 0; | |
46 var checker = new browser_version.BrowserChecker( | |
47 14, // Minumum Chrome version. | |
48 navigator["appVersion"], | |
49 navigator["plugins"]); | |
50 checker.checkBrowser(); | |
51 browserSupportStatus = checker.getBrowserSupportStatus(); | |
52 isValidBrowser = checker.getIsValidBrowser(); | |
53 | |
54 // Resize the simulation canvas to fill its parent element. | |
55 // @param {Event} e The resize event. | |
56 window.onresize = function(e) { | |
57 var geeseView = document.getElementById('flocking_geese'); | |
58 var viewSize = goog.style.getSize(geeseView); | |
59 var gooseCanvas = document.getElementById('flocking_geese_canvas'); | |
60 gooseCanvas.width = viewSize.width; | |
61 gooseCanvas.height = viewSize.height; | |
62 } | |
63 </script> | |
64 | |
65 </head> | |
66 <body> | |
67 <div id="autosize_background" class="autosize-view"> | |
68 <!-- The main simulation area. This element contains either a <canvas> that | |
69 get rendered by the JavaScript implementation, or a NaCl module that runs | |
70 the C++ implementation. --> | |
71 <div id="flocking_geese"> | |
72 <!-- The JavaScript version. --> | |
73 <script type="text/javascript"> | |
74 var geeseView = document.getElementById('flocking_geese'); | |
75 var viewSize = goog.style.getSize(geeseView); | |
76 geeseView.innerHTML = | |
77 // The JavaScript <CANVAS>-based version. | |
78 '<canvas id="flocking_geese_canvas"' + | |
79 ' width=' + viewSize.width + | |
80 ' height=' + viewSize.height + | |
81 '></canvas>' + | |
82 // The C++ Native Client-based version. This element has the 'table' | |
83 // display style in order to center the load progress bar in it. | |
84 '<div id="nacl_flocking_geese"' + | |
85 ' class="autosize-view"' + | |
86 ' style="display: table; visibility: hidden;"></div>'; | |
87 </script> | |
88 </div> | |
89 <!-- The information panel. Contains these elements: | |
90 1. The speedometer, which is a <canvas> and an implementation in | |
91 speedometer.js | |
92 2. A form that has a toggle button to switch between the JavaScript and | |
93 C++ versions of the algorith, and a pulldown to set the number of | |
94 geese. | |
95 3. An info area for attributions and useful links. | |
96 --> | |
97 <div id="info_panel" | |
98 style="display: inline;"> | |
99 <h2 style="width: 100%;">Info Panel</h2> | |
100 <canvas id="speedometer_canvas" | |
101 class="horizontal-align-center" | |
102 width=250 height=225></canvas> | |
103 <div id="sim_mode_select" class="slider"> | |
104 <img id="sim_select_ruler" | |
105 src="images/sim_select_ruler.png" | |
106 class="slider-ruler" | |
107 width=116 height=24 /> | |
108 <img id="sim_select_thumb" | |
109 src="images/slider_thumb.png" | |
110 class="slider-thumb" | |
111 width=9 height=23 /> | |
112 </div> | |
113 <div id="flock_size_slider" class="slider"> | |
114 <img id="flock_size_slider_ruler" | |
115 src="images/flock_size_ruler.png" | |
116 class="slider-ruler" | |
117 width=156 height=28 /> | |
118 <img id="flock_size_slider_thumb" | |
119 src="images/slider_thumb.png" | |
120 class="slider-thumb" | |
121 width=9 height=23 /> | |
122 </div> | |
123 <!-- Show the speed difference. --> | |
124 <p style="position: absolute; top:368px;">Speed difference: | |
125 <span id="speed_difference" | |
126 style="font-style: italic">Computing…</span> | |
127 </p> | |
128 <p id="browser_status"></p> | |
129 <div style="position: absolute; bottom: 16px;"> | |
130 <p style="margin-bottom: 0px;"><a href="http://code.google.com/p/nativec
lient-sdk/source/browse/trunk/src/experimental/flocking_geese/" | |
131 target="about_flocking_geese">View the source</a></p> | |
132 <p style="margin-bottom: 0px;"><a href="about.html" | |
133 target="about_flocking_geese">Acknowledgments</a></p> | |
134 <p style="margin-bottom: 0px;"><a href="about.html" | |
135 target="about_flocking_geese">Notices</a></p> | |
136 </div> | |
137 </div> | |
138 <script type="text/javascript"> | |
139 if (!isValidBrowser) { | |
140 var naclRadioButton = document.getElementById('nacl_radio_button'); | |
141 naclRadioButton.setAttribute('disabled', 'disabled'); | |
142 var naclRadioLabel = document.getElementById('nacl_radio_label'); | |
143 naclRadioLabel.style.color = 'lightgray'; | |
144 } | |
145 var browserStatus = document.getElementById('browser_status'); | |
146 switch (browserSupportStatus) { | |
147 case browser_version.BrowserChecker.StatusValues.NACL_ENABLED: | |
148 break; | |
149 case browser_version.BrowserChecker.StatusValues.UNKNOWN_BROWSER: | |
150 browserStatus.innerHTML = | |
151 '<strong>Native Client disabled.</strong><br />Native Client ' + | |
152 'has been disabled because your browser does not support it. ' + | |
153 'To learn more about Native Client, please visit:<br/>' + | |
154 '<a href="http://code.google.com/chrome/nativeclient/">http://code.google.com/ch
rome/nativeclient/</a> '; | |
155 break; | |
156 case browser_version.BrowserChecker.StatusValues.CHROME_VERSION_TOO_OLD: | |
157 browserStatus.innerHTML = | |
158 '<strong>Native Client disabled.</strong><br />You are ' + | |
159 'running a version of Chrome that is too old to support Native ' + | |
160 'Client. Please use Chrome version 14 or later.<br />' + | |
161 '<a href="http://www.google.com/chrome">http://www.google.com/chrome</a>'; | |
162 break; | |
163 case browser_version.BrowserChecker.StatusValues.NACL_NOT_ENABLED: | |
164 browserStatus.innerHTML = | |
165 '<strong>Native Client disabled.</strong><br />Native Client is ' + | |
166 'is not enabled.<br>' + | |
167 'Please go to <b>chrome://plugins</b> and enable the Native ' + | |
168 'Client plugin.'; | |
169 break; | |
170 case browser_version.BrowserChecker.StatusValues.NOT_USING_SERVER: | |
171 browserStatus.innerHTML = | |
172 '<strong>Native Client disabled.</strong><br />' + | |
173 'file:// URL detected, please use a web server to host Native ' + | |
174 'Client applications.'; | |
175 default: | |
176 browserStatus.innerHTML = | |
177 '<strong>Native Client disabled.</strong><br />' + | |
178 'Unknown error: Unable to detect browser and/or Native Client ' + | |
179 'support.'; | |
180 break; | |
181 } | |
182 var application = new FlockingGeese('flocking_geese'); | |
183 application.run('nacl_flocking_geese'); | |
184 </script> | |
185 </div> | |
186 </body> | |
187 </html> | |
OLD | NEW |