Devyatyi9
/
o3de
tükrözi: https://github.com/o3de/o3de


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
							<!--
* 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>