Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit 18b1cb61 authored by Irving David's avatar Irving David
Browse files
Options

Inicia pruebas de desplieque de imágenes SCL

parent c47c0b63
Hide whitespace changes
Inline Side-by-side
Showing with 140 additions and 18 deletions
reports/static/reports/js/reportImg.js
View file @ 18b1cb61
...@@ -10,28 +10,46 @@ var playImages; ...@@ -10,28 +10,46 @@ var playImages;
var reportImg = activePoints[0]; var reportImg = activePoints[0];
//var myChart; //var myChart;
// 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) {
stop(); stop();
console.log("on click")
console.log("evento: ")
console.log(evt)
// activePoints = myChart.getElementsAtEvent(evt); // activePoints = myChart.getElementsAtEvent(evt);
var activePoint = myChart.getElementAtEvent(evt); var activePoint = myChart.getElementAtEvent(evt);
var firstPoint = activePoint[0]; console.log("activePoint: ")
var label = myChart.data.labels[firstPoint._index]; console.log(activePoint)
//if (!firstPoint) return; console.log(activePoint.length)
activePoints.forEach(function (value, index) { if(activePoint.length>0){
//if(value==firstPoint){ console.log("asd")
if (value == label) {
imageNumber = index; var firstPoint = activePoint[0];
} //console.log(firstPoint)
}); //console.log(firstPoint._datasetIndex) //la clase a la que pertenece (vegetación, agua, etc.)
var label = myChart.data.labels[firstPoint._index];
var imagePoint = activePoints[imageNumber]; //console.log(label)
updateImage(imagePoint); //if (!firstPoint) return;
//updateImage(firstPoint); activePoints.forEach(function (value, index) {
//alert("{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg"); //if(value==firstPoint){
//document.getElementById("satImage").src = "{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg"; if (value == label) {
imageNumber = index;
}
});
var imagePoint = activePoints[imageNumber];
updateImage(imagePoint);
//updateImage(firstPoint);
//alert("{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg");
//document.getElementById("satImage").src = "{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg";
}
}; };
function play() { function play() {
$("#play").hide(); $("#play").hide();
$("#stop").show(); $("#stop").show();
...@@ -41,6 +59,23 @@ function play() { ...@@ -41,6 +59,23 @@ function play() {
playImages = setInterval(function () { next(); }, 4000); playImages = setInterval(function () { next(); }, 4000);
} }
//****************************
function scl_on(imagePoint) {
console.log("scl on!!")
label = imagePoint;
//console.log({{SCL_PATH}})
document.getElementById("satImage").src = "../../static/reports/tmpImages/repsat_test_dev/{{SCL_PATH}}" + label + "_SCL_60m_clasificationMap.png"
// $(".next").show();
// $(".prev").show();
}
function scl_stop() {
console.log("scl off!!")
// $(".next").show();
// $(".prev").show();
}
//********************************
function stop() { function stop() {
clearInterval(playImages) clearInterval(playImages)
// $("#showImage").removeClass('col-lg-offset-1'); // $("#showImage").removeClass('col-lg-offset-1');
...@@ -85,6 +120,7 @@ function updateImage(imagePoint) { ...@@ -85,6 +120,7 @@ function updateImage(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);
document.getElementById("titleMap").innerHTML = titleLabel; 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"
document.getElementById("scl_Vegetation").src = "../../static/reports/tmpImages/repsat_test_dev/" + scl_path + label + "_SCL_60m_vegetation.png"
} }
function change(newType) { function change(newType) {
......
reports/templates/L2ASCL_data.html
View file @ 18b1cb61
...@@ -172,7 +172,7 @@ ...@@ -172,7 +172,7 @@
<!-- /.col (LEFT) --> <!-- /.col (LEFT) -->
<div class="col-md-4"> <div class="col-md-4">
<!-- DONUT CHART --> <!-- ****************** Imagen satelital -->
<div class="box box-danger"> <div class="box box-danger">
<div class="box-header with-border"> <div class="box-header with-border">
<div class="pull-left"> <div class="pull-left">
...@@ -214,6 +214,58 @@ ...@@ -214,6 +214,58 @@
</div> </div>
<!-- /.box-body --> <!-- /.box-body -->
</div> </div>
<!-- *********************** FIN imagen satelital ******************-->
<!-- ************************ SCL **********************-->
<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">Scene Classification Map - {{ 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">
<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;">
<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; left: 0; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_image2"
width="400"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_notvegetation.png"
style="position: absolute; left: 0; top: 0; z-index:0;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_image3"
width="400px"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_cloudshigh.png"
style="position: absolute; left: 0; top: 0; z-index:2;">
</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>
<!-- /.box-body -->
</div>
<!-- ****************************** FIN SCL *********************** -->
<!-- /.box --> <!-- /.box -->
</div> </div>
</div> </div>
...@@ -273,10 +325,39 @@ ...@@ -273,10 +325,39 @@
{% block scripts %} {% block scripts %}
<!-- page script --> <!-- page script -->
<script> <script>
var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
var index = legendItem.datasetIndex;
//console.log(e)
console.log(legendItem.datasetIndex)
console.log(legendItem.text)
var ch = this.chart;
var meta = ch.getDatasetMeta(index);
console.log(meta.hidden)
if(meta.hidden){
console.log("Mostrar!!!")
document.getElementById("scl_"+legendItem.text).src = "../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_vegetation.png"
}
else{
console.log("Ocultar!!")
document.getElementById("scl_"+legendItem.text).src = ""
}
//if (index > 1) {
// Do the original logic
//console.log("wooooo")
//defaultLegendClickHandler(e, legendItem);
defaultLegendClickHandler.call(this, e, legendItem);
//} else {
// console.log("holaaaa")
//}
};
var label; var label;
// Recibimos el JSON con los datos desde el View // Recibimos el JSON con los datos desde el View
{% autoescape off %} {% autoescape off %}
let image_path = "{{IMAGE_PATH}}"; let image_path = "{{IMAGE_PATH}}";
let scl_path = "{{SCL_PATH}}";
let zone = "{{ zone }}" let zone = "{{ zone }}"
let platform = "{{ platform }}"; let platform = "{{ platform }}";
let productLevel = "{{ productLevel }}"; let productLevel = "{{ productLevel }}";
...@@ -288,6 +369,10 @@ ...@@ -288,6 +369,10 @@
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
// scales: { xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] }, // scales: { xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] },
legend: {
display:true,
onClick: newLegendClickHandler,
}
}; };
console.log(config); console.log(config);
{% endautoescape %} {% endautoescape %}
......
reports/views.py
View file @ 18b1cb61
...@@ -33,6 +33,7 @@ def report_L2ASCL(request, report, purchase_id): ...@@ -33,6 +33,7 @@ def report_L2ASCL(request, report, purchase_id):
reporteDir = report.replace('_sclData','') reporteDir = report.replace('_sclData','')
image_path = request.user.email + "/" + purchase_id + "/" + "out/"+reporteDir+"/TCI/thumbnails/" image_path = request.user.email + "/" + purchase_id + "/" + "out/"+reporteDir+"/TCI/thumbnails/"
SCL_path = request.user.email + "/" + purchase_id + "/" + "out/"+reporteDir+"/SCL/"
print(image_path) print(image_path)
absolute_path = USERS_PATH + request.user.email + "/" + purchase_id + "/out" absolute_path = USERS_PATH + request.user.email + "/" + purchase_id + "/out"
folders = os.listdir(path=absolute_path) folders = os.listdir(path=absolute_path)
...@@ -75,7 +76,7 @@ def report_L2ASCL(request, report, purchase_id): ...@@ -75,7 +76,7 @@ def report_L2ASCL(request, report, purchase_id):
labelNames = [ labelNames = [
"No Data", "Saturated", "Shadows", "Cloud Shadows", "Vegetation", "No Data", "Saturated", "Shadows", "Cloud Shadows", "Vegetation",
"Not-Vegetated", "Whater", "Unclassified", "Cloud Medium Probablilty", "Not-Vegetated", "Water", "Unclassified", "Cloud Medium Probablilty",
"Cloud Hight Probablilty", "Thin Cirrus", "Snow" "Cloud Hight Probablilty", "Thin Cirrus", "Snow"
] ]
...@@ -107,7 +108,7 @@ def report_L2ASCL(request, report, purchase_id): ...@@ -107,7 +108,7 @@ def report_L2ASCL(request, report, purchase_id):
# graphData['options']['maintainAspectRatio']=False # graphData['options']['maintainAspectRatio']=False
# print(json.dumps(graphData).encode("utf-8")) # print(json.dumps(graphData).encode("utf-8"))
return render(request, 'L2ASCL_data.html', {"graphData": json.dumps(graphData),"name":"foo", "report_name": "SCL Image Classification Data(Km²)", "startDate": startDate,"endDate": endDate,"clouds": dataProduct['clouds'], "platform": dataProduct['platform'],"productLevel": dataProduct['productLevel'] ,"IMAGE_PATH": image_path, 'dafaultLabel': defaultLabel, 'defaultDataSet': defaultDataset, "folders" : folders,"zone":reporteDir }) return render(request, 'L2ASCL_data.html', {"graphData": json.dumps(graphData),"name":"foo", "report_name": "SCL Image Classification Data(Km²)", "startDate": startDate,"endDate": endDate,"clouds": dataProduct['clouds'], "platform": dataProduct['platform'],"productLevel": dataProduct['productLevel'] ,"IMAGE_PATH": image_path, "SCL_PATH" : SCL_path, 'dafaultLabel': defaultLabel, 'defaultDataSet': defaultDataset, "folders" : folders,"zone":reporteDir })
# -------------------------------------------------------------------------------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