new view in pdf

reports/static/reports/js/reportePdf.js

+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

@@ -7,6 +7,7 @@
     <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 %}
@@ -277,6 +278,13 @@
         var label;
         // Recibimos el JSON con los datos desde el View
         {% 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}}
                 config.options = {
                     responsive: true,
@@ -294,6 +302,7 @@
         var activePoints = config.data.labels;
         var imageNumber = 0;
         var playImages;
+        var reportImg = activePoints[0];
         //var myChart;
 
         // mostrar imagen al dar click en los puntos
@@ -325,12 +334,6 @@
             // $(".prev").hide();
             // $("#showImage").addClass('col-lg-offset-1');
             playImages = setInterval(function(){ next(); }, 4000);
-{#            playImages = setInterval(() = > {#}
-{#                next();#}
-{#        },#}
-{#            4000#}
-{#        )#}
-{#            ;#}
         }
 
         function stop() {
@@ -373,6 +376,7 @@
             //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"
@@ -399,48 +403,17 @@
             myChart = new Chart(ctx, temp);
         };
 
-
+        
         $('#downloadPdf').click(function (event) {
-            // 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, 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;
-                }
-            });
+            var pdf = new jsPDF('portrait', 'pt', [pdfWidth, pdfHeight]);
+            margin(pdf)
+            searchInfo(pdf)
 
-            // create new pdf and add our new canvas as an image
-            var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]);
-            pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0);
+            graphInfo(pdf);
 
-            // download the pdf
-            pdf.save('{{ zone }}.pdf');
+            pdf.addPage();
+            margin(pdf);
+            imageInfo(pdf);
         });
     </script>