Skip links

Automating WX GFX

4

 

 

If you have ever wanted to create awesome weather graphics that feature actual data you never have to update, but can’t afford or don’t have access to a full blown weather computer graphics system, keep reading this post.

 

Below are step by step directions for how to automate weather data for display on television programming in BroadcastPix production environments.

 

 

 

 

 

 


First Sample = Current Conditions

 

Step 1)

Open Harris InscriberTitlemotion GS HD and design your CG template graphic

(Tip: You can use other software such as Adobe Photoshop & After Effects to create your initial background design and then import those files in PNG/JPG format into the application)

 

1

 

Step 2)

Add the text as you would like to see it appear on the screen, then assign news tags to those text boxes to set them as a data input field

 

Step 3)

Export as a scribe file

 

Step 4)

Open RapidCG and add your scribe file as a graphics/CG slide (you will need version 3.5 build 345 or later for the XML data to be properly recognized and accepted, as BroadcastPix worked extensively with me to develop this functionality)

 

Step 5)

Find the current weather XML conditional data you wish to harvest from NOAA:

http://w1.weather.gov/xml/current_obs/seek.php?

 

Step 6)

Add it to the data watch files list in RCG, then find the table that contains the data field and value you wish to import into your graphic

 

Step 7) 

Once that value is selected, right click on the news tag of the scribe file in RCG and select the tag link lock option (this sets a relationship to that specific data field within the XML table; if you selected text instead, the content within your CG item would never change after this initial import of the data, so locking the tag link sets the relationship and as the value changes in the future, so will the content within your scribe file)

 

Additional Notes:

Continue setting up these data relationships for the remainder of your tags.  You can pull from multiple XML data sources for items such as regional temperatures and forecasts.


 

To harvest NOAA XML forecast data, do the following:

 

 

1

 

Step 1) Add the URL for the XML data by navigating to: http://www.weather.gov/ in RapidCG

 

Step 2) Enter your local zip code and click “go”

 

Step 3) Under the map on the right you’ll find the XML button that contains forecast data for your region based on its latitude and longitude

 

Step 4) Add that to your data watch files location

 

Step 5) Design your forecast graphics template

 

Design Tips:

  • The days of the week change in the following pattern “Tonight, Tomorrow, Saturday, Saturday Night” etc. (I found it best to design for 2 rows of text at the top of each forecast box since the days of the week are spelled out and not truncated)
  • The forecast moves in half steps with each update…day and then night (so instead of designing a separate and specific spot for low/high temperatures, keep it all in 1 column and as generic boxes because for part of the day that entire column will refer to that day’s forecast and then as evening draws near the data within that box will update a half step from the one beside it to become the evening forecast)
  • If you grab the written text part of the forecast, know that NOAA sometimes writes out longer phrases/a sentence, so give your text box plenty of room when designing the space for it within your graphic (this is why my temperature box is towards the top, leaving plenty of open space at the bottom)

 

You can create your own icons and also have them update accordingly; I worked with BroadcastPix to add this functionality to RapidCG.

 

Here are the steps you can take to integrate graphics into the forecast scribe/CG file so that they automatically are added and update when everything rotates in half steps, too:

 

Step 1) Visit the link for the NOAA Forecast Icon List

Here is the current icon list as of September, 2016:

bkn.png

blizzard.png

cold.png du.png

fc.png few.png

fg.png fu.png

fzra.png

fzra_sn.png

hi_nshwrs.png

hi_ntsra.png

hi_shwrs.png

hi_tsra.png

hur_warn.png

hur_watch.png

hz.png ip.png

minus_ra.png

nbkn.png

nblizzard.png

ncold.png

ndu.png

nfc.png

nfew.png

nfg.png

nfu.png


nfzra.png

nfzra_sn.png

nip.png

novc.png

nra.png

nraip.png

nra_fzra.png

nra_sn.png

nsct.png

nscttsra.png

nshra.png

nskc.png

nsn.png

nsn_ip.png

ntor.png

ntsra.png

nwind_bkn.png

nwind_few.png

nwind_ovc.png

nwind_sct.png

nwind_skc.png

ovc.png

ra.png

raip.png

ra_fzra.png

ra_sn.png

sct.png

scttsra.png

shra.png

skc.png

sn.png

snip.png

tor.png

tsra.png

ts_nowarn.png

ts_warn.png

ts_watch.png

wind_bkn.png

wind_few.png

wind_ovc.png

wind_sct.png

wind_skc.png

Step 2) Download each graphic icon and place them in the following directory: C:/graphics/CG/weather_icons/ (or one of your choosing)

 

Step 3) You can either leave them the way they are or make your own to replace them but keep the file name the same for each condition (be sure to make a note of the final PNG file’s dimensions and make sure it will fit in the space you’ve allotted for an icon within your master forecast graphic)

 

Step 4) Don’t forget to assign all of the news tags for both the forecast graphics and the text data (setting up the typeface and styles to match your graphics branding within Harris InscriberTitlemotion GS HD)

 

Step 5) Export the forecast template as a scribe file and import it into RapidCG

 

Step 6) Setup all of the conditional tag links for the forecast data (remember to use the tag link lock option)

 

Step 7) To setup the icon part of the forecast data, select the image path URL field within the XML file and right click on it

 

Step 8) Select “Add Condition”

 

Step 9) In the condition editor, first give the condition a new name such as “New Image 1”

 

Step 10) Select the “Remove/Replace” tab…

– Turn on the check box “Enable (Remove and Replace)”

– Turn on the check box “Remove File Path” (this strips out the old path)

– Turn on the check box “Remove File Ext” (this strips out the old extension)

– In “Remove start through” enter “i=” (without the quotes)

– In “Remove ending from” enter “&j=”  (without the quotes)

 

2

 

Step 11) Select the “Modify Result” tab…

– In “Add text at Start” enter “C:/graphics/CG/weather_icons/”  (or point it to your default path you selected above if different…and of course without the quotes)

– In “Add text at End” enter “.png”  (without the quotes)

 

3

 

Step 12) Click Save

 

Step 13) Select the new image condition value you created and on your scribe file’s news tag for the forecast icon for that particular time period, set it to the tag link lock of that new image condition field; use that updated condition field for each time period when assigning tag links

 

5

 


 

Pro Tips:

 

1) NOAA has a new feature that allows for dual icons (you can read about it on their icon page)

 

If you would rather use the second image from the dual icon option when creating forecast icons within your CG template apply the following change to the directions listed above…

 

Example 2 – Return full image path. or second of dual images… 

 

Same as the example above except:

 

– In “Remove start through” enter “j=” (without the quotes)

 

 

 

2) If you wish to add something like tidal data (ie: water temperature along the coast) know that the XML data for that is based on historical data and so while you can get current readings, the XML requires you specify a start and stop date and the range cannot exceed 31 days (so this will be the only piece of data you have to update every now and then).  All you have to do is update the date range in the XML URL and remove the old from the data watch list and replace it with the new (your tag link lock data you assign should not need to be updated).

 

Example:

 
 
 
 
 
2) Click on show data listing > web services button > water temperature data XML button to get the actual URL
 
 
 
3) Set your tag link to always update to the latest entry
 

 

 

(I recommend taking the XML URL it generates and pasting it into a text file so you can easily update the date manually and then copy/paste it into RCG every so often in order to keep the data up-to-date)

 


 

Have fun branding your own graphics package and if you follow these guides you can then relax knowing you’ll never have to manually key in the weather data!  Feel free to share any additional tips/comments below.

 

 

Leave a comment


This site uses Akismet to reduce spam. Learn how your comment data is processed.