Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit cfca6de4 authored by Ulises Morales Ramírez's avatar Ulises Morales Ramírez
Browse files
Options

Merge branch 'dev' of http://gitlab.geoint.mx/mario.chirinos/GeoInt_SIDT into dev

parents 1c67b6da d4a09b55
Show whitespace changes
Inline Side-by-side
Showing with 146 additions and 164 deletions
reports/static/reports/js/reportImg.js
View file @ cfca6de4
...@@ -10,13 +10,27 @@ var playImages; ...@@ -10,13 +10,27 @@ 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);
console.log("activePoint: ")
console.log(activePoint)
console.log(activePoint.length)
if(activePoint.length>0){
console.log("asd")
var firstPoint = activePoint[0]; 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 label = myChart.data.labels[firstPoint._index];
//console.log(label)
//if (!firstPoint) return; //if (!firstPoint) return;
activePoints.forEach(function (value, index) { activePoints.forEach(function (value, index) {
//if(value==firstPoint){ //if(value==firstPoint){
...@@ -30,8 +44,12 @@ document.getElementById("myChart").onclick = function (evt) { ...@@ -30,8 +44,12 @@ document.getElementById("myChart").onclick = function (evt) {
//updateImage(firstPoint); //updateImage(firstPoint);
//alert("{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg"); //alert("{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg");
//document.getElementById("satImage").src = "{{ 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/static/reports/js/reportPdf.js
View file @ cfca6de4
...@@ -25,8 +25,8 @@ function imageInfo(pdf) { ...@@ -25,8 +25,8 @@ function imageInfo(pdf) {
let offset_inc_y = 40; let offset_inc_y = 40;
let imgHeigth = 160.5; let imgHeigth = 160.5;
let imgWidth = 145.5; let imgWidth = 145.5;
let imgNumber = 0;
activePoints.forEach(function (value, index) { activePoints.forEach(function (value, index) {
console.log("img", activePoints.length,value);
let logo = new Image(); let logo = new Image();
logo.src = "../../static/reports/tmpImages/repsat_test_dev/"+image_path + value + "_TCI_60m.jpg" logo.src = "../../static/reports/tmpImages/repsat_test_dev/"+image_path + value + "_TCI_60m.jpg"
logo.addEventListener('load', function () { logo.addEventListener('load', function () {
...@@ -50,12 +50,13 @@ function imageInfo(pdf) { ...@@ -50,12 +50,13 @@ function imageInfo(pdf) {
//pdf.text(coordinate_x + 110, coordinate_y + imgHeigth + 12, value,'center'); //pdf.text(coordinate_x + 110, coordinate_y + imgHeigth + 12, value,'center');
position_x += imgWidth + offset_inc_x position_x += imgWidth + offset_inc_x
if (index == activePoints.length - 1) { if (imgNumber == activePoints.length - 1) {
// download the pdf // download the pdf
headerFooterFormatting(pdf, pdf.internal.getNumberOfPages()); headerFooterFormatting(pdf, pdf.internal.getNumberOfPages());
window.open(pdf.output('bloburl'), '_blank'); window.open(pdf.output('bloburl'), '_blank');
//pdf.save('{{ zone }}.pdf'); //pdf.save('{{ zone }}.pdf');
} }
imgNumber++;
}); });
}); });
} }
......
reports/static/reports/js/reportePdf.js deleted 100644 → 0
View file @ 1c67b6da
var pdfWidth = 612;
var pdfHeight = 792;
function imageInfo(pdf) {
pdf.setFontSize(18);
pdf.setTextColor(34, 45, 50);
pdf.text(70, 100, "IMAGES");
let position_x = 0;
let position_y = 0;
let offset_y = 120;
let offset_x = 60;
let offset_inc_x = 30;
let offset_inc_y = 40;
let imgHeigth = 160.5;
let imgWidth = 145.5;
activePoints.forEach(function (value, index) {
console.log("img", activePoints.length,value);
let logo = new Image();
logo.src = "../../static/reports/tmpImages/repsat_test_dev/"+image_path + value + "_TCI_60m.jpg"
logo.addEventListener('load', function () {
if (position_x + 20 > pdfWidth - 100) {
position_x = 0;
position_y += imgHeigth + offset_inc_y;
}
if (position_y + offset_y > pdfHeight - (imgHeigth + 30)) {
pdf.addPage();
margin(pdf)
position_y = 0;
}
let coordinate_x = offset_x + position_x
let coordinate_y = offset_y + position_y
pdf.addImage(logo, 'PNG', coordinate_x, coordinate_y, imgWidth, imgHeigth);
pdf.setFontSize(11);
pdf.setTextColor(105, 105, 105);
pdf.text(coordinate_x + 72, coordinate_y + imgHeigth + 11, value, 'center');
//pdf.text(coordinate_x + 110, coordinate_y + imgHeigth + 12, value,'center');
position_x += imgWidth + offset_inc_x
if (index == activePoints.length - 1) {
// download the pdf
headerFooterFormatting(pdf, pdf.internal.getNumberOfPages());
window.open(pdf.output('bloburl'), '_blank');
//pdf.save('{{ zone }}.pdf');
}
});
});
}
function graphInfo(pdf) {
// tomar el tamaño de la pagina
var reportPageHeight = $('#reportPage').innerHeight();
var reportPageWidth = $('#reportPage').innerWidth();
// que rellenaremos con todos los demás canvas
var pdfCanvas = $('<canvas />').attr({
id: "canvaspdf",
width: reportPageWidth,
height: reportPageHeight
});
// mantener la posicion del canvas
var pdfctx = $(pdfCanvas)[0].getContext('2d');
var pdfctxX = 0;
var pdfctxY = 0;
var buffer = 100;
// for each chart.js chart
$("canvas").each(function (index) {
// obtener medidas height/width
var canvasHeight = $(this).innerHeight();
var canvasWidth = $(this).innerWidth();
// dibujar en el nuevo canvas
pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth / 1.4, canvasHeight / 1.4);
pdfctxX += canvasWidth + buffer;
// our report page is in a grid pattern so replicate that in the new canvas
if (index % 2 === 1) {
pdfctxX = 0;
pdfctxY += canvasHeight + buffer;
}
});
pdf.setFontSize(18);
pdf.setTextColor(34, 45, 50);
pdf.text(70, (pdfHeight / 2) - 20, "GRAPH");
pdf.addImage($(pdfCanvas)[0], 'PNG', 30, pdfHeight / 2);
}
function margin(pdf) {
pdf.setLineWidth(1)
pdf.setDrawColor(255,111,0);
pdf.setFillColor(255, 255, 255);
pdf.roundedRect(20, 20, pdfWidth - 40, pdfHeight - 40, 5, 5, 'FD')
}
function searchInfo(pdf) {
pdf.setFontSize(15);
pdf.setTextColor(150);
pdf.setDrawColor(0);
pdf.setFillColor(0, 0, 255);
pdf.roundedRect(40, 100, pdfWidth - 80, 150, 5, 5, 'FD')
pdf.setDrawColor(0);
pdf.setFillColor(255, 255, 255);
pdf.roundedRect(42, 102, pdfWidth - 84, 146, 5, 5, 'FD')
pdf.setTextColor(34, 45, 50);
pdf.text(70, 140, "Search Information: ");
pdf.setFontSize(12);
pdf.setTextColor(105,105,105);
pdf.text(120, 170, "Zone: " + zone);
pdf.text(120, 190, "Platform: " + platform);
pdf.text(120, 210, "Product level: " + productLevel);
pdf.text(340, 170, "Start date: " + startDate);
pdf.text(340, 190, "End date: " + endDate);
pdf.text(340, 210, "Clouds: " + clouds);
}
function headerFooterFormatting(pdf, totalPages) {
for (var i = totalPages; i >= 1; i--) {
pdf.setPage(i);
header(pdf);
footer(pdf, i, totalPages);
pdf.page++;
}
};
function header(pdf) {
pdf.setFontSize(30);
pdf.setTextColor(40);
pdf.setFontStyle('normal');
pdf.text(250, 48, "RepSat");
pdf.setLineCap(2);
};
function footer(pdf, pageNumber, totalPages) {
var str = "Page " + pageNumber + " of " + totalPages
pdf.setFontSize(10);
pdf.text(str, pdfWidth - 80, pdf.internal.pageSize.height - 10);
};
\ No newline at end of file
reports/templates/L2ASCL_data.html
View file @ cfca6de4
...@@ -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 @ cfca6de4
...@@ -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