Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit 03d7e834 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 dashboard_table

parents eaace0ea e7d0164e
Hide whitespace changes
Inline Side-by-side
Showing with 265 additions and 128 deletions
reports/static/reports/js/reportImg.js 0 → 100644
View file @ 03d7e834
// Creamos una gráfica con los datos al macenados en config
var ctx = document.getElementById('myChart').getContext('2d');
//ctx.canvas.width = 256;
//ctx.canvas.height = 512;
var myChart = new Chart(ctx, config);
//var activePoints = [];
var activePoints = config.data.labels;
var imageNumber = 0;
var playImages;
var reportImg = activePoints[0];
//var myChart;
// mostrar imagen al dar click en los puntos
document.getElementById("myChart").onclick = function (evt) {
stop();
// 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";
};
function play() {
$("#play").hide();
$("#stop").show();
// $(".next").hide();
// $(".prev").hide();
// $("#showImage").addClass('col-lg-offset-1');
playImages = setInterval(function () { next(); }, 4000);
}
function stop() {
clearInterval(playImages)
// $("#showImage").removeClass('col-lg-offset-1');
$("#play").show();
$("#stop").hide();
// $(".next").show();
// $(".prev").show();
}
// cambiar el tipo de gráfica
function next() {
if (imageNumber == (activePoints.length - 1)) {
imageNumber = 0;
} else {
imageNumber++;
}
var imagePoint = activePoints[imageNumber];
if (!imagePoint) return;
updateImage(imagePoint);
}
function prev() {
if (imageNumber == 0) {
imageNumber = activePoints.length - 1;
} else {
imageNumber--;
}
var imagePoint = activePoints[imageNumber];
if (!imagePoint) return;
updateImage(imagePoint);
}
function updateImage(imagePoint) {
//label = myChart.data.labels[imagePoint._index];
//datasets = myChart.data.datasets[imagePoint._datasetIndex].label;
//document.getElementById("titleMap").innerHTML = label + " - " + datasets;
label = imagePoint;
reportImg = 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"
}
function change(newType) {
var ctx = document.getElementById("myChart").getContext("2d");
// Remove the old chart and all its event handles
if (myChart) {
myChart.destroy();
}
// Chart.js modifies the object you pass in. Pass a copy of the object so we can use the original object later
var temp = jQuery.extend(true, {}, config);
temp.type = newType;
if (newType == 'radar' || newType == 'pie' || newType == 'polarArea' || newType == 'doughnut') {
temp.options.scales.xAxes = { "display": false };
temp.options.scales.yAxes = { "display": false };
}
myChart = new Chart(ctx, temp);
};
\ No newline at end of file
reports/static/reports/js/reportPdf.js 0 → 100644
View file @ 03d7e834
var pdfWidth = 612;
var pdfHeight = 792;
$('#downloadPdf').click(function (event) {
var pdf = new jsPDF('portrait', 'pt', [pdfWidth, pdfHeight]);
margin(pdf)
searchInfo(pdf)
graphInfo(pdf);
pdf.addPage();
margin(pdf);
imageInfo(pdf);
});
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);
console.log(zone)
}
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 @ 03d7e834
......@@ -7,8 +7,6 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{% static 'reports/js/reportePdf.js' %}"></script>
{% endblock %}
{% block messages %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
......@@ -293,131 +291,7 @@
};
console.log(config);
{% endautoescape %}
// Creamos una gráfica con los datos al macenados en config
var ctx = document.getElementById('myChart').getContext('2d');
//ctx.canvas.width = 256;
//ctx.canvas.height = 512;
var myChart = new Chart(ctx, config);
//var activePoints = [];
var activePoints = config.data.labels;
var imageNumber = 0;
var playImages;
var reportImg = activePoints[0];
//var myChart;
// mostrar imagen al dar click en los puntos
document.getElementById("myChart").onclick = function (evt) {
stop();
// 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";
};
function play() {
$("#play").hide();
$("#stop").show();
// $(".next").hide();
// $(".prev").hide();
// $("#showImage").addClass('col-lg-offset-1');
playImages = setInterval(function(){ next(); }, 4000);
}
function stop() {
clearInterval(playImages)
// $("#showImage").removeClass('col-lg-offset-1');
$("#play").show();
$("#stop").hide();
// $(".next").show();
// $(".prev").show();
}
// cambiar el tipo de gráfica
function next() {
if (imageNumber == (activePoints.length - 1)) {
imageNumber = 0;
} else {
imageNumber++;
}
var imagePoint = activePoints[imageNumber];
if (!imagePoint) return;
updateImage(imagePoint);
}
function prev() {
if (imageNumber == 0) {
imageNumber = activePoints.length - 1;
} else {
imageNumber--;
}
var imagePoint = activePoints[imageNumber];
if (!imagePoint) return;
updateImage(imagePoint);
}
function updateImage(imagePoint) {
//label = myChart.data.labels[imagePoint._index];
//datasets = myChart.data.datasets[imagePoint._datasetIndex].label;
//document.getElementById("titleMap").innerHTML = label + " - " + datasets;
label = imagePoint;
reportImg = 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"
}
function change(newType) {
var ctx = document.getElementById("myChart").getContext("2d");
// Remove the old chart and all its event handles
if (myChart) {
myChart.destroy();
}
// Chart.js modifies the object you pass in. Pass a copy of the object so we can use the original object later
var temp = jQuery.extend(true, {}, config);
temp.type = newType;
if (newType == 'radar' || newType == 'pie' || newType == 'polarArea' || newType == 'doughnut') {
temp.options.scales.xAxes = {"display": false};
temp.options.scales.yAxes = {"display": false};
}
myChart = new Chart(ctx, temp);
};
$('#downloadPdf').click(function (event) {
var pdf = new jsPDF('portrait', 'pt', [pdfWidth, pdfHeight]);
margin(pdf)
searchInfo(pdf)
graphInfo(pdf);
pdf.addPage();
margin(pdf);
imageInfo(pdf);
});
</script>
<script type="text/javascript" src="{% static 'reports/js/reportImg.js' %}"></script>
<script type="text/javascript" src="{% static 'reports/js/reportPdf.js' %}"></script>
{% endblock %}
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