added comparison among two images

reports/static/reports/css/scldata.css

@@ -19,4 +19,33 @@ body
 
 .submenu{
 	padding-right: 140px !important;
+}
+
+.img-comp-container {
+	position: relative;
+	height: 550px; /*should be the same height as the images*/
+}
+
+.img-comp-img {
+	position: absolute;
+	width: auto;
+	height: auto;
+	overflow:hidden;
+}
+
+.img-comp-img img {
+	display: block;
+	vertical-align: middle;
+}
+
+.img-comp-slider {
+	position: absolute;
+	z-index:9;
+	cursor: ew-resize;
+	/*set the appearance of the slider:*/
+	width: 40px;
+	height: 40px;
+	background-color: #2196F3;
+	opacity: 0.7;
+	border-radius: 50%;
 }
\ No newline at end of file

reports/static/reports/js/reportImg.js

@@ -13,6 +13,9 @@ var reportImg = activePoints[0];
 
 // mostrar imagen al dar click en los puntos
 document.getElementById("myChart").onclick = function (evt) {
+    if (slider != false) {
+        deleteComparisons()
+    }
     stop();
     console.log("on click")
     
@@ -41,6 +44,8 @@ document.getElementById("myChart").onclick = function (evt) {
         });
 
         var imagePoint = activePoints[imageNumber];
+        oldLabel = label.slice(0, 4) + "/" + label.slice(4, 6) + "/" + label.slice(6);
+        document.getElementById("satImageSecond").src = "../../static/reports/tmpImages/repsat_test_dev/" + image_path + label + "_TCI_60m.jpg"
         updateImage(imagePoint);
         //updateImage(firstPoint);
         //alert("{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg");
@@ -56,7 +61,11 @@ function play() {
     $("#stop").show();
     // $(".next").hide();
     // $(".prev").hide();
-    // $("#showImage").addClass('col-lg-offset-1');
+    // $("#showImage").addClass('col-lg-offset-1');    
+    if (slider == false) {
+        document.getElementById("titleMap").innerHTML = oldLabel + " vs " + oldLabel;
+        initComparisons()
+    }
     playImages = setInterval(function () { next(); }, 4000);
 }
 
@@ -119,7 +128,12 @@ function updateImage(imagePoint) {
     label = imagePoint;
     reportImg = imagePoint;
     titleLabel = label.slice(0, 4) + "/" + label.slice(4, 6) + "/" + label.slice(6);
-    document.getElementById("titleMap").innerHTML = titleLabel;
+    if (slider != false) {
+        document.getElementById("titleMap").innerHTML = oldLabel + " vs " + titleLabel;
+    }else{
+        document.getElementById("titleMap").innerHTML = titleLabel;
+    }
+    
     document.getElementById("satImage").src = "../../static/reports/tmpImages/repsat_test_dev/" + image_path + label + "_TCI_60m.jpg"
     
     document.getElementById("scl_saturated").src = "../../static/reports/tmpImages/repsat_test_dev/" + scl_path + label + "_SCL_60m_saturated.png"
@@ -156,4 +170,104 @@ function change(newType) {
     }
 
     myChart = new Chart(ctx, temp);
-};
+};
\ No newline at end of file
+
+let  img, imgWidth=0, slider=false, clicked=0;
+function initComparisons() {
+    $("#showSecondImage").show()
+    setTimeout(function() {
+        img = document.getElementsByClassName("img-comp-overlay")[0];
+        compareImages(img);
+    });
+    // setTimeout(function(){
+    //     img = document.getElementsByClassName("img-comp-overlay")[0];
+    //     compareImages(img);
+    // }, 200);
+}
+
+function compareImages(img) {
+    var  imgHeight;
+    /*get the width and height of the img element*/
+    imgWidth = document.getElementById("showImage").offsetWidth;
+    imgHeight = img.offsetHeight;
+    /*set the width of the img element to 50%:*/
+    img.style.width = ((imgWidth / 2)) + 15 + "px";
+    /*create slider:*/
+    slider = document.createElement("DIV");
+    slider.setAttribute("class", "img-comp-slider col-lg-offset-1 col-md-offset-1 col-xs-offset-2");
+    /*insert slider*/
+    img.parentElement.insertBefore(slider, img);
+    /*position the slider in the middle:*/
+    slider.style.top = (imgHeight / 2) - (slider.offsetHeight / 2) + "px";
+    slider.style.left = ((imgWidth / 2) - (slider.offsetWidth / 2)) + 15 + "px";
+    /*execute a function when the mouse button is pressed:*/
+    slider.addEventListener("mousedown", slideReady);
+    /*and another function when the mouse button is released:*/
+    window.addEventListener("mouseup", slideFinish);
+    /*or touched (for touch screens:*/
+    slider.addEventListener("touchstart", slideReady);
+    /*and released (for touch screens:*/
+    window.addEventListener("touchstop", slideFinish);
+}
+
+function slideReady(e) {
+    /*prevent any other actions that may occur when moving over the image:*/
+    e.preventDefault();
+    /*the slider is now clicked and ready to move:*/
+    clicked = 1;
+    /*execute a function when the slider is moved:*/
+    window.addEventListener("mousemove", slideMove);
+    window.addEventListener("touchmove", slideMove);
+}
+
+function slideFinish() {
+    /*the slider is no longer clicked:*/
+    clicked = 0;
+}
+
+function slideMove(e) {
+    var pos;
+    /*if the slider is no longer clicked, exit this function:*/
+    if (clicked == 0) return false;
+    /*get the cursor's x position:*/
+    pos = getCursorPos(e)
+    /*prevent the slider from being positioned outside the image:*/
+    if (pos < 0) pos = 0;
+    if (pos > imgWidth) pos = imgWidth;
+    /*execute a function that will resize the overlay image according to the cursor:*/
+    slide(pos);
+}
+
+function getCursorPos(e) {
+    var a, x = 0;
+    e = e || window.event;
+    /*get the x positions of the image:*/
+    a = img.getBoundingClientRect();
+    /*calculate the cursor's x coordinate, relative to the image:*/
+    x = e.pageX - a.left;
+    /*consider any page scrolling:*/
+    x = x - window.pageXOffset;
+    return x;
+}
+
+function slide(x) {
+    /*resize the image:*/
+    img.style.width = x + "px";
+    /*position the slider:*/
+    slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
+}
+
+function deleteComparisons(){
+    slider.removeEventListener("mousedown", slideReady);
+    slider.removeEventListener("touchstart", slideReady);
+    window.removeEventListener("mouseup", slideFinish)   ; 
+    window.removeEventListener("touchstop", slideFinish);
+    window.removeEventListener("mousemove", slideMove);
+    window.removeEventListener("touchmove", slideMove);
+    $(".img-comp-slider").remove();
+    $("#showSecondImage").hide()
+    slider= false;
+}
+
+//deleteComparisons();
+//initComparisons();
\ No newline at end of file

