starman slider

docs/index.html

@@ -177,7 +177,7 @@ <h2 class="title is-3">Abstract</h2>
 <section class="section">
     <!-- Animation. -->
     <div class="columns is-centered">
-    <div class="container is-max-desktop">
+        <div class="container is-max-desktop">
         <center><h2 class="title is-3">Animation</h2></center>
 
         <!-- Interpolating. -->
@@ -188,26 +188,115 @@ <h2 class="title is-3">Abstract</h2>
           </p>
         </div>
         <div class="columns is-vcentered interpolation-panel">
-        <div class="column interpolation-video-column">
-            <div id="wrapper-airway-age">
-              Loading...
+            <div class="column interpolation-video-column">
+                <div id="wrapper-airway-age">
+                  Loading...
+                </div>
+                <input class="slider is-fullwidth is-large is-info"
+                       id="airway-age-slider"
+                       step="1" min="0" max=20 value="0" type="range">
+                <center><p class="is-bold">Age</p></center>
+            </div>
+
+            <div class="column interpolation-video-column">
+                <div id="wrapper-airway-weight">
+                  Loading...
+                </div>
+                <input class="slider is-fullwidth is-large is-info"
+                       id="airway-weight-slider"
+                       step="1" min="0" max=20 value="0" type="range">
+                  <center><p class="is-bold">Weight</p></center>
+            </div>
+
+            <div class="column interpolation-video-column">
+                <div id="wrapper-airway-sex">
+                  Loading...
+                </div>
+                <input class="slider is-fullwidth is-large is-info"
+                       id="airway-sex-slider"
+                       step="1" min="0" max=20 value="0" type="range">
+                  <center><p class="is-bold">Sex</p></center>
             </div>
-            <input class="slider is-fullwidth is-large is-info"
-                   id="airway-age-slider"
-                   step="1" min="0" max=20 value="0" type="range">
+
         </div>
 
 
-          <div class="column interpolation-video-column">
-            <div id="wrapper-airway-weight">
-              Loading...
+        <div class="content has-text-justified">
+          <p>
+            Disentangled Shape evolution for Starman.
+          </p>
+        </div>
+        <div class="columns is-vcentered interpolation-panel">
+            <div class="column interpolation-video-column">
+                <div id="wrapper-starman-hand">
+                  Loading...
+                </div>
+                <input class="slider is-fullwidth is-large is-info"
+                       id="starman-hand-slider"
+                       step="1" min="0" max=20 value="0" type="range">
+                <center><p class="is-bold">Age</p></center>
             </div>
-            <input class="slider is-fullwidth is-large is-info"
-                   id="airway-weight-slider"
-                   step="1" min="0" max=20 value="0" type="range">
-          </div>
+
+            <div class="column interpolation-video-column">
+                <div id="wrapper-starman-leg">
+                  Loading...
+                </div>
+                <input class="slider is-fullwidth is-large is-info"
+                       id="starman-leg-slider"
+                       step="1" min="0" max=20 value="0" type="range">
+                  <center><p class="is-bold">Weight</p></center>
+            </div>
+
+        </div>
+
+        <div class="content has-text-justified">
+          <p>
+            Disentangled Shape evolution for Pediatric.
+          </p>
+        </div>
+        <div class="columns is-vcentered interpolation-panel">
+            <div class="column interpolation-video-column">
+                <div id="wrapper-adni-age">
+                  Loading...
+                </div>
+                <input class="slider is-fullwidth is-large is-info"
+                       id="adni-age-slider"
+                       step="1" min="0" max=20 value="0" type="range">
+                <center><p class="is-bold">Age</p></center>
+            </div>
+
+            <div class="column interpolation-video-column">
+                <div id="wrapper-adni-AD">
+                  Loading...
+                </div>
+                <input class="slider is-fullwidth is-large is-info"
+                       id="adni-AD-slider"
+                       step="1" min="0" max=20 value="0" type="range">
+                  <center><p class="is-bold">AD</p></center>
+            </div>
+
+            <div class="column interpolation-video-column">
+                <div id="wrapper-adni-edu">
+                  Loading...
+                </div>
+                <input class="slider is-fullwidth is-large is-info"
+                       id="adin-edu-slider"
+                       step="1" min="0" max=20 value="0" type="range">
+                  <center><p class="is-bold">Educational Length</p></center>
+            </div>
+
+            <div class="column interpolation-video-column">
+                <div id="wrapper-adni-sex">
+                  Loading...
+                </div>
+                <input class="slider is-fullwidth is-large is-info"
+                       id="adin-sex-slider"
+                       step="1" min="0" max=20 value="0" type="range">
+                  <center><p class="is-bold">Sex</p></center>
+            </div>
+        </div>
+
         </div>
