Skip to content

Commit

Permalink
Several enhancements to performance and responsiveness.
Browse files Browse the repository at this point in the history
  • Loading branch information
clodomir vianna da silva neto committed May 1, 2024
1 parent ab69bc7 commit c27c311
Show file tree
Hide file tree
Showing 20 changed files with 227 additions and 155 deletions.
4 changes: 2 additions & 2 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ const app = Vue.createApp( {
units: 'kilometers',
// possible values: 'retreated', 'full'
satbot_display: 'retreated',
active_satellites_count: 0,
satellites_crossing_count: 0,
active_satellites_count: [0],
satellites_crossing_count: [0],
}
},

Expand Down
2 changes: 2 additions & 0 deletions components/Interface/DataPanel/components/SourceTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,8 @@ app.component('source-tab', {
methods: {

startTracking(norad_number){

document.getElementById('main-window').scrollIntoView();

this.stopTracking();

Expand Down
9 changes: 5 additions & 4 deletions components/Interface/ViewPanel/components/Map2DTab/Map2DTab.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,13 @@ canvas {
width: inherit;
height: inherit;

transition: 'width 3s, opacity 1.5s';
transition: width 3s, opacity 1.5s;
}

#map2D-container {

width: 800px;
width: inherit;
height: inherit;

object-fit: contain;

Expand Down Expand Up @@ -163,8 +164,8 @@ canvas {
position: absolute;
z-index: 3;

width: 800px;
height: 400px;
width: inherit;
height: inherit;

margin: 0;
padding: 0;
Expand Down
27 changes: 20 additions & 7 deletions components/Interface/ViewPanel/components/Map2DTab/Map2DTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ app.component('map2D-tab', {
<div id="user-location-name"></div>
<img id="map2D-img" src="./assets/map2D.png">
<canvas id="canvas2D"></canvas>
<canvas id="canvas2D_active_satellites" style="opacity:1;"></canvas>
<canvas id="canvas2D_crossing_sky" style="opacity:0;"></canvas>
<canvas id="canvas2D" class="canvas2D"></canvas>
<canvas id="canvas2D_active_satellites" class="canvas2D" style="opacity:1;"></canvas>
<canvas id="canvas2D_crossing_sky" class="canvas2D" style="opacity:0;"></canvas>
<div @mousemove="placeCross($event)" @mouseout="crossOff()" @mouseover="crossOn()" id="cursor-cross">
<div id="parallel" @mouseover="crossOn()" v-show="crossDisplay">
Expand Down Expand Up @@ -53,15 +53,15 @@ app.component('map2D-tab', {
computed: {
path_length(){
return this.object_path.length;
}
},
},
watch: {

path_length(new_value, old_value){

updateNationalFlagPosition(mountedApp.object_path);

}
},

},
methods: {
Expand All @@ -70,8 +70,11 @@ app.component('map2D-tab', {
y = event.layerY;
x = event.layerX;

crossYPosition = 100 *(1 - (y / 400));
crossXPosition = 100 * (1 - (x / 800));
let map_width = document.getElementById('map2D-img').offsetWidth;
let map_height = document.getElementById('map2D-img').offsetHeight;

crossYPosition = 100 *(1 - (y / map_height));
crossXPosition = 100 * (1 - (x / map_width));

document.getElementById('parallel').style.bottom = crossYPosition + '%';
document.getElementById('meridian').style.right = crossXPosition + '%';
Expand All @@ -85,5 +88,15 @@ app.component('map2D-tab', {
crossOn() {
this.crossDisplay = true;
}
},
mounted() {

let canvas2D_list = document.getElementsByClassName('canvas2D');

for (let index = 0; index < canvas2D_list.length; index++) {
canvas2D_list[index].width = document.getElementById('screen').offsetWidth;
canvas2D_list[index].height = document.getElementById('screen').offsetHeight;
}

}
})
103 changes: 24 additions & 79 deletions components/Interface/ViewPanel/components/Map2DTab/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ function drawArray(path, detail_level, point_color = 'rgba(255, 255, 255, 1)', p
if(path.length === 0){
return
}

let step = Math.floor(100/detail_level);

for (let index = 0; index < path.length - 1; index += step) {
Expand All @@ -16,33 +16,29 @@ function drawArray(path, detail_level, point_color = 'rgba(255, 255, 255, 1)', p
latitude = path[index]['latitude'];
longitude = path[index]['longitude'];

let map_width = document.getElementById('map2D-img').offsetWidth;
let map_height = document.getElementById('map2D-img').offsetHeight;

// console.log(latitude);
// console.log(longitude);
// console.log('-----------------------------------');

//Unit conversions:
latitude = (Number(latitude) - 90)*(-2.2222);
longitude = (Number(longitude) + 180)*(2.2222);

scale_fix = 2.66;

lat = latitude/scale_fix;
lon = longitude/scale_fix;

latitude = (Number(latitude) - 90)*(-map_height/180);
longitude = (Number(longitude) + 180)*(map_width/360);


canvas_ctx.fillStyle = point_color;

for (let stroke = 0; stroke < point_strength; stroke++) {
canvas_ctx.fillRect(lon, lat, point_size, point_size);
canvas_ctx.fillRect(longitude, latitude, point_size, point_size);
}

}

}

// updateMap([path_1, line_level_detail_1], ...)
function drawActiveSatellites(path, detail_level, point_color = 'rgba(255, 255, 255, 1)', point_size = 0.1, point_strength = 10, canvas_ctx, delay_miliseconds = 0){
function drawArraySlowMotion(path, detail_level, point_color = 'rgba(255, 255, 255, 1)', point_size = 0.1, point_strength = 10, canvas_ctx, delay_miliseconds = 0, object_counter = [counter = 0]){

// console.log('path: ', path);

Expand All @@ -69,81 +65,30 @@ function drawActiveSatellites(path, detail_level, point_color = 'rgba(255, 255,
await sleep(delay_miliseconds);
}

mountedApp.active_satellites_count++;
// Make object counter display follows the plotting of each object.
object_counter[0]++;

// 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);
}


}
}

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) {
let map_width = document.getElementById('map2D-img').offsetWidth;
let map_height = document.getElementById('map2D-img').offsetHeight;

await sleep(delay_miliseconds);

mountedApp.satellites_crossing_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);
}
//Unit conversions:
latitude = (Number(latitude) - 90)*(-map_height/180);
longitude = (Number(longitude) + 180)*(map_width/360);

canvas_ctx.fillStyle = point_color;

for (let stroke = 0; stroke < point_strength; stroke++) {
canvas_ctx.fillRect(longitude, latitude, point_size, point_size);
}


}
Expand All @@ -155,14 +100,14 @@ function drawSatellitesCrossing(path, detail_level, point_color = 'rgba(255, 255
}

function updateMap(paths) {

let canvas_ctx = document.getElementById('canvas2D').getContext('2d');
canvas_ctx.clearRect(0, 0, canvas2D.width, canvas2D.height);

setFootprintCircleRadius();

paths.forEach(path => {
drawArray(path[0], path[1], 'white', 0.1, 10, canvas_ctx);
drawArray(path[0], path[1], 'white', 1, 1, canvas_ctx);
});

}
Expand All @@ -178,7 +123,7 @@ function setFootprintCircleRadius(){
current_latitude = mountedApp.object_path[object_path.length - 1].latitude;
longitudinal_length = 2 * Math.PI * earth_radius * Math.cos(current_latitude*Math.PI/180);
earth_meridional_length = 40074;

let map_width = document.getElementById('map2D-img').offsetWidth;
let map_height = document.getElementById('map2D-img').offsetHeight;

Expand Down
12 changes: 6 additions & 6 deletions components/header/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ app.component('header-vue', {
<div class="sky-status">
<div class="status-info" :title="info.ACTIVE_SATELLITES">?</div>
<div class="sky-status-field-name">ACTIVE SATELLITES:</div>
<div class="sky-status-field-value" style="color: rgba(100, 250, 100, 1);">{{this.active_satellites_count}}</div>
<div class="sky-status-field-value" style="color: rgba(100, 250, 100, 1);">{{this.active_satellites_count[0]}}</div>
<div @click="updateActiveSatellitesPositions();" class=refresh-button id=refresh-button-1><img src="./components/header/assets/refresh_button.png" /></div>
<label @change="showAllActiveSatellites($event.target.checked)" class="bin-button data-manager-row-button" for="myCheckbox">
<input checked type="checkbox" name="myCheckbox" id='active_satellites_checkbox'>
Expand All @@ -28,7 +28,7 @@ app.component('header-vue', {
<div class="sky-status">
<div class="status-info" :title="info.CROSSING_YOUR_SKY">?</div>
<div class="sky-status-field-name">CROSSING YOUR SKY:</div>
<div class="sky-status-field-value" style="color: rgba(100, 250, 100, 1);">{{this.satellites_crossing_count}}</div>
<div class="sky-status-field-value" style="color: rgba(100, 250, 100, 1);">{{this.satellites_crossing_count[0]}}</div>
<div @click="updateSatellitesCrossingSkyPositions();" class=refresh-button id=refresh-button-2><img src="./components/header/assets/refresh_button.png" /></div>
<label @change="showActiveSatellitesCrossingUserSky($event.target.checked)" class="bin-button data-manager-row-button" for="myCheckbox">
<input type="checkbox" name="myCheckbox" id='satellites_crossing_sky_checkbox'>
Expand Down Expand Up @@ -77,11 +77,11 @@ app.component('header-vue', {
required: true
},
active_satellites_count: {
type: Number,
type: Array,
required: true
},
satellites_crossing_count: {
type: Number,
type: Array,
required: true
},
}
Expand All @@ -98,12 +98,12 @@ app.component('header-vue', {
// drawArray(this.active_satellites, 100, 'rgba(160, 255, 160, 1)', 0.05, 150, canvas_ctx, 0);
// mountedApp.active_satellites_count = this.active_satellites.length;

drawActiveSatellites(this.active_satellites, 100, 'rgba(160, 255, 160, 1)', 0.05, 150, canvas_ctx, 0);
drawArraySlowMotion(this.active_satellites, 100, 'rgba(160, 255, 160, 0.7)', 0.5, 10, canvas_ctx, 0, mountedApp.active_satellites_count);

},
active_satellites_crossing_sky() {
let canvas_ctx = document.getElementById('canvas2D_crossing_sky').getContext('2d');
drawSatellitesCrossing(this.active_satellites_crossing_sky, 100, 'rgba(160, 255, 160, 1)', 0.05, 150, canvas_ctx, 0);
drawArraySlowMotion(this.active_satellites_crossing_sky, 100, 'rgba(160, 255, 160, 1)', 0.5, 10, canvas_ctx, 0, mountedApp.satellites_crossing_count);
},

},
Expand Down
0 docs/AIAA-2006-6753-Rev3.pdf → documentation/AIAA-2006-6753-Rev3.pdf
View file
File renamed without changes.
0 docs/AIAA-2006-6753.pdf → documentation/AIAA-2006-6753.pdf
View file
File renamed without changes.
0 docs/AIAA-2006-6753.zip → documentation/AIAA-2006-6753.zip
View file
File renamed without changes.
0 ..._ NORAD Two-Line Element Set Format.mhtml → ..._ NORAD Two-Line Element Set Format.mhtml
View file
File renamed without changes.
0 docs/N2YO.com API.mhtml → documentation/N2YO.com API.mhtml
View file
File renamed without changes.
0 docs/StarlinkTrails_Filter_2048.0.jpg → ...entation/StarlinkTrails_Filter_2048.0.jpg
View file
File renamed without changes
0 docs/TLE_standard.png → documentation/TLE_standard.png
View file
File renamed without changes
0 docs/skyVue_demo.gif → documentation/skyVue_demo.gif
View file
File renamed without changes
0 docs/skyVue_demo_HQ.gif → documentation/skyVue_demo_HQ.gif
View file
File renamed without changes
0 docs/spacetrk.pdf → documentation/spacetrk.pdf
View file
File renamed without changes.
6 changes: 3 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,12 @@
<link href="./components/Satbot/Satbot.css" rel="stylesheet" type="text/css" />
<link href="./components/dataManager/components/DataRow/DataRow.css" rel="stylesheet" type="text/css" />
<link href="./components/Checkbox/Checkbox.css" rel="stylesheet" type="text/css" />
<link href="./responsiveness/responsiveness.css" rel="stylesheet" type="text/css" />

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <!--Vue.js Development Build -->
<!-- <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.prod.js"></script> --> <!--Vue.js Production Build -->

<link href="./responsiveness.css" rel="stylesheet" type="text/css" />


</head>

<body>
Expand Down Expand Up @@ -76,7 +76,7 @@ <h6>from other creators</h6>
<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 class="band-button-container"><a target="_blank" href="https://www.keeptrack.space/articles/"><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>
Expand Down
Loading

0 comments on commit c27c311

Please sign in to comment.