159 lines
4.0 KiB
Django/Jinja
159 lines
4.0 KiB
Django/Jinja
<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>
|