-      </div>
     </div>
 </section>
 

docs/static/js/index.js

@@ -1,51 +1,103 @@
 window.HELP_IMPROVE_VIDEOJS = false;
 
+var INTERP_STARMAN_HAND_BASE = "./static/interpolation/starman/hand";
+var INTERP_STARMAN_LEG_BASE = "./static/interpolation/starman/leg";
+
 var INTERP_AIRWAY_AGE_BASE = "./static/interpolation/airway/age";
 var INTERP_AIRWAY_WEIGHT_BASE = "./static/interpolation/airway/weight";
+var INTERP_AIRWAY_SEX_BASE = "./static/interpolation/airway/sex";
+
 var INTERP_ADNI_AGE_BASE = "./static/interpolation/adni/age";
 var INTERP_ADNI_AD_BASE = "./static/interpolation/adni/AD";
 var INTERP_ADNI_EDU_BASE = "./static/interpolation/adni/edu";
+var INTERP_ADNI_SEX_BASE = "./static/interpolation/adni/sex";
 
 var NUM_INTERP_FRAMES = 20;
+var interp_starman_hand_images = [];
+var interp_starman_leg_images = [];
+
 var interp_airway_age_images = [];
 var interp_airway_weight_images = [];
+var interp_airway_sex_images = [];
+
 var interp_adni_age_images = [];
 var interp_adni_AD_images = [];
 var interp_adni_edu_images = [];
+var interp_adni_sex_images = [];
 
 
 function preloadImages() {
-  for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
+
+    for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
+        var path = INTERP_STARMAN_HAND_BASE + '/' + String(i).padStart(6, '0') + '.png';
+        interp_starman_hand_images[i] = new Image();
+        interp_starman_hand_images[i].src = path;
+    }
+
+    for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
+        var path = INTERP_STARMAN_LEG_BASE + '/' + String(i).padStart(6, '0') + '.png';
+        interp_starman_leg_images[i] = new Image();
+        interp_starman_leg_images[i].src = path;
+    }
+
+    for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
     var path = INTERP_AIRWAY_AGE_BASE + '/' + String(i).padStart(6, '0') + '.png';
     interp_airway_age_images[i] = new Image();
     interp_airway_age_images[i].src = path;
-  }
+    }
 
-  for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
+    for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
     var path = INTERP_AIRWAY_WEIGHT_BASE + '/' + String(i).padStart(6, '0') + '.png';
     interp_airway_weight_images[i] = new Image();
     interp_airway_weight_images[i].src = path;
-  }
+    }
 
-  for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
+    for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
+    var path = INTERP_AIRWAY_SEX_BASE + '/' + String(i).padStart(6, '0') + '.png';
+    interp_airway_sex_images[i] = new Image();
+    interp_airway_sex_images[i].src = path;
+    }
+
+    for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
     var path = INTERP_ADNI_AGE_BASE + '/' + String(i).padStart(6, '0') + '.png';
     interp_adni_age_images[i] = new Image();
     interp_adni_age_images[i].src = path;
-  }
+    }
 
-  for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
+    for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
     var path = INTERP_ADNI_AD_BASE + '/' + String(i).padStart(6, '0') + '.png';
     interp_adni_AD_images[i] = new Image();
     interp_adni_AD_images[i].src = path;
-  }
+    }
 
