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
Hide whitespace changes
Inline Side-by-side
Showing with 146 additions and 164 deletions
reports/static/reports/js/reportImg.js
View file @ cfca6de4
......@@ -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/static/reports/js/reportPdf.js
View file @ cfca6de4
......@@ -25,12 +25,12 @@ function imageInfo(pdf) {
let offset_inc_y = 40;
let imgHeigth = 160.5;
let imgWidth = 145.5;
let imgNumber = 0;
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;
......@@ -50,12 +50,13 @@ function imageInfo(pdf) {
//pdf.text(coordinate_x + 110, coordinate_y + imgHeigth + 12, value,'center');
position_x += imgWidth + offset_inc_x
if (index == activePoints.length - 1) {
if (imgNumber == activePoints.length - 1) {
// download the pdf
headerFooterFormatting(pdf, pdf.internal.getNumberOfPages());
window.open(pdf.output('bloburl'), '_blank');
//pdf.save('{{ zone }}.pdf');
}
imgNumber++;
});
});
}
......@@ -77,7 +78,7 @@ function graphInfo(pdf) {
var pdfctxX = 0;
var pdfctxY = 0;
var buffer = 100;
// for each chart.js chart
$("canvas").each(function (index) {
// obtener medidas height/width
......@@ -92,7 +93,7 @@ function graphInfo(pdf) {
if (index % 2 === 1) {
pdfctxX = 0;
pdfctxY += canvasHeight + buffer;
}
}
});
pdf.setFontSize(18);
pdf.setTextColor(34, 45, 50);
......
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 @@
<!-- /.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 @ cfca6de4
......@@ -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