Free weather widget

  • 3
  • Question
  • Updated 2 years ago
  • Doesn't Need an Answer
Hey guys.. so I was looking for a free little weather widget and ran into this one.  Thought I would show you a demo of what I did with it.

http://bit.ly/1Vn4kEK

Here is the widget itself:

http://blog.forecast.io/forecast-embeds/

I just put a cinemagraph background to give the slide a little life.
Photo of Benjamin

Benjamin

  • 680 Points 500 badge 2x thumb

Posted 3 years ago

  • 3
Photo of Benjamin

Benjamin

  • 680 Points 500 badge 2x thumb
I'd also love to see any weather widgets you guys have been able to put into Rise.  I love the modern look.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Size: 680pxX210px
V-scroll: 50px
Zoom: 100%

This way I can keep that ugly alert message hidden.
(Edited)
Photo of Luann Langel

Luann Langel

  • 60 Points
How do you set the order of your placeholders?  My graphic is covering my weather & time.  Thanks
Photo of Bryant Beers

Bryant Beers

  • 582 Points 500 badge 2x thumb
Luann,

This is defined by the Z axis order. There should be an option under each placeholders settings section to type in a Z number. I believe the lowest number (0/1) means it's on top of all the others. You'll have to mess around with it and see.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
It is Z-order value that determines where the placeholder is in the stack of placeholders. The smaller the value, the further back placeholder is. I personally assign '100' Z-order value to all of my placeholders I definitely want to stay on the top )))
Photo of Bryant Beers

Bryant Beers

  • 582 Points 500 badge 2x thumb
Oh my bad then! I've never had to mess with Z order before, and when I typed in 1, I think my placeholder ended up on top of the others. Thanks for the correction here!
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Benjamin,
I have seen a few ideas on how the weather is being added to presentations including the ones we have in Store and they usually involve embedding via the HTML Widget like the example from forecast.io. So long as the provider can allow embedding.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Benjamin, this is some awesome stuff I can appreciate. Thank you.
Photo of Biologyben

Biologyben

  • 3,558 Points 3k badge 2x thumb
I use weather underground full screen live map with the forcast.io embeded widget to create my weather slide with live radar.  
(Edited)
Photo of Beth B

Beth B

  • 452 Points 250 badge 2x thumb
Oh OK Thanks I will fix it! 

Also What is this about dropping the Old Editor? I have a colleauge that can choose between the version that I am using (which I guess is classic?) and a different one on her desktop. I however cannot do that, our tech even updated mine, any thoughts on that?
(Edited)
Photo of Biologyben

Biologyben

  • 3,558 Points 3k badge 2x thumb
Click this link or paste this URL into your browser

https://apps.risevision.com

If that doesn't work, what browser/version are you using?
(Edited)
Photo of Beth B

Beth B

  • 452 Points 250 badge 2x thumb
Oh that worked....
(Says the sarcasticly defeated & annoyed Librarian that can't hardly stand so many changes)
Photo of MIKE SUESS

MIKE SUESS

  • 152 Points 100 badge 2x thumb
Would you be willing to share on how you embedded the radar also? I think it is pretty neat. Thanks
Photo of Biologyben

Biologyben

  • 3,558 Points 3k badge 2x thumb
I hacked things a bit - I was able to use weather undergrounds full screen map to create a map of the location I wanted (keep the location a slightly further to the right and bottom than center).  Select 'Radar' and make sure its playing, move the ad to the left and choose any other appropriate settings.  Then click on the 'link to' button for the raw link to the map.

In Rise, create a presentation with a place holder for the map that is 345 px longer than you need (for a full screen, this would be 1920+345=2265px).  Place a webpage widget into this placeholder and tell it to crop 70px vertically and 345px horizontally.  Preview to see if it works for you.  

This gives me a full screen weather map with motion radar and storm tracks with no ads (visible).

I've had it running for more than 9 months on different players and no issues yet with settings resetting.  

Only problem we've had were autoplay adds (off screen) that started making noises through the TV - We just turned off the volume ;-)
(Edited)
Photo of Beth B

Beth B

  • 452 Points 250 badge 2x thumb
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
This you can hide wirh overlaying placeholder.
Photo of Biologyben

Biologyben

  • 3,558 Points 3k badge 2x thumb
You may have to click 'show previous comments' to see my earlier instructions - But using the webpage widget, I used the following settings

It is 1920px wide x 390 high
Vertical Scroll is set to 80px (hides the top bar - location and Weather.io link)
Zoom is set to 200% (zooms in)
(Edited)
Photo of Benjamin

Benjamin

  • 680 Points 500 badge 2x thumb
Ahhh!!  I see what you did.. I was using just regular HTML.  I was able to achieve a similar result using some CSS, but I must admit I think I like your version a bit better :)
Photo of Beth B

