stephen
/
multipoint-satellite-tracker
1
2
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

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

master
Stephen Downward 1 year ago
parent
04292d91fe
commit
a09cdefc33
3 changed files with 197 additions and 140 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +17
    -3
      css/style.css
  2. +19
    -8
      index.html
  3. +161
    -129
      js/main.js

+ 17
- 3
css/style.css View File

@ -1,6 +1,9 @@
html, body {
height: 100%;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#container {
@ -24,9 +27,14 @@ html, body {
}
#rightNav {
display: flex;
flex-direction: column;
width: calc(100% - 450px);
width: -moz-calc(100% - 450px);
width: calc(100% - 450px);
overflow: hidden;
box-sizing: border-box;
height:100%;
}
#footer {
@ -50,7 +58,7 @@ html, body {
}
input[type=number] {
width: 40px;
width: 70px;
}
table tr td {
@ -75,3 +83,9 @@ table tr td {
.glyphicon-left {
margin-right: 7px;
}
#lmap {
overflow: hidden;
width: 100%;
height: 100%;
}

+ 19
- 8
index.html View File

@ -6,9 +6,18 @@
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3FKjZo6Fe6Lg--EU1Ci7V4rHIiU9Igb4"></script>
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
<!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3FKjZo6Fe6Lg--EU1Ci7V4rHIiU9Igb4"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="js/ng-map.min.js"></script>
<!-- <script src="js/ng-map.min.js"></script> -->
<script src="js/moment.min.js"></script>
<script src="js/satellite.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
@ -23,12 +32,12 @@
<td><b>Latitude</b></td>
<td><b>Longitude</b></td>
<td><b>Minimum AoA</b></td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="point in places">
<td>{{$index + 1}}</td>
<td>{{point.marker.position.lat().toFixed(6)}}</td>
<td>{{point.marker.position.lng().toFixed(6)}}</td>
<td>{{point.marker.getLatLng().lat.toFixed(6)}}</td>
<td>{{point.marker.getLatLng().lng.toFixed(6)}}</td>
<td><input type="number" min="0" max="90" ng-model="point.angle"> deg</td>
<td><button type="button" class="btn btn-danger" ng-click="removePoint($index)">Remove</button></td>
</tr>
@ -64,8 +73,8 @@
</table><br>
<div id="footer">
<center>
Developed by Stephen Downward, callsign VA1QLE.<br>
<a href="https://git.scd31.com/laptopdude90/multipoint-satellite-tracker">Git repository</a><br><br>
Developed by Stephen VE9QLE<br>
<a href="https://git.scd31.com/stephen/multipoint-satellite-tracker">Git repository</a><br><br>
</center>
</div>
</div>
@ -77,7 +86,9 @@
</ul>
</div>
<div id="map" ng-show="selectedTab == 'map'">
<ng-map center="39.82, -77.01" zoom="4" style="height:100%"></ng-map>
<div id="lmap"></div>
<!--<ng-map center="39.82, -77.01" zoom="4" style="height:100%"></ng-map>-->
</div>
<div id="config" ng-show="selectedTab == 'config'">
<center>


+ 161
- 129
js/main.js View File

@ -1,139 +1,171 @@
$(function () {
var now = new Date();
var then = new Date();
then.setDate(now.getDate() + 7);
$("#fromDate").datepicker().datepicker("setDate", now);
$("#toDate").datepicker().datepicker("setDate", then);
var now = new Date();
var then = new Date();
then.setDate(now.getDate() + 7);
$("#fromDate").datepicker().datepicker("setDate", now);
$("#toDate").datepicker().datepicker("setDate", then);
});
var app = angular.module('satTrackApp', ['ngMap']);
app.controller('satTrack-ctrl', function($scope, NgMap) {
$scope.places = [];
$scope.passes = [];
$scope.isGettingPasses = false;
$scope.selectedTab = 'map';
$scope.satellites = [];
$scope.selectAllSats = true;
loadSatelliteData(function(satList) {
$scope.satellites = satList;
});
var elevator;
$scope.removePoint = function(id) {
$scope.places[id].marker.setMap(null);
$scope.places[id].marker = null;
$scope.places.splice(id, 1);
for(var i = 0; i < $scope.places.length; i++) {
$scope.places[i].marker.setLabel((i + 1).toString());
}
}
NgMap.getMap().then(function(map) {
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
label: ($scope.places.length + 1).toString(),
draggable: true
});
elevator = new google.maps.ElevationService;
google.maps.event.addListener(marker, 'dragend', function () {
$scope.$apply();
});
$scope.places.push({marker: marker, angle: 10});
$scope.$apply();
});
});
$scope.getPasses = function() {
$scope.isGettingPasses = true;
callsRemaining = $scope.places.length;
for(var i = 0; i < $scope.places.length; i++) {
let place = $scope.places[i];
elevator.getElevationForLocations({locations: [$scope.places[i].marker.position]}, function(results, status) {
if(status === 'OK' && results[0]) {
place.height = Math.max(results[0].elevation / 1000, 0);
callsRemaining--;
if(callsRemaining <= 0) sendCoords();
} else {
alert('Something went very wrong');
}
});
}
var sendCoords = function() {
var coords = $scope.places.map(function(a) {
return {
lat: a.marker.position.lat(),
lng: a.marker.position.lng(),
height: a.height,
angle: a.angle
};
});
var worker = new Worker('js/calc.js');
worker.addEventListener('message', function(e) {
$scope.passes = e.data;
$scope.isGettingPasses = false;
$scope.$apply();
}, false);
var fromDate = $("#fromDate").datepicker('getDate');
var toDate = $("#toDate").datepicker('getDate');
var duration = Math.abs(moment(toDate).diff(fromDate) / 1000) + 86400;
worker.postMessage({coords: coords, satellites: $scope.satellites, fromDate: minDate(fromDate, toDate), toDuration: duration});
}
}
$scope.getDate = function(date) {
//console.log(date);
return moment(date).format("MMM D");
}
$scope.getTime = function(date) {
return moment(date).format("HH:mm:ss");
}
$scope.getDifferenceInMinutes = function(a, b) {
var d = moment.duration(moment(a).diff(moment(b)));
return (d / 60000) + " minutes";
}
$scope.getTimezone = function() {
offset = new Date().getTimezoneOffset();
halfHour = offset % 60;
halfHourStr = halfHour > 9 ? "" + halfHour : "0" + halfHour;
return "GMT" + (offset > 0 ? "-" : "+") + Math.floor(offset / 60) + halfHourStr;
}
$scope.toggleEnabled = function(val) {
for(var i = 0; i < $scope.satellites.length; i++) {
$scope.satellites[i].enabled = val;
}
}
var app = angular.module('satTrackApp',[] /*, ['ngMap']*/);
app.controller('satTrack-ctrl', function($scope) {
$scope.places = [];
$scope.passes = [];
$scope.isGettingPasses = false;
$scope.selectedTab = 'map';
$scope.satellites = [];
$scope.selectAllSats = true;
loadSatelliteData(function(satList) {
$scope.satellites = satList;
});
//Init leaflet map
var lmap = L.map('lmap').setView([39.82, -77.01], 4);
L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
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>',
maxZoom: 20,
//id: 'mapbox.streets',
//accessToken: 'your.mapbox.access.token'
}).addTo(lmap);
//var elevator;
$scope.removePoint = function(id) {
lmap.removeLayer($scope.places[id].marker);
$scope.places[id].marker = null;
$scope.places.splice(id, 1);
for(var i = 0; i < $scope.places.length; i++) {
$scope.places[i].marker.setLabel((i + 1).toString());
}
}
function onMapClick(map)
{
var marker = new L.marker(map.latlng, {draggable: 'true'}).addTo(lmap);
marker.on('dragend', function(e) {
$scope.$apply();
});
marker.bindTooltip(($scope.places.length + 1).toString()).openTooltip();
$scope.places.push({marker: marker, angle:10});
$scope.$apply();
}
lmap.on('click', onMapClick);
/*NgMap.getMap().then(function(map) {
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
label: ($scope.places.length + 1).toString(),
draggable: true
});
elevator = new google.maps.ElevationService;
google.maps.event.addListener(marker, 'dragend', function () {
$scope.$apply();
});
$scope.places.push({marker: marker, angle: 10});
$scope.$apply();
});
});*/
$scope.getPasses = function() {
$scope.isGettingPasses = true;
//callsRemaining = $scope.places.length;
//Get elevations
for(var i = 0; i < $scope.places.length; i++) {
let place = $scope.places[i];
place.height = 10; /* ------------TODO-------------- */
/*elevator.getElevationForLocations({locations: [$scope.places[i].marker.position]}, function(results, status) {
if(status === 'OK' && results[0]) {
place.height = Math.max(results[0].elevation / 1000, 0);
callsRemaining--;
if(callsRemaining <= 0) sendCoords();
} else {
alert('Something went very wrong');
}
});*/
}
var coords = $scope.places.map(function(a) {
return {
lat: a.marker.getLatLng().lat,
lng: a.marker.getLatLng().lng,
height: a.height,
angle: a.angle
};
});
var worker = new Worker('js/calc.js');
worker.addEventListener('message', function(e) {
$scope.passes = e.data;
$scope.isGettingPasses = false;
$scope.$apply();
}, false);
var fromDate = $("#fromDate").datepicker('getDate');
var toDate = $("#toDate").datepicker('getDate');
var duration = Math.abs(moment(toDate).diff(fromDate) / 1000) + 86400;
worker.postMessage({coords: coords, satellites: $scope.satellites, fromDate: minDate(fromDate, toDate), toDuration: duration});
}
$scope.getDate = function(date) {
//console.log(date);
return moment(date).format("MMM D");
}
$scope.getTime = function(date) {
return moment(date).format("HH:mm:ss");
}
$scope.getDifferenceInMinutes = function(a, b) {
var d = moment.duration(moment(a).diff(moment(b)));
return (d / 60000) + " minutes";
}
$scope.getTimezone = function() {
offset = new Date().getTimezoneOffset();
halfHour = offset % 60;
halfHourStr = halfHour > 9 ? "" + halfHour : "0" + halfHour;
return "GMT" + (offset > 0 ? "-" : "+") + Math.floor(offset / 60) + halfHourStr;
}
$scope.toggleEnabled = function(val) {
for(var i = 0; i < $scope.satellites.length; i++) {
$scope.satellites[i].enabled = val;
}
}
});
function loadSatelliteData(callback) {
$.get("nasabare.txt", function(data) {
var splitLines = data.split(/\r?\n/);
var satellites = []
for(var i = 0; i < splitLines.length; i += 3) { //3 lines per satellite, so advance by 1 satellite each time
if(splitLines[i] != '') {
var sat = satellite.twoline2satrec(splitLines[i + 1], splitLines[i + 2]);
var name = splitLines[i];
satellites.push({name: name, satrec: sat, enabled: true});
}
}
callback(satellites);
});
$.get("nasabare.txt", function(data) {
var splitLines = data.split(/\r?\n/);
var satellites = []
for(var i = 0; i < splitLines.length; i += 3) { //3 lines per satellite, so advance by 1 satellite each time
if(splitLines[i] != '') {
var sat = satellite.twoline2satrec(splitLines[i + 1], splitLines[i + 2]);
var name = splitLines[i];
satellites.push({name: name, satrec: sat, enabled: true});
}
}
//sort satellites by name
satellites.sort(function(a, b) {
return a.name.localeCompare(b.name);
});
callback(satellites);
});
}
function minDate(date1, date2) {
return date1 < date2 ? date1 : date2;
return date1 < date2 ? date1 : date2;
}

Write Preview
Loading…
Cancel
Save