adaptive

index.html

@@ -448,29 +448,27 @@
               <div style="clear: both"></div>
             </div>
             <div id="c10" class="column interpolation-video-column" style="width: 70%;">
-              <div id="interpolation-image-wrapper" >
+              <div id="c10-image-wrapper" >
                 Loading...
               </div>
-              <input class="slider is-full-width is-large is-info"
+              <input name="c10" class="slider is-full-width is-large is-info"
                 id="interpolation-slider"
                 step="1" min="0" max="6" value="0" type="range">
               <label for="interpolation-slider"><strong>Perturbation Budget &Epsilon;</strong> from 2/255 to 128/255</label>
             </div>
             <!-- <div id="c100" class="column interpolation-video-column" style="width: 70%; display: none;">
-              <div id="interpolation-image-wrapper" >
+              <div id="c100-image-wrapper" >
                 Loading...
               </div>
-              <input class="slider is-full-width is-large is-info"
-                id="interpolation-slider"
+              <input name="c100" class="slider is-full-width is-large is-info interpolation-slider"
                 step="1" min="0" max="6" value="0" type="range">
               <label for="interpolation-slider"><strong>Perturbation Budget &Epsilon;</strong> from 2/255 to 128/255</label>
             </div> -->
             <div id="imgnet" class="column interpolation-video-column" style="width: 70%; display: none;">
-              <div id="interpolation-image-wrapper" >
+              <div id="imgnet-image-wrapper" >
                 Loading...
               </div>
-              <input class="slider is-full-width is-large is-info"
-                id="interpolation-slider"
+              <input name="imgnet" class="slider is-full-width is-large is-info interpolation-slider"
                 step="1" min="0" max="6" value="0" type="range">
               <label for="interpolation-slider"><strong>Perturbation Budget &Epsilon;</strong> from 2/255 to 128/255</label>
 

static/js/index.js

@@ -3,20 +3,44 @@ window.HELP_IMPROVE_VIDEOJS = false;
 var INTERP_BASE = "./static/images/adaptive";
 var NUM_INTERP_FRAMES = 7;
 
-var interp_images = [];
+var c10_images = [];
+var c100_images = [];
+var imgnet_images = [];
+
 function preloadInterpolationImages() {
   for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
-    var path = INTERP_BASE + '/' + String(i) + '.png';
-    interp_images[i] = new Image();
-    interp_images[i].src = path;
+    var c10_path = INTERP_BASE + '/c10_' +  String(i) + '.png';
+    // var c100_path = INTERP_BASE + '/c100_' + String(i) + '.png';
+    var imgnet_path = INTERP_BASE + '/imgnet_' + String(i) + '.png';
+
+    c10_images[i] = new Image();
+    c10_images[i].src = c10_path;
+
+    // c100_images[i] = new Image();
+    // c100_images[i].src = c100_path;
+
+    imgnet_images[i] = new Image();
+    imgnet_images[i].src = imgnet_path;
   }
 }
 
-function setInterpolationImage(i) {
-  var image = interp_images[i];
+function setInterpolationImage(name, value) {
+
+  if (name == "c10"){
+    var image = c10_images[value]
+  }
+  else if (name == "c100"){
+    var image = c100_images[value]
+  }
+  else if (name == "imgnet"){
+    var image = imgnet_images[value]
+  }
+  else {
+    var image = c10_images[value]
+  }
   image.ondragstart = function() { return false; };
   image.oncontextmenu = function() { return false; };
-  $('#interpolation-image-wrapper').empty().append(image);
+  $('#'+name+'-image-wrapper').empty().append(image);
 }
 
 
@@ -68,7 +92,7 @@ $(document).ready(function() {
     preloadInterpolationImages();
 
     $('#interpolation-slider').on('input', function(event) {
-      setInterpolationImage(this.value);
+      setInterpolationImage(this.name, this.value);
     });
     setInterpolationImage(0);
     $('#interpolation-slider').prop('max', NUM_INTERP_FRAMES - 1);