Improving the My Observations Page with Satellite Match Links and More

The GLOBE Observer team was fortunate this summer to have two interns working on projects related to satellite matching. One of the projects (described in a previous blog) was to help lay the groundwork for adding the capability for satellite comparisons for land cover data, similar to what is available for clouds observations. The second project focused on making the existing cloud satellite matches more easily accessible to users through the My Observations page. You can read more about that project below. You can also watch a video presentation of the interns explaining their project themselves.

 

Project 2: Improvements to the My Observations Page (Angelina Tsai)

The GLOBE Clouds tool allows observers to take observations, which can be matched to satellite data. Observers can view their observations on their “My Observations” page, however, they currently cannot access their satellite matches on this page.  Users also currently do not know whether there is a match to their observation. The goal of my project this summer was to implement a user interface so that observers can view their matches on their My Observations page. 

Before my changes and implementations, the My Observations page had data charts that appeared as:

By creating a static page of the My Observations page locally – this is analogous to making a copy of the page and coding a “dummy” page – I was able to test design, functionality, format, and accessibility to make my changes as user-friendly as possible. To do so, I worked with the web development languages HTML, Cascading Style Sheets (CSS), and JavaScript. I had previously never worked with these languages, however, by utilizing internet resources and being guided by my mentor Joe Wieclawek, I was able to pick up these languages and quickly put them to use. My mentor and I met once a week to work through bugs and logic within the code that I wrote. Currently, because of the security measures (CORS) that the data charts for clouds observation matches have, there will still be some time before my work on the page can officially “go live.” 

For now, here is a staged version of what I implemented as part of my summer project:

In the field that reads "Satellite Match," users can see whether or not their observations have a match and the satellites they matched to in their observation. Additionally, users can sort (toggle) to only see their observations with satellite matches by clicking the button that reads "Show Only Satellite Matches".

An entry for a clouds observation entry on the My Observations page with a link showing that a geostationary (GEO) satellite match is available.

The upper part of the My Observations page, showing the button to toggle to show only those observations that have satellite matches available.

Aside from the main goal of this project, I also worked on a number of changes/fixes to the design of the My Observations page. When viewing observation charts on mobile, the arrows that are used to navigate between the images (the carousel) do not appear. (When looking into this, I also found that the indicators on the bottom of the image also do not appear on mobile.) I have changed the code so that the arrows and indicators will appear and added a gradient and drop shadow behind the arrows (to navigate between images) to improve their visibility. I have also decreased the size of the arrows for both desktop and mobile so that less of the picture is obstructed.

A comparison of the desktop view (left), which does have navigation arrows to move between pictures, and the mobile view in which they were missing.

Examples of the improved visibility of the arrows on the photo background.

 

 

---

About the Author:

Angelina Tsai is a rising sophomore at Harvey Mudd College in Claremont, California. She is studying computer science and physics. She started in 2021 as a high school intern doing communications tasks with the GLOBE Data and Information Systems team, but utilized her computer science and coding skills to branch out into the My Observations Update Project with part of her internship time this summer. Angelina’s communications mentor and Angelina’s supervisor is Autumn Burdick (NASA GLOBE Observer Communications Director).  However, for the programming aspects of this project, she was mentored by Joe Wieclawek (Chief Software Systems Engineer on the GLOBE Data and Information Systems team (DIS)).

Angelina would like to thank Autumn Burdick for not only helping connect her with the GLOBE Data and Information Systems team, but for creating an immensely valuable, fulfilling learning opportunity. Autumn has always been considerate of all working within her team, continually seeking to help all advance in their best interests. Angelina would also like to thank her mentor Joe Wieclawek, who took time to guide, teach, and work through all the bugs and hiccups throughout the project. It was also great to be able to meet with teachers and seeing how useful the implementations of this project will be for their students and for observers. Angelina is continually inspired by the efforts of GLOBE Observers to contribute to science and education.

Comments