Integration with AWS PHP server.

skyvue-satellite-tracking · Apr 18, 2024 · fce33be · fce33be
1 parent 1add50c
commit fce33be
Show file tree

Hide file tree

Showing 21 changed files with 114 additions and 134 deletions.
diff --git a/app.js b/app.js
@@ -61,19 +61,16 @@ const app = Vue.createApp( {
 
             const interval_Wiki = setInterval(updateWikiInfo, this.wiki_update_rate);
 
-            // Making data-display and main-window elements have the same height.
-            makeSameHeightByID("data-display", "main-window");
-            window.onresize = function() {
-                makeSameHeightByID("data-display", "main-window");
-            };
-
             // Initialize 3D map Sun ilumination.
             let timestamp = (new Date()).getTime().toString().substring(0, 10);
-            updateEarthIlumination(timestamp);
-
+
             gradualOpacity('interface', 1500);    
             map2DGradualAppearance(3000);
 
+            setTimeout(() => {
+                updateEarthIlumination(timestamp);    
+            }, 4000);
+
         }, 100);
 
     }

diff --git a/assets/keeptrack.png b/assets/keeptrack.png
diff --git a/assets/stlogo.gif b/assets/stlogo.gif
diff --git a/components/Interface/DataPanel/DataPanel.css b/components/Interface/DataPanel/DataPanel.css
@@ -119,7 +119,7 @@
 
 #data-display {
 
-	height: fit-content;
+	height: 520px;
 	width: 300px;
 
 	display: flex;

diff --git a/components/Interface/DataPanel/components/ConfigTab.js b/components/Interface/DataPanel/components/ConfigTab.js
@@ -167,7 +167,6 @@ app.component('config-tab', {
                 ]);
 
                 updateObjectPosition(mountedApp.object_path);
-                updateNationalFlagPosition(mountedApp.object_path);
 
             }, mountedApp.display_framerate);
 

diff --git a/components/Interface/DataPanel/components/SourceTab.js b/components/Interface/DataPanel/components/SourceTab.js
@@ -114,7 +114,7 @@ app.component('source-tab', {
                     ]);
 
                     updateObjectPosition(mountedApp.object_path);
-                    updateNationalFlagPosition(mountedApp.object_path);                        
+
 
 
 

diff --git a/components/Interface/ViewPanel/ViewPanel.css b/components/Interface/ViewPanel/ViewPanel.css
@@ -144,7 +144,7 @@
 
 #main-window {
 
-	height: fit-content;
+	height: 520px;
 	width: fit-content;
 
 	display: flex;

diff --git a/components/Interface/ViewPanel/components/Map2DTab/Map2DTab.css b/components/Interface/ViewPanel/components/Map2DTab/Map2DTab.css
@@ -175,7 +175,7 @@
     align-items: flex-end;
     justify-content: flex-start;
 
-    border-style: solid;
+    border-style: groove;
     border-width: 0 0 1px 0;
     border-color: rgba(218, 218, 218, 0.641);
 
@@ -198,10 +198,20 @@
     align-items: flex-start;
     justify-content: flex-start;
 
-    border-style: solid;
+    border-style:groove;
     border-width: 0 1px 0 0;
     border-color: rgba(218, 218, 218, 0.641);
 
     writing-mode: vertical-rl;
 
 }
+
+#latitude-value{
+	padding: 1px 6px;
+	color: rgba(208, 208, 208, 0.884);
+}
+
+#longitude-value {
+	padding: 6px 1px;
+	color: rgba(208, 208, 208, 0.884);
+}
diff --git a/components/Interface/ViewPanel/components/Map2DTab/Map2DTab.js b/components/Interface/ViewPanel/components/Map2DTab/Map2DTab.js
@@ -53,20 +53,29 @@ app.component('map2D-tab', {
             return this.object_path.length;
         }
     },
