Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
GeoInt_SIDT
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Mario Chirinos Colunga
GeoInt_SIDT
Commits
e3b5e61b
Commit
e3b5e61b
authored
Mar 01, 2019
by
Sergio Adrian Gongora Euan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
new view in pdf
parent
09a55449
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
159 additions
and
45 deletions
+159
-45
reportePdf.js
reports/static/reports/js/reportePdf.js
+141
-0
L2ASCL_data.html
reports/templates/L2ASCL_data.html
+18
-45
No files found.
reports/static/reports/js/reportePdf.js
0 → 100644
View file @
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
reports/templates/L2ASCL_data.html
View file @
e3b5e61b
...
...
@@ -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>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment