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

add second cube to html and change layout

Browse Source
This commit is contained in:
unknown 2020-12-10 16:46:16 +01:00
parent c307f3a300
commit 53545013e0
1 changed files with 163 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
static/index.html
View File

@ -12,19 +12,44 @@
</style> </style>
<script src="static/scripts/websocket.js"></script> <script src="static/scripts/websocket.js"></script>
<style> <style>
* { box-sizing: border-box; }
body { .legend {
font-family: sans-serif; background-color: #fff;
background: #000; border-radius: 3px;
color: #fff; 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: 20px;
} }
.scene { .scene {
width: 200px; width: 200px;
height: 200px; height: 200px;
border: 0px solid #CCC; border: 0px solid #CCC;
margin: 160px; margin: 75px;
perspective: 400px; perspective: 400px;
} }
@ -74,27 +99,53 @@
</style> </style>
</head> </head>
<body> <body>
<table style="font-size: x-small"> <table style="font-size: small">
<tr> <tr>
<td valign="top" width="50%"> <td valign="top" width="50%">
<p>Click "Open" to create a connection to the server. <p>Click "Open" to create a connection to the server.
</p> </p>
<form> <form>
<button id="open">Open</button> <button id="open">Verbinden</button>
<button id="close">Close</button> <button id="close">Trennen</button>
<p style="display: none" > <p style="display: none" >
<input id="input" type="text" value="Hello world!"> <input id="input" type="text" value="Hello world!">
<button id="send">Send</button> <button id="send">Send</button>
</p> </p>
</form> </form>
<div class="scene" style='width: 600px; height: 400px;'>
<div id="map" style='width: 600px; height: 400px;'></div>
</div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> <button id="messung starten">Messung starten</button>
<script src="static/scripts/map.js"></script> <button id="messung beenden">Messung beenden</button>
<button id="messung speichern">Messung speichern</button>
<button id="messung verwerfen">Messung verwerfen</button>
<button id="messung laden">Messung laden</button></li>
</td>
<td valign="top" width="100%">
<div id="output"></div>
</td>
</tr>
</table>
<div class="float-container">
<div class="float-child">
<label id="TCPlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone long: </label>
<label id="TCPlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone lat: </label>
<label id="SERIALlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox long: </label>
<label id="SERIALlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox lat: </label>
<label id="diffLong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Differenz long: </label>
<label id="diffLat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Differenz lat: </label>
<div class="scene" style='width: 500px; height: 500px;'>
<div id="map" style='width: 500px; height: 500px;'></div>
<div id="state-legend" class="legend">
<h4>Legende</h4>
<div><span style="background-color: yellow"></span>Ublox</div>
<div><span style="background-color: blue"></span>Smartphone</div>
</div>
</div>
</div>
<div class="float-child">
<div class="scene"> <div class="scene">
<div id="gyroscope" class="cube"> <p style="font-size: large">Smartphone</p>
<div id="gyroscopeTCP" class="cube">
<div class="cube__face cube__face--front">front</div> <div class="cube__face cube__face--front">front</div>
<div class="cube__face cube__face--back">back</div> <div class="cube__face cube__face--back">back</div>
<div class="cube__face cube__face--right">right</div> <div class="cube__face cube__face--right">right</div>
@ -103,16 +154,27 @@
<div class="cube__face cube__face--bottom">bottom</div> <div class="cube__face cube__face--bottom">bottom</div>
</div> </div>
</div> </div>
<div class="scene">
<p style="font-size: large">Ublox</p>
<div id="gyroscopeSERIAL" class="cube">
<div class="cube__face cube__face--front">front</div>
<div class="cube__face cube__face--back">back</div>
<div class="cube__face cube__face--right">right</div>
<div class="cube__face cube__face--left">left</div>
<div class="cube__face cube__face--top">top</div>
<div class="cube__face cube__face--bottom">bottom</div>
</div>
</div>
</div>
</div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="static/scripts/map.js"></script>
<div style="width: 600px; height: 400px;"> <div style="width: 600px; height: 400px;">
<canvas id="myChart" width="400" height="200"></canvas> <canvas id="myChart" width="400" height="200"></canvas>
</div> </div>
<script src="static/scripts/chart.js"></script> <script src="static/scripts/chart.js"></script>
</td>
<td valign="top" width="50%">
<div id="output"></div>
</td>
</tr>
</table>
</body> </body>
</html> </html>