Browse Source

minor css bug fixes, moved to OSM(TODO elevation)

Stephen Downward 7 months ago
parent
commit
a09cdefc33
3 changed files with 197 additions and 140 deletions
  1. 17 3
      css/style.css
  2. 19 8
      index.html
  3. 161 129
      js/main.js

+ 17 - 3
css/style.css

@ -1,6 +1,9 @@
1 1
html, body {
2
    height: 100%;
3
    width: 100%;
2
	position: absolute;
3
	top: 0;
4
	bottom: 0;
5
	left: 0;
6
	right: 0;
4 7
}
5 8
6 9
#container {
@ -24,9 +27,14 @@ html, body {
24 27
}
25 28
26 29
#rightNav {
30
	display: flex;
31
	flex-direction: column;
27 32
    width: calc(100% - 450px);
28 33
    width: -moz-calc(100% - 450px);
29 34
    width: calc(100% - 450px);
35
	overflow: hidden;
36
	box-sizing: border-box;
37
	height:100%;
30 38
}
31 39
32 40
#footer {
@ -50,7 +58,7 @@ html, body {
50 58
}
51 59
52 60
input[type=number] {
53
    width: 40px;
61
    width: 70px;
54 62
}
55 63
56 64
table tr td {
@ -75,3 +83,9 @@ table tr td {
75 83
.glyphicon-left {
76 84
    margin-right: 7px;
77 85
}
86
87
#lmap {
88
	overflow: hidden;
89
	width: 100%;
90
	height: 100%;
91
}

+ 19 - 8
index.html

@ -6,9 +6,18 @@
6 6
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
7 7
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
8 8
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
9
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3FKjZo6Fe6Lg--EU1Ci7V4rHIiU9Igb4"></script>
9
10
	<!-- Leaflet -->
11
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
12
		  integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
13
		  crossorigin=""/>
14
	<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
15
			integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
16
			crossorigin=""></script> 
17
	
18
    <!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3FKjZo6Fe6Lg--EU1Ci7V4rHIiU9Igb4"></script>-->
10 19
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
11
    <script src="js/ng-map.min.js"></script>
20
    <!-- <script src="js/ng-map.min.js"></script> -->
12 21
    <script src="js/moment.min.js"></script>
13 22
    <script src="js/satellite.min.js"></script>
14 23
    <script type="text/javascript" src="js/main.js"></script>
@ -23,12 +32,12 @@
23 32
                        <td><b>Latitude</b></td>
24 33
                        <td><b>Longitude</b></td>
25 34
                        <td><b>Minimum AoA</b></td>
26
                        <td></td>
35
						<td></td>
27 36
                    </tr>
28 37
                    <tr ng-repeat="point in places">
29 38
                        <td>{{$index + 1}}</td>
30
                        <td>{{point.marker.position.lat().toFixed(6)}}</td>
31
                        <td>{{point.marker.position.lng().toFixed(6)}}</td>
39
                        <td>{{point.marker.getLatLng().lat.toFixed(6)}}</td>
40
                        <td>{{point.marker.getLatLng().lng.toFixed(6)}}</td>
32 41
                        <td><input type="number" min="0" max="90" ng-model="point.angle"> deg</td>
33 42
                        <td><button type="button" class="btn btn-danger" ng-click="removePoint($index)">Remove</button></td>
34 43
                    </tr>
@ -64,8 +73,8 @@
64 73
                    </table><br>
65 74
                    <div id="footer">
66 75
                        <center>
67
                            Developed by Stephen Downward, callsign VA1QLE.<br>
68
                            <a href="https://git.scd31.com/laptopdude90/multipoint-satellite-tracker">Git repository</a><br><br>
76
                            Developed by Stephen VE9QLE<br>
77
                            <a href="https://git.scd31.com/stephen/multipoint-satellite-tracker">Git repository</a><br><br>
69 78
                        </center>
70 79
                    </div>
71 80
                </div>
@ -77,7 +86,9 @@
77 86
                        </ul>
78 87
                    </div>
79 88
                    <div id="map" ng-show="selectedTab == 'map'">
80
                        <ng-map center="39.82, -77.01" zoom="4" style="height:100%"></ng-map>
89
						<div id="lmap"></div>
90
                        <!--<ng-map center="39.82, -77.01" zoom="4" style="height:100%"></ng-map>-->
91
						
81 92
                    </div>
82 93
                    <div id="config" ng-show="selectedTab == 'config'">
83 94
                        <center>

+ 161 - 129
js/main.js

@ -1,139 +1,171 @@
1 1
$(function () {
2
    var now = new Date();
3
    var then = new Date();
4
    then.setDate(now.getDate() + 7);
5
    $("#fromDate").datepicker().datepicker("setDate", now);
6
    $("#toDate").datepicker().datepicker("setDate", then);
2
	var now = new Date();
3
	var then = new Date();
4
	then.setDate(now.getDate() + 7);
5
	$("#fromDate").datepicker().datepicker("setDate", now);
6
	$("#toDate").datepicker().datepicker("setDate", then);
7 7
});
8 8
9
var app = angular.module('satTrackApp', ['ngMap']);
10
11
app.controller('satTrack-ctrl', function($scope, NgMap) {
12
    $scope.places = [];
13
    $scope.passes = [];
14
    $scope.isGettingPasses = false;
15
    $scope.selectedTab = 'map';
16
    $scope.satellites = [];
17
    $scope.selectAllSats = true;
18
19
    loadSatelliteData(function(satList) {
20
        $scope.satellites = satList;
21
    });
22
23
    var elevator;
24
25
    $scope.removePoint = function(id) {
26
        $scope.places[id].marker.setMap(null);
27
        $scope.places[id].marker = null;
28
        $scope.places.splice(id, 1);
29
        for(var i = 0; i < $scope.places.length; i++) {
30
            $scope.places[i].marker.setLabel((i + 1).toString());
31
        }
32
    }
33
34
    NgMap.getMap().then(function(map) {
35
36
        google.maps.event.addListener(map, 'click', function(event) {
37
            var marker = new google.maps.Marker({
38
                position: event.latLng,
39
                map: map,
40
                label: ($scope.places.length + 1).toString(),
41
                draggable: true
42
            });
43
44
            elevator = new google.maps.ElevationService;
45
46
            google.maps.event.addListener(marker, 'dragend', function () {
47
                $scope.$apply();
48
            });
49
50
            $scope.places.push({marker: marker, angle: 10});
51
            $scope.$apply();
52
        });
53
    });
54
55
    $scope.getPasses = function() {
56
        $scope.isGettingPasses = true;
57
        callsRemaining = $scope.places.length;
58
        for(var i = 0; i < $scope.places.length; i++) {
59
            let place = $scope.places[i];
60
            elevator.getElevationForLocations({locations: [$scope.places[i].marker.position]}, function(results, status) {
61
                if(status === 'OK' && results[0]) {
62
                    place.height = Math.max(results[0].elevation / 1000, 0);
63
                    callsRemaining--;
64
                    if(callsRemaining <= 0) sendCoords();
65
                } else {
66
                    alert('Something went very wrong');
67
                }
68
            });
69
        }
70
        var sendCoords = function() {
71
            var coords = $scope.places.map(function(a) {
72
                return {
73
                    lat: a.marker.position.lat(),
74
                    lng: a.marker.position.lng(),
75
                    height: a.height,
76
                    angle: a.angle
77
                };
78
            });
79
80
            var worker = new Worker('js/calc.js');
81
            worker.addEventListener('message', function(e) {
82
83
                $scope.passes = e.data;
84
                $scope.isGettingPasses = false;
85
                $scope.$apply();
86
            }, false);
87
            var fromDate = $("#fromDate").datepicker('getDate');
88
            var toDate = $("#toDate").datepicker('getDate');
89
            var duration = Math.abs(moment(toDate).diff(fromDate) / 1000) + 86400;
90
            worker.postMessage({coords: coords, satellites: $scope.satellites, fromDate: minDate(fromDate, toDate), toDuration: duration});
91
        }
92
    }
93
94
    $scope.getDate = function(date) {
95
        //console.log(date);
96
        return moment(date).format("MMM D");
97
    }
98
99
    $scope.getTime = function(date) {
100
        return moment(date).format("HH:mm:ss");
101
    }
102
103
    $scope.getDifferenceInMinutes = function(a, b) {
104
        var d = moment.duration(moment(a).diff(moment(b)));
105
        return (d / 60000) + " minutes";
106
    }
107
108
    $scope.getTimezone = function() {
109
        offset = new Date().getTimezoneOffset();
110
        halfHour = offset % 60;
111
        halfHourStr = halfHour > 9 ? "" + halfHour : "0" + halfHour;
112
        return "GMT" + (offset > 0 ? "-" : "+") + Math.floor(offset / 60) + halfHourStr;
113
    }
114
115
    $scope.toggleEnabled = function(val) {
116
        for(var i = 0; i < $scope.satellites.length; i++) {
117
            $scope.satellites[i].enabled = val;
118
        }
119
    }
9
var app = angular.module('satTrackApp',[] /*, ['ngMap']*/);
10
11
app.controller('satTrack-ctrl', function($scope) {
12
	$scope.places = [];
13
	$scope.passes = [];
14
	$scope.isGettingPasses = false;
15
	$scope.selectedTab = 'map';
16
	$scope.satellites = [];
17
	$scope.selectAllSats = true;
18
19
	loadSatelliteData(function(satList) {
20
		$scope.satellites = satList;
21
	});
22
23
	//Init leaflet map
24
	var lmap = L.map('lmap').setView([39.82, -77.01], 4);
25
26
	L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
27
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
28
		maxZoom: 20,
29
		//id: 'mapbox.streets',
30
		//accessToken: 'your.mapbox.access.token'
31
	}).addTo(lmap);
32
33
	//var elevator;
34
35
	$scope.removePoint = function(id) {
36
		lmap.removeLayer($scope.places[id].marker);
37
		$scope.places[id].marker = null;
38
		$scope.places.splice(id, 1);
39
		for(var i = 0; i < $scope.places.length; i++) {
40
			$scope.places[i].marker.setLabel((i + 1).toString());
41
		}
42
	}
43
44
	function onMapClick(map)
45
	{
46
		var marker = new L.marker(map.latlng, {draggable: 'true'}).addTo(lmap);
47
48
		marker.on('dragend', function(e) {
49
			$scope.$apply();
50
		});
51
		marker.bindTooltip(($scope.places.length + 1).toString()).openTooltip();
52
		$scope.places.push({marker: marker, angle:10});
53
		$scope.$apply();
54
	}
55
56
	lmap.on('click', onMapClick);
57
	/*NgMap.getMap().then(function(map) {
58
59
		google.maps.event.addListener(map, 'click', function(event) {
60
			var marker = new google.maps.Marker({
61
				position: event.latLng,
62
				map: map,
63
				label: ($scope.places.length + 1).toString(),
64
				draggable: true
65
			});
66
67
			elevator = new google.maps.ElevationService;
68
69
			google.maps.event.addListener(marker, 'dragend', function () {
70
				$scope.$apply();
71
			});
72
73
			$scope.places.push({marker: marker, angle: 10});
74
			$scope.$apply();
75
		});
76
	});*/
77
78
	$scope.getPasses = function() {
79
		$scope.isGettingPasses = true;
80
		//callsRemaining = $scope.places.length;
81
82
		//Get elevations
83
		for(var i = 0; i < $scope.places.length; i++) {
84
			let place = $scope.places[i];
85
			place.height = 10; /* ------------TODO-------------- */
86
			/*elevator.getElevationForLocations({locations: [$scope.places[i].marker.position]}, function(results, status) {
87
				if(status === 'OK' && results[0]) {
88
					place.height = Math.max(results[0].elevation / 1000, 0);
89
					callsRemaining--;
90
					if(callsRemaining <= 0) sendCoords();
91
				} else {
92
					alert('Something went very wrong');
93
				}
94
			});*/
95
		}
96
97
98
		var coords = $scope.places.map(function(a) {
99
			return {
100
				lat: a.marker.getLatLng().lat,
101
				lng: a.marker.getLatLng().lng,
102
				height: a.height,
103
				angle: a.angle
104
			};
105
		});
106
107
		var worker = new Worker('js/calc.js');
108
		worker.addEventListener('message', function(e) {
109
110
			$scope.passes = e.data;
111
			$scope.isGettingPasses = false;
112
			$scope.$apply();
113
		}, false);
114
		var fromDate = $("#fromDate").datepicker('getDate');
115
		var toDate = $("#toDate").datepicker('getDate');
116
		var duration = Math.abs(moment(toDate).diff(fromDate) / 1000) + 86400;
117
		worker.postMessage({coords: coords, satellites: $scope.satellites, fromDate: minDate(fromDate, toDate), toDuration: duration});
118
	}
119
120
	$scope.getDate = function(date) {
121
		//console.log(date);
122
		return moment(date).format("MMM D");
123
	}
124
125
	$scope.getTime = function(date) {
126
		return moment(date).format("HH:mm:ss");
127
	}
128
129
	$scope.getDifferenceInMinutes = function(a, b) {
130
		var d = moment.duration(moment(a).diff(moment(b)));
131
		return (d / 60000) + " minutes";
132
	}
133
134
	$scope.getTimezone = function() {
135
		offset = new Date().getTimezoneOffset();
136
		halfHour = offset % 60;
137
		halfHourStr = halfHour > 9 ? "" + halfHour : "0" + halfHour;
138
		return "GMT" + (offset > 0 ? "-" : "+") + Math.floor(offset / 60) + halfHourStr;
139
	}
140
141
	$scope.toggleEnabled = function(val) {
142
		for(var i = 0; i < $scope.satellites.length; i++) {
143
			$scope.satellites[i].enabled = val;
144
		}
145
	}
120 146
});
121 147
122 148
function loadSatelliteData(callback) {
123
    $.get("nasabare.txt", function(data) {
124
        var splitLines = data.split(/\r?\n/);
125
        var satellites = []
126
        for(var i = 0; i < splitLines.length; i += 3) { //3 lines per satellite, so advance by 1 satellite each time
127
            if(splitLines[i] != '') {
128
                var sat = satellite.twoline2satrec(splitLines[i + 1], splitLines[i + 2]);
129
                var name = splitLines[i];
130
                satellites.push({name: name, satrec: sat, enabled: true});
131
            }
132
        }
133
        callback(satellites);
134
    });
149
	$.get("nasabare.txt", function(data) {
150
		var splitLines = data.split(/\r?\n/);
151
		var satellites = []
152
		for(var i = 0; i < splitLines.length; i += 3) { //3 lines per satellite, so advance by 1 satellite each time
153
			if(splitLines[i] != '') {
154
				var sat = satellite.twoline2satrec(splitLines[i + 1], splitLines[i + 2]);
155
				var name = splitLines[i];
156
				satellites.push({name: name, satrec: sat, enabled: true});
157
			}
158
		}
159
		//sort satellites by name
160
		satellites.sort(function(a, b) {
161
			return a.name.localeCompare(b.name);
162
		});
163
164
		
165
		callback(satellites);
166
	});
135 167
}
136 168
137 169
function minDate(date1, date2) {
138
    return date1 < date2 ? date1 : date2;
170
	return date1 < date2 ? date1 : date2;
139 171
}