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
6527aabd
Commit
6527aabd
authored
Mar 01, 2019
by
Ulises Morales Ramírez
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'dev' of
http://gitlab.geoint.mx/mario.chirinos/GeoInt_SIDT
into dashboard_table
parents
39e1bff8
e3b5e61b
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 @
6527aabd
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 @
6527aabd
...
...
@@ -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