feat(html_export): Add basic HTML-Export using Jinja2 template
This commit is contained in:
parent
35fc135237
commit
bb2ee8c4c3
2 changed files with 202 additions and 0 deletions
44
ed_lrr_gui/html_export.py
Normal file
44
ed_lrr_gui/html_export.py
Normal file
File diff suppressed because one or more lines are too long
158
ed_lrr_gui/html_export_template.html.jinja2
Normal file
158
ed_lrr_gui/html_export_template.html.jinja2
Normal file
|
@ -0,0 +1,158 @@
|
|||
<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>
|
Loading…
Reference in a new issue