Key concepts and intentions

For Connections Lab project 1, I create a live space station, which allows the user to explore things a little more in-depth in terms of the ISS and the universe. It shows the current location of ISS data on a web page, e.g., latitude, longitude, etc.

👤 User interactions

1️⃣ Using navbar to jump to different sections on the web page, e.g., map, faq, etc.
2️⃣ Being able to zoom in and zoom out on the map.
3️⃣ Using the mouse to play on the p5 coordinate viewer.
4️⃣ Clicking on the controller to play the cosmos sound.

✏️ Wireframe from week 1

Production decisions

My web application consists of 4 sections: the Home page, Space Station Tracker, Cosmos Soundscape, and the FAQ part.

On the homepage, there are two buttons that allow users to zoom in and zoom out on the map. The details can be viewed from Line 1 - 24 in the .js file. I use the substring method on the src to truncate it.

In the second section, the ISS tracker shows where the international space station is right now. Users can see the live latitude and longitude data keep updating per 3 seconds. On the p5 canvas, the spot moves to update its position per 3 seconds when the new data comes in. Also, users can use their mouse to play on a simple coordinate viewer.

The <audio controls> tag in the .html file enables a simple controller at the bottom of the Cosmos Soundscape section. Thus, the sound will not be auto-played when the page opens until the user clicks on the button. Following this part is the FAQ section. The contents are collected from here.

The last thing I made is the responsive design. Details can be viewed from Line 205 - 291 in the .css file. Also, from Line 112 - 156 in the .js file, I use jQuery to create the responsive navbar and a smooth scrolling effect when clicking on the navbar.

Major challenges and solutions

🤔 Attempted to query the ISS current location API continuously while an animation is happening in the p5 canvas.

✅ Solutions

1️⃣ Create latitude, longitude, and timestamp h3 elements in the .html file
2️⃣ Add value to latitude, longitude, and timestamp, and format timestamp
3️⃣ Recurrently update latitude, longitude, and timestamp values

From Line 26 - 70 in the .js file, I use fetch to incorporate the latitude, longitude, and timestamp. The runDate( ) allows me to format the timestamp. The reFetchData( ) and updateTime( ), which utilizes setTimeout( ), allow me to continuously query the API. From Line 72 - 110 in the .js file, I use p5.js to create a canvas. For the spot animation, I use setInterval( ), which allows the animation to update whenever new data comes in. The setTimeout( ) and setInterval( ) are both working for "scheduling a call". The difference is that,

🔂 setTimeout( ) allows us to run a function once after the interval of time.
🔁 setInterval( ) allows us to run a function repeatedly, starting after the interval of time, then repeating continuously at that interval.

// Thanks to YG's help, this problem has been solved

Next steps

For the next step, I would love to add a little easing motion into the p5 canvas, so the spot will not just jump into the next one when it gets a new position. I was also thinking to put an actual map on the canvas and do the correct spherical maths.

References and resources

ISS current location API
ISS tracker
NASA tracking map
Astroviewer
Convert a 10-digit-timestamp to js date
Working with data p5.js Tutorial