Building an app to view and share satellite imagery đź›°
Throughout this summer, I’ve been keeping an eye on the fires in California and the hurricanes in the East with NASA/NOAA’s GOES satellites. These satellites take a picture of the earth every 5 minutes and create some stunning imagery and animations. All of this data is provided for free use through NOAA’s viewer which is a pretty incredible tool and resource.
My main issue with this viewer is that I wanted to share the imagery and animations with my friends via text/messaging/etc…. It was a pain to pull up the website on my phone, navigate to the view, check it out and save it to my camera roll to then attach to a message and promptly delete the downloaded image.
I just wanted a simple app that I could view the latest image and push a share button that would attach the imagery for me. So I decided to build it.
I’ve been working on learning Flutter for some time now and figured this would be a great small project to work on and hopefully it’s actually useful to some other people too!
To start, I had to figure out where to get the imagery. After looking at the network requests in the NOAA viewer, I found that they maintain these repositories of the imagery data.
At first, I realized that the numbers before the images are the timestamps and I tried to assemble animations by downloading each image and playing them in order. Turned out that was a big waste of time because they already provide gifs that are pre-assembled automatically. Then I just needed to figure out which image was the latest. Thankfully they helpfully label the latest image “latest.jpg” haha. They also have a “thumbnail.jpg” as well which is super helpful.
So between all these “hardwired” imagery sets, I just went through each view and created a list of the urls for my app to reference. It’s not the most exciting thing, but it works really really well since I don’t have to load in a list of links to load. The app already knows exactly where to grab the imagery from.
The hard part I found was that the back end service updates the imagery that the URLs point to, but my app doesn’t necessarily know when the imagery updated on the server side. So the fix I found was to append an empty query to the end of the url and change the query every 5 minutes so my app think it’s a different image. Here’s a sample URL with a random query stringed on the end.
To update the imagery, I just have a random number generator that I set to a variable and append to the URL string on the imagery widget. This way when I update the random number variable, flutter rebuilds the imagery widget.
I just use a ListView.builder to build out a card widget for every url in the pre-defined list of urls and I end up with my home screen! I also added in the refresh button in the upper right which just triggers the random number generator to refresh the query number and rebuilds all the image widgets.
As for the page to view the imagery, I wanted to be able to view the latest image and the gif easily, so that’s the main focus for the page. Along with the main interaction, I also wanted to be able to easily share so I built in the share button as well.
To do all this I used a couple packages such as photo_view, rounded_loading_button, and share_plus. All of these packages are highly rated and for good reason! I was easily able to build out the viewer page and include an awesome share button that makes sharing the imagery a breeze.
One of the key features is I wanted the image/gif attached to the message and to do that, you must first download the imagery then pass that local download location to the share_plus plugin. I also wanted to be able to view the imagery full screen without all the buttons and Appbar so I added in a GestureDetector widget to the body where the onTap function flips a boolean that hides or shows all the relevant widgets.
After getting all this together, I realized there are a lot of different views and I generally only cared about a few, so I wanted some sort of way to re-order the views.
To accomplish this, I needed to store the order of the imagery locally and there are a couple options to do this, but I decided on just using a SQLite through the sqflite plugin. I used a BLOC to query and update the data so that way I can add features in the future like favorites and whatnot.
Now this looks janky and slow because it’s on a simulator on my computer, but I just wanted to show the usability of the drag and drop reorder-ability. To pull this off I actually used a built in Flutter widget called ReorderableListView.builder which has an onReorder callback so I just have that updating the imagery order BLOC and database.
Putting it all together you end up with an easy to use app to view and share the latest imagery from the GOES constellation.
In the future I’d also like to add in the other bands that NOAA provides, but for now I think this app is pretty slick!
Feel free to check out the Apps here:
IOS: https://apps.apple.com/us/app/goes-viewer/id1581819576
Android: https://play.google.com/store/apps/details?id=com.deeproot.goesviewer
