Commit 6527aabd authored by Ulises Morales Ramírez's avatar Ulises Morales Ramírez

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

parents 39e1bff8 e3b5e61b
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
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <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"/> <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="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 %} {% endblock %}
{% block messages %} {% block messages %}
...@@ -277,6 +278,13 @@ ...@@ -277,6 +278,13 @@
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 zone = "{{ zone }}"
let platform = "{{ platform }}";
let productLevel = "{{ productLevel }}";
let startDate = "{{ startDate }}";
let endDate = "{{ endDate }}";
let clouds= "{{ clouds }}";
var config = {{graphData}} var config = {{graphData}}
config.options = { config.options = {
responsive: true, responsive: true,
...@@ -294,6 +302,7 @@ ...@@ -294,6 +302,7 @@
var activePoints = config.data.labels; var activePoints = config.data.labels;
var imageNumber = 0; var imageNumber = 0;
var playImages; var playImages;
var reportImg = activePoints[0];
//var myChart; //var myChart;
// mostrar imagen al dar click en los puntos // mostrar imagen al dar click en los puntos
...@@ -325,12 +334,6 @@ ...@@ -325,12 +334,6 @@
// $(".prev").hide(); // $(".prev").hide();
// $("#showImage").addClass('col-lg-offset-1'); // $("#showImage").addClass('col-lg-offset-1');
playImages = setInterval(function(){ next(); }, 4000); playImages = setInterval(function(){ next(); }, 4000);
{# playImages = setInterval(() = > {#}
{# next();#}
{# },#}
{# 4000#}
{# )#}
{# ;#}
} }
function stop() { function stop() {
...@@ -373,6 +376,7 @@ ...@@ -373,6 +376,7 @@
//datasets = myChart.data.datasets[imagePoint._datasetIndex].label; //datasets = myChart.data.datasets[imagePoint._datasetIndex].label;
//document.getElementById("titleMap").innerHTML = label + " - " + datasets; //document.getElementById("titleMap").innerHTML = label + " - " + datasets;
label = imagePoint; label = imagePoint;
reportImg = 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"
...@@ -399,48 +403,17 @@ ...@@ -399,48 +403,17 @@
myChart = new Chart(ctx, temp); myChart = new Chart(ctx, temp);
}; };
$('#downloadPdf').click(function (event) { $('#downloadPdf').click(function (event) {
// tomar el tamaño de la pagina var pdf = new jsPDF('portrait', 'pt', [pdfWidth, pdfHeight]);
var reportPageHeight = $('#reportPage').innerHeight(); margin(pdf)
var reportPageWidth = $('#reportPage').innerWidth(); searchInfo(pdf)
// 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, canvasHeight);
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;
}
});
// create new pdf and add our new canvas as an image graphInfo(pdf);
var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]);
pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0);
// download the pdf pdf.addPage();
pdf.save('{{ zone }}.pdf'); margin(pdf);
imageInfo(pdf);
}); });
</script> </script>
......
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