improve activity mapper

activity_mapper
Clemens Klug 2017-11-15 12:54:11 +01:00
parent e94fd665ad
commit 33d63b120d
7 changed files with 142 additions and 95 deletions

View File

@ -73,8 +73,8 @@
"type": "Biogames",
"url": "http://0.0.0.0:5000/game2/instance/log/list/",
"login_url": "http://localhost:5000/game2/auth/json-login",
"username": "dev",
"password": "dev",
"username": "ba",
"password": "853451",
"host":"http://0.0.0.0:5000"
}
}

View File

@ -62,7 +62,7 @@ distribution = defaultdict(lambda: 0)
finished_and_simu = defaultdict(list)
files = {}
actions_dist = defaultdict(list)
with open('/home/agp8x/git/uni/ma/project/data/0000_ref') as src:
with open('/home/clemens/git/ma/test/src') as src:
for line in src:
line = line.strip()
instance_id, log = get_json(line)

View File

@ -58,7 +58,8 @@ def load_ids(name: str):
def urach_logs(log_ids, settings):
return ["data/inst_{id}.{format}".format(id=log_id, format=settings.log_format) for log_id in log_ids]
#return ["data/inst_{id}.{format}".format(id=log_id, format=settings.log_format) for log_id in log_ids]
return ["data/{id}.{format}".format(id=log_id, format=settings.log_format) for log_id in log_ids]
def write_logentry_count_csv():

View File

View File

@ -12,87 +12,14 @@
<script src="https://rawgit.com/Leaflet/Leaflet.heat/gh-pages/dist/leaflet-heat.js"></script>
<script src="my.js"></script>
<style>
.mapDiv {
width: 1024px;
height: 768px;
}
<link href="style.css" rel="stylesheet"/>
<main>
<div class="mapDiv" id="mainMap"></div>
<div class="sequenceContainer">
<div class="sequence"></div>
</div>
</main>
.board {
width: 32px;
height: 32px;
display: inline-block;
position: relative;
}
.board img {
max-width: 100%;
max-height: 100%;
position: absolute;
/*bottom: 0px;*/
}
.board img:hover {
max-width: inherit;
max-height: inherit;
z-index: 99;
top: 20px;
}
.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;
}
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;
}
</style>
<div style="font-size:0.1px;position:absolute;bottom:0;">OSM Logo: CC-BY-SA
<!--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>
</div-->

View File

@ -1,24 +1,29 @@
//$.getJSON("data/ff8f1e8f-6cf5-4a7b-835b-5e2226c1e771_03b9b6b4-c8ab-4182-8902-1620eebe8889.json", function (data) {
$.getJSON("data/ff8f1e8f-6cf5-4a7b-835b-5e2226c1e771_de7df5b5-edd5-4070-840f-68854ffab9aa.json", function (data) {
var images = {};
var mapContainer = $("<div />", {id: "mainMap", class: "mapDiv"});
mapContainer.appendTo("body");
var tiles = {
"osm": L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxNativeZoom: 19,
maxZoom: 24,
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}),
"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('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 20,
maxNativeZoom: 20,
maxZoom: 24,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
})
};
var map = L.map("mainMap", {layers: [tiles.osm], maxZoom: 22, maxNativeZoom: 19});
var map = L.map("mainMap", {layers: [tiles.osm]});
function styleTrack(feature) {
var styles = {};
@ -68,23 +73,32 @@ $.getJSON("data/ff8f1e8f-6cf5-4a7b-835b-5e2226c1e771_de7df5b5-edd5-4070-840f-688
var heat = L.heatLayer(coords);
L.control.layers(tiles, {"heatmap": heat}).addTo(map);
var marker = null;
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/", ""), height: 200});
var image = $("<img>", {src: entry.image.replace("static/progress/", "")});
image.attr("data-time", entry.timestamp);
image.hover(function () {
marker = L.geoJSON(entry.coordinate).addTo(map);
marker.setLatLng([entry.coordinate.coordinates[1], entry.coordinate.coordinates[0]]);
}, function () {
map.removeLayer(marker);
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);
});
list.appendTo("body");
current.board=images[data["boards"][1].timestamp];
list.appendTo(".sequence");
});

105
static/progress/style.css Normal file
View File

@ -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;
}