OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 |
| 5 <meta charset=utf8> |
| 6 <link type="text/css" href="jquery-ui-1.8.2.custom.css" rel="stylesheet"/> |
| 7 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> |
| 8 <script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script> |
| 9 |
| 10 <!-- |
| 11 Copyright (C) 2007 Apple Inc. All rights reserved. |
| 12 Copyright (C) 2010 Mozilla Foundation |
| 13 |
| 14 Redistribution and use in source and binary forms, with or without |
| 15 modification, are permitted provided that the following conditions |
| 16 are met: |
| 17 1. Redistributions of source code must retain the above copyright |
| 18 notice, this list of conditions and the following disclaimer. |
| 19 2. Redistributions in binary form must reproduce the above copyright |
| 20 notice, this list of conditions and the following disclaimer in the |
| 21 documentation and/or other materials provided with the distribution. |
| 22 |
| 23 THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY |
| 24 EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
| 25 IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR |
| 26 PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR |
| 27 CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, |
| 28 EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, |
| 29 PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR |
| 30 PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY |
| 31 OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 32 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| 33 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 34 --> |
| 35 |
| 36 <title>Kraken JavaScript Benchmark: Gaussian Blur</title> |
| 37 <link rel="stylesheet" href="../kraken.css"> |
| 38 |
| 39 <script type="text/javascript" src="darkroom.js"></script> |
| 40 <style> |
| 41 #imagedisplay { |
| 42 width: 70%; |
| 43 /*background: blue;*/ |
| 44 padding-top: 15px; |
| 45 padding-bottom: 15px; |
| 46 float: left; |
| 47 } |
| 48 |
| 49 #imagedisplay-inner { |
| 50 width: 100%; |
| 51 height: 100%; |
| 52 -moz-border-radius: 30px; |
| 53 border: 30px dashed #eeeeee; |
| 54 } |
| 55 |
| 56 #controls { |
| 57 background: rgba(0, 0, 0, .5); |
| 58 width: 30%; |
| 59 min-width: 100px; |
| 60 float: right; |
| 61 } |
| 62 |
| 63 .blackbg #controls { |
| 64 color: white; |
| 65 } |
| 66 |
| 67 .graybg #controls { |
| 68 color: #aaaaaa; |
| 69 } |
| 70 |
| 71 #controls h4 { |
| 72 } |
| 73 |
| 74 .slidergroup { |
| 75 margin: 5px; |
| 76 } |
| 77 |
| 78 .slidergroup tr { |
| 79 font-size: 11px; |
| 80 } |
| 81 |
| 82 .slider { |
| 83 margin-left: 15px; |
| 84 margin-right: 15px; |
| 85 } |
| 86 |
| 87 body { |
| 88 font-family: sans-serif; |
| 89 } |
| 90 |
| 91 #log { |
| 92 font-size: 70%; |
| 93 margin-left: 10px; |
| 94 margin-right: 10px; |
| 95 } |
| 96 |
| 97 .indrag { |
| 98 background: rgba(0,128,128,.25); |
| 99 cursor: default; |
| 100 } |
| 101 |
| 102 .options { |
| 103 margin: 10px; |
| 104 } |
| 105 |
| 106 .canzoomin { |
| 107 cursor: -moz-zoom-in; |
| 108 } |
| 109 |
| 110 .canzoomout { |
| 111 cursor: -moz-zoom-out ! important; |
| 112 } |
| 113 |
| 114 .cangrab { |
| 115 cursor: -moz-grab; |
| 116 } |
| 117 |
| 118 .isgrabbing { |
| 119 cursor: -moz-grabbing ! important; |
| 120 } |
| 121 |
| 122 .blackbg { |
| 123 background: black; |
| 124 } |
| 125 |
| 126 .whitebg { |
| 127 background: white; |
| 128 } |
| 129 |
| 130 .graybg { |
| 131 background: gray; |
| 132 } |
| 133 |
| 134 span { |
| 135 font-size: 11px; |
| 136 } |
| 137 |
| 138 </style> |
| 139 |
| 140 </style> |
| 141 </head> |
| 142 |
| 143 <body> |
| 144 <div id="content"> |
| 145 <h2>Kraken JavaScript Benchmark: Darkroom</h2> |
| 146 <div id="results"> |
| 147 <p>This benchmark performs a variety of photo manipulations. You can try the
se manipulations out in the interface below.</p> |
| 148 <p> </p> |
| 149 <div id="imagedisplay"> |
| 150 <center><canvas id="canvas"></canvas></center> |
| 151 </div> |
| 152 |
| 153 <div id="controls"> |
| 154 <div class="slidergroup"> |
| 155 <h4>Exposure</h4> |
| 156 <table border="0"> |
| 157 <tr> |
| 158 <td>Black Point</td> |
| 159 <td width="100%"><div class="slider" id="blackPoint"></div></td> |
| 160 </tr> |
| 161 |
| 162 <tr> |
| 163 <td>Fill</td> |
| 164 <td><div class="slider" id="fill"></div></td> |
| 165 </tr> |
| 166 <tr> |
| 167 <td>Brightness</td> |
| 168 <td><div class="slider" id="brightness"></div></td> |
| 169 </tr> |
| 170 |
| 171 <tr> |
| 172 <td>Contrast</td> |
| 173 <td><div class="slider" id="contrast"></div></td> |
| 174 </tr> |
| 175 <tr> |
| 176 <td>Saturation</td> |
| 177 <td><div class="slider" id="saturation"></div></td> |
| 178 </tr> |
| 179 |
| 180 <tr> |
| 181 <td>Temperature</td> |
| 182 <td><div class="slider" id="temperature"></div></td> |
| 183 </tr> |
| 184 </table> |
| 185 </div> |
| 186 <div class="slidergroup"> |
| 187 <h4>Tone Control</h4> |
| 188 |
| 189 <table border="0"> |
| 190 <tr> |
| 191 <td>Split Point</td> |
| 192 <td><div class="slider" id="splitPoint"></div></td> |
| 193 </tr> |
| 194 <tr><td><b>Shadows</b></td></tr> |
| 195 <tr> |
| 196 <td>Hue</td> |
| 197 |
| 198 <td width="100%"><div class="slider" id="shadowsHue"></div></td> |
| 199 </tr> |
| 200 <tr> |
| 201 <td>Saturation</td> |
| 202 <td><div class="slider" id="shadowsSaturation"></div></td> |
| 203 </tr> |
| 204 <tr><td><b>Highlights</b></td></tr> |
| 205 <tr> |
| 206 |
| 207 <td>Hue</td> |
| 208 <td><div class="slider" id="highlightsHue"></div></td> |
| 209 </tr> |
| 210 <tr> |
| 211 <td>Saturation</td> |
| 212 <td><div class="slider" id="highlightsSaturation"></div></td> |
| 213 </tr> |
| 214 </table> |
| 215 |
| 216 </div> |
| 217 |
| 218 <div class="slidergroup"> |
| 219 <h4>Geometry</h4> |
| 220 <table border="0" width="100%"> |
| 221 <tr><td>Angle (+/- 90.0)</td></tr> |
| 222 <tr> |
| 223 <td width="100%"><div class="slider" id="angle"></div></td> |
| 224 |
| 225 </tr> |
| 226 <tr><td>Fine Angle (+/- 2.0)</td></tr> |
| 227 <tr> |
| 228 <td><div class="slider" id="fineangle"></div></td> |
| 229 </tr> |
| 230 </table> |
| 231 </div> |
| 232 |
| 233 <div class="options"> |
| 234 |
| 235 <span>Background: <div style="display: inline-block; width: 15px; height
: 15px; border: 1px solid white; background: black;" onclick="SetBackground(0);"
></div> |
| 236 <div style="display: inline-block; width: 15px; height: 15px; border:
1px solid white; background: gray;" onclick="SetBackground(1);"></div> |
| 237 <div style="display: inline-block; width: 15px; height: 15px; border:
1px solid white; background: white;" onclick="SetBackground(2);"></div> |
| 238 </span><br> |
| 239 |
| 240 <span style="font-weight: bold;">Drag and drop a new image onto the canv
as to load.</span><br> |
| 241 |
| 242 <button onclick="ZoomReset()">Reset Zoom</button> |
| 243 |
| 244 <button onclick="DoReset()">Reset All</button> |
| 245 <button onclick="DoRedisplay()">Repaint</button><br><br> |
| 246 <input type="checkbox" id="correct_before" onchange="CheckboxToggled()">
Color correct before scaling for display<br><br> |
| 247 </div> |
| 248 |
| 249 <div id="log"></div> |
| 250 |
| 251 </div> |
| 252 |
| 253 </div> |
| 254 </div> |
| 255 </body> |
| 256 </html> |
OLD | NEW |