0

Weather : Brightsign HTML Widget, Weather Underground (api key required)

Notice: The Weather Underground API is being retired at the end of 2018.  

This weather widget shows date and time along with animations. The widget includes the various weather images so you could easily use another weather service for the data that controls which animations are displays. You'll need to register with Weather Underground to get an API key. 

 

The widget works full screen or in a zone, landscape or portrait. 

Download HTML Weather Widget Here

 

Add HTML Site (your local weather html)

 

Variables

There are three variables that the weather uses: Key, City, and US State or Country. You'll need to fill those in.

 

Custom Device Page

On the variables tab, you will also need to browse and select the custom device page url, in the DWP folder.  

 

With the custom device page, you will be able to log into the player at port 8008 and change the city and state or your key.

 

 

Time Format: 12 Hour / 24 hr

The time defaults to 24hr format, but you can change it to 12hr format by editing the weather.js file.

 

Find this line:

  $('#time').html(moment().format('H:mm:ss'));

 

Change to this:

  $('#time').html(moment().format('H:mm:ss a'));

 

 

46 comments

  • 0
    Avatar
    Jacob Smith

    Looks cool.

    How do we get the file?

  • 0
    Avatar
    Dwight Gerald Hijastro
    • How do we get the file?

     
  • 0
    Avatar
    Jacob Smith

    Lyndon,

    Any updates on this one?

  • 0
    Avatar
    Ed Blumberg

    Please share.  This looks like a great widget - just what I'm looking for.

  • 0
    Avatar
    Lyndon

    I've posted an updated link. This version doesn't require editing the javascript file to update your weather underground key. 

  • 0
    Avatar
    Ed Blumberg

    Thanks for posting this update - I do have a question (or I may just be doing it wrong)  - how do you get the BrightSign variables into the weathertable.html?  It is hard coded with the Spokane, WA info.  Is there something I'm missing?

  • 0
    Avatar
    Lyndon

     

    You put them in the brightauthor project like my screenshot, under file, presentation properties, variables.  

    There's a variable for the weather underground key.. and there's a City variable, and  a US State or Country variable. I did forget to check one  box in my exampele. To reset variables on publish. This way, if you change the variable in brightauthor and republish, it updates the variable value on the unit. 

    THe sample brightauthor project I sent had these filled in as well. You just need your own weather undground key. 

     

     

     

  • 0
    Avatar
    Lyndon

     

    I'm updating the post to make that more clear; the need to register for a free key.

     

  • 0
    Avatar
    Ed Blumberg

    Thanks - I have done that - and I do have an API key.  i even re-created the player set-up file in case that was needed.  I have set it up exactly as shown, and I'm still seeing Spokan, WA.  Any thoughts?

  • 0
    Avatar
    Lyndon

     

    post a screenshot of the variables page....also send a screenshot of the html sites page... This is one test.. Below are screenshots from what Mine looks like. I just got the updated widget before posting it. 

     

    and another..

     

     

    YOur variables page should look like this...

     

     

    You can set a refresh time, this is 60 seconds, on the html widget as well..

     

     

  • 0
    Avatar
    Ed Blumberg







  • 0
    Avatar
    Lyndon

    ok, interesting...so I thought it might the the city info it couldn't find....but this is from my three zone test. Ok, so now we need to know why yours isn't working..

    can you send a copy of your log tab, log into the player ip, click on the log tab, and send a copy...

  • 0
    Avatar
    Ed Blumberg

    Wasn't able to send the entire log file - lots of unrelated stuff in there anyway - Here is a copy and paste of what I thought you wanted to see:

    [ 2083.143] BSPLAY: file:///myweather-/weathertable.html
    [ 2085.144] BSPLAY: about:blank
    [ 2085.835] [INFO]   [source file:///myweather-/js/weather.js:20]: getUserVars
    [ 2085.982] [INFO]   [source file:///myweather-/js/weather.js:28]: <?xml version="1.0" encoding="UTF-8"?>
    [ 2085.982] <BrightSignUserVariables>
    [ 2085.982]  <BrightSignVar name="City">Sevierville</BrightSignVar>
    [ 2085.982]  <BrightSignVar name="US State or Country">Tennessee</BrightSignVar>
    [ 2085.982]  <BrightSignVar name="Weather Underground Key">REMOVED FOR THIS POSTING</BrightSignVar>
    [ 2085.982] </BrightSignUserVariables>
    [ 2085.982]  
    [ 2085.984] [INFO]   [source file:///myweather-/js/weather.js:29]: fetching variables...
    [ 2086.045] [INFO]   [source file:///myweather-/js/weather.js:32]: City
    [ 2086.049] [INFO]   [source file:///myweather-/js/weather.js:41]: undefined
    [ 2086.049] [INFO]   [source file:///myweather-/js/weather.js:42]: Sevierville
    [ 2086.049] [INFO]   [source file:///myweather-/js/weather.js:43]: undefined
    [ 2086.049] [INFO]   [source file:///myweather-/js/weather.js:32]: US State or Country
    [ 2086.049] [INFO]   [source file:///myweather-/js/weather.js:41]: Tennessee
    [ 2086.049] [INFO]   [source file:///myweather-/js/weather.js:42]: Sevierville
    [ 2086.049] [INFO]   [source file:///myweather-/js/weather.js:43]: undefined
    [ 2086.049] [INFO]   [source file:///myweather-/js/weather.js:32]: Weather Underground Key
    [ 2086.049] [INFO]   [source file:///myweather-/js/weather.js:41]: Tennessee
    [ 2086.049] [INFO]   [source file:///myweather-/js/weather.js:42]: Sevierville
    [ 2086.050] [INFO]   [source file:///myweather-/js/weather.js:43]: undefined
    [ 2086.200] BSPLAY: Image "/storage/sd/pool/9/7/sha1-4422fb90a18135e574e698077ca36a53a5b07f97" O 1920x1080 transition 0
    [ 2086.762] BSPLAY: Image "/storage/sd/pool/4/0/sha1-5804746d0c082a4cc99eff22adee4efa8d805e40" O 360x100 transition 0
    [ 2087.742] [INFO]   [source file:///myweather-/js/weather.js:58]: http://api.wunderground.com/api/undefined/conditions/q/Tennessee/Sevierville.json
    [ 2087.756] [INFO]   [source file:///myweather-/js/weather.js:59]: 17:14:21
    [ 2088.110] [ERROR]  [source file:///myweather-/js/weather.js:65]: Uncaught TypeError: Cannot read property 'temp_f' of undefined
    [ 2092.761] BSPLAY: Image "/storage/sd/pool/9/7/sha1-4422fb90a18135e574e698077ca36a53a5b07f97" O 1920x1080 transition 0
    [ 2093.315] BSPLAY: Image "/storage/sd/pool/4/0/sha1-5804746d0c082a4cc99eff22adee4efa8d805e40" O 360x100 transition 0

  • 0
    Avatar
    Lyndon

    It's reporting  a script error. Very odd. What unit and firmware are you testing on? Let me see if I can duplicate. I'm testing on 6.2.147, original version, not .2 or .9, and on an XT. I'll publish to an HD player as well. 

  • 0
    Avatar
    Lyndon

    I tested on an XD and HD player, both playing. Both have 6.2.147.9 firmware. 

  • 0
    Avatar
    Ed Blumberg

    I have Firmware version 6.2.147.9 and this particular player is an LS423.  I do have an XT1143 also, but this particular sign needs the LS423.

  • 0
    Avatar
    Lyndon

    I'll test on an ls then. I double checked and the zip file I uploaded is identical to the one on my computer, so we should be working with the exact same files. 

     

    If you do a file export presentation, and zip it up, you can send your exported project to support @ brightsign.biz and I'll test out your files on one of my units. 

  • 0
    Avatar
    Ed Blumberg

    Thank you for your help. I will do that first thing in the morning.

  • 0
    Avatar
    Lyndon

     

    I spoke with my colleague who wrote this and he said that your api key may be wrong. He said tempf is the first variable pulled down from weather undground and if that's failing, then most likely the player isn't reaching weather underground. So, when you send me your files, I'll test your key in my project. 

  • 0
    Avatar
    Ed Blumberg

    I have sent you the zipped up presentation.  Please let me know what you think.  Thanks again for your help.

  • 0
    Avatar
    Lyndon

    ok, your project fails for me as well. Trying to figure out why. But your key, works in my test project....and works in the test project attached to the link above. I redownloaded it to make sure it wasn't a bad upload, and that demo version works if I put your key in it. I'll need a little more testing to figure out why your project with the weather is causing issues. It's very odd. 

  • 0
    Avatar
    Roland Sosa

    Hello. I tried this today and was able to get it to show on my XT1143 on FW: 7.0.60. Only issues is I can't change the city and state from Spokane, WA.... Not sure if its the same issue as above, but there are my 2 cents...

    Thanks!

  • 0
    Avatar
    Lyndon

     

    Ok, found a typo in one of the files I uploaded. I've fixed the zip file, but you can change it yourself in your files. In the weather.js file, which you can open in notepad, underground is misspelled undergound. If you fix that, it's happy.  I must have had it correct at one point, and then replaced it with the bad one in the upload...very odd since I couldn't get it to fail with my files.. Anyway, fixing this spelling makes Ed's project work. 

     

     

     

  • 0
    Avatar
    Roland Sosa

    Fixed the typo, still no change for me. But it is a lovely 72 degrees in Spokane, Wa. lol

  • 0
    Avatar
    Lyndon

    can you log into the player ip address, and go to the log tab, and check the log for the following error..

    [source file:///myweather-/js/weather.js:65]: Uncaught TypeError: Cannot read property 'temp_f' of undefined 

    This would indicate an error with the api key..

     

    Try a url like this in your browser, putting in your key..

    http://api.wunderground.com/api/Your Key Here/conditions/q/Oregon/Eugene.json

     

    If your key works fine, it will show the weather data for that city. 

  • 0
    Avatar
    Roland Sosa

    tried the link and it did show me my info.

     

    [12457.302] BSPLAY: file:///myweather-/weathertable.html
    [12457.947] BSPLAY: about:blank
    [12458.776] [INFO] [source file:///myweather-/js/weather.js:20]: getUserVars
    [12458.808] [INFO] [source file:///myweather-/js/weather.js:28]: <?xml version="1.0" encoding="UTF-8"?>
    [12458.808] <BrightSignUserVariables>
    [12458.808] <BrightSignVar name="City">Ocala</BrightSignVar>
    [12458.808] <BrightSignVar name="Us State or Country">Florida</BrightSignVar>
    [12458.808] <BrightSignVar name="Weather Underground Key">My Key Was Here</BrightSignVar>
    [12458.808] </BrightSignUserVariables>
    [12458.808]
    [12458.808] [INFO] [source file:///myweather-/js/weather.js:29]: fetching variables...
    [12458.825] [INFO] [source file:///myweather-/js/weather.js:32]: City
    [12458.826] [INFO] [source file:///myweather-/js/weather.js:41]: undefined
    [12458.826] [INFO] [source file:///myweather-/js/weather.js:42]: Ocala
    [12458.829] [INFO] [source file:///myweather-/js/weather.js:43]: undefined
    [12458.830] [INFO] [source file:///myweather-/js/weather.js:32]: Us State or Country
    [12458.830] [INFO] [source file:///myweather-/js/weather.js:41]: undefined
    [12458.830] [INFO] [source file:///myweather-/js/weather.js:42]: Ocala
    [12458.830] [INFO] [source file:///myweather-/js/weather.js:43]: undefined
    [12458.832] [INFO] [source file:///myweather-/js/weather.js:32]: Weather Underground Key
    [12458.836] [INFO] [source file:///myweather-/js/weather.js:41]: undefined
    [12458.836] [INFO] [source file:///myweather-/js/weather.js:42]: Ocala
    [12458.836] [INFO] [source file:///myweather-/js/weather.js:43]: 3896d19f40ff1e61
    [12460.774] [INFO] [source file:///myweather-/js/weather.js:58]: http://api.wunderground.com/api/3896d19f40ff1e61/conditions/q/undefined/Ocala.json
    [12460.775] [INFO] [source file:///myweather-/js/weather.js:59]: 13:04:04
    [12461.175] [ERROR] [source file:///myweather-/js/weather.js:65]: Uncaught TypeError: Cannot read property 'temp_f' of undefined

     

    Thats what the log showed

  • 0
    Avatar
    Lyndon

     

    Ok, so it seems typing a name correctly is clearly not my strong suit. In your project, if you go to file, properties, variables, you'll notice underground is spelled incorrect. if that's fixed as well, it should then be happy. 

     

    I've updated the zip file above to shorten the variable name to just "Key" for any future downloads, both in he js and project file. 

     

    But for yours, just fixing the spelling should do it. 

  • 0
    Avatar
    Roland Sosa

    That might have been my typo. But after fixing it, still, no go. Wipe the slate clean and used the new zip you uploaded and still no go...

     

    15160.150] BSPLAY: file:///myweather-/weathertable.html
    [15160.729] BSPLAY: about:blank
    [15161.589] [INFO] [source file:///myweather-/js/weather.js:20]: getUserVars
    [15161.624] [INFO] [source file:///myweather-/js/weather.js:28]: <?xml version="1.0" encoding="UTF-8"?>
    [15161.624] <BrightSignUserVariables>
    [15161.624] <BrightSignVar name="City">Ocala</BrightSignVar>
    [15161.624] <BrightSignVar name="Us State or Country">Florida</BrightSignVar>
    [15161.624] <BrightSignVar name="Weather Underground Key">My key was here</BrightSignVar>
    [15161.624] </BrightSignUserVariables>
    [15161.624]
    [15161.624] [INFO] [source file:///myweather-/js/weather.js:29]: fetching variables...
    [15161.646] [INFO] [source file:///myweather-/js/weather.js:32]: City
    [15161.651] [INFO] [source file:///myweather-/js/weather.js:41]: undefined
    [15161.651] [INFO] [source file:///myweather-/js/weather.js:42]: Ocala
    [15161.651] [INFO] [source file:///myweather-/js/weather.js:43]: undefined
    [15161.651] [INFO] [source file:///myweather-/js/weather.js:32]: Us State or Country
    [15161.652] [INFO] [source file:///myweather-/js/weather.js:41]: undefined
    [15161.652] [INFO] [source file:///myweather-/js/weather.js:42]: Ocala
    [15161.652] [INFO] [source file:///myweather-/js/weather.js:43]: undefined
    [15161.652] [INFO] [source file:///myweather-/js/weather.js:32]: Weather Underground Key
    [15161.652] [INFO] [source file:///myweather-/js/weather.js:41]: undefined
    [15161.652] [INFO] [source file:///myweather-/js/weather.js:42]: Ocala
    [15161.652] [INFO] [source file:///myweather-/js/weather.js:43]: My key was here
    [15163.589] [INFO] [source file:///myweather-/js/weather.js:58]: http://api.wunderground.com/api/My key was here/conditions/q/undefined/Ocala.json
    [15163.589] [INFO] [source file:///myweather-/js/weather.js:59]: 13:49:07
    [15163.837] [ERROR] [source file:///myweather-/js/weather.js:65]: Uncaught TypeError: Cannot read property 'temp_f' of undefined
    [15164.920] BSPLAY: Image "/storage/sd/pool/c/f/sha1-ebc0f845cd387fd9484286b211fff574bb5638cf" O 1763x1175 transition 15
    [15165.019] BSPLAY: Image "/storage/sd/pool/a/3/sha1-aded9ed206681c723d77a30143cf766010d46aa3" O 193x193 transition 0
    [15171.019] BSPLAY: Image "/storage/sd/pool/b/a/sha1-fbf2e8dec6e8bb511d614f7bec578c5f82fa30ba" O 1920x1080 transition 15
    [15171.119] BSPLAY: Image "/storage/sd/pool/4/0/sha1-bafc4b61b678b9e4ec9b2d63b4ec4f5d0b29b440" O 1920x1080 transition 0
    [15177.119] BSPLAY: Image "/storage/sd/pool/9/d/sha1-e23703ea3d2357cb4edfc9a1008fd737c4657c9d" O 1763x1175 transition 15
    [15177.202] BSPLAY: Image "/storage/sd/pool/a/3/sha1-aded9ed206681c723d77a30143cf766010d46aa3" O 193x193 transition 0
    [15183.202] BSPLAY: Image "/storage/sd/pool/1/0/sha1-2ad7210de1affb1f6fd3427ecd20949cc42b3310" O 1763x1175 transition 15
    [15183.286] BSPLAY: Image "/storage/sd/pool/4/0/sha1-bafc4b61b678b9e4ec9b2d63b4ec4f5d0b29b440" O 1920x1080 transition 0
    [15189.285] BSPLAY: Image "/storage/sd/pool/f/e/sha1-bdb0b7654bf4c67bef221605afaefc3cbd584afe" O 1763x1175 transition 15
    [15189.376] BSPLAY: Image "/storage/sd/pool/a/3/sha1-aded9ed206681c723d77a30143cf766010d46aa3" O 193x193 transition 0
    [15195.375] BSPLAY: Image "/storage/sd/pool/c/9/sha1-b168ea139df4404936c2cba25abd306c0ab617c9" O 1731x1197 transition 15
    [15195.469] BSPLAY: Image "/storage/sd/pool/4/0/sha1-bafc4b61b678b9e4ec9b2d63b4ec4f5d0b29b440" O 1920x1080 transition 0
    [15201.468] BSPLAY: Image "/storage/sd/pool/8/2/sha1-0727b30930ae985753bf50af6ddeb4a36cdc6782" O 1763x1175 transition 15
    [15201.569] BSPLAY: Image "/storage/sd/pool/a/3/sha1-aded9ed206681c723d77a30143cf766010d46aa3" O 193x193 transition 0
    [15207.553] BSPLAY: Image "/storage/sd/pool/f/3/sha1-4155dd22543ce3236d365c7f03bd6ef96e9631f3" O 1763x1175 transition 15
    [15207.653] BSPLAY: Image "/storage/sd/pool/4/0/sha1-bafc4b61b678b9e4ec9b2d63b4ec4f5d0b29b440" O 1920x1080 transition 0
    [15213.652] BSPLAY: Image "/storage/sd/pool/c/4/sha1-d1c088a0e0ab8f663fe491c4e7511ec7e2f981c4" O 1763x1175 transition 15
    [15213.736] BSPLAY: Image "/storage/sd/pool/a/3/sha1-aded9ed206681c723d77a30143cf766010d46aa3" O 193x193 transition 0
    [15219.719] BSPLAY: Image "/storage/sd/pool/c/f/sha1-d753d3aad0e974489567909c49fd275f38a799cf" O 1763x1175 transition 15
    [15219.786] BSPLAY: Image "/storage/sd/pool/4/0/sha1-bafc4b61b678b9e4ec9b2d63b4ec4f5d0b29b440" O 1920x1080 transition 0
    [15220.221] BSPLAY: file:///myweather-/weathertable.html
    [15220.895] BSPLAY: about:blank
    [15221.719] [INFO] [source file:///myweather-/js/weather.js:20]: getUserVars
    [15221.751] [INFO] [source file:///myweather-/js/weather.js:28]: <?xml version="1.0" encoding="UTF-8"?>
    [15221.751] <BrightSignUserVariables>
    [15221.751] <BrightSignVar name="City">Ocala</BrightSignVar>
    [15221.751] <BrightSignVar name="Us State or Country">Florida</BrightSignVar>
    [15221.751] <BrightSignVar name="Weather Underground Key">My key was</BrightSignVar>
    [15221.751] </BrightSignUserVariables>
    [15221.751]

  • 0
    Avatar
    Lyndon

    what's odd is the url shows the state missing like it doesn't like the spelling or something. undefined is entered in the spot where the state's supposed to be...

    Can you try changing florida to FL and republish. Florida, Ocala works on my end...

     

     

  • 0
    Avatar
    Roland Sosa

    Ok so I tried it on another sign and it is working fine. I had to remove the flies from the sd card and resend everything and all is well. It was not overwriting the files on the card with the new changes for some reason... Thanks so much for helping out so quick!

Please sign in to leave a comment.