| <h3>Lancelot Viewer</h3> |
| |
| <p> |
| Zoom: |
| <input name="zoom" id="z1" type="radio" checked="Checked">1x</input> |
| <input name="zoom" id="z2" type="radio">2x</input> |
| <input name="zoom" id="z4" type="radio">4x</input> |
| </p> |
| |
| <p><table> |
| <tr> |
| <td><input name="imgselect" id="baseline" type="radio" checked="Checked">Baseline</input></td> |
| <td>%1</td> |
| </tr> |
| <tr> |
| <td><input name="imgselect" id="rendered" type="radio">Rendered</input></td> |
| <td>%2</td> |
| </tr> |
| <tr> |
| <td><input name="imgselect" id="compared" type="radio">Differences</input></td> |
| <td></td> |
| </tr> |
| </table></p> |
| |
| |
| <p><table cellspacing="25"><tr> |
| <td valign="top"> |
| <canvas id="c" width="800" height="800"></canvas> |
| </td> |
| <td valign="top"> |
| %4 |
| </td> |
| </tr></table></p> |
| |
| <script> |
| var canvas = document.getElementById("c"); |
| var context = canvas.getContext("2d"); |
| var cat = new Image(); |
| cat.src = "%1"; |
| var z = 1; |
| cat.onload = function() { |
| context.mozImageSmoothingEnabled = false; |
| context.drawImage(cat, 0, 0, z*cat.width, z*cat.height); |
| }; |
| |
| var bbut = document.getElementById("baseline"); |
| bbut.onclick = function() { |
| cat.src = "%1"; |
| }; |
| |
| var rbut = document.getElementById("rendered"); |
| rbut.onclick = function() { |
| cat.src = "%2"; |
| }; |
| |
| var cbut = document.getElementById("compared"); |
| cbut.onclick = function() { |
| cat.src = "%3"; |
| }; |
| |
| function setZoom(zoom) |
| { |
| z = zoom; |
| canvas.width = z*800; |
| canvas.height = z*800; |
| context.mozImageSmoothingEnabled = false; |
| context.drawImage(cat, 0, 0, z*cat.width, z*cat.height); |
| } |
| |
| var z1but = document.getElementById("z1"); |
| z1but.onclick = function() { |
| setZoom(1); |
| }; |
| |
| var z2but = document.getElementById("z2"); |
| z2but.onclick = function() { |
| setZoom(2); |
| }; |
| |
| var z4but = document.getElementById("z4"); |
| z4but.onclick = function() { |
| setZoom(4); |
| }; |
| </script> |