Beth B

  • 452 Points 250 badge 2x thumb
When I finally Figured out to use the webpage widget I just put in the link, I never noticed anyting like, 'More at Forecast.io'

Here is what mine looks like, I have yet to begin using the "new" editor, so it may be different from everyone else's.
(Edited)
Photo of Biologyben

Biologyben

  • 3,558 Points 3k badge 2x thumb
Beth, You don't see it because the setting 'Vertical Scroll: 80' effectively hides that part of the page.

This is the full embedded webpage for you and you'll see the text at the top 

Of course, if you'd prefer to get it back add 80 px to the height of the placeholder and remove the vertical scroll.
(Edited)
Photo of Bruno Bicalho

Bruno Bicalho

  • 82 Points 75 badge 2x thumb
My way was put a video in background, an transparent iframe with an "html" widget and used css do double the size of the iframe content - mine is on Brazilian Portuguese for my city, Belo Horizonte.
http://preview.risevision.com/?type=s...
Photo of Benjamin

Benjamin

  • 680 Points 500 badge 2x thumb
Google Cinemagraph when you get a chance..  They're basically looping GIFs, but usually really small the really good ones loop without you even noticing :)  That's what I used for the waving grass.  I like what you've done!
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
I love pond5.com for great selection of looping videos and many are at very reasonable price.
Photo of Media Manager

Media Manager

  • 1,670 Points 1k badge 2x thumb
I would just like to say that I appreciate this entire thread and exchange of ideas. Thanks to all.
Photo of Bryant Beers

Bryant Beers

  • 582 Points 500 badge 2x thumb
Hi all. I just found this thread in my searches for a fix for the Weather Underground fullscreen weather. It seems that they just recently made a change to their maps, and they no longer display in my presentation. has anyone else run into this yet?
Photo of Bryant Beers

Bryant Beers

  • 582 Points 500 badge 2x thumb
If you take the following URL....

https://weather.com/weather/radar/interactive/l/USNY0234:1:US?animation=true&layer=radarConus&am...

 and set the zoom level in the URL to be 5, I think that will give you a good view of the CON48. The only issue, at least for me, is that the map still centers over my location on the east coast. So it's not exactly centering the whole US on the screen. See the example presentation below...

http://preview.risevision.com/?type=presentation&id=aa6192d8-1605-43a5-87be-bdc85217612c

You will have to find a center point in the US to get the map to be centered. There's really not a lot of options to manipulate this map, but it does work well once you get it the way you want. 
Photo of John Morrow

John Morrow

  • 94 Points 75 badge 2x thumb
Thank you so much for your quick response!  This helped me greatly, one more question for you.  How do I set the map to where it automatically refreshes?  
Photo of Bryant Beers

Bryant Beers

  • 582 Points 500 badge 2x thumb
In the Web Page widget settings, you can specify a page refresh time. I think the lowest refresh is 5 minutes. Could be wrong. I'm not sure how long it takes the weather map itself to show the expiration message, but I think a 5 minutes refresh should do it. 
Photo of John Morrow

John Morrow

  • 94 Points 75 badge 2x thumb
Hmm, I am not seeing http://imgur.com/a/u8ujM this.  I attached screenshot of what I see.
Photo of Bryant Beers

Bryant Beers

  • 582 Points 500 badge 2x thumb
It's in the presentation editor. When you go under a placeholder and add a widget. The Refresh option is in there. 
Photo of kcalderw

kcalderw

  • 510 Points 500 badge 2x thumb
Photo of kcalderw

kcalderw

  • 510 Points 500 badge 2x thumb
I'd like to add the time, but not sure how to position it correctly to match up with our other slides that use the classic editor? 
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Looks great!
Photo of Jim Johnston

Jim Johnston

  • 422 Points 250 badge 2x thumb
