Gems/Metastream/Files/metastream_sample.html (82 lines of code) (raw):
<!--
* 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>