new view in images of reports

parent 669564ce
...@@ -26,11 +26,36 @@ body ...@@ -26,11 +26,36 @@ body
height: 550px; /*should be the same height as the images*/ height: 550px; /*should be the same height as the images*/
} }
.listImg{
z-index: 4;
}
.listImg ul{
list-style: none;
padding: 0px;
margin: 0px;
cursor: pointer;
}
.listImg ul li:hover{
background: #87CEFA;
}
.listImg ul .active{
color:red
}
.list {
max-height: 220px;
overflow: auto;
}
.img-comp-img { .img-comp-img {
position: absolute; position: absolute;
width: auto; width: auto;
height: auto; height: auto;
overflow:hidden; overflow:hidden;
z-index: 2;
} }
.img-comp-img img { .img-comp-img img {
......
...@@ -13,9 +13,6 @@ var reportImg = activePoints[0]; ...@@ -13,9 +13,6 @@ var reportImg = activePoints[0];
// mostrar imagen al dar click en los puntos // mostrar imagen al dar click en los puntos
document.getElementById("myChart").onclick = function (evt) { document.getElementById("myChart").onclick = function (evt) {
if (slider != false) {
deleteComparisons()
}
stop(); stop();
console.log("on click") console.log("on click")
...@@ -44,8 +41,6 @@ document.getElementById("myChart").onclick = function (evt) { ...@@ -44,8 +41,6 @@ document.getElementById("myChart").onclick = function (evt) {
}); });
var imagePoint = activePoints[imageNumber]; 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(imagePoint);
//updateImage(firstPoint); //updateImage(firstPoint);
//alert("{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg"); //alert("{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg");
...@@ -62,10 +57,6 @@ function play() { ...@@ -62,10 +57,6 @@ function play() {
// $(".next").hide(); // $(".next").hide();
// $(".prev").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); playImages = setInterval(function () { next(); }, 4000);
} }
...@@ -128,11 +119,8 @@ function updateImage(imagePoint) { ...@@ -128,11 +119,8 @@ function updateImage(imagePoint) {
label = imagePoint; label = imagePoint;
reportImg = imagePoint; reportImg = imagePoint;
titleLabel = label.slice(0, 4) + "/" + label.slice(4, 6) + "/" + label.slice(6); titleLabel = label.slice(0, 4) + "/" + label.slice(4, 6) + "/" + label.slice(6);
if (slider != false) { document.getElementById("titleMap").innerHTML = titleLabel;
document.getElementById("titleMap").innerHTML = oldLabel + " vs " + titleLabel; document.getElementById("titleSCL").innerHTML = 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("satImage").src = "../../static/reports/tmpImages/repsat_test_dev/" + image_path + label + "_TCI_60m.jpg"
...@@ -174,11 +162,11 @@ function change(newType) { ...@@ -174,11 +162,11 @@ function change(newType) {
let img, imgWidth=0, slider=false, clicked=0; let img, imgWidth=0, slider=false, clicked=0;
function initComparisons() { function initComparisons() {
$("#showSecondImage").show() // $("#showSecondImage").show()
setTimeout(function() { // setTimeout(function() {
img = document.getElementsByClassName("img-comp-overlay")[0]; img = document.getElementsByClassName("img-comp-overlay")[0];
compareImages(img); compareImages(img);
}); //});
// setTimeout(function(){ // setTimeout(function(){
// img = document.getElementsByClassName("img-comp-overlay")[0]; // img = document.getElementsByClassName("img-comp-overlay")[0];
// compareImages(img); // compareImages(img);
...@@ -194,7 +182,7 @@ function compareImages(img) { ...@@ -194,7 +182,7 @@ function compareImages(img) {
img.style.width = ((imgWidth / 2)) + 15 + "px"; img.style.width = ((imgWidth / 2)) + 15 + "px";
/*create slider:*/ /*create slider:*/
slider = document.createElement("DIV"); slider = document.createElement("DIV");
slider.setAttribute("class", "img-comp-slider col-lg-offset-1 col-md-offset-1 col-xs-offset-2"); slider.setAttribute("class", "img-comp-slider col-lg-offset-2 col-md-offset-2 col-xs-offset-2");
/*insert slider*/ /*insert slider*/
img.parentElement.insertBefore(slider, img); img.parentElement.insertBefore(slider, img);
/*position the slider in the middle:*/ /*position the slider in the middle:*/
...@@ -265,9 +253,44 @@ function deleteComparisons(){ ...@@ -265,9 +253,44 @@ function deleteComparisons(){
window.removeEventListener("mousemove", slideMove); window.removeEventListener("mousemove", slideMove);
window.removeEventListener("touchmove", slideMove); window.removeEventListener("touchmove", slideMove);
$(".img-comp-slider").remove(); $(".img-comp-slider").remove();
$("#showSecondImage").hide()
slider= false; slider= false;
} }
//deleteComparisons(); //deleteComparisons();
//initComparisons(); //initComparisons();
\ No newline at end of file
function selectImage1(date, element) {
$("#imageListFirst li").removeClass("active");
element.classList.add("active");
let label = date.toString();
label = label.slice(0, 4) + "/" + label.slice(4, 6) + "/" + label.slice(6);
document.getElementById("titleImageFirst").innerHTML = label;
document.getElementById("satImageFirst").src = "../../static/reports/tmpImages/repsat_test_dev/" + image_path + date + "_TCI_60m.jpg"
}
function selectImage2(date,element) {
$("#imageListSecond li").removeClass("active");
element.classList.add("active");
let label = date.toString();
label = label.slice(0, 4) + "/" + label.slice(4, 6) + "/" + label.slice(6);
document.getElementById("titleImageSecond").innerHTML = label;
document.getElementById("satImageSecond").src = "../../static/reports/tmpImages/repsat_test_dev/" + image_path + date + "_TCI_60m.jpg"
}
$('.nav-tabs a').on('shown.bs.tab', function (evt) {
let tab = $(evt.target).text();
if(tab == "Comparison"){
initComparisons()
}
});
$('.nav-tabs a').on('hide.bs.tab', function (evt) {
let tab = $(evt.target).text();
if (tab == "Comparison") {
deleteComparisons();
}
if (tab == "Images") {
stop();
}
});
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
</div> </div>
<div class="box-body"> <div class="box-body">
<div id="openchart" class="chart"> <div id="openchart" class="chart">
<canvas id="myChart" style="height: 574px"></canvas> <canvas id="myChart" style="height: 594px"></canvas>
</div> </div>
</div> </div>
<!-- /.box-body --> <!-- /.box-body -->
...@@ -171,128 +171,165 @@ ...@@ -171,128 +171,165 @@
</div> </div>
<!-- /.col (LEFT) --> <!-- /.col (LEFT) -->
<div class="col-md-4"> <div class="col-md-4">
<div class="nav-tabs-custom" id="tabs">
<!-- ****************** Imagen satelital --> <ul class="nav nav-tabs">
<div class="box box-danger"> <li class="active"><a href="#images" data-toggle="tab">Images</a></li>
<div class="box-header with-border"> <li><a href="#compared" data-toggle="tab">Comparison</a></li>
<div class="pull-left"> <li><a href="#classification" data-toggle="tab">SCL</a></li>
<button type="button" id="play" class="btn btn-block btn-primary btn-xs" style="" <li><a href="#map" data-toggle="tab">Map</a></li>
onclick="play()"> </ul>
<i class="fa fa-play"></i> Play <div class="tab-content" style="padding: 0px">
</button> <div class="tab-pane active" id="images">
<button type="button" id="stop" class="btn btn-block btn-primary btn-xs" <div class="box box-danger">
style="display: none; margin: 0px;" onclick="stop()"> <div class="box-header" style="text-align: center">
<i class="fa fa-stop"></i> Stop <div class="pull-left">
</button> <button type="button" id="play" class="btn btn-block btn-primary btn-xs" style="" onclick="play()">
</div> <i class="fa fa-play"></i> Play
<!-- <h3 class="box-title" id="titleMap">{{dafaultLabel}} - {{defaultDataSet}}</h3> --> </button>
<h3 class="box-title" id="titleMap" style="margin-left: -40px;">{{ defaultDataSet }}</h3> <button type="button" id="stop" class="btn btn-block btn-primary btn-xs" style="display: none; margin: 0px;"
onclick="stop()">
<div class="box-tools pull-right"> <i class="fa fa-stop"></i> Stop
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i </button>
class="fa fa-minus"></i> </div>
</button> <h3 class="box-title" id="titleMap" style="margin-left: -40px;">{{ defaultDataSet }}</h3>
<!-- <button type="button" class="btn btn-box-tool" data-widget="remove" onclick="stop()"><i </div>
class="fa fa-times"></i></button> --> <div class="box-body">
</div> <div class="row img-comp-container">
</div> <div class="col-lg-10 col-md-9 col-xs-10 col-lg-offset-1 col-md-offset-1 col-xs-offset-2"
<div class="box-body"> style="padding: 0px 0px 0px 42px;">
<div class="row img-comp-container"> <img onclick="window.open(this.src)" width="375" id="satImage" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{ dafaultLabel }}_TCI_60m.jpg"
<div class="col-lg-1 col-md-1 col-xs-1 prev" style="display: none"> style="margin-left: auto; margin-right: auto; display: block;">
<i class="glyphicon glyphicon-chevron-left" onclick="prev()"></i> </div>
</div>
</div>
<!-- /.box-body -->
</div> </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" id="showImage" style="padding: 0px 0px 0px 30px;"> </div>
<!-- <img onclick="window.open(this.src)" id="satImage" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{ dafaultLabel }}_TCI_60m.jpg" <!-- /.tab-pane -->
style="margin-left: auto; margin-right: auto; display: block;"> --> <div class="tab-pane" id="compared">
<img onclick="window.open(this.src)" width="375" id="satImage" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{ dafaultLabel }}_TCI_60m.jpg" <div class="box box-danger">
style="margin-left: auto; margin-right: auto; display: block;"> <div class="box-header" style="text-align: center">
</div> <h3 class="box-title" id="titleImageFirst">{{ defaultDataSet }}</h3>
<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"> <h3 class="box-title"> vs </h3>
<!-- <img onclick="window.open(this.src)" id="satImage" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{ dafaultLabel }}_TCI_60m.jpg" <h3 class="box-title" id="titleImageSecond">{{ defaultDataSet }}</h3>
style="margin-left: auto; margin-right: auto; display: block;"> --> </div>
<img onclick="window.open(this.src)" width="375" id="satImageSecond" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{ dafaultLabel }}_TCI_60m.jpg" <div class="box-body">
style="margin-left: auto; margin-right: auto; display: block;"> <div class="row img-comp-container">
</div> <div class="col-lg-3 col-md-2 col-xs-2 listImg">
<div class="col-lg-1 col-md-1 col-xs-1 next" style="display: none"> <label>Image 1</label>
<i class="glyphicon glyphicon-chevron-right" onclick="next()"></i> <div class="list">
<ul id="imageListFirst">
{% for label in labels %}
{% if label == labels.0 %}
<li class="active" onclick="selectImage1({{label}}, this)">{{ label }}</li>
{% else %}
<li onclick="selectImage1({{label}}, this)">{{ label }}</li>
{% endif %}
{% endfor %}
</ul>
</div>
<label>Image 2</label>
<div class="list">
<ul id="imageListSecond">
{% for label in labels %}
{% if label == labels.1 %}
<li class="active" onclick="selectImage2({{label}}, this)">{{ label }}</li>
{% else %}
<li onclick="selectImage2({{label}}, this)">{{ label }}</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
<div class="col-lg-10 col-md-9 col-xs-10 col-lg-offset-2 col-md-offset-1 col-xs-offset-2 img-comp-img" id="showImage"
style="padding: 0px 0px 0px 42px;">
<img onclick="window.open(this.src)" width="375" id="satImageSecond" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{labels.1}}_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-2 col-md-offset-1 col-xs-offset-2 img-comp-img img-comp-overlay"
id="showSecondImage" style="padding: 0px 0px 0px 42px;"">
<img onclick="window.open(this.src)" width="375" id="satImageFirst" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{labels.0}}_TCI_60m.jpg"
style="margin-left: auto; margin-right: auto; display: block;">
</div>
</div>
</div>
<!-- /.box-body -->
</div> </div>
</div> </div>
</div> <!-- /.tab-pane -->
<!-- /.box-body --> <div class="tab-pane" id="classification">
</div> <div class="box box-danger">
<!-- *********************** FIN imagen satelital ******************--> <div class="box-header" style="text-align: center">
<!-- ************************ SCL **********************--> <h3 class="box-title" >Scene Classification Map - </h3>
<div class="box box-danger"> <h3 class="box-title" id="titleSCL">{{ defaultDataSet }}</h3>
<div class="box-header with-border">
<h3 class="box-title" id="titleMap">Scene Classification Map - {{ defaultDataSet }}</h3>
<div class="box-tools pull-right"> <!-- <div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i> class="fa fa-minus"></i>
</button> </button>
</div> -->
</div>
<div class="box-body">
<div class="row">
<div class="col-lg-10 col-md-9 col-xs-10 col-lg-offset-1" id="showImageSCL" style="position: relative; height: 550px; padding: 0px 0px 0px 42px;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_saturated"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_saturated.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_shadows"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_shadows.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_cloud_shadows"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_cloud_shadows.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_vegetation"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_vegetation.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_not-vegetated"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_not-vegetated.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_water"
width="400px"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_water.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_unclassified"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_unclassified.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_cloud_medium_probability"
width="400px"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_cloud_medium_probability.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_cloud_high_probability"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_cloud_high_probability.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_thin_cirrus"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_thin_cirrus.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_snow"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_snow.png"
style="position: absolute; top: 0; z-index:1;">
</div>
</div>
</div>
<!-- /.box-body -->
</div>
</div> </div>
</div> <!-- /.tab-pane -->
<div class="box-body"> <div class="tab-pane" id="map">
<div class="row">
<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="showImageSCL" style="position: relative; height: 580px;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_saturated"
width="400px"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_saturated.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_shadows"
width="400px"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_shadows.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_cloud_shadows"
width="400px"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_cloud_shadows.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_vegetation"
width="400px"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_vegetation.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_not-vegetated"
width="400px"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_not-vegetated.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_water"
width="400px"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_water.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_unclassified"
width="400px"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_unclassified.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_cloud_medium_probability"
width="400px"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_cloud_medium_probability.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_cloud_high_probability"
width="400px"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_cloud_high_probability.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_thin_cirrus"
width="400px"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_thin_cirrus.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_snow"
width="400px"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_snow.png"
style="position: absolute; top: 0; z-index:1;">
</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>
</div>
</div> </div>
<!-- /.tab-pane -->
</div> </div>
<!-- /.box-body --> <!-- /.tab-content -->
</div> </div>
<!-- ****************************** FIN SCL *********************** -->
<!-- /.box -->
</div> </div>
</div> </div>
<!-- /.row --> <!-- /.row -->
......
...@@ -123,7 +123,7 @@ def report_L2ASCL(request, report, purchase_id): ...@@ -123,7 +123,7 @@ def report_L2ASCL(request, report, purchase_id):
"productLevel": dataProduct['productLevel'], "IMAGE_PATH": image_path, "productLevel": dataProduct['productLevel'], "IMAGE_PATH": image_path,
"SCL_PATH": SCL_path, 'dafaultLabel': defaultLabel, "SCL_PATH": SCL_path, 'dafaultLabel': defaultLabel,
'defaultDataSet': defaultDataset, "folders": folders, 'defaultDataSet': defaultDataset, "folders": folders,
"zone": reporteDir, "purchaseID": purchase_id}) "zone": reporteDir, "purchaseID": purchase_id, "labels": graphData['data']['labels']})
# -------------------------------------------------------------------------------def Reports(request): # -------------------------------------------------------------------------------def Reports(request):
......
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