Weather Lookup By Location Input

Extensions Approved
, ,
1

Prerequisites

You must sign up for an API Key from https://www.weatherapi.com

There is no initial charge for a key. They allow up to 1,000,000 calls/month on their free tier.
Once you have your API Key, either save it to a text file or keep the webpage open.
You will need the key later in the setup process.

Install Steps

Imports now updated to work in Streamer.Bot 0.2.4+

v2
  1. Open Streamer.bot.
    • (version 0.1.7 and below) Right-click in the Actions tab and select “Import”.
    • (version 0.1.8 and above) Click the “Import” button at the top of the window.
  2. Save the file below.
  3. Drag and drop it into the Import box that is open in Streamer.Bot. You should see an Importable Action called “WM-Current_Weather-v2”
  4. Click Import.
  5. Click on the newly imported action and find the folder named Query setup.
  6. Double-click on the line that says “<Insert API Key Here>”
  7. Find the API Key that you created earlier and paste it into the Value box.
    If you do not have one, please follow the steps in the Prerequisite section above.
    (Optional: You can change the returned language by changing the variable to your language of choice.)
  8. Open the Execute Code (WeatherLookup) sub-action
  9. Click on References. Right click and select “Add Reference from File”
  10. Navigate to your .NET folder (typically C:\Windows\Microsoft.NET\Framework\v4.0.30319\) and select System.dll.
    Do this again and select System.Net.dll
    You should now have three files in your references: mscorlib.dll, System.dll, and System.Net.dll
  11. Click Compile. You should see a message in Compiling Log tab that says “Compiled successfully!”
  12. Click Save and Complile.

Import File

Weather_Lookup_by_Location_Input-v2.sb (6.5 KB)

Original v1
  1. Have Streamer.bot open and right-click in the Actions tab.
  2. Select “Import”
  3. Save the file below.
  4. Drag and drop it into the Import box that is open in Streamer.Bot. You should see an Importable Action called “WM-Current_Weather”
  5. Click Import.
  6. Click on the newly imported action and find the folder named Query setup.
  7. Double-click on the line that says “<Insert API Key Here>”
  8. Find the API Key that you created earlier and paste it into the Value box.
    If you do not have one, please follow the steps in the Prerequisite section above.
    (Optional: You can change the returned language by changing the variable to your language of choice.)
  9. Open the Execute Code (WeatherAPI) sub-action
  10. Click on References. Right click and select “Add Reference from File”
  11. Navigate to your .NET folder (typically C:\Windows\Microsoft.NET\Framework\v4.0.30319\) and select System.dll.
    Do this again and select System.Net.dll
    You should now have three files in your references: mscorlib.dll, System.dll, and System.Net.dll
  12. Click Compile. You should see a message in Compiling Log tab that says “Compiled successfully!”
  13. Click Save and Compile.

Import File

Weather_Lookup_by_Location_Input-v1.sb (5.3 KB)

Usage

  1. Create a command or a channel point reward and have it point to the WM-Current_Weather action.
    The command will need to have a location of Start. The channel point reward will need a prompt. Something like “Enter location.”
  2. The bot will use the user’s response to do the lookup.

    Note: The lookup can use several methods for searching. They are listed below:
    - City name (ex: Paris)
    - US Zip Code (ex: 90210)
    - UK Postcode (ex: SW1)
    - Canada postal code (ex: G2J)
    - 3 Digit Airport code (ex: LAX)

  3. Enjoy doing weather lookups for around the globe!

Optional Widget

>You need to have the weather lookup already installed and configured. If you don’t have valid data coming back, then this widget will not work.

There are a couple ways to handle this, either online or having the html page locally on your machine. The choice is up to you.

Widget Install Steps

Offline Usage
  1. A) For the latest version, go to https://codepen.io/Web_Mage/pen/eYGXwbz and click on Export in the bottom right corner. Click on Export .zip
    B) Download the attached .zip file from the StreamerBot discord.
  2. Navigate to where you saved the download and extract all of the files.
  3. If you want to move the files to a different area, the ones needed will be in the dist folder. It is located in <extracted zip>/super-mario-weather/dist/
    (If you don’t want the folder, make sure you move all three files: index.html, script.js, and style.css)
  4. Create a new browser source in OBS. Set the URL to about:blank and the size to whatever you’d like.
  5. In Streamer.bot, navigate to the current weather lookup action.
    Add a new Set Browser URL sub-action by right clicking, then
    Add Action → OBS → Set Browser Source URL.
  6. Pick the scene, then the browser source you created in step 4.
  7. For the URL, use
    file:///<saved path>/index.html?apikey=%global_selfApiKey%&query=%global_locationQuery%&lang=%global_weatherLanguage%
  8. Test by doing a lookup. The widget should change to match what is generated in chat.
Online Usage
  1. Create a new browser source in OBS. Set the URL to about:blank and the size to whatever you’d like.
  2. In Streamer.bot, navigate to the current weather lookup action.
    Add a new Set Browser URL sub-action by right clicking, then
    Add Action → OBS → Set Browser Source URL.
  3. Pick the scene, then the browser source you created in step 4.
  4. For the URL, use
    https://codepen.io/Web_Mage/pen/eYGXwbz?apikey=%global_selfApiKey%&query=%global_locationQuery%&lang=%global_weatherLanguage%
  5. Adjust your browser source dimensions to crop out the code blocks on the side, so that you only see the widget.
  6. Test by doing a lookup. The widget should change to match what is generated in chat.
Alternate Usage

To use the widget as just an onscreen overlay for your local weather.

  1. Create a new Action with just an OBS browser source, like the above install steps.
  2. Instead of using about:blank, use the url but with the variables hard coded in. (e.g. <your path>/index.html?apikey=<your APIkey>&query=<your location>&lang=<your language>)
  3. Run the widget’s action as a timed action set to 5 minutes. This will allow the widget to refresh without user intervention.
3 Likes