+
`
,
props: {
diff --git a/components/Interface/ViewPanel/ViewPanel.css b/components/Interface/ViewPanel/ViewPanel.css
index c31ca69..7732a95 100644
--- 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
index 49e4e8b..3ea3bf3 100644
--- a/components/Interface/ViewPanel/ViewPanel.js
+++ b/components/Interface/ViewPanel/ViewPanel.js
@@ -5,7 +5,6 @@ app.component('view-panel', {
-
TLE
2D VIEW
3D VIEW
@@ -17,7 +16,6 @@ app.component('view-panel', {
-
diff --git a/components/Interface/ViewPanel/components/AltidudeTab.js b/components/Interface/ViewPanel/components/AltidudeTab.js
index 0187d84..2738f16 100644
--- a/components/Interface/ViewPanel/components/AltidudeTab.js
+++ b/components/Interface/ViewPanel/components/AltidudeTab.js
@@ -8,7 +8,7 @@ app.component('altitude-tab', {
diff --git a/components/Interface/ViewPanel/components/ForecastTab.js b/components/Interface/ViewPanel/components/ForecastTab.js
index f449f5b..b2a4837 100644
--- a/components/Interface/ViewPanel/components/ForecastTab.js
+++ b/components/Interface/ViewPanel/components/ForecastTab.js
@@ -8,7 +8,7 @@ app.component('forecast-tab', {
diff --git a/components/Interface/ViewPanel/components/Map2DTab/map.js b/components/Interface/ViewPanel/components/Map2DTab/map.js
index 3fd6430..c50826d 100644
--- 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
index 16e650f..bca2dac 100644
--- a/components/Interface/ViewPanel/components/Map3DTab/Map3DTab.js
+++ b/components/Interface/ViewPanel/components/Map3DTab/Map3DTab.js
@@ -15,7 +15,7 @@ app.component('map3D-tab', {
diff --git a/components/Interface/ViewPanel/components/StatisticsTab.js b/components/Interface/ViewPanel/components/StatisticsTab.js
index 79124e5..10bf683 100644
--- a/components/Interface/ViewPanel/components/StatisticsTab.js
+++ b/components/Interface/ViewPanel/components/StatisticsTab.js
@@ -8,7 +8,7 @@ app.component('statistics-tab', {