From 8f99ece4ef296350f6b86643f0ce2284a99162b0 Mon Sep 17 00:00:00 2001
From: Kushal K S V S <kkushal32@gmail.com>
Date: Sat, 26 Aug 2017 05:46:31 -0700
Subject: Click to Display

---
 tests/make_png/html/diff.html      |   2 +-
 tests/make_png/html/scripts/top.js | 113 ++++++++++++++++++-------------------
 2 files changed, 56 insertions(+), 59 deletions(-)

diff --git a/tests/make_png/html/diff.html b/tests/make_png/html/diff.html
index 2c690eb2b..2d187a06f 100644
--- a/tests/make_png/html/diff.html
+++ b/tests/make_png/html/diff.html
@@ -10,7 +10,6 @@
   <p id="demo"></p>
   <div id="animation" class="animation"></div><br>
 
-  <button id="set_dim"onclick="set_dim()">SetDim</button>
   <button id="start">Start</button>
   <button id="play">Play</button>
   <button id="stop">Stop</button>
@@ -61,3 +60,4 @@
   </script>
 </body>
 </html>
+
diff --git a/tests/make_png/html/scripts/top.js b/tests/make_png/html/scripts/top.js
index a7d833731..adc269c71 100644
--- a/tests/make_png/html/scripts/top.js
+++ b/tests/make_png/html/scripts/top.js
@@ -4,79 +4,76 @@ function change() {
 	var mode = document.getElementById('mode').value;
 	var size = document.getElementById('size').value;
 	var frame = document.getElementById('frame_1');
-    var string = "pages/"+dpi+"/"+font+"/"+mode+"/"+size+"/index.html";
-    frame.src = string;
+  var string = "pages/"+dpi+"/"+font+"/"+mode+"/"+size+"/index.html";
+  frame.src = string;
 }
 
 var people, asc1 = 1,asc2 = 1,asc3 = 1;
 
 function sort_t(tbody, col, asc){
-    var rows = tbody.rows, rlen = rows.length, arr = new Array(), i, j, cells, clen;
-    // fill the array with values from the table
-    for(i = 0; i < rlen; i++){
-    cells = rows[i].cells;
-    clen = cells.length;
-    arr[i] = new Array();
-        for(j = 0; j < clen; j++){
-        arr[i][j] = cells[j].innerHTML;
-        }
-    }
-    // sort the array by the specified column number (col) and order (asc)
-    arr.sort(function(a, b){
-        return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1*asc);
-    });
-    for(i = 0; i < rlen; i++){
-        arr[i] = "<td>"+arr[i].join("</td><td>")+"</timaged>";
-    }
-    tbody.innerHTML = "<tr>"+arr.join("</tr><tr>")+"</tr>";
+  var rows = tbody.rows, rlen = rows.length, arr = new Array(), i, j, cells, clen;
+  // fill the array with values from the table
+  for(i = 0; i < rlen; i++){
+  cells = rows[i].cells;
+  clen = cells.length;
+  arr[i] = new Array();
+      for(j = 0; j < clen; j++){
+      arr[i][j] = cells[j].innerHTML;
+      }
+  }
+  // sort the array by the specified column number (col) and order (asc)
+  arr.sort(function(a, b){
+      return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1*asc);
+  });
+  for(i = 0; i < rlen; i++){
+      arr[i] = "<td>"+arr[i].join("</td><td>")+"</timaged>";
+  }
+  tbody.innerHTML = "<tr>"+arr.join("</tr><tr>")+"</tr>";
 }
 
 function frame_2_source(image){
-    var path = "url("+image.src+")";
+  var path = "url("+image.src+")";
 
-    var fr_2 = parent.frame_2.document;
+  var fr_2 = parent.frame_2.document;
 
-    var div = fr_2.getElementById('animation');
-    div.style.backgroundImage=path;
-}
-
-function set_dim() {
+  // Division whose background image is the sprite
+  var div = fr_2.getElementById('animation');
+  div.style.backgroundImage=path;
 
-    var imageSrc = document
-                    .getElementById('animation')
-                     .style
-                      .backgroundImage
-                       .replace(/url\((['"])?(.*?)\1\)/gi, '$2')
-                        .split(',')[0];
+  // To get the dimensions of the image file
+  var new_image = new Image();
+  new_image.src = image.src;
 
-    var image = new Image();
-    image.src = imageSrc;
+  var src_w = new_image.width;
+  var src_h = new_image.height;
 
-    var src_w = image.width;
-    var src_h = image.height;
+  //Using dimensions of the iFrame
+  var win_w = window.innerWidth;
+  var win_h = window.innerHeight-60;
 
-    var win_w = window.innerWidth;
-    var win_h = window.innerHeight-60;
+  // r_w and r_j represent the maximum times that the width or the
+  // height can be multiplied so that we get the maximum image size
+  // possible without exceeding the iFrame dimensions and maintaining
+  // aspect ratio.
+  var r_w = (win_w/(src_w/4)).toString();
+  r_w = parseInt(r_w);
 
-    var r_w = (win_w/(src_w/4)).toString();
-    r_w = parseInt(r_w);
-    
-    var r_h = (win_h/src_h).toString();
-    r_h = parseInt(r_h);
+  var r_h = (win_h/src_h).toString();
+  r_h = parseInt(r_h);
 
-    var div_w = 0;
-    var div_h = 0;
+  var div_w = 0;
+  var div_h = 0;
 
-    if (r_w > r_h)
-    { 
-        div_w = src_w * r_h;
-        div_h = src_h * r_h;
-    } else {
-        div_w = src_w * r_w;
-        div_h = src_h * r_w;
-    }
-
-    document.getElementById('animation').style.width= div_w/4 + "px";
+  if (r_w > r_h)
+  {
+    div_w = src_w * r_h;
+    div_h = src_h * r_h;
+  } else {
+    div_w = src_w * r_w;
+    div_h = src_h * r_w;
+  }
+  // Setting the division width and height.
+  div.style.width= div_w/4 + "px";
+  div.style.height= div_h + "px";
+}
 
-    document.getElementById('animation').style.height= div_h + "px";
-}
\ No newline at end of file
-- 
cgit v1.2.1