reports/templates/L2ASCL_data.html

@@ -186,7 +186,7 @@
                                 </button>
                             </div>
                             <!-- <h3 class="box-title" id="titleMap">{{dafaultLabel}} - {{defaultDataSet}}</h3> -->
-                            <h3 class="box-title" id="titleMap">{{ defaultDataSet }}</h3>
+                            <h3 class="box-title" id="titleMap" style="margin-left: -40px;">{{ defaultDataSet }}</h3>
 
                             <div class="box-tools pull-right">
                                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
@@ -197,15 +197,21 @@
                             </div>
                         </div>
                         <div class="box-body">
-                            <div class="row">
+                            <div class="row img-comp-container">
                                 <div class="col-lg-1 col-md-1 col-xs-1 prev" style="display: none">
                                     <i class="glyphicon glyphicon-chevron-left" onclick="prev()"></i>
                                 </div>
-                                <div class="col-lg-10 col-md-9 col-xs-10 col-lg-offset-1" id="showImage">
-                                    <img onclick="window.open(this.src)" class="img-responsive" id="satImage"
-                                         width="400"
-                                         height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{ dafaultLabel }}_TCI_60m.jpg"
-                                         style="margin-left: auto; margin-right: auto; display: block;">
+                                <div class="col-lg-10 col-md-9 col-xs-10 col-lg-offset-1 col-md-offset-1 col-xs-offset-2 img-comp-img" id="showImage" style="padding: 0px 0px 0px 30px;">
+                                    <!-- <img onclick="window.open(this.src)" id="satImage" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{ dafaultLabel }}_TCI_60m.jpg"
+                                         style="margin-left: auto; margin-right: auto; display: block;"> -->
+                                    <img onclick="window.open(this.src)" width="375" id="satImage" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{ dafaultLabel }}_TCI_60m.jpg"
+                                    style="margin-left: auto; margin-right: auto; display: block;">
+                                </div>
+                                <div class="col-lg-10 col-md-9 col-xs-10 col-lg-offset-1 col-md-offset-1 col-xs-offset-2 img-comp-img img-comp-overlay" id="showSecondImage" style="padding: 0px 0px 0px 30px; display: none">
+                                    <!-- <img onclick="window.open(this.src)" id="satImage" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{ dafaultLabel }}_TCI_60m.jpg"
+                                        style="margin-left: auto; margin-right: auto; display: block;"> -->
+                                    <img onclick="window.open(this.src)" width="375" id="satImageSecond" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{ dafaultLabel }}_TCI_60m.jpg"
+                                    style="margin-left: auto; margin-right: auto; display: block;">
                                 </div>
                                 <div class="col-lg-1 col-md-1 col-xs-1 next" style="display: none">
                                     <i class="glyphicon glyphicon-chevron-right" onclick="next()"></i>
@@ -396,6 +402,7 @@
             let startDate = "{{ startDate }}";
             let endDate = "{{ endDate }}";
             let clouds= "{{ clouds }}";
+            let oldLabel = "{{defaultDataSet}}";
             var config = {{graphData}}
                 config.options = {
                     responsive: true,