You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
3.5 KiB
HTML
116 lines
3.5 KiB
HTML
<!--
|
|
* Copyright 2016 Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
* Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in
|
|
* compliance with the License. A copy of the License is located at
|
|
* http://aws.amazon.com/apache2.0/
|
|
* or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
|
|
* specific language governing permissions and limitations under the License.
|
|
*
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Metastream Sample</title>
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
|
|
<link href="metastream_sample.css" rel="stylesheet">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div id="position-text"></div>
|
|
<div id="direction-text"></div>
|
|
<div class="map">
|
|
<div class="position">
|
|
<div class="arrow"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
|
|
|
|
<script type="text/babel">
|
|
class SampleOverlay {
|
|
constructor(pollRate = 200) {
|
|
this.state = {
|
|
pollRate: pollRate, // How often to poll for data in milliseconds
|
|
|
|
position: [0,0,0],
|
|
forward: [0,0,0],
|
|
};
|
|
|
|
this._bind(
|
|
"pollData"
|
|
);
|
|
|
|
// Start polling for data after a short delay
|
|
setTimeout(this.pollData, 1000);
|
|
}
|
|
|
|
_bind(...methods) {
|
|
methods.forEach( (method) => this[method] = this[method].bind(this) );
|
|
}
|
|
|
|
pollData() {
|
|
var url = "/data";
|
|
var query = "?table=sample&key=";
|
|
query += "position,";
|
|
query += "forward";
|
|
|
|
$.get(url + query, function(json) {
|
|
var data;
|
|
|
|
try {
|
|
data = $.parseJSON(json);
|
|
} catch(e) {
|
|
// returned JSON wasn't well formed... 404 maybe?
|
|
return;
|
|
}
|
|
|
|
var position = data["position"];
|
|
if(position) {
|
|
this.state.position = position;
|
|
}
|
|
|
|
var forward = data["forward"];
|
|
if(forward) {
|
|
this.state.forward = forward;
|
|
}
|
|
|
|
this.update();
|
|
}.bind(this)).always(function() {
|
|
setTimeout(this.pollData, this.state.pollRate);
|
|
}.bind(this));
|
|
}
|
|
|
|
update() {
|
|
var xpos = (this.state.position[0] / 128.0) * 100.0;
|
|
var ypos = (this.state.position[1] / 128.0) * 100.0;
|
|
var angle = Math.atan2(this.state.forward[0], this.state.forward[1]) + Math.PI/4;
|
|
|
|
var positionStyle = {
|
|
bottom: "calc(" + ypos + "% - 16px)",
|
|
left: "calc(" + xpos + "% - 16px)",
|
|
transform: "rotate(" + angle + "rad)",
|
|
};
|
|
|
|
$("#position-text").html("Jack Position: " + JSON.stringify(this.state.position));
|
|
$("#direction-text").html("Jack Direction: " + JSON.stringify(this.state.forward));
|
|
$(".position").css(positionStyle);
|
|
}
|
|
}
|
|
|
|
// Create and start overlay
|
|
var overlay = new SampleOverlay();
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|