Skip to content
GitLab
Menu
Why GitLab
Pricing
Contact Sales
Explore
Why GitLab
Pricing
Contact Sales
Explore
Sign in
Get free trial
Commits on Source (1)
feat(html_export): Add basic HTML-Export using Jinja2 template
· bb2ee8c4
Daniel Seiller
authored
Oct 23, 2019
bb2ee8c4
Expand all
Hide whitespace changes
Inline
Side-by-side
ed_lrr_gui/html_export.py
0 → 100644
View file @
bb2ee8c4
This diff is collapsed.
Click to expand it.
ed_lrr_gui/html_export_template.html.jinja2
0 → 100644
View file @
bb2ee8c4
<html>
<head>
<meta
charset=
"utf-8"
/>
<style>
h1
{
float
:
left
;
}
body
{
background
:
#222
;
margin
:
0px
;
width
:
100%
;
height
:
100%
;
}
table
{
border-collapse
:
collapse
;
max-width
:
50%
;
float
:
right
;
}
#graph
{
border
:
1px
solid
#eee
;
float
:
left
;
}
table
,
td
,
tr
,
th
{
color
:
#eee
;
margin
:
auto
;
border
:
1px
solid
#eee
;
text-align
:
center
;
}
/* D3 stuff */
.d3-tip
{
line-height
:
1
;
font-weight
:
bold
;
padding
:
12px
;
background
:
rgba
(
0
,
0
,
0
,
0.8
);
color
:
#fff
;
border-radius
:
2px
;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip
:after
{
box-sizing
:
border-box
;
display
:
inline
;
font-size
:
10px
;
width
:
100%
;
line-height
:
1
;
color
:
rgba
(
0
,
0
,
0
,
0.8
);
content
:
"\25BC"
;
position
:
absolute
;
text-align
:
center
;
}
/* Style northward tooltips differently */
.d3-tip.n
:after
{
margin
:
-1px
0
0
0
;
top
:
100%
;
left
:
0
;
}
</style>
<script
src=
"https://d3js.org/d3.v5.min.js"
></script>
</head>
<body>
<div
id=
"graph"
></div>
<table>
<tr>
<th>
Num
</th>
<th>
Body
</th>
<th>
Type
</th>
<th>
Distance to arrival
</th>
<th>
Jump range
</th>
</tr>
{% for sys in route %}
<tr>
<td>
{{sys.num}}
</td>
<td>
{{sys.body}}
</td>
<td
style=
"color: {{sys.color}}"
>
{{sys.star_type}}
</td>
<td>
{{sys.distance}}
</td>
<td>
{{sys.jump_dist}}
</td>
</tr>
{% endfor %}
</table>
<script
type=
"text/javascript"
>
function
dist
(
a
,
b
)
{
var
sum
=
0
;
for
(
var
i
=
0
;
i
<
a
.
length
;
++
i
)
{
sum
+=
Math
.
pow
(
a
[
i
]
-
b
[
i
],
2
)
}
return
Math
.
pow
(
sum
,
0.5
);
}
var
width
=
512
;
var
height
=
512
;
var
route
=
{{
route
|
tojson
}};
var
vis
=
d3
.
select
(
"
#graph
"
)
.
append
(
"
svg
"
).
attr
(
"
viewBox
"
,
[
0
,
0
,
width
,
height
]);;
vis
.
attr
(
"
width
"
,
width
)
.
attr
(
"
height
"
,
height
);
var
g
=
vis
.
append
(
"
g
"
);
vis
.
call
(
d3
.
zoom
()
.
extent
([[
0
,
0
],
[
width
,
height
]])
.
on
(
"
zoom
"
,
()
=>
{
g
.
attr
(
"
transform
"
,
d3
.
event
.
transform
);
}));
var
lines
=
[];
for
(
var
i
=
0
;
i
<
route
.
length
-
1
;
++
i
)
{
lines
.
push
({
x1
:
route
[
i
].
pos
[
1
],
x2
:
route
[
i
+
1
].
pos
[
1
],
y1
:
-
route
[
i
].
pos
[
2
],
y2
:
-
route
[
i
+
1
].
pos
[
2
],
dist
:
dist
(
route
[
i
].
pos
,
route
[
i
+
1
].
pos
),
color
:
({
'
#99A0FF
'
:
'
#99A0FF
'
,
// Neutron star
'
#5D67EF
'
:
'
#5D67EF
'
// White dwarf
}[
route
[
i
].
color
]
||
'
#eee
'
)
})
}
g
.
selectAll
(
"
.line
"
)
.
data
(
lines
)
.
enter
()
.
append
(
"
line
"
)
.
attr
(
"
x1
"
,
(
l
)
=>
l
.
x1
)
.
attr
(
"
y1
"
,
(
l
)
=>
l
.
y1
)
.
attr
(
"
x2
"
,
(
l
)
=>
l
.
x2
)
.
attr
(
"
y2
"
,
(
l
)
=>
l
.
y2
)
.
style
(
"
stroke
"
,
(
l
)
=>
l
.
color
)
.
style
(
"
stroke-width
"
,
5
)
.
append
(
"
title
"
)
.
text
((
l
)
=>
Math
.
round
(
l
.
dist
*
100
)
/
100
+
"
Ly
"
);
g
.
selectAll
(
"
circle .nodes
"
)
.
data
(
route
)
.
enter
()
.
append
(
"
svg:circle
"
)
.
attr
(
"
class
"
,
"
nodes
"
)
.
attr
(
"
cx
"
,
(
d
)
=>
d
.
pos
[
1
])
.
attr
(
"
cy
"
,
(
d
)
=>
-
d
.
pos
[
2
])
.
attr
(
"
r
"
,
10
)
.
attr
(
"
fill
"
,
(
d
)
=>
d
.
color
)
.
append
(
"
title
"
)
.
text
((
d
)
=>
d
.
body
+
"
(
"
+
d
.
star_type
+
"
)
"
)
</script>
</body>
</html>
\ No newline at end of file