native_client_sdk/src/gonacl_appengine/static/voronoi/index.html

   1 <!DOCTYPE html>
   2 <html>
   3   <!--
   4   Copyright (c) 2013 The Chromium 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     <meta charset="UTF-8">
  10
  11     <title>Voronoi</title>
  12
  13     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,700">
  14     <link href="/static/css/out/site.css" rel="stylesheet">
  15
  16     <script type="text/javascript" src="example.js"></script>
  17
  18   </head>
  19
  20   <body class="demo">
  21
  22     <header>
  23       <h1>Voronoi</h1>
  24
  25     </header>
  26
  27     <section>
  28       <div class="intro">
  29         <p>
  30           This demo renders the <a href="http://en.wikipedia.org/wiki/Voronoi"
  31             target="_blank">Voronoi diagram</a> for a moving set of points
  32           using a brute force technique.
  33         </p>
  34         <p class="note">
  35           Note: the C++ source code of this demo is available in the Native Client SDK (<tt>examples/demo/voronoi</tt>).
  36         </p>
  37         <p class="note">
  38           FPS: <span id="fps">0</span>
  39         </p>
  40
  41         <div class="panel panel-info">
  42
  43           <h2>Controls</h2>
  44
  45           <div class="panel-body">
  46             <table id="config" cellspacing="0" cellpadding="0">
  47               <tbody>
  48                 <tr>
  49                   <td class="name">Points:</td>
  50                   <td class="value">
  51                     <input type="range" id="pointRange" min="1" max="1024" step="1" value="48">
  52                     <label id="pointCount">48 points</label>
  53                   </td>
  54                 </tr>
  55                 <tr>
  56                   <td class="name">Thread Count:</td>
  57                   <td class="value">
  58                     <select id="threadCount">
  59                       <option value="0">Main Thread only</option>
  60                       <option value="1">1 Thread</option>
  61                       <option value="2" selected="selected">2 Threads</option>
  62                       <option value="4">4 Threads</option>
  63                       <option value="6">6 Threads</option>
  64                       <option value="8">8 Threads</option>
  65                       <option value="12">12 Threads</option>
  66                       <option value="24">24 Threads</option>
  67                       <option value="32">32 Threads</option>
  68                     </select>
  69                   </td>
  70                 </tr>
  71                 <tr>
  72                   <td class="name"><label for="drawPoints">Draw Points:</label></td>
  73                   <td class="value">
  74                     <input type="checkbox" id="drawPoints" checked="checked">
  75                   </td>
  76                 </tr>
  77                 <tr>
  78                   <td class="name">
  79                     <label for="drawInteriors">Draw Interiors:</label>
  80                   </td>
  81                   <td class="value">
  82                     <input type="checkbox" id="drawInteriors" checked="checked">
  83                   </td>
  84                 </tr>
  85               </tbody>
  86             </table>
  87           </div>
  88         </div>
  89       </div>
  90
  91       <div class="Demo-body">
  92
  93       <div id="listener" class="Demo-content"></div>
  94     </div>
  95
  96     <div id="loading-cover">
  97         <div id="message">
  98           <div id="statusField"></div>
  99           <div id="progress" class="progress progress-striped active">
 100             <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
 101             </div>
 102           </div>
 103         </div>
 104       </div>
 105   </section>
 106
 107 </body>
 108 </html>