브라우저에서 Trackrr.io에 위치 정보를 표시해 보았습니다.

18718 단어 AngularT 등 ckr. 이오IoTAWSGPS

소개



trackrr.io-sdk-js은 브라우저 또는 서버의 Node.js 응용 프로그램 내에서 모두 사용할 수 있습니다.
이번에는 브라우저에서 이용해 보겠습니다.

T 등 ckr. 이오 에 위치 정보를 보내려면
액세스 키, 비밀 키가 필요합니다.
취득하지 않은 경우는 Trackrr.io 사용 방법 를 참조해 주세요.

코드



trackrr-example.html

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Trackrr.io | IoT/GPSトラッキングプラットフォーム</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.js"></script>

    <script type="text/javascript" src="https://rawgit.com/trackrr-io/trackrr.io-sdk-js/master/browser/aws-iot-sdk-browser-bundle.js"></script>
    <script type="text/javascript" src="https://rawgit.com/trackrr-io/trackrr.io-sdk-js/master/browser/trackrr.io-sdk-js-bundle.js"></script>
    <style>
        .vertical-center {
            min-height: 100%;
            /* Fallback for browsers do NOT support vh unit */
            min-height: 100vh;
            /* These two lines are counted as one :-)       */
            display: flex;
            align-items: center;
        }
    </style>
</head>

<body class="service-site">
    <script>
        angular.module("app",[])
            .controller("ctrl", function($scope, $http, $timeout) {
        $scope.msg = [];
                $scope.go = function() {
                    var gpsKey = $scope.gpeKey;
                    var secret = $scope.secret;
                    var client = new GpsClientManager(gpsKey, secret);
                    client.on("connect", function() {
                        var watchId = navigator.geolocation.watchPosition(function(position) {
                                var gps = {};
                                gps.coords = {
                                    latitude: position.coords.latitude,
                                    longitude: position.coords.longitude
                                };
                                client.publish(gps);
                                $timeout(function() {
                                    $scope.msg.push(gps.coords);
                                });
                            },
                            function(err) {
                                console.log(err)
                            }, {
                                enableHighAccuracy: true,
                                timeout: 5000,
                                maximumAge: 0
                            });
                    });
                }
            });
    </script>
    <div class="jumbotron vertical-center">
        <div class="container" ng-app="app">
            <div class="row" ng-controller="ctrl">
                <form name="userForm" class="form-horizontal" ng-submit="go()">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">gpeKey</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputEmail3" placeholder="gpeKey" ng-model="gpeKey" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">secret</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputPassword3" placeholder="secret" ng-model="secret" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button typef="submit" class="btn btn-success" type="submit" ng-disabled="userForm.$invalid">start
                            </button>
                        </div>
                    </div>
                </form>
                <div><pre>{{msg|json}}</pre></div>
            </div>
        </div>
    </div>
</body>

</html>

먼저 SDK를 로드합니다.
    <script type="text/javascript" src="https://rawgit.com/trackrr-io/trackrr.io-sdk-js/master/browser/aws-iot-sdk-browser-bundle.js"></script>
    <script type="text/javascript" src="https://rawgit.com/trackrr-io/trackrr.io-sdk-js/master/browser/trackrr.io-sdk-js-bundle.js"></script>

이 부분이 됩니다.
이번은 샘플이므로 rawgit을 사용하고 있습니다.
aws-iot-sdk도 필요하므로 함께 읽습니다.

송신 부분은
var gpsKey = $scope.gpeKey;
var secret = $scope.secret;
var client = new GpsClientManager(gpsKey, secret);
client.on("connect", function() {
    var watchId = navigator.geolocation.watchPosition(function(position) {
            var gps = {};
            gps.coords = {
                latitude: position.coords.latitude,
                longitude: position.coords.longitude
            };
            client.publish(gps);
            $timeout(function() {
                $scope.msg.push(gps.coords);
            });
        },
        function(err) {
            console.log(err)
        }, {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
        });
});

네요.
샘플은 폼에서 입력값을 가져오는 형태로 하고 있기 때문에 angular를 사용하고 있습니다만, 키를 코드에 포함하면 그럴 필요는 없습니다.

샘플의 실행 결과는 이런 느낌이 됩니다.


Trackrr.io의 콘솔 화면을 살펴보면 표시됩니다.


덧붙여 URL이 file URI scheme (file:///~~~)라고 Geolocation API를 사용할 수 없을지도 모릅니다.
Chrome은 NG였습니다.

샘플은
h tps : // s3- 아 p의 r아아 st-1. 아마조나 ws. 이 m/쿠이타-사 mpぇ/t등 ck r-에아 mpぇ. HTML
에 게시하고 있습니다.
gpsd + ntpd로 Stratum 1 (GPSD NG 버전)
Arduino에서 GPS 모듈 (GMS7-CR6)에서 날짜 및 시간 획득

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage