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;
var reportImg = activePoints[0];
//var myChart;
// mostrar imagen al dar click en los puntos
document.getElementById("myChart").onclick = function (evt) {
stop();
console.log("on click")
console.log("evento: ")
console.log(evt)
// activePoints = myChart.getElementsAtEvent(evt);
var activePoint = myChart.getElementAtEvent(evt);
var firstPoint = activePoint[0];
var label = myChart.data.labels[firstPoint._index];
//if (!firstPoint) return;
activePoints.forEach(function (value, index) {
//if(value==firstPoint){
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";
console.log("activePoint: ")
console.log(activePoint)
console.log(activePoint.length)
if(activePoint.length>0){
console.log("asd")
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];
//console.log(label)
//if (!firstPoint) return;
activePoints.forEach(function (value, index) {
//if(value==firstPoint){
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() {
$("#play").hide();
$("#stop").show();
......@@ -41,6 +59,23 @@ function play() {
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() {
clearInterval(playImages)
// $("#showImage").removeClass('col-lg-offset-1');
......@@ -85,6 +120,7 @@ function updateImage(imagePoint) {
titleLabel = label.slice(0, 4) + "/" + label.slice(4, 6) + "/" + label.slice(6);
document.getElementById("titleMap").innerHTML = titleLabel;
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) {
......
reports/templates/L2ASCL_data.html
View file @ 18b1cb61
......@@ -172,7 +172,7 @@
<!-- /.col (LEFT) -->
<div class="col-md-4">
<!-- DONUT CHART -->
<!-- ****************** Imagen satelital -->
<div class="box box-danger">
<div class="box-header with-border">
<div class="pull-left">
......@@ -214,6 +214,58 @@
</div>
<!-- /.box-body -->
</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 -->
</div>
</div>
......@@ -273,10 +325,39 @@
{% block scripts %}
<!-- page 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;
// Recibimos el JSON con los datos desde el View
{% autoescape off %}
let image_path = "{{IMAGE_PATH}}";
let scl_path = "{{SCL_PATH}}";
let zone = "{{ zone }}"
let platform = "{{ platform }}";
let productLevel = "{{ productLevel }}";
......@@ -288,6 +369,10 @@
responsive: true,
maintainAspectRatio: false,
// scales: { xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] },
legend: {
display:true,
onClick: newLegendClickHandler,
}
};
console.log(config);
{% endautoescape %}
......
reports/views.py
View file @ 18b1cb61
......@@ -33,6 +33,7 @@ def report_L2ASCL(request, report, purchase_id):
reporteDir = report.replace('_sclData','')
image_path = request.user.email + "/" + purchase_id + "/" + "out/"+reporteDir+"/TCI/thumbnails/"
SCL_path = request.user.email + "/" + purchase_id + "/" + "out/"+reporteDir+"/SCL/"
print(image_path)
absolute_path = USERS_PATH + request.user.email + "/" + purchase_id + "/out"
folders = os.listdir(path=absolute_path)
......@@ -75,7 +76,7 @@ def report_L2ASCL(request, report, purchase_id):
labelNames = [
"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"
]
......@@ -107,7 +108,7 @@ def report_L2ASCL(request, report, purchase_id):
# graphData['options']['maintainAspectRatio']=False
# 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):
......
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