I like to use this js plugin http://simpleweatherjs.com/
It's pretty versatile, gives you the freedom to make what you like, and its free! But its good to also have a simple copy paste weather widget that actually looks good! Cheers
(Edited)
Photo of Chris Henke

Chris Henke

  • 70 Points
Looks nice but I'm not much of a hacker.  How would I implement this on my display?
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Chris, you gonna need to download the files, modify them the way you want the plugin to appear on your displays, upload the files to some place, and then pull all that to your presentation using the Web Page Widget. In order to do that you must know your way around HTML, CSS and JS a little bit. The other option is to hire somebody who knows that or find a friend who does and buy him a 12-pack )))
Photo of Chris Henke

Chris Henke

  • 70 Points
Thanks Darius - I'll take a crack at it.  Just have to dust off my coding skills.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
I used it in my multi page template. It has transparent background, white font (Roboto; linked to Google fonts) and weather icons. If you think that could be useful to you and even save some time, then you can get it from >>here<<

The problem I had with this is unreliable update. Sometimes it would fail to connect to the service and simply display an error message until the next update (you can set the update intervals).
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Thanks for that Darius, you're the man :)
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Check this out! This is really cool. It is not yet ready for embedding, so I am gonna keep an eye on it: https://www.ventusky.com/?p=41.1;-83.4;4&l=temperature
Photo of Scott Williams

Scott Williams

  • 464 Points 250 badge 2x thumb
Thats Awsome!, Nice find
Photo of Jim Johnston

Jim Johnston

  • 422 Points 250 badge 2x thumb
Interesting! Thanks for sharing
Photo of System Adminstrator

System Adminstrator

  • 122 Points 100 badge 2x thumb
OK, total idiot checking in.  I built my presentation a few years ago, and I inserted a URL which connected to a local news station's weather radar map.  Well, they must have made a change, cuz it's no longer available.  I'm looking for a nice, simple way to insert a weather map into my presentation.  I was using the Web Page Widget and simply copy and paste the URL...anybody got an easy solution for me?  Thanks...
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Hi, just quick update regarding this: http://blog.forecast.io/forecast-embeds/

For those who need to use this graph on a darker background, you can invert that dark grey color to light grey. Example:

<!doctype html><html>
<head>
<meta charset="utf-8">
<title>Weather</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: darkblue;
}
#container {
height: 340px;
width: 1250px;
overflow: hidden;
position: absolute;
-webkit-filter: invert(100%);
    filter: invert(100%);

}
</style>
</head>

<body>
<div id="container">
<iframe id="forecast_embed" type="text/html" frameborder="0" height="210" width="680" src="http://forecast.io/embed/#lat=40.758638&lon=-73.980071&name=MultiPresentation-NYC">; </iframe>
</div>
</body>
</html>

And if you play with the %values, you can get somewhere in between ;)
(Edited)
Photo of Biologyben

Biologyben

  • 3,558 Points 3k badge 2x thumb
This would be great!  However I'm using this as a webpage widget instead of HTML  So is there any workaround to do this within the Rise Vision webpage widget?  

Alternatively, is there a workaround way to change settings to achieve the same appearance as the 200% zoom and set 80 px z-height I use on my webpage widget settings within the HTML widget?
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Yes, put this in your custom webpage, save webpage some place, RV Storage for example, and pull it to your presentation with the Web Page Widget.
You can hide scroll bars by adding to the style: "overflow: hidden;"
Photo of kcalderw

kcalderw

  • 510 Points 500 badge 2x thumb
Photo of Bryant Beers

Bryant Beers

  • 582 Points 500 badge 2x thumb
That's awesome looking! Is there anyway I can get a copy of your presentation? Or at least the cinemagraph? I've been looking all over for a nice winter presentation. 
Photo of kcalderw

kcalderw

  • 510 Points 500 badge 2x thumb
Took me a LONG time to find that particular one as it wasn't listed on nature or travel sections of Flixel. I searched the web all over before stumbling upon this again on Flixel.

https://flixel.com/Travel_Alberta/
(Edited)
Photo of Bryant Beers

Bryant Beers

  • 582 Points 500 badge 2x thumb
Thanks so much! 
Photo of Bryant Beers

Bryant Beers

  • 582 Points 500 badge 2x thumb
Can you share some details on how you setup the presentation? I can't seem to get rid of the scrollbars on mine. 
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
add --scrolling="no"-- (no dashes) within your <iframe> brackets