mirror of
https://github.com/Xevion/history-of-robotics.git
synced 2025-12-06 05:15:18 -06:00
254 lines
10 KiB
Vue
254 lines
10 KiB
Vue
<template>
|
|
<div id="app">
|
|
<b-navbar sticky fixed=true>
|
|
<b-navbar-brand class="px-2 pl-3 exo-2 font-weight-normal text-white" style="font-size: 1.5em;">
|
|
Sojourner & Spirit
|
|
</b-navbar-brand>
|
|
<b-navbar-nav v-b-scrollspy:content>
|
|
<b-nav-item href="#sojourner" link-classes="open-sans text-white" @click="scrollIntoView">
|
|
Sojourner
|
|
</b-nav-item>
|
|
<b-nav-item href="#spirit" link-classes="open-sans text-white" @click="scrollIntoView">
|
|
Spirit
|
|
</b-nav-item>
|
|
</b-navbar-nav>
|
|
</b-navbar>
|
|
<div id="content" ref="content">
|
|
<b-jumbotron fluid container-fluid class="text-dark my-0 py-md-5 py-sm-0 px-md-5 px-sm-3">
|
|
<b-row class="px-sm-3 px-md-3 w-100" align-h="around">
|
|
<b-col md="6" xl="7" align-self="top">
|
|
<h1 id="sojourner">
|
|
Sojourner
|
|
</h1>
|
|
<p class="ml-4">
|
|
Launched into space on
|
|
<em class="text-nowrap" :title="this.moments.sojourner.launch.fromNow()">
|
|
{{ this.moments.sojourner.launch.format("MMMM Do, YYYY") }}
|
|
</em>,
|
|
Sojourner is the first wheeled vehicle to rove upon another planet - Mars.
|
|
It landed on <em class="text-nowrap" :title="this.moments.sojourner.landing">July 4th,
|
|
1997</em> in the <em>Ares Vallis</em> region.
|
|
</p>
|
|
<p class="ml-4">
|
|
Despite it's original mission duration planned to be just 7 days, it stayed active for 83
|
|
days in total.
|
|
</p>
|
|
<p class="ml-4">
|
|
The lander that Sojourner landed on, <em>Pathfinder</em>, used Airbags, paving the way for
|
|
the technologies use in future missions, such as Curiosity and Spirit.
|
|
</p>
|
|
</b-col>
|
|
<b-col md="6" xl="3" align-h="center" class="w-100 h-100">
|
|
<b-img fluid-grow src="./assets/sojourner.jpg"></b-img>
|
|
<p class="text-center">
|
|
<em>Sojourner</em>
|
|
</p>
|
|
</b-col>
|
|
</b-row>
|
|
</b-jumbotron>
|
|
<b-jumbotron fluid container-fluid class="bg-black my-0 py-md-5 py-sm-0 px-md-5 px-sm-3">
|
|
<b-row class="px-sm-3 px-md-3 w-100" align-h="around">
|
|
<b-col md="6" xl="5" align-self="center">
|
|
<h2>Autonomy</h2>
|
|
<p class="ml-3 ml-xl-4">
|
|
Sojourner was an important step in Robotics due to the nature of the mission.
|
|
With such a long distance between Mars and Earth, radio communications took around 14
|
|
minutes to receive, and then another 14 minutes to send back.
|
|
</p>
|
|
<p class="ml-3 ml-xl-4">
|
|
As such, human telegraphed movements too slow for the mission, and while complete autopilot
|
|
is impossible for such a complex mission, the rovers, landers, and spacecraft made by NASA
|
|
had to be programmer with autopilot.
|
|
</p>
|
|
<p class="ml-3 ml-xl-4">
|
|
To solve this problem, Sojourner, along with every rover to land on Mars, is equipped with
|
|
software dedicated to autonomously moving the rover across the martian surface.
|
|
</p>
|
|
<p class="ml-3 ml-xl-4">
|
|
While Sojourner was comparatively basic in it's software's autonomy, the software was helpful to operators
|
|
in visualizing and telegraphing instructions across the rocky terrain of Ares Vallis.
|
|
</p>
|
|
</b-col>
|
|
<b-col md="6" xl="5" align-h="center" class="w-100 h-100">
|
|
<h2>Communications</h2>
|
|
<p class="ml-4">
|
|
Sojourner is unique among the 4 rovers to successfully deploy on Mars in that it required
|
|
it's lander to stay in communication with Earth. The rover was not equipped with a high gain
|
|
antenna, which is required in order to communicate with Earth over large distances.
|
|
</p>
|
|
<p class="ml-4">
|
|
This limitation forced the rover to stay within a certain range of the lander, and throughout
|
|
it's lifetime on Mars, it never traveled more than a few dozen feet from the lander.
|
|
</p>
|
|
<h2>Tools</h2>
|
|
<p class="ml-4">
|
|
Sojourner was designed to study the surface of Mars by collecting and analyzing rock samples,
|
|
taking pictures and more.
|
|
</p>
|
|
</b-col>
|
|
</b-row>
|
|
</b-jumbotron>
|
|
<b-jumbotron fluid container-fluid class="text-dark my-0 py-md-5 py-sm-0 px-md-5 px-sm-3">
|
|
<b-row class="px-sm-3 px-md-3 w-100" align-h="around">
|
|
<b-col md="6" xl="3" align-h="center">
|
|
<b-img fluid-grow class="shadow-lg" src="./assets/spirit.jpg"></b-img>
|
|
<p class="text-center">
|
|
<em>Spirit</em>
|
|
</p>
|
|
</b-col>
|
|
<b-col class="ml-n5" md="6" xl="7" align-self="top">
|
|
<h1 id="spirit">
|
|
Spirit
|
|
</h1>
|
|
<p class="ml-4">
|
|
The geology-centric rover was launched into space <abbr
|
|
title="Spirit and Opportunity were launched separately, 3 days apart.">with it's
|
|
twin</abbr>, Opportunity, on
|
|
<em class="text-nowrap" :title="this.moments.spirit.launch.fromNow()">
|
|
{{ this.moments.spirit.launch.format("MMMM Do, YYYY") }}</em>.
|
|
And on
|
|
<em :title="this.moments.sojourner.landing.fromNow()">
|
|
{{ this.moments.spirit.landing.format("MMMM Do, YYYY") }}</em>,
|
|
it became the 2nd rover to arrive on the red planet.
|
|
</p>
|
|
<p class="ml-4">
|
|
Spirit was planned with just a 90 day mission in mind, but like it's twin, Spirit outlasted
|
|
this cycle far beyond what was originally planned.
|
|
</p>
|
|
<p class="ml-4">
|
|
</p>
|
|
</b-col>
|
|
</b-row>
|
|
</b-jumbotron>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');
|
|
@import "./scss/_variables.scss";
|
|
|
|
|
|
.jumbotron {
|
|
color: $white;
|
|
|
|
p {
|
|
@extend .open-sans;
|
|
font-size: 1.3em;
|
|
}
|
|
}
|
|
|
|
abbr {
|
|
text-decoration-color: rgba(255, 255, 255, 0.5) !important;
|
|
}
|
|
|
|
.bg-black {
|
|
background-color: $primary;
|
|
color: $white;
|
|
}
|
|
|
|
.navbar {
|
|
@extend .bg-black;
|
|
}
|
|
|
|
.jumbotron h1 {
|
|
@extend .exo-2;
|
|
font-size: 2.1em;
|
|
}
|
|
|
|
.carousel-caption {
|
|
bottom: -10px;
|
|
}
|
|
|
|
.carousel-caption {
|
|
width: 100%;
|
|
background-size: cover;
|
|
background-color: rgba(0, 0, 0, .45);
|
|
padding-top: 1rem;
|
|
left: 0;
|
|
}
|
|
|
|
a {
|
|
text-align: center;
|
|
|
|
&:hover {
|
|
color: #b0b0b0;
|
|
}
|
|
}
|
|
|
|
.exo-2 {
|
|
font-family: 'Exo 2', sans-serif;
|
|
}
|
|
|
|
.open-sans {
|
|
font-family: 'Open Sans', sans-serif;
|
|
}
|
|
|
|
.navbar-brand, .nav-link {
|
|
font-size: 1.2em;
|
|
color: $white;
|
|
}
|
|
|
|
html, body {
|
|
background-color: $primary;
|
|
color: $white;
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
font-size: 1em;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import moment from 'moment';
|
|
|
|
export default {
|
|
name: 'App',
|
|
components: {},
|
|
methods: {
|
|
scrollIntoView(evt) {
|
|
evt.preventDefault()
|
|
const href = evt.target.getAttribute('href')
|
|
const el = href ? document.querySelector(href) : null
|
|
if (el) {
|
|
this.$refs.content.scrollTop = el.offsetTop
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
moment: moment,
|
|
dates: {
|
|
sojourner: {
|
|
launch: [1996, 11, 4, 5, 57],
|
|
landing: [1997, 6, 4],
|
|
lastContact: [],
|
|
},
|
|
spirit: {
|
|
launch: [2003, 5, 11, 16, 57],
|
|
landing: [2004, 0, 4, 3, 34],
|
|
lastContact: []
|
|
}
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
moments: function () {
|
|
moment.defaultFormat = "MMMM Do, YYYY";
|
|
let obj = {}
|
|
// Build moment.utc fromNow 2d object dict
|
|
for (let k in this.dates) {
|
|
if (!(k in obj))
|
|
obj[k] = {}
|
|
|
|
for (let j in this.dates[k]) {
|
|
obj[k][j] = moment.utc(this.dates[k][j])
|
|
}
|
|
}
|
|
return obj;
|
|
}
|
|
}
|
|
}
|
|
</script>
|