feat(html_export): Add basic HTML-Export using Jinja2 template

2019-10-23 11:30:16 +02:00 · 2019-10-23 11:30:16 +02:00 · bb2ee8c4c3
commit bb2ee8c4c3
parent 35fc135237
2 changed files with 202 additions and 0 deletions
--- a/ed_lrr_gui/html_export.py
+++ b/ed_lrr_gui/html_export.py
--- a/ed_lrr_gui/html_export_template.html.jinja2
+++ b/ed_lrr_gui/html_export_template.html.jinja2
@ -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>