Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit 1632f2fa authored by Sergio Adrian Gongora Euan's avatar Sergio Adrian Gongora Euan
Browse files
Options

added comparison among two images

parent 167f6112
Hide whitespace changes
Inline Side-by-side
Showing with 160 additions and 10 deletions
reports/static/reports/css/scldata.css
View file @ 1632f2fa
......@@ -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
View file @ 1632f2fa
......@@ -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
View file @ 1632f2fa
......@@ -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,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment