add missing result visualizing script

data/results/index.html

@@ -0,0 +1,25 @@
+<script
+        src="https://code.jquery.com/jquery-3.2.1.min.js"
+        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+        crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
+      integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
+      crossorigin=""/>
+<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
+        integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
+        crossorigin=""></script>
+
+<script src="https://rawgit.com/Leaflet/Leaflet.heat/gh-pages/dist/leaflet-heat.js"></script>
+
+<script src="my.js"></script>
+<link href="style.css" rel="stylesheet"/>
+<main>
+    <div class="mapDiv" id="mainMap"></div>
+    <div class="sequenceContainer">
+        <div class="sequence"></div>
+    </div>
+</main>
+
+<!--div style="font-size:0.1px;position:absolute;bottom:0;">OSM Logo: CC-BY-SA
+    http://wiki.openstreetmap.org/wiki/File:Mag_map-120x120.png
+</div-->

data/results/my.js

@@ -0,0 +1,105 @@
+function loadData() {
+    console.log($(location).attr('hash').substr(1));
+    $.getJSON($(location).attr('hash').substr(1), function (data) {
+        var images = {};
+        var tiles = {
+            "openstreetmap": L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                maxNativeZoom: 19,
+                maxZoom: 24,
+                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+            }),
+            "esri sat": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+                maxNativeZoom: 19,
+                maxZoom: 24,
+                attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
+            }),
+            "google sat": L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
+                maxNativeZoom: 20,
+                maxZoom: 24,
+                subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
+            })
+        };
+        var map = L.map("mainMap", {layers: [tiles.openstreetmap]});
+
+        function styleTrack(feature) {
+            var styles = {};
+            styles.color = data.colors[feature.properties.activity_type];
+            return styles;
+        }
+
+        var highlighted = null;
+
+        function onClick(e) {
+            var start = e.target.feature.geometry.properties.start_timestamp;
+            var end = e.target.feature.geometry.properties.end_timestamp;
+            var changed = highlighted !== e.target.feature;
+            $.each(images, function (timestamp, board) {
+                    if ((timestamp >= start && timestamp < end) && changed) {
+                        board.image.first().addClass("highlight");
+                    } else {
+                        board.image.removeClass("highlight");
+                        highlighted = null;
+                    }
+                }
+            );
+            if (changed) {
+                highlighted = e.target.feature;
+            }
+        }
+
+        var coords = [];
+
+        function onEachFeature(feature, layer) {
+            layer.setStyle(styleTrack(feature));
+            layer.on('click', onClick);
+            if (feature.coordinates.length > 1) {
+                coords = coords.concat(feature.coordinates.map(function (p) {
+                    return [p[1], p[0], 0.1];
+                }));
+            }
+        }
+
+        var track = L.geoJSON(data['track'], {
+            //style: styleTrack,
+            onEachFeature: onEachFeature
+        }).addTo(map);
+
+        map.fitBounds(track.getBounds());
+
+        var heat = L.heatLayer(coords);
+        L.control.layers(tiles, {"heatmap": heat}).addTo(map);
+
+        var list = $("<ul />");
+        var current = {
+            "pos": data["boards"][1].coordinate.coordinates
+        };
+        console.log(current);
+        var marker = L.marker([current.pos[1], current.pos[0]]).addTo(map);
+        $.each(data["boards"], function (index, entry) {
+            //console.log(index, entry);
+            var item = $("<li>", {class: entry.extra_data.activity_type});
+            var container = $("<div>", {class: "board"});
+            var image = $("<img>", {src: entry.image.replace("static/progress/", "")});
+            image.attr("data-time", entry.timestamp);
+            image.hover(function () {
+                marker.setLatLng([entry.coordinate.coordinates[1], entry.coordinate.coordinates[0]]);
+            }, function () {
+                marker.setLatLng(current.pos.coordinates[1], current.pos.coordinates[0]);
+            });
+            image.click(function (e) {
+                current.board = image;
+                current.pos = entry.coordinate;
+            });
+            images[entry.timestamp] = {image: image, coordinate: entry.coordinate};
+            image.appendTo(container);
+            container.appendTo(item);
+            item.appendTo(list);
+        });
+        current.board = images[data["boards"][1].timestamp];
+        list.appendTo(".sequence");
+    });
+}
+
+$(document).ready(function () {
+    loadData();
+});

data/results/style.css

@@ -0,0 +1,105 @@
+/*.mapDiv {
+    width: 1024px;
+    height: 768px;
+}*/
+
+
+
+.highlight {
+    /*what a nice way to highlight*/
+    display: none;
+}
+
+.simu {
+    background-color: blue;
+}
+
+.question {
+    background-color: orange;
+}
+
+.image {
+    background-color: green;
+}
+
+.audio {
+    background-color: red;
+}
+
+.video {
+    background-color: purple;
+}
+
+.other {
+    background-color: brown;
+}
+
+.map {
+    background-color: violet;
+}
+
+.error {
+    background-color: grey;
+}
+
+
+.board {
+    width: 32px;
+    height: 32px;
+    display: inline-block;
+}
+
+.board img {
+    max-width: 32px;
+    max-height: 32px;
+    position: absolute;
+    /*bottom: 0px;*/
+}
+
+.board:hover img{
+    max-width: 205px;
+    max-height: 295px;
+    z-index: 99;
+    top: 5px;
+    right:0px;
+}
+ul {
+    list-style-type: none;
+    overflow: auto;
+    overflow-y: hidden;
+    display: inline-block;
+    /*max-width:100%;
+    margin: 0 0 1em;
+    white-space: nowrap;
+    height:200px;*/
+}
+
+li {
+    display: inline-block;
+    vertical-align: top;
+    padding: 2px;
+    margin-bottom: 2px;
+}
+
+body{
+    height: 100%;
+    padding:0;
+    margin:0;
+}
+
+main{
+    display: flex;
+    flex-direction: column;
+    height:100%;
+}
+
+.mapDiv {
+    flex-grow:1;
+}
+.sequenceContainer{
+    flex-grow: 0;
+    min-height:300px;
+    padding-right: 210px;
+    position: relative;
+
+}