tvolkmann/gyrogpsc
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases 1 Wiki Activity

add first draft of replay page layout

Browse Source
This commit is contained in:
unknown 2020-12-31 22:37:17 +01:00
parent bc5fb7b6d7
commit b45f27f831
4 changed files with 93 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
static/replayStyle.css Normal file
View File

@ -0,0 +1,56 @@
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
.legend {
background-color: #fff;
border-radius: 3px;
bottom: 30px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding: 10px;
position: absolute;
right: 10px;
z-index: 1;
}
.legend h4 {
margin: 0 0 10px;
}
.legend div span {
border-radius: 50%;
display: inline-block;
height: 10px;
margin-right: 5px;
width: 10px;
}
body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;}
.float-child {
width: 45%;
float: left;
padding: 10px;
}
canvas {
position: absolute;
}
.sceneMap {
width: 1000px;
height: 500px;
border: 0px solid #CCC;
margin: 20px;
perspective: 400px;
}
.scene {
width: 200px;
height: 200px;
border: 0px solid #CCC;
margin: 70px;
perspective: 400px;
}
label { margin-right: 10px; }

3
static/scripts/chart.js
View File

@ -5,9 +5,10 @@ var myChart = new Chart(ctx, {
labels: new Array(GRAPH_RES),
datasets: [{
label: 'Z',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
backgroundColor: 'rgba(255, 99, 132, 1)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false,
pointRadius: 0,
lineTension: 0.5,
data: new Array(GRAPH_RES)

3
templates/index.html
View File

@ -30,8 +30,7 @@
</select>
</label>
<button id="replaystarten" style="margin-right: 16px;" disabled>Wiedergabe starten</button>
<button id="fullReplay">Gesamtüberblick</button>
</div>
<br>
<label id="tracking state" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Tracking state: </label><br>

34
templates/replayFull.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<script src="static/scripts/websocket.js"></script>
<link rel="stylesheet" href="static/replayStyle.css">
</head>
<body>
<div class="float-container">
<div class="float-child">
<div class="sceneMap" style='width: 1000px; height: 500px;'>
<div id="map" style='width: 1000px; height: 500px;'></div>
<div id="state-legend" class="legend">
<h4>Legende</h4>
<div><span style="background-color: rgba(214, 69, 65, 1)"></span>Ublox</div>
<div><span style="background-color: rgba(30, 139, 195, 1)"></span>Smartphone</div>
</div>
</div>
<div style="width: 600px; height: 400px;">
<canvas id="speedChart" width="400" height="200"></canvas>
</div>
</div>
</div>
<script src="static/scripts/map.js"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="static/scripts/speedChart.js"></script>
</body>
</html>