Skip to content

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

new view in images of reports

parent 669564ce
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 137 deletions
reports/static/reports/css/scldata.css
View file @ fda542e3
......@@ -26,11 +26,36 @@ body
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 {
position: absolute;
width: auto;
height: auto;
overflow:hidden;
z-index: 2;
}
.img-comp-img img {
......
reports/static/reports/js/reportImg.js
View file @ fda542e3
......@@ -13,9 +13,6 @@ 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")
......@@ -44,8 +41,6 @@ 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");
......@@ -62,10 +57,6 @@ function play() {
// $(".next").hide();
// $(".prev").hide();
// $("#showImage").addClass('col-lg-offset-1');
if (slider == false) {
document.getElementById("titleMap").innerHTML = oldLabel + " vs " + oldLabel;
initComparisons()
}
playImages = setInterval(function () { next(); }, 4000);
}
......@@ -128,11 +119,8 @@ function updateImage(imagePoint) {
label = imagePoint;
reportImg = imagePoint;
titleLabel = label.slice(0, 4) + "/" + label.slice(4, 6) + "/" + label.slice(6);
if (slider != false) {
document.getElementById("titleMap").innerHTML = oldLabel + " vs " + titleLabel;
}else{
document.getElementById("titleMap").innerHTML = titleLabel;
}
document.getElementById("titleMap").innerHTML = titleLabel;
document.getElementById("titleSCL").innerHTML = titleLabel
document.getElementById("satImage").src = "../../static/reports/tmpImages/repsat_test_dev/" + image_path + label + "_TCI_60m.jpg"
......@@ -174,11 +162,11 @@ function change(newType) {
let img, imgWidth=0, slider=false, clicked=0;
function initComparisons() {
$("#showSecondImage").show()
setTimeout(function() {
// $("#showSecondImage").show()
// setTimeout(function() {
img = document.getElementsByClassName("img-comp-overlay")[0];
compareImages(img);
});
//});
// setTimeout(function(){
// img = document.getElementsByClassName("img-comp-overlay")[0];
// compareImages(img);
......@@ -194,7 +182,7 @@ function compareImages(img) {
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");
slider.setAttribute("class", "img-comp-slider col-lg-offset-2 col-md-offset-2 col-xs-offset-2");
/*insert slider*/
img.parentElement.insertBefore(slider, img);
/*position the slider in the middle:*/
......@@ -265,9 +253,44 @@ function deleteComparisons(){
window.removeEventListener("mousemove", slideMove);
window.removeEventListener("touchmove", slideMove);
$(".img-comp-slider").remove();
$("#showSecondImage").hide()
slider= false;
}
//deleteComparisons();
//initComparisons();
\ No newline at end of file
//initComparisons();
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();
}
});
reports/templates/L2ASCL_data.html
View file @ fda542e3
......@@ -160,7 +160,7 @@
</div>
<div class="box-body">
<div id="openchart" class="chart">
<canvas id="myChart" style="height: 574px"></canvas>
<canvas id="myChart" style="height: 594px"></canvas>
</div>
</div>
<!-- /.box-body -->
......@@ -171,128 +171,165 @@
</div>
<!-- /.col (LEFT) -->
<div class="col-md-4">
<!-- ****************** Imagen satelital -->
<div class="box box-danger">
<div class="box-header with-border">
<div class="pull-left">
<button type="button" id="play" class="btn btn-block btn-primary btn-xs" style=""
onclick="play()">
<i class="fa fa-play"></i> Play
</button>
<button type="button" id="stop" class="btn btn-block btn-primary btn-xs"
style="display: none; margin: 0px;" onclick="stop()">
<i class="fa fa-stop"></i> Stop
</button>
</div>
<!-- <h3 class="box-title" id="titleMap">{{dafaultLabel}} - {{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
class="fa fa-minus"></i>
</button>
<!-- <button type="button" class="btn btn-box-tool" data-widget="remove" onclick="stop()"><i
class="fa fa-times"></i></button> -->
</div>
</div>
<div class="box-body">
<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 class="nav-tabs-custom" id="tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#images" data-toggle="tab">Images</a></li>
<li><a href="#compared" data-toggle="tab">Comparison</a></li>
<li><a href="#classification" data-toggle="tab">SCL</a></li>
<li><a href="#map" data-toggle="tab">Map</a></li>
</ul>
<div class="tab-content" style="padding: 0px">
<div class="tab-pane active" id="images">
<div class="box box-danger">
<div class="box-header" style="text-align: center">
<div class="pull-left">
<button type="button" id="play" class="btn btn-block btn-primary btn-xs" style="" onclick="play()">
<i class="fa fa-play"></i> Play
</button>
<button type="button" id="stop" class="btn btn-block btn-primary btn-xs" style="display: none; margin: 0px;"
onclick="stop()">
<i class="fa fa-stop"></i> Stop
</button>
</div>
<h3 class="box-title" id="titleMap" style="margin-left: -40px;">{{ defaultDataSet }}</h3>
</div>
<div class="box-body">
<div class="row img-comp-container">
<div class="col-lg-10 col-md-9 col-xs-10 col-lg-offset-1 col-md-offset-1 col-xs-offset-2"
style="padding: 0px 0px 0px 42px;">
<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>
</div>
<!-- /.box-body -->
</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;">
<!-- <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>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="compared">
<div class="box box-danger">
<div class="box-header" style="text-align: center">
<h3 class="box-title" id="titleImageFirst">{{ defaultDataSet }}</h3>
<h3 class="box-title"> vs </h3>
<h3 class="box-title" id="titleImageSecond">{{ defaultDataSet }}</h3>
</div>
<div class="box-body">
<div class="row img-comp-container">
<div class="col-lg-3 col-md-2 col-xs-2 listImg">
<label>Image 1</label>
<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>
<!-- /.box-body -->
</div>
<!-- *********************** FIN imagen satelital ******************-->
<!-- ************************ SCL **********************-->
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title" id="titleMap">Scene Classification Map - {{ defaultDataSet }}</h3>
<!-- /.tab-pane -->
<div class="tab-pane" id="classification">
<div class="box box-danger">
<div class="box-header" style="text-align: center">
<h3 class="box-title" >Scene Classification Map - </h3>
<h3 class="box-title" id="titleSCL">{{ defaultDataSet }}</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i>
</button>
<!-- <div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i>
</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 class="box-body">
<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>
<!-- /.tab-pane -->
<div class="tab-pane" id="map">
</div>
<!-- /.tab-pane -->
</div>
<!-- /.box-body -->
</div>
<!-- ****************************** FIN SCL *********************** -->
<!-- /.box -->
<!-- /.tab-content -->
</div>
</div>
</div>
<!-- /.row -->
......
reports/views.py
View file @ fda542e3
......@@ -123,7 +123,7 @@ def report_L2ASCL(request, report, purchase_id):
"productLevel": dataProduct['productLevel'], "IMAGE_PATH": image_path,
"SCL_PATH": SCL_path, 'dafaultLabel': defaultLabel,
'defaultDataSet': defaultDataset, "folders": folders,
"zone": reporteDir, "purchaseID": purchase_id})
"zone": reporteDir, "purchaseID": purchase_id, "labels": graphData['data']['labels']})
# -------------------------------------------------------------------------------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