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)
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:
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_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)
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)
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
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:
(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.
