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.