2026-01-19 16:21:04 -08:00 · 2018-05-17 07:05:41 +00:00
parent b5c06c518b
commit e7f418ebf7
14 changed files with 1385 additions and 0 deletions
--- a/website/showcase/PanSTARRS-DR1/css/app.css
+++ b/website/showcase/PanSTARRS-DR1/css/app.css
@@ -0,0 +1,39 @@
+html, body {
+    height: 100%;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+.aladin-zoomControl {
+    top: 80% !important;
+}
+
+#aladin{
+    flex: 1 1 0;
+}
+
+#explain {
+    padding: 4px;
+    top: 30%;
+    max-height: 60%;
+    overflow: scroll;
+}
+
+#layersControl {
+    padding: 4px;
+    left: unset;
+    right: 4px;
+    top: 100px;
+}
+
+#layersControl  input {
+    margin-right: 5px;
+}
+
+
+.aladin-box {
+    font-size: 12px !important;
+}
--- a/website/showcase/PanSTARRS-DR1/css/grids-responsive-min.css
+++ b/website/showcase/PanSTARRS-DR1/css/grids-responsive-min.css
--- a/website/showcase/PanSTARRS-DR1/css/pure-min.css
+++ b/website/showcase/PanSTARRS-DR1/css/pure-min.css
--- a/website/showcase/PanSTARRS-DR1/index.gml
+++ b/website/showcase/PanSTARRS-DR1/index.gml
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>PanSTARRS DR1 visualized in Aladin Lite</title>
+
+    <link rel="stylesheet" href="css/pure-min.css">
+    <link rel="stylesheet" href="css/grids-responsive-min.css">
+
+    <link rel="stylesheet" href="css/app.css">
+
+    <link rel="stylesheet" href="http://aladin.u-strasbg.fr/AladinLite/api/v2/beta/aladin.min.css" />
+
+    <&CDS.headStuff2>
+
+  </head>
+
+  <body>
+  
+    <&CDS.headArea2 '' 'aladin'>
+
+
+    <div class="pure-g">
+      <div class="pure-u-1-3"><img style="width:80px;float: right;" src="http://vizier.u-strasbg.fr/vizier/logos/PanSTARRS.png"></div>
+      <div class="pure-u-1-3"><h2>PanSTARRS data in Aladin Lite</h2></div>
+      <h4 class="pure-u-1-3">Zoom in to make fainter sources appear.<br/>Click on a source to display its measurements.</h4>
+    </div>
+
+
+    <div id="aladin">
+      <div id="explain" class="aladin-box"></div>
+      <div id="layersControl" class="aladin-box">
+        <b>Background</b>
+        <form class="pure-form pure-form-stacked">
+          <fieldset>
+            <label for="option-ps-color" class="pure-radio">
+              <input id="option-ps-color" type="radio" name="img-hips" value="panstarrs-color" checked>
+              PanSTARRS DR1 color images
+            </label>
+            <label for="option-ps" class="pure-radio">
+              <input id="option-ps" type="radio" name="img-hips" value="panstarrs-g">
+              PanSTARRS DR1 g-band images
+            </label>
+            <label for="option-ps-dmap" class="pure-radio">
+              <input id="option-ps-dmap" type="radio" name="img-hips" value="panstarrs-density-map">
+              PanSTARRS DR1 catalogue density map 
+            </label>
+            <label for="option-DSS-dmap" class="pure-radio">
+              <input id="option-DSS-dmap" type="radio" name="img-hips" value="P/DSS2/color">
+              DSS Color
+            </label>
+
+          </fieldset>
+        </form>
+        <hr>
+        <b>Overlays</b>
+        <form class="pure-form pure-form-stacked" id="overlay-form">
+          <fieldset>
+
+          <label for="PS">
+            <input id="PS" type="checkbox" value="ps1" checked>PanSTARRS DR1 sources
+          </label>
+
+          <label for="simbad">
+            <input id="simbad" type="checkbox" value="simbad">Simbad objects
+          </label>
+
+          </fieldset>
+        </form>
+      </div>
+    <div>
+
+  </body>
+
+
+  <script type="text/javascript" src="http://aladin.u-strasbg.fr/AladinLite/api/v2/beta/aladin.min.js" charset="utf-8"></script>
+  <script src="js/app.js"></script>
+
+  <&CDS.piwikStats "aladin">
+
+</html>
--- a/website/showcase/PanSTARRS-DR1/js/app.js
+++ b/website/showcase/PanSTARRS-DR1/js/app.js
@@ -0,0 +1,93 @@
+$('#layersControl').show();
+
+var curSelectedSource = null;
+var aladin = A.aladin('#aladin', {fov: 45, cooFrame: 'galactic'});
+aladin.gotoRaDec(297.87, 25.96);
+
+aladin.createImageSurvey('panstarrs-color', 'PanSTARRS DR1 color', 'http://alasky.u-strasbg.fr/Pan-STARRS/DR1/color-z-zg-g', 'equatorial', 11);
+aladin.createImageSurvey('panstarrs-g', 'PanSTARRS DR1 g-band', 'http://alasky.u-strasbg.fr/Pan-STARRS/DR1/g', 'equatorial', 11);
+aladin.createImageSurvey('panstarrs-density-map', 'PanSTARRS DR1 density map', 'http://alasky.u-strasbg.fr/footprints/hips-density-maps/II/349/ps1', 'equatorial', 4, {imgFormat: 'jpg'});
+
+aladin.setImageSurvey('panstarrs-color');
+
+
+var hipsCats = {
+  'ps1': A.catalogHiPS('http://axel.u-strasbg.fr/HiPSCatService/II/349/ps1', {name: 'PanSTARRS DR1 sources', shape: 'circle', sourceSize: 8, color: '#6baed6'}),
+  'simbad': A.catalogHiPS('http://axel.u-strasbg.fr/HiPSCatService/Simbad', {name: 'Simbad', color: '#ce6dbd'})
+};
+
+hipsCats['simbad'].hide();
+
+aladin.addCatalog(hipsCats['simbad']);
+aladin.addCatalog(hipsCats['ps1']);
+
+
+// listen changes on HiPS image background selection
+$('input[type=radio][name=img-hips]').change(function() {
+  aladin.setImageSurvey(this.value);
+});
+
+
+// listen changes on HiPS catalogues selection
+$('#overlay-form :checkbox').change(function() {
+  var cat = hipsCats[this.value];
+
+  if (this.checked) {
+    cat.show();
+  }
+  else {
+    cat.hide();
+  }
+});
+
+// listen to click on objects
+aladin.on('objectClicked', function(source) {
+    var html = '<table class="pure-table">';
+
+    if (curSelectedSource != null) {
+        curSelectedSource.deselect();
+    }
+    if (source==null) {
+        $('#explain').html('');
+        $('#explain').hide();
+        return;
+    }
+
+    source.select();
+    curSelectedSource = source;
+    html += '<tbody>';
+    if (source.catalog.name !== 'Simbad') {
+        html += '<h3>PanSTARRS source <em>' + source.data.objID + '</em></h3>';
+        html += '<tr class="pure-table-odd"><td><b>RAJ2000</b></td><td>' + source.data.RAJ2000 + '</td><td><em>deg</em></td></tr>';
+        html += '<tr><td><b>DEJ2000</b></td><td>' + source.data.DEJ2000 + '</td><td><em>deg</em></td></tr>';
+        html += '<tr class="pure-table-odd"><td><b>gmag</b></td><td>' + source.data['gmag'] + '</td><td><em>mag</em></td></tr>';
+        html += '<tr><td><b>rmag</b></td><td>' + source.data['rmag'] + '</td><td><em>mag</em></td></tr>';
+        html += '<tr class="pure-table-odd"><td><b>imag</b></td><td>' + source.data.imag + '</td><td><em>mag</em></td></tr>';
+        html += '<tr><td><b>zmag</b></td><td>' + source.data.zmag + '</td><td><em>mag</em></td></tr>';
+        html += '<tr class="pure-table-odd"><td><b>ymag</b></td><td>' + source.data.ymag + '</td><td><em>mag</em></td></tr>';
+        html += '</tbody>';
+        html += '</table>';
+
+        html += '<br/><a target="_blank" href="http://vizier.u-strasbg.fr/viz-bin/VizieR-5?-out.form=%2bH&-source=II/349/ps1' + '&-c=' + encodeURIComponent(source.ra + ',' + source.dec) + '&-c.rs=0.02&objID=' + source.data.objID + '">More details</a>';
+    }
+    else {
+        html += '<h3>Simbad object <em>' + source.data.main_id + '</em></h3>';
+        html += '<tr class="pure-table-odd"><td><b>ra</b></td><td>' + source.data.ra + '</td><td><em>deg</em></td></tr>';
+        html += '<tr><td><b>dec</b></td><td>' + source.data.dec + '</td><td><em>deg</em></td></tr>';
+        html += '<tr class="pure-table-odd"><td><b>pmra</b></td><td>' + source.data.pmra + '</td><td><em>mas/yr</em></td></tr>';
+        html += '<tr><td><b>pmdec</b></td><td>' + source.data.pmdec + '</td><td><em>mas/yr</em></td></tr>';
+        html += '<tr class="pure-table-odd"><td><b>parallax</b></td><td>' + source.data.plx + '</td><td><em>mas</em></td></tr>';
+        html += '<tr><td><b>B mag.</b></td><td>' + source.data.B + '</td><td><em>mag</em></td></tr>';
+        html += '<tr class="pure-table-odd"><td><b>V mag.</b></td><td>' + source.data.V + '</td><td><em>mag</em></td></tr>';
+        html += '</tbody>';
+        html += '</table>';
+
+        html += '<br/><a target="_blank" href="http://simbad.u-strasbg.fr/simbad/sim-id?Ident=' + encodeURIComponent(source.data.main_id) + '">More details</a>';
+    }
+
+
+    $('#explain').html(html);
+    $('#explain').show();
+
+});
+
--- a/website/showcase/slider-split-views/aladin-lite.gml
+++ b/website/showcase/slider-split-views/aladin-lite.gml
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
+<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
+<!--[if IE 8 ]>    <html class="lt-ie9" lang="en"> <![endif]-->
+<!--[if IE 9 ]>    <html class="lt-ie10" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>twentytwenty</title>
+  <link href="css/twentytwenty.css" rel="stylesheet" type="text/css" />
+  <link rel="stylesheet" href="//aladin.u-strasbg.fr/AladinLite/api/v2/beta/aladin.min.css" />
+  <link rel="stylesheet" href="css/app.css">
+
+  <link rel="stylesheet" href="css/pure-min.css">
+  <link rel="stylesheet" href="css/grids-responsive-min.css">
+
+
+  <&CDS.headStuff2>
+
+</head>
+  <body>
+
+
+    <div class="pure-g">
+      <div class="pure-u-1-3"></div>
+      <div class="pure-u-1-3"><h2>Split views with slider</h2></div>
+      <h4 class="pure-u-1-3">Share the slider to compare the two selected HiPS.<br/></h4>
+    </div>
+
+
+    <div class="twentytwenty-container" style="width: 1300px; height: 800px;">
+        <div id="al1" class="aladin"></div>
+        <div id="al2" class="aladin"></div>
+    </div>
+
+    <script
+  src="https://code.jquery.com/jquery-3.2.1.js"
+  crossorigin="anonymous"></script>
+    <script src="js/jquery.event.move.js"></script>
+    <script src="js/jquery.twentytwenty.js"></script>
+    <script type="text/javascript" src="//aladin.u-strasbg.fr/AladinLite/api/v2/beta/aladin.min.js" charset="utf-8"></script>
+    <script>
+        View.CALLBACKS_THROTTLE_TIME = 30;
+        var a1 = A.aladin('#al1', {survey: "P/DSS2/color", fov:0.3, target: 'M1'});
+        var a2 = A.aladin('#al2', {survey: "P/2MASS/color", fov:0.3, target: 'M1'});
+        a1.on('positionChanged', function(params) {
+            a2.gotoRaDec(params.ra, params.dec);
+        });
+        a2.on('positionChanged', function(params) {
+            a1.gotoRaDec(params.ra, params.dec);
+        });
+        a1.on('zoomChanged', function(fov) {
+            if (Math.abs(a2.getFov()[0] - fov) / fov > 0.01) {
+                a2.setFoV(fov);
+            }
+        });
+        a2.on('zoomChanged', function(fov) {
+            if (Math.abs(a1.getFov()[0] - fov) / fov > 0.01) {
+                a1.setFoV(fov);
+            }
+        });
+        setTimeout(function() {
+        $(".twentytwenty-container").twentytwenty({default_offset_pct: 0.5, no_overlay: true});
+        }, 300);
+    </script>
+  </body>
+</html>
--- a/website/showcase/slider-split-views/css/app.css
+++ b/website/showcase/slider-split-views/css/app.css
@@ -0,0 +1,31 @@
+html, body {
+    height: 100%;
+}
+
+.aladin-zoomControl {
+    top: 80% !important;
+}
+
+.aladin {
+    position: absolute;
+    width: 100%;
+    height: 85vh;
+}
+
+.twentytwenty-handle::before {
+    background: rgba(255, 255, 255, 0.3) !important;
+}
+
+.twentytwenty-handle::after {
+    background: rgba(255, 255, 255, 0.3) !important;
+}
+
+#al2 .aladin-layersControl-container {
+    left: unset;
+    right: 4px;
+}
+
+#al2 .aladin-box {
+    left: unset;
+    right: 4px;
+}
--- a/website/showcase/slider-split-views/css/grids-responsive-min.css
+++ b/website/showcase/slider-split-views/css/grids-responsive-min.css
--- a/website/showcase/slider-split-views/css/pure-min.css
+++ b/website/showcase/slider-split-views/css/pure-min.css
--- a/website/showcase/slider-split-views/css/twentytwenty.css
+++ b/website/showcase/slider-split-views/css/twentytwenty.css
@@ -0,0 +1,205 @@
+.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
+  content: " ";
+  display: block;
+  background: white;
+  position: absolute;
+  z-index: 30;
+  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
+  width: 3px;
+  height: 9999px;
+  left: 50%;
+  margin-left: -1.5px; }
+
+.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
+  width: 9999px;
+  height: 3px;
+  top: 50%;
+  margin-top: -1.5px; }
+
+.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%; }
+
+.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
+  -webkit-transition-duration: 0.5s;
+  -moz-transition-duration: 0.5s;
+  transition-duration: 0.5s; }
+
+.twentytwenty-before-label, .twentytwenty-after-label {
+  -webkit-transition-property: opacity;
+  -moz-transition-property: opacity;
+  transition-property: opacity; }
+
+.twentytwenty-before-label:before, .twentytwenty-after-label:before {
+  color: white;
+  font-size: 13px;
+  letter-spacing: 0.1em; }
+
+.twentytwenty-before-label:before, .twentytwenty-after-label:before {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.2);
+  line-height: 38px;
+  padding: 0 20px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px; }
+
+.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
+  top: 50%;
+  margin-top: -19px; }
+
+.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
+  left: 50%;
+  margin-left: -45px;
+  text-align: center;
+  width: 90px; }
+
+.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
+  width: 0;
+  height: 0;
+  border: 6px inset transparent;
+  position: absolute; }
+
+.twentytwenty-left-arrow, .twentytwenty-right-arrow {
+  top: 50%;
+  margin-top: -6px; }
+
+.twentytwenty-up-arrow, .twentytwenty-down-arrow {
+  left: 50%;
+  margin-left: -6px; }
+
+.twentytwenty-container {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  z-index: 0;
+  overflow: hidden;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none; }
+  .twentytwenty-container img {
+    max-width: 100%;
+    position: absolute;
+    top: 0;
+    display: block; }
+  .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
+    background: rgba(0, 0, 0, 0); }
+    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
+    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
+    .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
+      opacity: 0; }
+  .twentytwenty-container * {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box; }
+
+.twentytwenty-before-label {
+  opacity: 0; }
+  .twentytwenty-before-label:before {
+    content: attr(data-content); }
+
+.twentytwenty-after-label {
+  opacity: 0; }
+  .twentytwenty-after-label:before {
+    content: attr(data-content); }
+
+.twentytwenty-horizontal .twentytwenty-before-label:before {
+  left: 10px; }
+
+.twentytwenty-horizontal .twentytwenty-after-label:before {
+  right: 10px; }
+
+.twentytwenty-vertical .twentytwenty-before-label:before {
+  top: 10px; }
+
+.twentytwenty-vertical .twentytwenty-after-label:before {
+  bottom: 10px; }
+
+.twentytwenty-overlay {
+  -webkit-transition-property: background;
+  -moz-transition-property: background;
+  transition-property: background;
+  background: rgba(0, 0, 0, 0);
+  z-index: 25; }
+  .twentytwenty-overlay:hover {
+    background: rgba(0, 0, 0, 0.5); }
+    .twentytwenty-overlay:hover .twentytwenty-after-label {
+      opacity: 1; }
+    .twentytwenty-overlay:hover .twentytwenty-before-label {
+      opacity: 1; }
+
+.twentytwenty-before {
+  z-index: 20; }
+
+.twentytwenty-after {
+  z-index: 10; }
+
+.twentytwenty-handle {
+  height: 38px;
+  width: 38px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -22px;
+  margin-top: -22px;
+  border: 3px solid white;
+  -webkit-border-radius: 1000px;
+  -moz-border-radius: 1000px;
+  border-radius: 1000px;
+  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  z-index: 40;
+  cursor: pointer; }
+
+.twentytwenty-horizontal .twentytwenty-handle:before {
+  bottom: 50%;
+  margin-bottom: 22px;
+  -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+.twentytwenty-horizontal .twentytwenty-handle:after {
+  top: 50%;
+  margin-top: 22px;
+  -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-vertical .twentytwenty-handle:before {
+  left: 50%;
+  margin-left: 22px;
+  -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+.twentytwenty-vertical .twentytwenty-handle:after {
+  right: 50%;
+  margin-right: 22px;
+  -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-left-arrow {
+  border-right: 6px solid white;
+  left: 50%;
+  margin-left: -17px; }
+
+.twentytwenty-right-arrow {
+  border-left: 6px solid white;
+  right: 50%;
+  margin-right: -17px; }
+
+.twentytwenty-up-arrow {
+  border-bottom: 6px solid white;
+  top: 50%;
+  margin-top: -17px; }
+
+.twentytwenty-down-arrow {
+  border-top: 6px solid white;
+  bottom: 50%;
+  margin-bottom: -17px; }
--- a/website/showcase/slider-split-views/index.gml
+++ b/website/showcase/slider-split-views/index.gml
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Split views in Aladin Lite</title>
+    <link href="css/twentytwenty.css" rel="stylesheet" type="text/css" />
+    <link rel="stylesheet" href="css/pure-min.css">
+    <link rel="stylesheet" href="css/grids-responsive-min.css">
+
+
+    <link rel="stylesheet" href="//aladin.u-strasbg.fr/AladinLite/api/v2/beta/aladin.min.css" />
+    <link rel="stylesheet" href="css/app.css">
+
+    <&CDS.headStuff2>
+
+  </head>
+
+  <body>
+
+    <div class="pure-g">
+      <div class="pure-u-1-3"></div>
+      <div class="pure-u-1-3"><h2>Split views with slider</h2></div>
+      <h4 class="pure-u-1-3">Drag the slider to compare the two selected HiPS.<br/></h4>
+    </div>
+
+
+    <div class="twentytwenty-container">
+        <div id="al1" class="aladin"></div>
+        <div id="al2" class="aladin"></div>
+    </div>
+
+
+    <script
+  src="https://code.jquery.com/jquery-3.2.1.js"
+  crossorigin="anonymous"></script>
+    <script src="js/jquery.event.move.js"></script>
+    <script src="js/jquery.twentytwenty.js"></script>
+    <script type="text/javascript" src="//aladin.u-strasbg.fr/AladinLite/api/v2/beta/aladin.min.js" charset="utf-8"></script>
+
+  <script src="js/app.js"></script>
+
+  <&CDS.piwikStats "aladin">
+
+  </body>
+</html>
--- a/website/showcase/slider-split-views/js/app.js
+++ b/website/showcase/slider-split-views/js/app.js
@@ -0,0 +1,28 @@
+var a1 = A.aladin('#al1', {fov: 0.4, cooFrame: 'equatorial', realFullscreen: true, target: '13 29 52.7 +47 11 42.93', survey: 'P/SDSS9/color'});
+a1.setFovRange(0.01, 175);
+//a1.gotoRaDec(297.87, 25.96);
+var a2 = A.aladin('#al2', {fov: 0.4, cooFrame: 'equatorial', realFullscreen: true, target: '13 29 52.7 +47 11 42.93', survey: 'P/PanSTARRS/DR1/color-z-zg-g', showFrameControl: false, showFullscreenControl: false, showGotoControl: false});
+a2.setFovRange(0.01, 175);
+
+View.CALLBACKS_THROTTLE_TIME = 30;
+a1.on('positionChanged', function(params) {
+    a2.gotoRaDec(params.ra, params.dec);
+});
+a2.on('positionChanged', function(params) {
+    a1.gotoRaDec(params.ra, params.dec);
+});
+a1.on('zoomChanged', function(fov) {
+if (Math.abs(a2.getFov()[0] - fov) / fov > 0.01) {
+        a2.setFoV(fov);
+    }
+});
+a2.on('zoomChanged', function(fov) {
+    if (Math.abs(a1.getFov()[0] - fov) / fov > 0.01) {
+        a1.setFoV(fov);
+    }
+});
+setTimeout(function() {
+    $(".twentytwenty-container").twentytwenty({default_offset_pct: 0.5, no_overlay: true});
+}, 300);
+
+
--- a/website/showcase/slider-split-views/js/jquery.event.move.js
+++ b/website/showcase/slider-split-views/js/jquery.event.move.js
@@ -0,0 +1,599 @@
+// DOM.event.move
+//
+// 2.0.0
+//
+// Stephen Band
+//
+// Triggers 'movestart', 'move' and 'moveend' events after
+// mousemoves following a mousedown cross a distance threshold,
+// similar to the native 'dragstart', 'drag' and 'dragend' events.
+// Move events are throttled to animation frames. Move event objects
+// have the properties:
+//
+// pageX:
+// pageY:     Page coordinates of pointer.
+// startX:
+// startY:    Page coordinates of pointer at movestart.
+// distX:
+// distY:     Distance the pointer has moved since movestart.
+// deltaX:
+// deltaY:    Distance the finger has moved since last event.
+// velocityX:
+// velocityY: Average velocity over last few events.
+
+
+(function(fn) {
+	if (typeof define === 'function' && define.amd) {
+        define([], fn);
+    } else if ((typeof module !== "undefined" && module !== null) && module.exports) {
+        module.exports = fn;
+	} else {
+		fn();
+	}
+})(function(){
+	var assign = Object.assign || window.jQuery && jQuery.extend;
+
+	// Number of pixels a pressed pointer travels before movestart
+	// event is fired.
+	var threshold = 8;
+
+	// Shim for requestAnimationFrame, falling back to timer. See:
+	// see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+	var requestFrame = (function(){
+		return (
+			window.requestAnimationFrame ||
+			window.webkitRequestAnimationFrame ||
+			window.mozRequestAnimationFrame ||
+			window.oRequestAnimationFrame ||
+			window.msRequestAnimationFrame ||
+			function(fn, element){
+				return window.setTimeout(function(){
+					fn();
+				}, 25);
+			}
+		);
+	})();
+	
+	// Shim for customEvent
+	// see https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
+	(function () {
+		if ( typeof window.CustomEvent === "function" ) return false;
+		function CustomEvent ( event, params ) {
+			params = params || { bubbles: false, cancelable: false, detail: undefined };
+			var evt = document.createEvent( 'CustomEvent' );
+			evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+			return evt;
+		}
+		
+		CustomEvent.prototype = window.Event.prototype;
+		window.CustomEvent = CustomEvent;
+	})();
+
+	var ignoreTags = {
+			textarea: true,
+			input: true,
+			select: true,
+			button: true
+		};
+
+	var mouseevents = {
+		move:   'mousemove',
+		cancel: 'mouseup dragstart',
+		end:    'mouseup'
+	};
+
+	var touchevents = {
+		move:   'touchmove',
+		cancel: 'touchend',
+		end:    'touchend'
+	};
+
+	var rspaces = /\s+/;
+
+
+	// DOM Events
+
+	var eventOptions = { bubbles: true, cancelable: true };
+
+	var eventsSymbol = typeof Symbol === "function" ? Symbol('events') : {};
+
+	function createEvent(type) {
+		return new CustomEvent(type, eventOptions);
+	}
+
+	function getEvents(node) {
+		return node[eventsSymbol] || (node[eventsSymbol] = {});
+	}
+
+	function on(node, types, fn, data, selector) {
+		types = types.split(rspaces);
+
+		var events = getEvents(node);
+		var i = types.length;
+		var handlers, type;
+
+		function handler(e) { fn(e, data); }
+
+		while (i--) {
+			type = types[i];
+			handlers = events[type] || (events[type] = []);
+			handlers.push([fn, handler]);
+			node.addEventListener(type, handler);
+		}
+	}
+
+	function off(node, types, fn, selector) {
+		types = types.split(rspaces);
+
+		var events = getEvents(node);
+		var i = types.length;
+		var type, handlers, k;
+
+		if (!events) { return; }
+
+		while (i--) {
+			type = types[i];
+			handlers = events[type];
+			if (!handlers) { continue; }
+			k = handlers.length;
+			while (k--) {
+				if (handlers[k][0] === fn) {
+					node.removeEventListener(type, handlers[k][1]);
+					handlers.splice(k, 1);
+				}
+			}
+		}
+	}
+
+	function trigger(node, type, properties) {
+		// Don't cache events. It prevents you from triggering an event of a
+		// given type from inside the handler of another event of that type.
+		var event = createEvent(type);
+		if (properties) { assign(event, properties); }
+		node.dispatchEvent(event);
+	}
+
+
+	// Constructors
+
+	function Timer(fn){
+		var callback = fn,
+		    active = false,
+		    running = false;
+
+		function trigger(time) {
+			if (active){
+				callback();
+				requestFrame(trigger);
+				running = true;
+				active = false;
+			}
+			else {
+				running = false;
+			}
+		}
+
+		this.kick = function(fn) {
+			active = true;
+			if (!running) { trigger(); }
+		};
+
+		this.end = function(fn) {
+			var cb = callback;
+
+			if (!fn) { return; }
+
+			// If the timer is not running, simply call the end callback.
+			if (!running) {
+				fn();
+			}
+			// If the timer is running, and has been kicked lately, then
+			// queue up the current callback and the end callback, otherwise
+			// just the end callback.
+			else {
+				callback = active ?
+					function(){ cb(); fn(); } :
+					fn ;
+
+				active = true;
+			}
+		};
+	}
+
+
+	// Functions
+
+	function noop() {}
+
+	function preventDefault(e) {
+		e.preventDefault();
+	}
+
+	function isIgnoreTag(e) {
+		return !!ignoreTags[e.target.tagName.toLowerCase()];
+	}
+
+	function isPrimaryButton(e) {
+		// Ignore mousedowns on any button other than the left (or primary)
+		// mouse button, or when a modifier key is pressed.
+		return (e.which === 1 && !e.ctrlKey && !e.altKey);
+	}
+
+	function identifiedTouch(touchList, id) {
+		var i, l;
+
+		if (touchList.identifiedTouch) {
+			return touchList.identifiedTouch(id);
+		}
+
+		// touchList.identifiedTouch() does not exist in
+		// webkit yet… we must do the search ourselves...
+
+		i = -1;
+		l = touchList.length;
+
+		while (++i < l) {
+			if (touchList[i].identifier === id) {
+				return touchList[i];
+			}
+		}
+	}
+
+	function changedTouch(e, data) {
+		var touch = identifiedTouch(e.changedTouches, data.identifier);
+
+		// This isn't the touch you're looking for.
+		if (!touch) { return; }
+
+		// Chrome Android (at least) includes touches that have not
+		// changed in e.changedTouches. That's a bit annoying. Check
+		// that this touch has changed.
+		if (touch.pageX === data.pageX && touch.pageY === data.pageY) { return; }
+
+		return touch;
+	}
+
+
+	// Handlers that decide when the first movestart is triggered
+
+	function mousedown(e){
+		// Ignore non-primary buttons
+		if (!isPrimaryButton(e)) { return; }
+
+		// Ignore form and interactive elements
+		if (isIgnoreTag(e)) { return; }
+
+		on(document, mouseevents.move, mousemove, e);
+		on(document, mouseevents.cancel, mouseend, e);
+	}
+
+	function mousemove(e, data){
+		checkThreshold(e, data, e, removeMouse);
+	}
+
+	function mouseend(e, data) {
+		removeMouse();
+	}
+
+	function removeMouse() {
+		off(document, mouseevents.move, mousemove);
+		off(document, mouseevents.cancel, mouseend);
+	}
+
+	function touchstart(e) {
+		// Don't get in the way of interaction with form elements
+		if (ignoreTags[e.target.tagName.toLowerCase()]) { return; }
+
+		var touch = e.changedTouches[0];
+
+		// iOS live updates the touch objects whereas Android gives us copies.
+		// That means we can't trust the touchstart object to stay the same,
+		// so we must copy the data. This object acts as a template for
+		// movestart, move and moveend event objects.
+		var data = {
+			target:     touch.target,
+			pageX:      touch.pageX,
+			pageY:      touch.pageY,
+			identifier: touch.identifier,
+
+			// The only way to make handlers individually unbindable is by
+			// making them unique.
+			touchmove:  function(e, data) { touchmove(e, data); },
+			touchend:   function(e, data) { touchend(e, data); }
+		};
+
+		on(document, touchevents.move, data.touchmove, data);
+		on(document, touchevents.cancel, data.touchend, data);
+	}
+
+	function touchmove(e, data) {
+		var touch = changedTouch(e, data);
+		if (!touch) { return; }
+		checkThreshold(e, data, touch, removeTouch);
+	}
+
+	function touchend(e, data) {
+		var touch = identifiedTouch(e.changedTouches, data.identifier);
+		if (!touch) { return; }
+		removeTouch(data);
+	}
+
+	function removeTouch(data) {
+		off(document, touchevents.move, data.touchmove);
+		off(document, touchevents.cancel, data.touchend);
+	}
+
+	function checkThreshold(e, data, touch, fn) {
+		var distX = touch.pageX - data.pageX;
+		var distY = touch.pageY - data.pageY;
+
+		// Do nothing if the threshold has not been crossed.
+		if ((distX * distX) + (distY * distY) < (threshold * threshold)) { return; }
+
+		triggerStart(e, data, touch, distX, distY, fn);
+	}
+
+	function triggerStart(e, data, touch, distX, distY, fn) {
+		var touches = e.targetTouches;
+		var time = e.timeStamp - data.timeStamp;
+
+		// Create a movestart object with some special properties that
+		// are passed only to the movestart handlers.
+		var template = {
+			altKey:     e.altKey,
+			ctrlKey:    e.ctrlKey,
+			shiftKey:   e.shiftKey,
+			startX:     data.pageX,
+			startY:     data.pageY,
+			distX:      distX,
+			distY:      distY,
+			deltaX:     distX,
+			deltaY:     distY,
+			pageX:      touch.pageX,
+			pageY:      touch.pageY,
+			velocityX:  distX / time,
+			velocityY:  distY / time,
+			identifier: data.identifier,
+			targetTouches: touches,
+			finger: touches ? touches.length : 1,
+			enableMove: function() {
+				this.moveEnabled = true;
+				this.enableMove = noop;
+				e.preventDefault();
+			}
+		};
+
+		// Trigger the movestart event.
+		trigger(data.target, 'movestart', template);
+
+		// Unbind handlers that tracked the touch or mouse up till now.
+		fn(data);
+	}
+
+
+	// Handlers that control what happens following a movestart
+
+	function activeMousemove(e, data) {
+		var timer  = data.timer;
+
+		data.touch = e;
+		data.timeStamp = e.timeStamp;
+		timer.kick();
+	}
+
+	function activeMouseend(e, data) {
+		var target = data.target;
+		var event  = data.event;
+		var timer  = data.timer;
+
+		removeActiveMouse();
+
+		endEvent(target, event, timer, function() {
+			// Unbind the click suppressor, waiting until after mouseup
+			// has been handled.
+			setTimeout(function(){
+				off(target, 'click', preventDefault);
+			}, 0);
+		});
+	}
+
+	function removeActiveMouse() {
+		off(document, mouseevents.move, activeMousemove);
+		off(document, mouseevents.end, activeMouseend);
+	}
+
+	function activeTouchmove(e, data) {
+		var event = data.event;
+		var timer = data.timer;
+		var touch = changedTouch(e, event);
+
+		if (!touch) { return; }
+
+		// Stop the interface from gesturing
+		e.preventDefault();
+
+		event.targetTouches = e.targetTouches;
+		data.touch = touch;
+		data.timeStamp = e.timeStamp;
+
+		timer.kick();
+	}
+
+	function activeTouchend(e, data) {
+		var target = data.target;
+		var event  = data.event;
+		var timer  = data.timer;
+		var touch  = identifiedTouch(e.changedTouches, event.identifier);
+
+		// This isn't the touch you're looking for.
+		if (!touch) { return; }
+
+		removeActiveTouch(data);
+		endEvent(target, event, timer);
+	}
+
+	function removeActiveTouch(data) {
+		off(document, touchevents.move, data.activeTouchmove);
+		off(document, touchevents.end, data.activeTouchend);
+	}
+
+
+	// Logic for triggering move and moveend events
+
+	function updateEvent(event, touch, timeStamp) {
+		var time = timeStamp - event.timeStamp;
+
+		event.distX =  touch.pageX - event.startX;
+		event.distY =  touch.pageY - event.startY;
+		event.deltaX = touch.pageX - event.pageX;
+		event.deltaY = touch.pageY - event.pageY;
+
+		// Average the velocity of the last few events using a decay
+		// curve to even out spurious jumps in values.
+		event.velocityX = 0.3 * event.velocityX + 0.7 * event.deltaX / time;
+		event.velocityY = 0.3 * event.velocityY + 0.7 * event.deltaY / time;
+		event.pageX =  touch.pageX;
+		event.pageY =  touch.pageY;
+	}
+
+	function endEvent(target, event, timer, fn) {
+		timer.end(function(){
+			trigger(target, 'moveend', event);
+			return fn && fn();
+		});
+	}
+
+
+	// Set up the DOM
+
+	function movestart(e) {
+		if (e.defaultPrevented) { return; }
+		if (!e.moveEnabled) { return; }
+
+		var event = {
+			startX:        e.startX,
+			startY:        e.startY,
+			pageX:         e.pageX,
+			pageY:         e.pageY,
+			distX:         e.distX,
+			distY:         e.distY,
+			deltaX:        e.deltaX,
+			deltaY:        e.deltaY,
+			velocityX:     e.velocityX,
+			velocityY:     e.velocityY,
+			identifier:    e.identifier,
+			targetTouches: e.targetTouches,
+			finger:        e.finger
+		};
+
+		var data = {
+			target:    e.target,
+			event:     event,
+			timer:     new Timer(update),
+			touch:     undefined,
+			timeStamp: e.timeStamp
+		};
+
+		function update(time) {
+			updateEvent(event, data.touch, data.timeStamp);
+			trigger(data.target, 'move', event);
+		}
+
+		if (e.identifier === undefined) {
+			// We're dealing with a mouse event.
+			// Stop clicks from propagating during a move
+			on(e.target, 'click', preventDefault);
+			on(document, mouseevents.move, activeMousemove, data);
+			on(document, mouseevents.end, activeMouseend, data);
+		}
+		else {
+			// In order to unbind correct handlers they have to be unique
+			data.activeTouchmove = function(e, data) { activeTouchmove(e, data); };
+			data.activeTouchend = function(e, data) { activeTouchend(e, data); };
+
+			// We're dealing with a touch.
+			on(document, touchevents.move, data.activeTouchmove, data);
+			on(document, touchevents.end, data.activeTouchend, data);
+		}
+	}
+
+	on(document, 'mousedown', mousedown);
+	on(document, 'touchstart', touchstart);
+	on(document, 'movestart', movestart);
+
+
+	// jQuery special events
+	//
+	// jQuery event objects are copies of DOM event objects. They need
+	// a little help copying the move properties across.
+
+	if (!window.jQuery) { return; }
+
+	var properties = ("startX startY pageX pageY distX distY deltaX deltaY velocityX velocityY").split(' ');
+
+	function enableMove1(e) { e.enableMove(); }
+	function enableMove2(e) { e.enableMove(); }
+	function enableMove3(e) { e.enableMove(); }
+
+	function add(handleObj) {
+		var handler = handleObj.handler;
+
+		handleObj.handler = function(e) {
+			// Copy move properties across from originalEvent
+			var i = properties.length;
+			var property;
+
+			while(i--) {
+				property = properties[i];
+				e[property] = e.originalEvent[property];
+			}
+
+			handler.apply(this, arguments);
+		};
+	}
+
+	jQuery.event.special.movestart = {
+		setup: function() {
+			// Movestart must be enabled to allow other move events
+			on(this, 'movestart', enableMove1);
+
+			// Do listen to DOM events
+			return false;
+		},
+
+		teardown: function() {
+			off(this, 'movestart', enableMove1);
+			return false;
+		},
+
+		add: add
+	};
+
+	jQuery.event.special.move = {
+		setup: function() {
+			on(this, 'movestart', enableMove2);
+			return false;
+		},
+
+		teardown: function() {
+			off(this, 'movestart', enableMove2);
+			return false;
+		},
+
+		add: add
+	};
+
+	jQuery.event.special.moveend = {
+		setup: function() {
+			on(this, 'movestart', enableMove3);
+			return false;
+		},
+
+		teardown: function() {
+			off(this, 'movestart', enableMove3);
+			return false;
+		},
+
+		add: add
+	};
+});
--- a/website/showcase/slider-split-views/js/jquery.twentytwenty.js
+++ b/website/showcase/slider-split-views/js/jquery.twentytwenty.js
@@ -0,0 +1,152 @@
+(function($){
+
+  $.fn.twentytwenty = function(options) {
+    var options = $.extend({
+      default_offset_pct: 0.5,
+      orientation: 'horizontal',
+      before_label: 'Before',
+      after_label: 'After',
+      no_overlay: false,
+      move_slider_on_hover: false,
+      move_with_handle_only: true,
+      click_to_move: false
+    }, options);
+
+    return this.each(function() {
+
+      var sliderPct = options.default_offset_pct;
+      var container = $(this);
+      var sliderOrientation = options.orientation;
+      var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
+      var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
+
+
+      container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
+      if(!options.no_overlay) {
+        container.append("<div class='twentytwenty-overlay'></div>");
+      }
+      var beforeImg = container.children("div:first"); // CHANGED BY T. BOCH (was find('img:first'))
+      var afterImg = container.children("div:last"); // CHANGED BY T. BOCH
+      container.append("<div class='twentytwenty-handle'></div>");
+      var slider = container.find(".twentytwenty-handle");
+      slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
+      slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
+      container.addClass("twentytwenty-container");
+      beforeImg.addClass("twentytwenty-before");
+      afterImg.addClass("twentytwenty-after");
+
+      var overlay = container.find(".twentytwenty-overlay");
+      overlay.append("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>");
+      overlay.append("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>");
+
+      var calcOffset = function(dimensionPct) {
+        var w = beforeImg.width();
+        var h = beforeImg.height();
+        return {
+          w: w+"px",
+          h: h+"px",
+          cw: (dimensionPct*w)+"px",
+          ch: (dimensionPct*h)+"px"
+        };
+      };
+
+      var adjustContainer = function(offset) {
+      	if (sliderOrientation === 'vertical') {
+          beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
+          afterImg.css("clip", "rect("+offset.ch+","+offset.w+","+offset.h+",0)");
+      	}
+      	else {
+          beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
+          afterImg.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")");
+    	}
+        container.css("height", offset.h);
+      };
+
+      var adjustSlider = function(pct) {
+        var offset = calcOffset(pct);
+        slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
+        adjustContainer(offset);
+      };
+
+      // Return the number specified or the min/max number if it outside the range given.
+      var minMaxNumber = function(num, min, max) {
+        return Math.max(min, Math.min(max, num));
+      };
+
+      // Calculate the slider percentage based on the position.
+      var getSliderPercentage = function(positionX, positionY) {
+        var sliderPercentage = (sliderOrientation === 'vertical') ?
+          (positionY-offsetY)/imgHeight :
+          (positionX-offsetX)/imgWidth;
+
+        return minMaxNumber(sliderPercentage, 0, 1);
+      };
+
+
+      $(window).on("resize.twentytwenty", function(e) {
+        adjustSlider(sliderPct);
+      });
+
+      var offsetX = 0;
+      var offsetY = 0;
+      var imgWidth = 0;
+      var imgHeight = 0;
+      var onMoveStart = function(e) {
+        if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
+          e.preventDefault();
+        }
+        else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
+          e.preventDefault();
+        }
+        container.addClass("active");
+        offsetX = container.offset().left;
+        offsetY = container.offset().top;
+        imgWidth = beforeImg.width(); 
+        imgHeight = beforeImg.height();          
+      };
+      var onMove = function(e) {
+        if (container.hasClass("active")) {
+          sliderPct = getSliderPercentage(e.pageX, e.pageY);
+          adjustSlider(sliderPct);
+        }
+      };
+      var onMoveEnd = function() {
+          container.removeClass("active");
+      };
+
+      var moveTarget = options.move_with_handle_only ? slider : container;
+      moveTarget.on("movestart",onMoveStart);
+      moveTarget.on("move",onMove);
+      moveTarget.on("moveend",onMoveEnd);
+
+      if (options.move_slider_on_hover) {
+        container.on("mouseenter", onMoveStart);
+        container.on("mousemove", onMove);
+        container.on("mouseleave", onMoveEnd);
+      }
+
+      slider.on("touchmove", function(e) {
+        e.preventDefault();
+      });
+
+      container.find("img").on("mousedown", function(event) {
+        event.preventDefault();
+      });
+
+      if (options.click_to_move) {
+        container.on('click', function(e) {
+          offsetX = container.offset().left;
+          offsetY = container.offset().top;
+          imgWidth = beforeImg.width();
+          imgHeight = beforeImg.height();
+
+          sliderPct = getSliderPercentage(e.pageX, e.pageY);
+          adjustSlider(sliderPct);
+        });
+      }
+
+      $(window).trigger("resize.twentytwenty");
+    });
+  };
+
+})(jQuery);