Things I Learned: Making gifs with sationary backgrounds

Tracking down a mapping bug led me to watch clouds on Google Earth and after yesterday's snow storm—more on that later—I suddenly found myself scraping weather radar data to layer on top of the K-4514 POTA site KO6BTY camped at on Friday night.

Here's the map of the POTA activation/camping trip that started on a clear evening, became a dusting of snow, and then became more snow than the rental car could handle:

That's the camping site/radio station there at the pink x. The not quite beautifully formatted time in the upper left-hand corner is UTC time starting at midnight at the camp site. As you can see, the snow started, thought it might give up, and then resumed with gusto. I'll talk about that on my activation report. Here's the cool thing though! I've mostly automated the creation of radar weather maps for a given POTA activation site! 

Here's how:

The Source Data:

I'm scraping nexrad data from this site.

https://www.ncei.noaa.gov/maps/radar/

I learned how to do this sort of thing from watching Simon Willison's video and associated post. Thanks Simon!

Note to self: consider this more often as well.

Here are the general steps:

• Go to the site
• Search for your general location
• Hide the left-hand window
• Get the map at the zoom level you like
• Type Ctrl+Shirt+C
• Switch to the Network tab
• Shrink the tab panel as much as you can and still the source links
• Click the 'Clear network log' button
• Ever so gently resize the panel by about a pixel

You should wind up with a panel that looks about like this. If you don't, wiggle the resize of the panel a few times till you only have one "n0r" link visible under the Name column.

The link at the top of the Name column, the only link that starts with "n0r" is the one you want. That link contains a timestamp. It also contains an encoded bounding box of the map you see to the left. More steps

• Right-click and copy the link address. 
• Copy it to a text editor somewhere.
• Copy it into the new browser pad to see the radar pattern overlay to convince yourself it worked if you like.
• Change the time on the map using the left-hand pane to a time when there is no weather overhead.
• Make a screenshot of the resulting map, being careful to tuck the left-hand tool pane back away, and to capture the bottom menu bar which is an overlay of the map in your capture.
• Save the capture into a file something like map_bg.png

OK, take a breath. Remember how I said this was automerated? I know, what the ??????

Now, plug your link into a version of this script.

What your doing is coring out the time stamp portion of the link so that you can capture all the data overlays every five minutes for whatever time span you'd like. I started the one above at midnight and downloaded overalays every five minutes for twelve hours.

OK, now you have the parts, now let's talk about the only tool we're going to use ffmpeg.

ffmpeg

I'm going to write down the steps for making the map using the tool. The commands were cryptic to me the first time I saw them this morning. I'll try to write clarifying details if I have time today. Otherwise, I'll put them in another TIL post like this one.

To make the animated map with a backround map, the captured radar overlays, and (in may case) hour markers for all 12 hours, you'll use something like

ffmpeg -i tx2_site_station.png  -r 2 -i wx_2024_02_10_%d.png -r .1666666 -i ttime%d.png -filter_complex "[1]scale=1607:841,format=rgba,colorchannelmixer=aa=0.3[b];[2]scale=320:-1[c];[0:v][b] overlay[d];[d][c] overlay" outputtx6.gif

Which, to me, looks intimidating at first sight. Here are the important bits. tx2_site_station.png is the map capture I mentioned above. I modified mine a bit to place a pink x at the station, but it's just the map. the wx_*_%d.png argument is pointing at the .png files captured by the script mentioned above. 

Now, let's talk about frame rates for a minute. The frame rate is specified by the -r argument. I had 144 images over 12 hours. I wanted to get through the video fairly quickly, so the -r 2 argument associated with the 144 weather images is specifying that ffmpeg should create a video by sequencing two of the images per second. My resulting video is 72 seconds long.

Notice that the background png does not have a frame rate. It's there for the duration fo the video.

Finally, the ttime%d.png images are layered ni at a rate of one every six seconds. There are 12 of them—one per hour—so they'll also last for 72 seconds.

And now, the filter_complex!!!

filter_complex

Geesh!!! This thing was the most intimidating part for me. Here it is again for local reference:

filter_complex "[1]scale=1607:841,format=rgba,colorchannelmixer=aa=0.3[b];[2]scale=320:-1[c];[0:v][b] overlay[d];[d][c] overlay"

It's not so bad once you figure out the decoder ring. Numbers at the starts of commands reference the inputs to the ffmpeg command (-i arguments) in the order they were specified from left-to-right starting with the index 0, so [1] is the -i argument corresnding to the radar files.

It took me a while to figure out how to scale those images to fit the map. it seemed to me like they just should be construction, but it wasn't so. The solution in the end was to figure out the size of the background map picture in pixels, and then just specify it in the scale command. 

The format command for that set of images sets the overlays to be mostly transparent . That's what the 0.3 does.

Finally, [b] is the output of the scale and format commands taken together. 

I scaled the time overlays so that they would be 320 pixels wide and maintain their aspect ratio. That's what the -1 is for, preserving the aspect ratio. The output of that scaling is called [c].

The first overlay command overlays the weather maps [b] onto the background [0]. it's output is placed in [d].

The second overlay command overlays the timestamps [c] on top of [d].

And then, it's all done.

One final note: When LoFi is OK

The resulting gif above was consumed about 92 MB worth of file space. More importantly, it slowed down the loading of this page rather noticeably. I reduced the size to 16 MB or so by changing the resolution with

ffmpeg -i outputtx6.gif -filter_complex "scale=680:-1" outputtx6a.gif

The gif you see above is the LoFi version.