1 <!doctype html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Image Comparison Viewer</title> 5 <style> 6 #testrundetails { 7 height: 200px; 8 } 9 10 #thumbnails { 11 top: 250px; 12 left: 10px; 13 width: 260px; 14 margin: 0px; 15 padding: 0px; 16 position: absolute; 17 } 18 19 .thumb { 20 width: 200px; 21 height: auto; 22 cursor: pointer; 23 border: 3px solid black; 24 } 25 26 .thumb:hover { 27 border: 3px solid blue; 28 } 29 30 #content { 31 margin-left: 260px; 32 } 33 34 .tagname { 35 font-weight: bold; 36 } 37 38 .hidden { 39 display: none; 40 } 41 42 #glitchimage { 43 max-width: 800px; 44 } 45 </style> 46 <script type="text/javascript"> 47 var paths = $images 48 var size = paths.length; 49 var curr = 0; 50 51 function setup() { 52 if (paths.length > 0) { 53 document.getElementById("glitchimage").src = paths[0]; 54 } 55 document.getElementById("total").innerHTML = size; 56 } 57 58 function setCounter() { 59 document.getElementById("counter").innerHTML = curr + 1; 60 } 61 62 function setImageSource() { 63 document.getElementById("glitchimage").src = paths[curr]; 64 } 65 66 function next() { 67 curr = (curr + 1) % size; 68 setImageSource(); 69 setCounter(); 70 } 71 72 function prev() { 73 curr = ((curr - 1) + size) % size; 74 setImageSource(); 75 setCounter(); 76 } 77 </script> 78 </head> 79 <body onload="setup()"> 80 <div id="testrundetails"> 81 <h1> Test Run Details </h1> 82 <ul> 83 <li><span class="tagname"> Test Name: </span>$testname</li> 84 <li><span class="tagname"> ChromeOS Build Number: </span>$chromeos_version</li> 85 <li><span class="tagname"> Chrome Build Number: </span>$chrome_version</li> 86 <li><span class="tagname"> Device: </span>$board</li> 87 <li><span class="tagname"> Date of run: </span>$date</li> 88 </ul> 89 </div> 90 <hr /> 91 <div id="images"> 92 <button id="prev" onclick="prev()">Previous</button> 93 <span id="counter">1</span> / <span id="total"></span> 94 <button id="next" onclick="next()">Next</button><br /> 95 <img id="glitchimage" src="" /> 96 </div> 97 </body> 98 </html> 99
