Welcome to Tesla Motors Club
Discuss Tesla's Model S, Model 3, Model X, Model Y, Cybertruck, Roadster and More.
Register

Custom Weather Website

This site may earn commission on affiliate links.

PattyChuck

Model S P100D, Model X P90D
Jan 24, 2012
288
6
Valparaiso, Indiana
Thought I would share the website I built that displays the weather in a half-screen-friendly web window. The website is designed to grab the closest current weather conditions to your location as well as the closest looping NEXRAD radar image. The page will refresh every 15 minutes (the length of time between the NEXRAD updates).

You can enter your zip code in the form at the bottom of the screen, and you should be able to bookmark the URL that is generated for your zip.

I've got another version of this page that grabs the geolocation from the car itself thru the REST API, but I know zilch about web security and I have yet to figure out how to store the cookie locally on the car. Therefore, "Local Temp" will read N/A since it's trying to grab that value from the car.

Please share any feedback!!

http://www.teslaweather.com/
 
Last edited:
Okay, I've added the ability to search via Zip Code. I've also put the page up on its own domain (I've edited the first post to reflect this as well). The new domain is www.teslaweather.com. You can either use the form at the bottom of the page to put in your zip code, or you can just put it in the address bar at the top like before.

- - - Updated - - -

This is a good start; thank! As @AO suggested, zip would be easier. On the left-hand pane, it would be nice to see a near-term forecast (something like the first two entries in the "Descriptive Forecast" panel HERE).

Hmm... forecasts might take me a bit of time. I'm using a text-generated METAR like this one from NOAA to get the current weather. Not sure how I'd go about grabbing a forecast... Sounds like a fun challenge, though!

What we really need is an automatic mode which pulls in the LAT/LONG of where you are :)
And the ability to enter a zip code or city/town and state of where you're heading.

Admittedly the browser in the car is about as bare-bones as you can get. It scores really really low on html5 support. Once Tesla opens up the ability to geolocate thru html5, the site should be able to find your location automatically. The downside is you'll have to manually tell the car every day it's okay that the browser knows your location. As I said in my first post, though, I've got a version running in my car that uses the REST data to auto-locate the lat/lon.
 
Nice job! I really like the background changing based on cloud cover and day/night. A few minor suggestions:
1) In the "Area Temp" pane to make it a table with the descriptors left aligned and the values right aligned. Seems like it would be easier to read.
2) Should the two boxes be the same size? The weather map appears to be 12 pixels (or so) taller.
3) Should wind speed indicate "MPH"?
 
Cool idea, thanks for this. I'm getting an error with 91106, though?
Should work now. The reporting station was returning some funky data.

Will the page auto refresh or do you have to hit reload?

The reload of the browser is not that easy to hit. When I try I often get the keyboard instead.
The page will reload every five minutes. Most of the weather reporting stations only update every hour, and the NEXRAD image updates every 15 minutes, but hey, the bandwidth is free right now, and if weather is really really bad, the reporting stations can sometimes update more frequently than an hour. However, you probably have to refresh it every time you get in the car. I say probably because I've had the page auto-refresh after getting out of the car and getting back in, but other times, it doesn't. I can't figure out the rhyme and reason. If you try to tap the tiny reload icon and instead tap the address bar and the keyboard comes up, you can just hit the blue button in the lower right-hand corner (can't think of what it says off-hand) and that should also reload the page.

Nice job! I really like the background changing based on cloud cover and day/night. A few minor suggestions:
1) In the "Area Temp" pane to make it a table with the descriptors left aligned and the values right aligned. Seems like it would be easier to read.
2) Should the two boxes be the same size? The weather map appears to be 12 pixels (or so) taller.
3) Should wind speed indicate "MPH"?
1) I played around with the alignment of the text, but didn't try what you suggested. I've changed the layout, let me know if it's better or worse.
2) Hmm... so it was! Weird. Tweaked the image size of the radar, lemme know if it looks okay.
3) Yep. It does now!

Wow...thanks PattyChuck for your hard work on this Tesla App. This comes in very handy and has a great appearance.
As you continue to upgrade from suggestions and ideas...this will be one of the Tesla App favorites.
Thanks!! I hope that once Tesla improves the HTML5 abilities of the browser (i.e. geolocation) it'll be really handy. Either that or I'll release the source code (once the site is a bit more stable) so people can load it up to their own web servers. It's really nice having it integrated with the REST API so you don't ever have to type in a zip code, and as you drive along, the weather auto-update will "follow" you along.
 
Looking better! At the moment, I'm looking at it on a PC, so ignore these if it's perfect on the Tesla Browser - it's really not important to have PC browsers working perfectly.
1) The two boxes look to be almost the same height, but the radar is shifted up a small amount so they are not aligned (Firefox 19.0 & IE 9)
2) Under IE 9, the left box is a bit of a mess with the text outside the center white area (always a pain to get IE to work right).
3) I suggest having the last "SW @ 9 MPH" as "Wind SW @ 9 MPH" (i.e. left/right justified)
4) Also suggest making the wind 3rd from end, and the two forecast lines last, left justified.
 
Looking better! At the moment, I'm looking at it on a PC, so ignore these if it's perfect on the Tesla Browser - it's really not important to have PC browsers working perfectly.
1) The two boxes look to be almost the same height, but the radar is shifted up a small amount so they are not aligned (Firefox 19.0 & IE 9)
2) Under IE 9, the left box is a bit of a mess with the text outside the center white area (always a pain to get IE to work right).
3) I suggest having the last "SW @ 9 MPH" as "Wind SW @ 9 MPH" (i.e. left/right justified)
4) Also suggest making the wind 3rd from end, and the two forecast lines last, left justified.

1) Should line up perfect in the car.
2) I didn't even look at the site on IE. I'm sure it's a hot mess.
3) If I add "Wind: " to the last line, the line gets too long if there are strong gusts, such as "NNW @ 25 Gusting 35 MPG" which presents a big formatting issue.
4) With everything else centered, moving the sky condition and weather conditions to left justified made it look out of place. I did, however, move the wind up on the column.