+    watch: {
+
+        path_length(new_value, old_value){
+
+            updateNationalFlagPosition(mountedApp.object_path);                   
+
+        }
+
+    },
     methods: {
         placeCross(event) {
 
-            y = event.offsetY;
-            x = event.offsetX;
+            y = event.layerY;
+            x = event.layerX;
 
-            crossYPosition = (100 - (y / 400) * 100);
-            crossXPosition = (100 - (x / 800) * 100);
+            crossYPosition = 100 *(1 - (y / 400));
+            crossXPosition = 100 * (1 - (x / 800));
 
             document.getElementById('parallel').style.bottom = crossYPosition + '%';
             document.getElementById('meridian').style.right = crossXPosition + '%';
 
-            this.crossLatitude = ((crossYPosition / 100) * 180 - 90).toFixed(8);
-            this.crossLongitude = ((crossXPosition / 100) * 360 - 180).toFixed(8);
+            this.crossLatitude = ((crossYPosition / 100) * 180 - 90).toFixed(0) + '°';
+            this.crossLongitude = ((-1)*((crossXPosition / 100) * 360 - 180)).toFixed(0) + '°';
         },
         crossOff(){
             this.crossDisplay = false;

diff --git a/components/Interface/ViewPanel/components/Map3DTab/map3D/js/earth_sun.js b/components/Interface/ViewPanel/components/Map3DTab/map3D/js/earth_sun.js
@@ -187,43 +187,6 @@ function GLDrawer(scale, ready_callback) {
         earth_vert_src,
         earth_frag_src, ["coordinates"], ["ctm", "tr", "rot", "sun_dir", "sun_scale", "point_scale", "aa", "ground_tex", "clouds_tex", "lights_tex"]);
 
-
-    var outline_vert_src =
-        `
-    attribute vec2 coordinates;
-    uniform mat2 ctm;
-    uniform vec2 tr;
-    varying vec2 unit;
-    void main(void) {
-        unit = coordinates * vec2(3.14159265359, 3.14159265359 * 0.5);
-        gl_Position = vec4(coordinates * ctm + tr, 0.0, 1.0);
-    }
-    `;
-
-    var outline_frag_src =
-        `
-        precision highp float;
-        varying highp vec2 unit;
-        
-        uniform vec3 sun_dir;
-
-        void main(void) {
-            vec2 u = unit;
-
-            vec3 xyz = vec3 (sin(u.x)*cos(u.y), sin(u.y), cos(u.x)*cos(u.y));
-
-            float mul = mix(1.0, sqrt(max(0.0, dot(xyz, sun_dir))), 0.75);
-            float dot_a = 0.8 * smoothstep (0.9996, 0.99995, dot(xyz, sun_dir));
-
-            mediump vec4 color = vec4(0, 0, 0,1.0 - mul);
-            
-            color *= 1.0 - dot_a;
-            color += dot_a * vec4(1.0, 0.15, 0.15, 1.0);
-
-            gl_FragColor = color;
-        }
-        `;
-
     var ndc_sx, ndc_sy;
 
     this.begin = function(width, height) {
@@ -588,8 +551,6 @@ function SpaceDrawer(gl, scale, container, mode) {
                 ctx.stroke();
             }
 
-
-
             // ctx.font = "20px IBM Plex Sans";
             // ctx.textAlign = "right";
 
@@ -636,53 +597,17 @@ function SpaceDrawer(gl, scale, container, mode) {
 
 document.addEventListener("DOMContentLoaded", function(event) {
 
-
     metric = localStorage.getItem("global.metric") === "true";
 
     var scale = Math.min(2, window.devicePixelRatio || 1);
     var gl = new GLDrawer(scale, function() {});
 
     var sunlight_drawer = new SpaceDrawer(gl, scale, document.getElementById("es_earth_sunlight"), "earth_sunlight");
 
-    function t_to_date(t) {
-
-        var year = 2019;
-
-        t *= 365;
-        var i = 0;
-        var l = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-        while (t > l[i]) {
-            t -= l[i];
-            i++;
-        }
-        t = Math.floor(t);
-
-
-        return i == 11 && t == 31 ? [year + 1, 1, 1] : [year, i + 1, t + 1];
-    }
-
-    function t_to_time(t) {
-        t *= 24.0;
-        var h = Math.floor(t);
-        var m = Math.floor((t - h) * 60);
-        return [h, m]
-    }
-
     updateSunlightDirection = function(timeArray) {
         sunlight_drawer.set_date(timeArray[0], timeArray[1], timeArray[2]);
         sunlight_drawer.set_time(timeArray[3], timeArray[4]);
     }
 
-    // new Slider(document.getElementById("es_earth_sunlight_date_slider_container"), function(x) {
-    //     var ymd = t_to_date(x);
-    //     sunlight_drawer.set_date(ymd[0], ymd[1], ymd[2]);
-    // }, undefined);
-
-    // new Slider(document.getElementById("es_earth_sunlight_time_slider_container"), function(x) {
-    //     var hm = t_to_time(x);
-    //     sunlight_drawer.set_time(hm[0], hm[1]);
-    // }, undefined, 0.25);
-
-
 });
 
diff --git a/components/Interface/ViewPanel/components/SpectsTab/SpecsTab.js b/components/Interface/ViewPanel/components/SpectsTab/SpecsTab.js
@@ -49,12 +49,14 @@ app.component('specs-tab', {
                 {id: 'bstar-spec', name:'BSTAR: ', info: "Bstar drag term (leading decimal point assumed)."},
                 {id: 'ephemeris-spec', name:'EPHEMERIS TYPE: ', info: ""},
                 {id: 'inclination-spec', name:'INCLINATION: ', info: "(degrees)"},
-                {id: 'ascension-spec', name:'RIGHT ASCENSION: ', info: "(degrees)"},
+                {id: 'ascension-spec', name:'RAAN: ', info: "Right Ascension of the Ascending Node (degrees)"},
                 {id: 'eccentricity-spec', name:'ECCENTRICITY: ', info: "Leading decimal point assumed."},
                 {id: 'perigee-spec', name:'PERIGEE: ', info: "Argument of perigee. (degrees)"},
                 {id: 'mean-anomaly-spec', name:'MEAN ANOMALY: ', info: "(degrees)"},
                 {id: 'mean-motion-spec', name:'MEAN MOTION: ', info: "(revolutions per day)"},
-                {id: 'revolution-number-spec', name:'REVOLUTION NUMBER: ', info: "Number of revolution at epoch."},
+                {id: 'revolution-number-spec', name:'REVOLUTION NUMBER: ', info: "Number of revolution at epoch this TLE refers to."},
+                {id: 'checksum-line1-spec', name:'CHECKSUM (LINE 1): ', info: "Indicates TLE's line 1 data integrity."},
+                {id: 'checksum-line2-spec', name:'CHECKSUM (LINE 2): ', info: "Indicates TLE's line 2 data integrity."},
             ]
         }
     },
@@ -146,6 +148,7 @@ app.component('specs-tab', {
             mean_motion_second_derivative = tle_line1.substring(44, 52).trim();
             bstar = tle_line1.substring(53, 61).trim();
             ephemeris_type = tle_line1.substring(62, 63).trim();
+            checksum1 = tle_line1.substring(68, 69).trim();
 
             // Line 2:
             inclination = tle_line2.substring(8, 16).trim();
@@ -155,6 +158,7 @@ app.component('specs-tab', {
             mean_anomaly = tle_line2.substring(43, 51).trim();
             mean_motion = tle_line2.substring(52, 63).trim();
             revolution_number = tle_line2.substring(63, 68).trim();
+            checksum2 = tle_line2.substring(68, 69).trim();
 
             document.getElementById('name-spec').value = satname;
             document.getElementById('norad-spec').value = satid;
@@ -175,6 +179,8 @@ app.component('specs-tab', {
             document.getElementById('mean-anomaly-spec').value = mean_anomaly;
             document.getElementById('mean-motion-spec').value = mean_motion;
             document.getElementById('revolution-number-spec').value = revolution_number;
+            document.getElementById('checksum-line1-spec').value = checksum1;
+            document.getElementById('checksum-line2-spec').value = checksum2;
 
         }
         ,
@@ -206,14 +212,28 @@ app.component('specs-tab', {
 
         fetchPredictedPath(){
 
+            tle_object = JSON.parse(this.tle_string);
+
+            satname = tle_object.info.satname;
+            satid = tle_object.info.satid;
+            tle = tle_object.tle;
+
+            tle_line1 = tle.substring(0, tle.indexOf("\r\n")).trim();
+            tle_line2 = tle.substring(tle.indexOf("\r\n"), tle.length).trim();
+
+            // console.log(encodeURI(tle_line1));
+            // console.log(encodeURI(tle_line2));
+
             // Request computed orbit based on the TLE info.
-            API_URL = "https://skyvue-ai.onrender.com/OrbitFromTLE?satTLE=" + mountedApp.tle_string;
+            API_URL = "http://ec2-34-222-130-73.us-west-2.compute.amazonaws.com/skyVue-php" + "?tle_line1=" + tle_line1 + "&tle_line2=" + tle_line2;
             fetch(API_URL)
             .then((response) => response.json())
             .then((data) => {
 
-              mountedApp.predicted_path = data.path;
-              console.log(mountedApp.predicted_path);
+                console.log(data);
+
+            //   mountedApp.predicted_path = data.path;
+            //   console.log(mountedApp.predicted_path);
 
             });
 

diff --git a/components/header/header.js b/components/header/header.js
@@ -57,7 +57,7 @@ app.component('header-vue', {
     watch: {
         user_location(new_value, old_value) {
             if (new_value.length == 3) {
-                this.fetchSatellitesCrossingUserSky();
+                // this.fetchSatellitesCrossingUserSky();
             }
         },
         active_satellites(new_value, old_value){
@@ -111,7 +111,7 @@ app.component('header-vue', {
         },
     },
     mounted() {
-        this.fetchActiveSatellites();
+        // this.fetchActiveSatellites();
         this.fetchDebris();
     }
 

diff --git a/docs/AIAA-2006-6753-Rev3.pdf b/docs/AIAA-2006-6753-Rev3.pdf
diff --git a/docs/AIAA-2006-6753.pdf b/docs/AIAA-2006-6753.pdf
diff --git a/docs/AIAA-2006-6753.zip b/docs/AIAA-2006-6753.zip
diff --git a/docs/TLE_standard.png b/docs/TLE_standard.png
diff --git a/docs/spacetrk.pdf b/docs/spacetrk.pdf
diff --git a/index.html b/index.html
@@ -62,16 +62,18 @@
 			<div id="resources" class="band-container">
 				<div class="band-display">
 					<div class="inline-flex-container">
-						<div class="band-title-box">
+						<div class="band-title-box-resources">
 							<h6>recommended</h6>
 							<h1 class="band-title">RESOURCES</h1>
 							<h6>from other creators</h6>
 						</div>
 
-						<div style="display: inline-flex; flex-wrap: nowrap; gap: 4vh;">
-							<div class="band-button-container"><a target="_blank" href="https://celestrak.org/"><button class="rectangular-button" id="resource-button-1"><img class="resource-image" src="./assets/resource1.png" width="100%" height="100%" ></button></a><div class="button-name">Celestrack</div></div>
+						<div style="display: inline-flex; flex-wrap: wrap; gap: 5vh; padding: 3vw;">
+							<div class="band-button-container"><a target="_blank" href="https://celestrak.org"><button class="rectangular-button" id="resource-button-1"><img class="resource-image" src="./assets/resource1.png" width="100%" height="100%" ></button></a><div class="button-name">Celestrack</div></div>
+							<div class="band-button-container"><a target="_blank" href="https://celestrak.org/columns/"><button class="rectangular-button" id="resource-button-1"><img class="resource-image" src="./assets/stlogo.gif" width="100%" height="100%" ></button></a><div class="button-name">Satellite Times - articles</div></div>
 							<div class="band-button-container"><a target="_blank" href="https://nattybumppo.github.io/rocket-launch-history/"><button class="rectangular-button" id="resource-button-1"><img class="resource-image" src="./assets/HistoryOfLaunches.gif" width="100%" height="100%" ></button></a><div class="button-name">A BRIEF HISTORY OF ROCKET LAUNCHES</div></div>
 							<div class="band-button-container"><a target="_blank" href="https://satmap.space/"><button class="rectangular-button" id="resource-button-1"><img class="resource-image" src="./assets/satmap_demo.gif" width="100%" height="100%" ></button></a><div class="button-name">satmap.space</div></div>
+							<div class="band-button-container"><a target="_blank" href="https://www.keeptrack.space/deep-dive/two-line-element-set/"><button class="rectangular-button" id="resource-button-1"><img class="resource-image" src="./assets/keeptrack.png" width="100%" height="100%" ></button></a><div class="button-name">Deep Dive - articles</div></div>
 						</div>
 					</div>
 				</div>
@@ -84,15 +86,16 @@ <h6>from other creators</h6>
 						<a class="jointheteam-button" target="_blank" href="https://trello.com/b/D841pzzW/skylantern-web-app"><img src="./assets/join.png" alt="Join the team" style="width: 165px;" ></a>
 					</div>
 					<div class="inline-flex-container">
-						<div class="band-title-box">
-							<h1 class="band-title">THE TEAM</h1>
-						</div>
+
 						<div style="display: inline-flex; flex-wrap: nowrap; gap: 4vh;">
 							<div class="band-button-container"><a target="_blank" href="https://clodo.me/" target="_blank"><button class="circular-button" id="dev-button-1"><img class="dev-image" src="./assets/dev1.png" width="100%" ></button></a><div class="button-name">Clodo</div></div>
 							<div class="band-button-container"><a target="_blank" href="https://clodo.me/" target="_blank"><button class="circular-button" id="dev-button-1"><img class="dev-image" src="./assets/satbot.jpeg" width="100%" ></button></a><div class="button-name">Satbot</div></div>
 							<!-- <div class="band-button-container"><a target="_blank" href="https://clodon1109.github.io/caiosoter-webpage/" target="_blank"><button class="circular-button" id="dev-button-2"><img class="dev-image" src="./assets/caio-profile-art.png" width="100%" ></button></a><div class="button-name">Caio Sóter</div></div> -->
 
 						</div>
+						<div class="band-title-box-the-team">
+							<h1 class="band-title">THE TEAM</h1>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -131,7 +134,7 @@ <h1 class="band-title">THE TEAM</h1>
 					</a>
 
 					<div class="powered-by">
-						<div style="margin-right: 2vw; width: fit-content;">Powered by</div>
+						<div style="margin-right: 1vw; min-width: fit-content;">Powered by</div>
 						<div class="power-ups">
 							<a target="_blank" href="https://www.n2yo.com/api/"><img src="./assets/n2yo.png" width="150px" style="background-color: rgba(255, 255, 255, 0.856);"></a>
 							<a target="_blank" href="https://celestrak.org/"><img src="./assets/resource1.png" width="150px" style="background-color: rgba(255, 255, 255, 0.856);"></a>

diff --git a/scripts/misc.js b/scripts/misc.js
@@ -85,19 +85,6 @@ function copyCoordinates(){
 
 }
 
-// Making an element A inherit the height value from an element B .
-function makeSameHeightByID(elementA_id, elementB_id){
-
-  const sourceValue = document.getElementById(elementB_id).clientHeight;
-  document.getElementById(elementA_id).style.height = sourceValue + "px";
-
-}
-
-// window.addEventListener('load', function() {
-//   document.querySelector('.loader').style.display = 'none';
-// });
-
-
 function gradualOpacity(className, timeToAppear){
 
   elementsOfClass = document.getElementsByClassName(className);
-Original file line number
+Diff line change
@@ Expand Up / @@ -167,7 +167,6 @@ app.component('config-tab', { @@
                     ]);
                     updateObjectPosition(mountedApp.object_path);
-                    updateNationalFlagPosition(mountedApp.object_path);
                 }, mountedApp.display_framerate);
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -114,7 +114,7 @@ app.component('source-tab', {
		]);

		updateObjectPosition(mountedApp.object_path);
		updateNationalFlagPosition(mountedApp.object_path);




Expand Down