| 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 |