Improved responsiveness - Resolved #5

skyvue-satellite-tracking · Apr 30, 2024 · ab69bc7 · ab69bc7
1 parent 194eab0
commit ab69bc7
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 23 deletions.
diff --git a/components/Interface/ViewPanel/ViewPanel.js b/components/Interface/ViewPanel/ViewPanel.js
@@ -45,7 +45,6 @@ app.component('view-panel', {
             ]
         }
     },
-
     props: {
         tracking: {
             type: Boolean,

diff --git a/components/Interface/ViewPanel/components/Map2DTab/map.js b/components/Interface/ViewPanel/components/Map2DTab/map.js
@@ -179,8 +179,8 @@ function setFootprintCircleRadius(){
   longitudinal_length = 2 * Math.PI * earth_radius * Math.cos(current_latitude*Math.PI/180);
   earth_meridional_length = 40074; 
 
-  map_width = document.getElementById('map2D-img').offsetWidth; 
-  map_height = document.getElementById('map2D-img').offsetHeight; 
+  let map_width = document.getElementById('map2D-img').offsetWidth; 
+  let map_height = document.getElementById('map2D-img').offsetHeight; 
 
   document.getElementById('footprint-radius').style.width = map_width * (footprint_radius/longitudinal_length) + 'px';
   document.getElementById('footprint-radius').style.height = map_height * (footprint_radius/earth_meridional_length) + 'px';
@@ -196,15 +196,18 @@ function updateObjectPosition(object_path){
   latitude = object_path[object_path.length-1]['latitude'];
   longitude = object_path[object_path.length-1]['longitude'];
 
+  let map_width = document.getElementById('map2D-img').offsetWidth; 
+  let map_height = document.getElementById('map2D-img').offsetHeight;
+
   //Unit conversions, scaling and positional adjustments:
   satellite_picture_width = Number(document.getElementById("satellite").offsetWidth); 
-  satY = (Number(latitude) - 90)*(-2.2222) - satellite_picture_width/2;
-  satX = (Number(longitude) + 180)*(2.2222) - satellite_picture_width/2;
+  satY = (Number(latitude) - 90)*(-map_height/180) - satellite_picture_width/2;
+  satX = (Number(longitude) + 180)*(map_width/360) - satellite_picture_width/2;
 
   visibility_radius_width = Number(document.getElementById("footprint-radius").offsetWidth); 
   visibility_radius_height = Number(document.getElementById("footprint-radius").offsetHeight); 
-  radiusY = (Number(latitude) - 90)*(-2.2222) - visibility_radius_height/2;
-  radiusX = (Number(longitude) + 180)*(2.2222) - visibility_radius_width/2;
+  radiusY = (Number(latitude) - 90)*(-map_height/180) - visibility_radius_height/2;
+  radiusX = (Number(longitude) + 180)*(map_width/360) - visibility_radius_width/2;
 
   document.getElementById("satellite").style.transform = "translate(" + satX + "px, " + satY +  "px)";
   document.getElementById("footprint-radius").style.transform = "translate(" + radiusX + "px, " + radiusY +  "px)";
@@ -220,6 +223,9 @@ function updateNationalFlagPosition(object_path){
   latitude = object_path[object_path.length-1]['latitude'];
   longitude = object_path[object_path.length-1]['longitude']; 
 
+  let map_width = document.getElementById('map2D-img').offsetWidth; 
+  let map_height = document.getElementById('map2D-img').offsetHeight;
+
   // https://secure.geonames.org/countryCodeJSON?formatted=true&lat=47.03&lng=10.2&username=clodolinus&style=full
   fetch("https://secure.geonames.org/countryCodeJSON?formatted=true&lat=" + latitude + "&lng=" + longitude + "&username=clodolinus&style=full")
   .then((response) => response.json())
@@ -235,8 +241,8 @@ function updateNationalFlagPosition(object_path){
       document.getElementById("satellite-location-flag").src = flagURL;
 
       satellite_picture_width = Number(document.getElementById("satellite").offsetWidth); 
-      positionY = (Number(latitude) - 90)*(-2.2222);
-      positionX = (Number(longitude) + 180)*(2.2222);
+      positionY = (Number(latitude) - 90)*(-map_height/180);
+      positionX = (Number(longitude) + 180)*(map_width/360);
 
       document.getElementById("satellite-location-flag").style.transform = "translate(" + (positionX - satellite_picture_width/2 -5) + "px, " + (positionY - satellite_picture_width/2 - 5) +  "px)";
       document.getElementById("satellite-location-name").style.transform = "translate(" + (positionX + 10) + "px, " + (positionY + 10) +  "px)";

diff --git a/components/header/header.js b/components/header/header.js
@@ -125,7 +125,7 @@ app.component('header-vue', {
 
             // Letting celestrck direct link makes each user responsible by the use of this resource, since it is its own IP in use for these requests. 
             // Differently from the N2YO plataform, Celestrak allows that approach.
-            fetch(skyvue_php_source)
+            fetch(celestrack_URL)
             .then((response => response.text()))
             .then((body) => {
 

diff --git a/responsiveness.css b/responsiveness.css
@@ -76,7 +76,6 @@
         align-items: center;
 
         row-gap: 100px;
-
     }
 
     .interface {
@@ -179,16 +178,25 @@
     }
 
     #satbot-container {
-        position: fixed;
-        z-index: 2;
-        right: 0;
         top: 0;
         bottom: none;
-
-        width: fit-content;
-        height: 400px;
-        max-height: 100%;
-
+        max-height: 40%;
+
+    }
+
+    #view-labels {
+        flex-wrap: wrap;
+    }
+
+    .sky-status {
+
+        width: 100%;
+        margin: 0;
+    }
+
+    .sky-status-field-value {
+        padding: 0;
+        min-width: 6vw;
     }
 }
 
diff --git a/scripts/tracking.js b/scripts/tracking.js
@@ -203,11 +203,14 @@ function fetchUserLocation(){
         let altitude = position.coords.altitude;
 
         mountedApp.user_location = [latitude, longitude, altitude];
+
+        let map_width = document.getElementById('map2D-img').offsetWidth; 
+        let map_height = document.getElementById('map2D-img').offsetHeight;
 
         //Unit conversions, scaling and positional adjustments:
         let user_picture_width = Number(document.getElementById("user-location").offsetWidth); 
-        let userY = (Number(latitude) - 90)*(-2.2222) - user_picture_width/2;
-        let userX = (Number(longitude) + 180)*(2.2222) - user_picture_width/2;
+        let userY = (Number(latitude) - 90)*(-map_height/180) - user_picture_width/2;
+        let userX = (Number(longitude) + 180)*(map_width/360) - user_picture_width/2;
 
         document.getElementById("user-location").style.transform = "translate(" + userX + "px, " + userY +  "px)";
         document.getElementById("user-location").style.opacity = 1;
@@ -230,8 +233,8 @@ function fetchUserLocation(){
           document.getElementById("user-location-flag").src = flagURL;
 
           let user_picture_width = Number(document.getElementById("user-location").offsetWidth);
-          let positionY = (Number(latitude) - 90)*(-2.2222);
-          let positionX = (Number(longitude) + 180)*(2.2222);
+          let positionY = (Number(latitude) - 90)*(-map_height/180);
+          let positionX = (Number(longitude) + 180)*(map_width/360);
 
           document.getElementById("user-location-flag").style.transform = "translate(" + (positionX - user_picture_width/2 -8) + "px, " + (positionY - user_picture_width/2 - 10) +  "px)";
           document.getElementById("user-location-name").style.transform = "translate(" + (positionX + 10) + "px, " + (positionY + 10) +  "px)";
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,7 +45,6 @@ app.component('view-panel', { @@
                 ]
             }
         },
         props: {
             tracking: {
                 type: Boolean,
@@ Expand Down @@