Giter Site home page Giter Site logo

obs-weather-overlay's Introduction

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.

obs-weather-overlay's People

Contributors

tidusio avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.