Skip to content

ngholson/obs_weather_time_overlay

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 

Repository files navigation

Live weather and time overlay for OBS

screenshot:

This requires a free API key from OpenWeatherMap.org
make sure you sign up for the free api key under the "professional collections" section and NOT the "One Call by Call" or the API 3.0 subscription plan.

Multi-Language Support. Reads default language information from browser (in this case OBS) and displays output in that language.

NOTE: IT WILL TAKE 5-10 MINUTES FOR YOUR NEW API KEY TO BECOME ACTIVE. PLEASE BE PATIENT.

After you have downloaded and extracted the .zip file, open the weatherWidget.html file with any text editor
and change the following variables:

Required:
yourApiKey Your OpenWeatherMap API key.
yourCity Your city name. (example:London, UK or Las Vegas, NV, US or Kiev)
yourUnits fahrenheit, celsius, kelvin. (imperial, metric, standard)

Optional:
weatherDisplay options: full, weather, simple, temp, time (temp and time only display temp or time)
weatherIcons turns on weather display icons: 1=on 0=off
iconPack set which icons to use. (1-3) (add your own, see the text file in the images folder.)
iconHeight weather Icon height (for best results use textSize + 2. ex: textSize = 20pt + 2 = 22px)
textSize text size
textColor text color
weatherBackground weather box color (if dynamicBackground is enabled, this will only apply during the day hours)
dynamicBackground weather box will change based on day/night. 1=on 0=off
clockSeperator optional: seperator for the temp and time in full mode only (ex: -, /, ., *, blank spaces, etc.)
time24hour if enabled time is displayed in 24hr format vs 12hr format
weatherBorder border size around weather display
autoCheckUpdates if enabled overlay will check for updates when first loads.


Save the file and open OBS-Studio

in OBS, add a new "browser" source to the scene you want to dispaly the weather and time. change the URL for the source to the path of the weatherWidget.html file you just saved. change the height and width to 1920x1080.

save and position as needed.

KNOWN ISSUE:
If your town shares a name with another town, for instance Long Beach, CA and Long Beach, MS. The larger area can use just the short format variable "long beach", in fact in some cases must use the short format, but the smaller city/town would need to use the long format "long beach, ms, usa".

REMEMBER: IT WILL TAKE 5-10 MINUTES FOR YOUR API KEY TO BECOME ACTIVE. THIS WILL NOT WORK UNTIL IT DOES.

About

Weather and Time overlay widget for OBS

Resources

Stars

Watchers

Forks

Languages