Several improvements and fixes.

skyvue-satellite-tracking · Apr 29, 2024 · 33bd59b · 33bd59b
1 parent fe4898a
commit 33bd59b
Show file tree

Hide file tree

Showing 21 changed files with 124 additions and 76 deletions.
diff --git a/app.js b/app.js
@@ -29,6 +29,7 @@ const app = Vue.createApp( {
             // possible values: 'retreated', 'full'
             satbot_display: 'retreated',
             active_satellites_count: 0,
+            satellites_crossing_count: 0,
         }
     },
 

diff --git a/assets/join.png → assets/roadmap.png b/assets/join.png → assets/roadmap.png
diff --git a/assets/roadmap_github.png b/assets/roadmap_github.png
diff --git a/assets/snap4.png b/assets/snap4.png
diff --git a/components/Interface/DataPanel/DataPanel.css b/components/Interface/DataPanel/DataPanel.css
@@ -120,7 +120,7 @@
 #data-display {
 
 	height: 520px;
-	width: 300px;
+	width: 325px;
 
 	display: flex;
 	flex-wrap: no-wrap;

diff --git a/components/Interface/DataPanel/DataPanel.js b/components/Interface/DataPanel/DataPanel.js
@@ -10,11 +10,13 @@ app.component('data-panel', {
 		
 		<div id="data-tabs">
 			<div @click="selectTab($event.target)" class="data-tab" id="source-tab">SOURCE</div>
+			<div @click="selectTab($event.target)" class="data-tab" id="orbit-tab">ORBIT</div>
 			<div @click="selectTab($event.target)" class="data-tab" id="data-tab">DATA</div>
 			<div @click="selectTab($event.target)" class="data-tab" id="config-tab">SETUP</div>
 		</div>
 		
 		<source-tab v-show="data_display_state === 'source'" :tracking="tracking"></source-tab>
+		<orbit-tab v-show="data_display_state === 'orbit'" :tle_string="tle_string" :tracking="tracking" :selected_satellite="selected_satellite"></orbit-tab>
 		<data-tab :object_path="object_path" v-show="data_display_state === 'data'"></data-tab>
 		<config-tab  v-show="data_display_state === 'config'" :source="source" :tracking="tracking"></config-tab>				
 	
@@ -45,6 +47,10 @@ app.component('data-panel', {
             type: Array,
             required: true
         },
+        tle_string: {
+			type: String,
+			required: true
+		}
     },
     methods: {
         selectTab(element){

diff --git a/components/Interface/DataPanel/components/ConfigTab.js b/components/Interface/DataPanel/components/ConfigTab.js
@@ -54,9 +54,8 @@ app.component('config-tab', {
                     </div>
                 </div>	
             </div>
-            
-            
-            
+                        
+<!--
             <div v-if="source === 'https://api.wheretheiss.at/' && tracking">
                 <div>
                     <div class="spec-info-mini" title="">?</div>
@@ -69,7 +68,7 @@ app.component('config-tab', {
                     </select>						
                 </div>
             </div>
-            
+-->
             <br>
             
         </div>
@@ -133,7 +132,6 @@ app.component('config-tab', {
             if (id === 'line-level-detail'){ 
                 mountedApp.line_level_detail = value;
                 updateMap([
-                    [mountedApp.object_path, mountedApp.line_level_detail],
                     [mountedApp.predicted_path, 100]
                 ]);            
             }
@@ -162,7 +160,6 @@ app.component('config-tab', {
                 }
 
                 updateMap([
-                    [mountedApp.object_path, mountedApp.line_level_detail],
                     [mountedApp.predicted_path, 100]
                 ]);
 

diff --git a/components/Interface/DataPanel/components/SourceTab.js b/components/Interface/DataPanel/components/SourceTab.js
@@ -109,7 +109,6 @@ app.component('source-tab', {
                     }
 
                     updateMap([
-                        [mountedApp.object_path, mountedApp.line_level_detail],
                         [mountedApp.predicted_path, 100]
                     ]);
 

diff --git a/...iewPanel/components/SpectsTab/SpecsTab.js → ...DataPanel/components/SpecsTab/OrbitTab.js b/...iewPanel/components/SpectsTab/SpecsTab.js → ...DataPanel/components/SpecsTab/OrbitTab.js
@@ -1,4 +1,5 @@
-app.component('specs-tab', {
+app.component('orbit-tab', {
+
     template: 
     /*html*/
     `
@@ -36,27 +37,27 @@ app.component('specs-tab', {
     data() {
         return {
             specs: [
-                {id: 'name-spec', name:"NAME: ", info: ""},
-                {id: 'norad-spec', name:'NORAD: ', info: "The NORAD Catalog Number, also known as the SATCAT, is a nine-digit sequential identifier assigned by the United States Space Command (USSPACECOM) to all artificial objects in Earth’s orbit and those that have left Earth’s orbit. It represents the order of launch or discovery and is used to track satellites and other space objects."},
-                {id: 'classification-spec', name:'CLASSIFICATION: ', info: "U: Unclassified; C: Classified; S: Secret"},
-                {id: 'launch-year-spec', name:'LAUNCH YEAR: ', info: "" },
-                {id: 'launch-number-spec', name:'LAUNCH NUMBER: ', info: "Launch number of the year." },
-                {id: 'piece-spec', name:'PIECE OF THE LAUNCH: ', info: "Piece of the launch."},
-                {id: 'epoch-year-spec', name:'EPOCH YEAR: ', info: ""},
+                {id: 'name-spec', name:"NAME ", info: ""},
+                {id: 'norad-spec', name:'NORAD ', info: "The NORAD Catalog Number, also known as the SATCAT, is a nine-digit sequential identifier assigned by the United States Space Command (USSPACECOM) to all artificial objects in Earth’s orbit and those that have left Earth’s orbit. It represents the order of launch or discovery and is used to track satellites and other space objects."},
+                {id: 'classification-spec', name:'CLASSIFICATION ', info: "U: Unclassified; C: Classified; S: Secret"},
+                {id: 'launch-year-spec', name:'LAUNCH YEAR ', info: "" },
+                {id: 'launch-number-spec', name:'LAUNCH NUMBER ', info: "Launch number of the year." },
+                {id: 'piece-spec', name:'PIECE OF THE LAUNCH ', info: "Piece of the launch."},
+                {id: 'epoch-year-spec', name:'EPOCH YEAR ', info: ""},
                 {id: 'epoch-spec', name:'EPOCH: ', info: "Day of the year and fractional portion of the day"},
-                {id: 'first-derivative-spec', name:'1° DERIVATIVE: ', info: "Mean motion first derivative."},
-                {id: 'second-derivative-spec', name:'2° DERIVATIVE: ', info: "Mean motion second derivative."},
-                {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:'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 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."},
+                {id: 'first-derivative-spec', name:'1° DERIVATIVE ', info: "Mean motion first derivative."},
+                {id: 'second-derivative-spec', name:'2° DERIVATIVE ', info: "Mean motion second derivative."},
+                {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:'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 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."},
             ]
         }
     },
@@ -264,4 +265,5 @@ app.component('specs-tab', {
 
         }
     }
+
 })
diff --git a/...l/components/SpectsTab/components/spec.js → ...el/components/SpecsTab/components/spec.js b/...l/components/SpectsTab/components/spec.js → ...el/components/SpecsTab/components/spec.js
@@ -2,13 +2,17 @@ app.component('spec', {
     template:
     /*html*/
     `
-    <div class="spec">
+    <div>
         <div style="display: inline-flex; gap: 5px;">
             <div class="spec-info" :title="spec.info">?</div>
-            <div class="spec-name">{{this.spec.name}}</div>	
+            <div>{{this.spec.name}}</div>
+        </div> 
+        <div class="data-field">
+            <output style="cursor: default;" :id="spec.id" readonly value=" &nbsp"></output> 
+           <!-- <div class="units coordinates-unit">deg</div> -->
         </div>
-        <output class="spec-value" :id="spec.id" readonly value=""></output>
     </div>
+
     `
     ,
     props: {

diff --git a/components/Interface/ViewPanel/ViewPanel.css b/components/Interface/ViewPanel/ViewPanel.css
@@ -18,10 +18,11 @@
 
 .tab {
 
-	position: sticky;
+	position: relative;
+	top: 0;
 	width: 100%;
 
-	padding: 5px 10px;
+	padding: 7px 10px;
 	margin: 0px;
 
 	color: white;
@@ -30,7 +31,7 @@
 
 	border-style: solid;
 	border-color: rgb(255, 255, 255);
-	border-width: "0.1px 0.1px 3px 0.1px";
+	border-width: 0.1px 0.1px 3px 0.1px;
 	border-radius: 0px;
 
 	font-family: courier; 
@@ -183,20 +184,11 @@
 
 	/* background-image: url(assets/mapmundi.png); 
 	background-size:cover;  */
-	width: 800px; 
+	width: 100%; 
 	height: 400px;
 
 	margin: 0;
-	padding: 2vw;
-
-	display: grid;
-	grid-template-columns: 50% 50%;
-	align-items: center;
-	align-content: center;
-	justify-items: center;
-	justify-content: center;
-
-	gap: 20px;
+	padding: 0;
 
 	font-family: 'Courier New', Courier, monospace;
 
@@ -300,7 +292,7 @@
 
 	padding: 10px;
 
-	font-size: 2vw;
+	font-size: 25px;
 	font-weight: 100;
 
 	backdrop-filter: blur(20px);

diff --git a/components/Interface/ViewPanel/ViewPanel.js b/components/Interface/ViewPanel/ViewPanel.js
@@ -5,7 +5,6 @@ app.component('view-panel', {
     <div id ="main-window">
 					
         <div id="view-tabs">
-            <div @click="selectTab($event.target)" class="tab" id="specs-tab">TLE</div>
             <div @click="selectTab($event.target)" class="tab" id="map2D-tab">2D VIEW</div>
             <div @click="selectTab($event.target)" class="tab" id="map3D-tab">3D VIEW</div>
             <!-- <div @click="selectTab($event.target)" class="tab" id="altitude-tab">PLANETARIUM</div> -->
@@ -17,7 +16,6 @@ app.component('view-panel', {
         
         <div id="screen" >
         
-            <specs-tab  v-show="viewer_state === 'specs'" :tracking="tracking" :selected_satellite="selected_satellite" :tle_string="tle_string" ></specs-tab>
             <map2D-tab  v-show="viewer_state === 'map2D'" :tracking="tracking" :object_path="object_path"></map2D-tab>
             <map3D-tab  v-show="viewer_state === 'map3D'"></map3D-tab>
             <altitude-tab  v-show="viewer_state === 'altitude'"></altitude-tab>

diff --git a/components/Interface/ViewPanel/components/AltidudeTab.js b/components/Interface/ViewPanel/components/AltidudeTab.js
@@ -8,7 +8,7 @@ app.component('altitude-tab', {
 
             <div id="contribute">
                 <a class="buymeacoffee-button" target="_blank" href="https://buymeacoffee.com/skyvue?new=1"><img src="./assets/buymeacoffee-button.png" alt="Buy Me A Coffee" style="width: 165px;" ></a>
-                <a class="roadmap-button" target="_blank" href="https://github.com/orgs/skyvue-satellite-tracking/projects/1"><img src="./assets/join.png" alt="Join the team" style="width: 165px;" ></a>
+                <a class="roadmap-button" target="_blank" href="https://github.com/orgs/skyvue-satellite-tracking/projects/1"><img src="./assets/roadmap_github.png" alt="Join the team" style="width: 165px;" ></a>
             </div>
 
         </div>

diff --git a/components/Interface/ViewPanel/components/ForecastTab.js b/components/Interface/ViewPanel/components/ForecastTab.js
@@ -8,7 +8,7 @@ app.component('forecast-tab', {
         
         <div id="contribute">
             <a class="buymeacoffee-button" target="_blank" href="https://buymeacoffee.com/skyvue?new=1"><img src="./assets/buymeacoffee-button.png" alt="Buy Me A Coffee" style="width: 165px;" ></a>
-            <a class="roadmap-button" target="_blank" href="https://github.com/orgs/skyvue-satellite-tracking/projects/1"><img src="./assets/join.png" alt="Join the team" style="width: 165px;" ></a>
+            <a class="roadmap-button" target="_blank" href="https://github.com/orgs/skyvue-satellite-tracking/projects/1"><img src="./assets/roadmap_github.png" alt="Join the team" style="width: 165px;" ></a>
         </div>
         
     </div>

diff --git a/components/Interface/ViewPanel/components/Map2DTab/map.js b/components/Interface/ViewPanel/components/Map2DTab/map.js
@@ -42,7 +42,7 @@ function drawArray(path, detail_level, point_color = 'rgba(255, 255, 255, 1)', p
 }
 
 // updateMap([path_1, line_level_detail_1], ...)
-function drawGradually(path, detail_level, point_color = 'rgba(255, 255, 255, 1)', point_size = 0.1, point_strength = 10, canvas_ctx, delay_miliseconds = 0){
+function drawActiveSatellites(path, detail_level, point_color = 'rgba(255, 255, 255, 1)', point_size = 0.1, point_strength = 10, canvas_ctx, delay_miliseconds = 0){
 
   // console.log('path: ', path);
 
@@ -61,11 +61,61 @@ function drawGradually(path, detail_level, point_color = 'rgba(255, 255, 255, 1)
   const drawPoint = async (path) => {
     for (let position of path) {
 
-      if (delay_miliseconds > 0) {
-        await sleep(delay_miliseconds);
+      await sleep(delay_miliseconds);
+
+      mountedApp.active_satellites_count++;
+
+      // console.log('satellite: ', path[index]);
+
+      let latitude = position['latitude'];
+      let longitude = position['longitude'];
+
+      // console.log(latitude);
+      // console.log(longitude);
+      // console.log('-----------------------------------');
+
+      //Unit conversions:
+      latitude = (Number(latitude) - 90)*(-2.2222);
+      longitude = (Number(longitude) + 180)*(2.2222);
+
+      let scale_fix = 2.66;
+
+      let lat = latitude/scale_fix;
+      let lon = longitude/scale_fix;
+
+      for (let stroke = 0; stroke < point_strength; stroke++) {
+        canvas_ctx.fillRect(lon, lat, point_size, point_size);
       }
+
+
+    }
+  }
 
-      mountedApp.active_satellites_count++;
+  drawPoint(path);
+
+
+}
+
+function drawSatellitesCrossing(path, detail_level, point_color = 'rgba(255, 255, 255, 1)', point_size = 0.1, point_strength = 10, canvas_ctx, delay_miliseconds = 0){
+
+  // console.log('path: ', path);
+
+  if(path.length === 0){
+    return
+  }
+
+  canvas_ctx.fillStyle = point_color;
+
+  let sleep = (milliseconds) => {
+    return new Promise(resolve => setTimeout(resolve, milliseconds))
+  }
+
+  const drawPoint = async (path) => {
+    for (let position of path) {
+
+      await sleep(delay_miliseconds);
+
+      mountedApp.satellites_crossing_count++;
 
       // console.log('satellite: ', path[index]);
 

diff --git a/components/Interface/ViewPanel/components/Map3DTab/Map3DTab.js b/components/Interface/ViewPanel/components/Map3DTab/Map3DTab.js
@@ -15,7 +15,7 @@ app.component('map3D-tab', {
             
             <div id="contribute">
                 <a class="buymeacoffee-button" target="_blank" href="https://buymeacoffee.com/skyvue?new=1"><img src="./assets/buymeacoffee-button.png" alt="Buy Me A Coffee" style="width: 140px;" ></a>
-                <a class="roadmap-button" target="_blank" href="https://github.com/orgs/skyvue-satellite-tracking/projects/1"><img src="./assets/join.png" alt="Join the team" style="width: 140px;" ></a>
+                <a class="roadmap-button" target="_blank" href="https://github.com/orgs/skyvue-satellite-tracking/projects/1"><img src="./assets/roadmap_github.png" alt="Join the team" style="width: 140px;" ></a>
             </div>
         </div>
         

diff --git a/components/Interface/ViewPanel/components/StatisticsTab.js b/components/Interface/ViewPanel/components/StatisticsTab.js
@@ -8,7 +8,7 @@ app.component('statistics-tab', {
         
         <div id="contribute">
             <a class="buymeacoffee-button" target="_blank" href="https://buymeacoffee.com/skyvue?new=1"><img src="./assets/buymeacoffee-button.png" alt="Buy Me A Coffee" style="width: 165px;" ></a>
-            <a class="roadmap-button" target="_blank" href="https://github.com/orgs/skyvue-satellite-tracking/projects/1"><img src="./assets/join.png" alt="Join the team" style="width: 165px;" ></a>
+            <a class="roadmap-button" target="_blank" href="https://github.com/orgs/skyvue-satellite-tracking/projects/1"><img src="./assets/roadmap_github.png" alt="Join the team" style="width: 165px;" ></a>
         </div>
         
     </div>

diff --git a/components/dataManager/DataManager.js b/components/dataManager/DataManager.js
@@ -27,7 +27,7 @@ app.component('data-manager', {
                     
                     <data-row id="data-units" :field_data="data_units"></data-row>
 
-                    <data-row v-for="field_data in predicted_path.slice(0,100)" :id="field_data.index" :field_data="field_data"></data-row>
+                    <data-row v-for="field_data in predicted_path.slice(0,30)" :id="field_data.index" :field_data="field_data"></data-row>
 
                 </div>
             </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -109,7 +109,6 @@ app.component('source-tab', { @@
                         }
                         updateMap([
-                            [mountedApp.object_path, mountedApp.line_level_detail],
                             [mountedApp.predicted_path, 100]
                         ]);
@@ Expand Down @@