Infrastructure/www-2021
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

globe sizing

Browse source
This commit is contained in:
Daniel Vinci 2021-04-30 14:23:28 -06:00
parent ac3a890824
commit fb78deeed4
No known key found for this signature in database
GPG key ID: 7A700C29916C26CA
2 changed files with 394 additions and 392 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
src/components/Globe.svelte
View file

@ -1,42 +1,9 @@
<div class="globeContainer">
<svg id="globe" width="400" height="400"></svg>
<div class="globeText">
click and drag
</div>
</div>
<style>
.globeContainer {
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
background-color: #00111d;
color: #ffffff;
}
:global(.footprint--LEO) {
fill: rgba(255, 177, 64, 0.08);
stroke: rgba(255, 177, 64, 0.5);
}
.globeText{
text-align: center;
font-size: 0.6em;
color: #aaaaaa;
}
#globe {
display: block;
}
</style>
<script>
import * as d3 from "d3";
import * as sjs from 'satellite.js';
import { onMount } from 'svelte';
import tles from "../../static/tle.js"
import world110m from "../../static/world-110m.js"
import * as sjs from "satellite.js";
import { onMount } from "svelte";
import tles from "../../static/tle.js";
import world110m from "../../static/world-110m.js";
import * as topojson from "topojson";
export let width = 300;
@ -240,7 +207,9 @@
if (Math.sin(theta) > r / (altitude + r)) {
return Math.acos(r / (r + altitude));
}
return Math.abs(Math.asin(((r + altitude) * Math.sin(theta)) / r)) - theta;
return (
Math.abs(Math.asin(((r + altitude) * Math.sin(theta)) / r)) - theta
);
};
Satellite.prototype.halfAngle = function (halfAngle) {
@ -300,7 +269,7 @@
/* =============================================== */
// Approximate date the tle data was aquired from https://www.space-track.org/#recent
var TLE_DATA_DATE = new Date(2015, 11, 3, 17 ,36).getTime();
var TLE_DATA_DATE = new Date(2015, 11, 3, 17, 36).getTime();
var activeClock;
var sats;
@ -412,7 +381,10 @@
async function mousemove(e) {
if (m0) {
var m1 = [e.pageX, e.pageY];
const o1 = [o0[0] + (m1[0] - m0[0]) / 2.5, o0[1] + (m0[1] - m1[1]) / 2.5];
const o1 = [
o0[0] + (m1[0] - m0[0]) / 2.5,
o0[1] + (m0[1] - m1[1]) / 2.5,
];
projection.rotate(o1);
redrawGlobe();
}
@ -440,13 +412,43 @@
initGlobe();
await initSats(await parseTle(tles))
await initSats(await parseTle(tles));
}
onMount(async () => {
doThing();
});
</script>
<div class="globeContainer">
<svg id="globe" {width} height={width} />
<div class="globeText">click and drag</div>
</div>
<style>
.globeContainer {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #00111d;
color: #ffffff;
}
:global(.footprint--LEO) {
fill: rgba(255, 177, 64, 0.08);
stroke: rgba(255, 177, 64, 0.5);
}
.globeText {
text-align: center;
font-size: 0.6em;
color: #aaaaaa;
}
#globe {
display: block;
}
</style>

4
src/routes/index.svelte
View file

@ -15,7 +15,7 @@
<div class="site">
<div class="hero">
<div class="container">
<Globe />
<Globe width="250" />
<FemtoHeader />
</div>
</div>
@ -105,7 +105,7 @@
.hero .container {
grid-template-columns: auto;
grid-template-rows: 200px auto;
grid-template-rows: 260px auto;
}
}
</style>