-  for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
+    for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
     var path = INTERP_ADNI_EDU_BASE + '/' + String(i).padStart(6, '0') + '.png';
     interp_adni_edu_images[i] = new Image();
     interp_adni_edu_images[i].src = path;
+    }
+    for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
+    var path = INTERP_ADNI_SEX_BASE + '/' + String(i).padStart(6, '0') + '.png';
+    interp_adni_sex_images[i] = new Image();
+    interp_adni_sex_images[i].src = path;
   }
 }
 
+
+function setStarmanHand(i) {
+  var image = interp_starman_hand_images[i];
+  image.ondragstart = function() { return false; };
+  image.oncontextmenu = function() { return false; };
+  $('#wrapper-starman-hand').empty().append(image);
+}
+
+function setStarmanLeg(i) {
+  var image = interp_starman_leg_images[i];
+  image.ondragstart = function() { return false; };
+  image.oncontextmenu = function() { return false; };
+  $('#wrapper-starman-leg').empty().append(image);
+}
+
+
 function setAirwayAge(i) {
   var image = interp_airway_age_images[i];
   image.ondragstart = function() { return false; };
@@ -60,6 +112,13 @@ function setAirwayWeight(i) {
   $('#wrapper-airway-weight').empty().append(image);
 }
 
+function setAirwaySex(i) {
+  var image = interp_airway_sex_images[i];
+  image.ondragstart = function() { return false; };
+  image.oncontextmenu = function() { return false; };
+  $('#wrapper-airway-sex').empty().append(image);
+}
+
 function setADNIAge(i) {
   var image = interp_adni_age_images[i];
   image.ondragstart = function() { return false; };
@@ -82,6 +141,12 @@ function setADNIEdu(i) {
   $('#wrapper-adni-edu').empty().append(image);
 }
 
+function setADNISex(i) {
+  var image = interp_adni_edu_images[i];
+  image.ondragstart = function() { return false; };
+  image.oncontextmenu = function() { return false; };
+  $('#wrapper-adni-sex').empty().append(image);
+}
 
 $(document).ready(function() {
     // Check for click events on the navbar burger icon
@@ -129,6 +194,19 @@ $(document).ready(function() {
       })
     }, false);*/
     preloadImages();
+    $('#starman-hand-slider').on('input', function(event) {
+      setStarmanHand(this.value);
+    });
+    setStarmanHand(0);
+    $('#starman-hand-slider').prop('max', NUM_INTERP_FRAMES - 1);
+
+    $('#starman-leg-slider').on('input', function(event) {
+      setStarmanLeg(this.value);
+    });
+    setStarmanLeg(0);
+    $('#starman-leg-slider').prop('max', NUM_INTERP_FRAMES - 1);
+
+
 
     $('#airway-age-slider').on('input', function(event) {
       setAirwayAge(this.value);
@@ -142,6 +220,14 @@ $(document).ready(function() {
     setAirwayWeight(0);
     $('#airway-weight-slider').prop('max', NUM_INTERP_FRAMES - 1);
 
+
+    $('#airway-sex-slider').on('input', function(event) {
+      setAirwaySex(this.value);
+    });
+    setAirwaySex(0);
+    $('#airway-sex-slider').prop('max', NUM_INTERP_FRAMES - 1);
+
+
     $('#ADNI-age-slider').on('input', function(event) {
       setADNIAge(this.value);
     });
@@ -155,11 +241,18 @@ $(document).ready(function() {
     $('#ADNI-AD-slider').prop('max', NUM_INTERP_FRAMES - 1);
 
     $('#ADNI-edu-slider').on('input', function(event) {
-      setADNIEddu(this.value);
+      setADNIEdu(this.value);
     });
     setADNIEdu(0);
     $('#ADNI-EDU-slider').prop('max', NUM_INTERP_FRAMES - 1);
 
+    $('#ADNI-sex-slider').on('input', function(event) {
+      setADNISex(this.value);
+    });
+    setADNISex(0);
+    $('#ADNI-Sex-slider').prop('max', NUM_INTERP_FRAMES - 1);
+
+
     bulmaSlider.attach();
 
 })