BBC Weather map colours

I’d noticed that the new BBC Weather website was using a different colour for the sea on their maps.

I’d originally designed the weather maps with a deeper blue for the sea, so I was intrigued to see the colour had changed to a paler, less saturated, and slightly more ‘greeny’ blue (some of the more ‘greeny’ blues I’d previously reserved for light rain).

One of the first effects I noticed was that the actual colour on screen for certain levels of light rain over the sea was virtually identical to that of light cloud.

I suppose it’s just a small point really. It’s still fairly obvious where the rain is – but I was just a bit puzzled as to why a (presumably) cosmetic change to the sea colour should have made the rain data in particular so much more ambiguous and obfuscated.

Anyway – I think I’ve figured out why the new maps don’t look quite right to me.

Just a theory this – but when I compared a map showing the forecast a few hours from now with a longer-range forecast it looked as though the rain data was showing up a bit more clearly on the latter. And that is despite the long-range data being of a lower resolution. Take a look at the image below, and hopefully you’ll see what I mean. The map on the left uses higher resolution data, but even so, that band of rain I’ve circled looks kind of duller. A similar band of rain on the right-hand map looks kind of brighter to me.

I know the higher resolution map is picking up more areas of heavy rain within that band (and consequently displaying deeper blue areas here and there) – but I reckon what’s actually going on is that the layers of data are being drawn in the wrong order.

I could be wrong, but it looks very much to me as if the short-range maps are drawing the rain layer first and then having the ’shadowy’ cloud layer drawn on top. Since the rain only appears where there’s cloud (naturally enough!) the end result is that the entire rain layer is being darkened down by a transparent black layer on top.

The long-range map appears to be (correctly) displaying the cloud data first (like a shadow on the ground) with the rain data drawn on top.

Back in my old BBC days this would normally be the point at which I would stroke my chin sagely and say “Hmmm… Possibly a z-buffering issue…”

Anyhoo, as I say I can’t be sure, but it should be much easier to tell once it starts snowing everywhere…!

* I should point out that I haven’t been puzzling about this non-stop for a couple of days. It’s been more a kind of intermittent puzzling.

BBC Weather beta site

And there they are – back again, just like an old friend!

By the looks of things they’ve had to be tweaked a bit to cope with appearing on white backgrounds, so they have made two sets depending on the background colour. Consequently white clouds appear as grey clouds from time to time, depending on where they sit. I’ll be honest – I think that’s a bit of a shame, and particularly problematic over that map, but hey – they’re such classic icons that it’s just nice to see them back. And it is a beta site after all, so I’m assuming it’s still very much ‘work in progress’.

For the true weather symbol fans, it looks like there’s a new icon for ‘drizzle’ that didn’t appear in the original set (it always used to be single raindrop, same as ‘light rain’ – now it’s a sprinkling of tiny dots). Other weather types like ‘fog’ and ‘mist’ look like they’re staying as plain text.

weather symbols (night)

Nice one!

Anyway, there they are. And a very welcome development too.

As always, I’m sure the BBC Weather symbols remain the property of the BBC and they would be unlikely to allow their use elsewhere (although I’ve come across several places where they are being used fairly indiscriminately for profit).

But if you are looking for similar ‘classic’ TV-style weather icons maybe for iPhone or iPad apps, or websites of your own, and you don’t want to risk copyright infringement, then I have an ever growing range of royalty free symbol sets available for download. The ideal guilt-free alternative to ‘borrowing’ the BBC ones.

Oh, and if you’re looking for the ideal Weather Gifts for Christmas – why not check out the range of classic weather symbol t-shirts and hoodies – there’s something for men, women and kids over at the ‘Classic Weather Icons’ Spreadshirt store. You can choose from a range of symbols and also choose the colour of your t-shirt or hoodie. Great fun!

A few weeks ago I had to produce a set of bespoke animations based on my ‘old-school’ weather symbols for use in an app – each as a single sheet of individual frames that could be cycled through within the app.

Anyway – it got me thinking about the (’new’) BBC weather icons I designed back in 2005 and whether I could produce a similar set of my own with more realistic weather effects using proper particles and then animate them somehow on a web page without resorting to animated GIFs…

With any luck you’ll be able to see a little ‘light snow showers’ icon looping away on the left there.

For anyone interested, I’ll quickly explain how it’s done…

Basically all we’re doing is loading up one long image with all the frames in sequence and cycling through each frame by moving the background position on the fly. I’m using Spritely (spritely.net) which is a jQuery plugin for creating animating sprites and backgrounds using pure HTML and JavaScript. It’s very easy to use and works on loads of browsers and devices.

Building the animations

All of the animations were built in After Effects, the rain, snow, sleet, hail etc were generated using Trapcode Particular from Red Giant Software (redgiantsoftware.com/products/all/trapcode-particular/).

The key to getting the animations to loop seamlessly was to create a single layer using Particular which had a load of particles created off screen at the top for just a few frames, so they all fall down through the shot and disappear completely at the bottom some time later. I then chose a nice frame somewhere in the middle that was full of particles and marked that frame as the loop point. Then I duplicated the layer and slid one of them forwards a bit.

The end result is that one layer has all the particles appearing from nothing (and ending at the ‘loop’ frame marker) while the other layer starts on the ‘loop’ frame marker and has all the particles disappearing out of shot. The overall effect is a single seamless loop of particles continuously falling. Obviously the total number of frames in your loop can’t be any less than half the time it takes for the particles to enter and leave the shot, otherwise the loop won’t be seamless. Actually, it probably needs to be exactly half. There’s a good tutorial by Aharon Rabinowitz on how to loop particles properly which explains it all very nicely.

With a little bit of fiddling it was pretty easy to get the rain animations down to a neat 16 frames. Obviously the snow falls more slowly, so ‘light snow’ ended up running to 64 frames. Heavy snow is at 48 frames, lightning 32, hail is 16.

Animating the sprites

Doing the actual animation on a web page is very easy. The example above and some more over here use Spritely (spritely.net). All you have to do is load jQuery and Spritely on the page, define a <div> element with the height and width of a single frame, and the whole image strip as the background and then one line of script starts the animation going using your specified frame rate (mine are all 25 frames per second) and the total number of frames in the animation.

Obviously there’s one more process I haven’t mentioned – which is basically how to stick 64 separate images together to form one long strip. I daresay there are utilities out there that allow you do this – but I’m grateful to Dan Waylonis from nekotech.com who wrote and sent me a little utility which does exactly that.

As always, if anyone is interested in finding out more, please do leave a comment.

And if you would like to have the full set of weather sprite animations they’re available as a download from the store.

Weather Symbol Set 6 comes as a full set of 42 icons, plus 10 bonus alternative icons (more on that later).

They are saved as PNG images at two sizes. Firstly there’s a set at 64×64 pixels which makes them useable from the word go. But for the first time I’ve also included a complete set at the original size (512×512 pixels) – these can be used as backgrounds, or scaled down to whatever size might be needed.

They cover the usual types of weather, and I’ve also included 10 alternate ‘night-time’ symbols without the crescent moon showing, just in case these need to be used in conjunction with real moon-phase data.

Incidentally, the clouds featured in this set are 100% Irish! (The clouds that I used for the current BBC Weather icons when I was working back in London at the Weather Centre were from photos I took in Surrey..)

Anyway. These new weather icons are available to download now. Enjoy!

Weather T Shirts

It’s just part of a new range of ‘weather icon’ inspired T-shirts and clothing available now at our Spreadshirt Store – Classic Weather Icons.

And it’s the ideal Christmas gift for the Weather fan in your life…!

See also the ‘Keep Cool’ summer version with a classic sunshine icon. I know that summer’s over now, but the ‘Keep Cool’ T-Shirt would still look great wedged between a couple of hot and sweaty commuters on a packed District Line tube during rush hour.

World Weather Online Icons

There’s a number of different weather icon sets available from our store. Professionally designed by the same guy (me) who designed the BBC weather graphics.

You can also download a FREE wind arrows and icons pack to complement the icon sets.

Watch out for special offers and discount codes. Currently there’s a special 40% discount on the full set of 3 icon sets (coloured backgrounds, transparent PNGs, and animated GIFs).

Free 'WIND' add-on pack

The icons come in various formats – PNGs with solid coloured backgrounds, PNGs with transparency, and animating GIFs – making them completely compatible with our current icon sets 1, 2, and 3.

The addition of a ‘WINDY’ cloud symbol will help to make the sets more compatible with the likes of Yahoo! Weather and Google Weather too.

The Wind Pack is free to download from the store.

Hand drawn weather icons

This set now includes text icons for ‘Hot’ and ‘Cold’ plus a new pictorial icon for ‘windy’ – so they can now easily be used in conjunction with the Yahoo! Weather API, and similar weather data providers.

Product details

Format : Images – PNG (with transparency). Font – Truetype

Dimensions : 8 complete sets – 2 each at 64×64 pixels, 100×100 pixels, 128×128 pixels and 256×256 pixels

Weather codes : 1. sunny, 2. sunny spells, 3. cloudy, 4. light rain showers, 5. heavy rain showers, 6. light snow showers, 7. heavy snow showers, 8. light hail showers, 9. heavy hail showers, 10. sleet showers, 11. thundery showers, 12. windy, 13. light rain, 14. heavy rain, 15. light snow, 16. heavy snow, 17. light hail, 18. heavy hail, 19. sleet, 20. stormy, 21. fog, 22. mist, 23. hot, 24. cold, 25-32. wind arrows in 8 directions

Visit the store for hand-drawn weather symbols

My Wordpress Weather Widget v 2.0

I first had a stab at this kind of thing a couple of years ago but removed it when it broke the blog completely…! This new version seems a bit more stable, but still suffers from missing data from the Yahoo! Weather feed, especially overnight. Also, and here’s the problem, it’s still hard coded into a text widget, which isn’t exactly ideal. You should be able to see the real thing at the bottom of the sidebar on the right… (UPDATE : I’ve just turned the weather widget off – it should be back once I’ve worked out how to make it not quite so easy to download a free set of my weather icons..!)

So if there are any bored PHP / Wordpress experts out there who’d be interested in a collaboration, please do get in touch. It’d be nice to make this into a proper Irish Local Weather widget downloadable from wordpress.org/extend, with options in the admin page to select your county branding, your town or city (or long-lat?), and choose from current, 1 day or 2 day forecasts or combinations.

As before, the XML parsing and CSS classes are based on those by Marco Voegeli. The data is currently coming from Yahoo!Weather, but I’m in the process of investigating the free weather API from World Weather Online – they offer a longer-range forecast, and they’re also using my weather icons!

Your Window on the Weather

A complete set of 40 different weather types (including night-time versions) each framed inside a recessed window that also reflects the type of weather ‘outside’ by way of various lighting effects ‘inside’. The weather views themselves are opaque, but the surrounding border has varying levels of PNG transparency – basically it means that these icons will work beautifully no matter what colour background they are placed on.

I’ve called this set ‘Window on the Weather’ – and like the traditional weather symbols sets, it’s royalty free for personal and commercial use.

By the way, if you’re looking for a free Weather API so you can build your own weather application, you could try World Weather Online, who supply worldwide weather and XML/JSON/CSV weather data feed via. their Weather API. They are also, incidentally, currently using my ‘TV-style’ weather symbols on their site right now!

To learn more about the ‘Window on the Weather’ Icon Set – click the image below…

Weather Symbol T-Shirts

Why not pop along for a huge selection of Weather Symbol T-Shirts, Mugs, Clocks and literally hundreds of Weather Symbol branded products.

The downloadable web-sized versions proved so popular I figured it might be time to branch out – so I’ve plastered some symbols on pretty much every available product over at Cafepress. There’s some pretty nifty items including iPad and iPhone cases. Plenty of perfect gift ideas for anyone who knows anyone interested in The Weather. I used to know a few meself as it happens.

Or you could simply wear your very own weather forecast for the day! Here in Ireland, I reckon anything with rain on would be a pretty safe bet.

I might add some more products at some point. Or maybe see if these ones fly off the shelves first…

Weather graphics again

The inexorable pull of weather graphics once again – this time for Little Howard’s Big Question. This weeks episode was called “Can I Wrestle Control of the Weather from Siân Lloyd’s Evil Grip?” as Little Howard becomes convinced that the famous weather presenter is actually an evil wizard determined to ruin the Swingballdon finals.

So, among other things, you’ll be able to see some hastily cobbled-together weather graphics alongside the usual top-notch compositing! Pay special attention to the Swingball sequence right at the beginning of the show to see if you can work out how a cartoon boy manages to play a real Swingball…

Big Howard watching the lovely Siân Lloyd

If, on the other hand, you’re only here looking for TV-style cartoon weather icons you can get them from our store! See over there on the right where it says ‘Weather Symbol Set download’.

Complete set of animating weather icons

40 original weather icons at 4 different sizes, ideal for websites and iPhone / iPad apps.

There are now 3 different formats available – PNG with solid backgrounds, PNG with transparent backgrounds, and this new set of animated GIFs.

The animations have all been optimised to keep the file sizes low – but run at 25fps for nice smooth animations.

This new set of Weather Icons consists of 40 individual symbols. They match the original Set 1, but are animated GIFs, seamlessly looping over 2 or 3 seconds each.

Here’s a brief run-down of all forty symbols:

1. sunny, 2. sunny intervals, 3. white cloud, 4. black low cloud, 5. hazy sun, 6. mist, 7. fog, 8. clear sky (night), 9. light rain showers, 10. heavy rain showers, 11. light snow showers, 12. heavy snow showers, 13. sleet showers, 14. light hail showers, 15. heavy hail showers, 16. thundery showers, 17. cloudy with light rain, 18. cloudy with heavy rain, 19. cloudy with light snow, 20. cloudy with heavy snow, 21. cloudy with sleet, 22. cloudy with light hail, 23. cloudy with heavy hail, 24. thunderstorms, 25. light rain showers (night), 26. heavy rain showers (night), 27. light snow showers (night), 28. heavy snow showers (night), 29. sleet showers (night), 30. light hail showers (night), 31. heavy hail showers (night), 32. thundery showers (night), 33. cloudy with light rain (night), 34. cloudy with heavy rain (night), 35. cloudy with light snow (night), 36. cloudy with heavy snow (night), 37. cloudy with sleet (night), 38. cloudy with light hail (night), 39. cloudy with heavy hail (night), 40. thunderstorms (night)

Example at 128 X 128 pixels – thundery showers (night):

Example at 100 X 100 pixels – heavy snow showers (day) :

Example at 64 X 64 pixels – cloudy with heavy rain (day) :

(NOTE – the images on this page are watermarked as examples, but the real ones aren’t!)

For a limited time, this new set of animated GIF weather icons is also available as part of a special pack (along with the first two sets) for an impressive 40% OFF (compared to the cost of purchasing separately).

These symbols are royalty free, and once bought and downloaded can be used freely for both personal and commercial projects. (For full terms and conditions, see the weather symbol download page).

Like the original set, they’re designed to have a kind of ‘TV Graphics’ feel to them, while keeping a safe distance from the ‘old style’ classic BBC Weather symbols which were their inspiration. They were originally designed from scratch in response to an increasing number of requests for the real BBC ones which are, of course, protected by copyright.

My new set of Weather Icons consists of 32 individual symbols :

1. sunny
2. sunny intervals
3. white cloud
4. black low cloud
5. hazy sun
6. mist
7. fog
8. clear sky (night)
9. light rain showers
10. heavy rain showers
11. light snow showers
12. heavy snow showers
13. sleet showers
14. light hail showers
15. heavy hail showers
16. thundery showers
17. cloudy with light rain
18. cloudy with heavy rain
19. cloudy with light snow
20. cloudy with heavy snow
21. cloudy with sleet
22. cloudy with light hail
23. cloudy with heavy hail
24. thunderstorms
25. light rain showers (night)
26. heavy rain showers (night)
27. light snow showers (night)
28. heavy snow showers (night)
29. sleet showers (night)
30. light hail showers (night)
31. heavy hail showers (night)
32. thundery showers (night)

Here is an example icon at 256×256 pixels to give an idea of what you’d be getting…

Weather icon : Thundery Showers (night-time)

Links:
Weather Symbol (set 1)
Weather Symbol (set 2)
see all products

Oh, and here’s some cool Weather T-shirts on Spreadshirt.co.uk!

Weather T Shirts and more!

Cloudy & Sunny Weather Symbol T Shirt

Lightning T Shirt

Christmas Snow T Shirt

I don’t know exactly (yet) how to make it into a downloadable widget that other people could use on their own sites, but if I get time I may investigate how to package it up. At the moment it’s just hard coded into a regular text widget. And it’s also hard coded to pick up the weather forecast for Carrick-on-Shannon, so I expect the appeal might be… er… limited.

The inspiration for this came from seeing articles like Using Weather Data to Change Your Website’s Appearance through PHP and CSS and of course, the BBC Weather site which displays different graphics depending on the weather forecast.

The main thing I wanted to learn about was just the basic process of getting and parsing a feed and using some of the data it contained to pop a weather symbol on my site – there were plenty of sites out there offering different solutions, but the php classes from Marco Voegeli were a great starting point.

I discovered quite a few useful things while trying to put this together. Probably the most important in the end was to check your hosting company’s firewall settings…

I’d had the basic code working fine for AGES and was testing happily using MAMP on my local Mac, but every time I tried to put it live on the server it killed the entire blog and all my existing widgets vanished from the admin page. That usually happened right before Wordpress froze up completely.

Anyway, the bottom line is I needed to contact my host (Supanames) to get them to allow me to contact the remote website to access the Weather feed. There’s a link in MyPanel called ‘Firewall Rules’ and a form to send a request to the engineers to enable connections to a particular URL. Which once again, all happened very promptly, so full marks again to Supanames support.

Also, if ever you lose all your widgets from your Wordpress Admin screen, I’d recommend disabling your plugins one by one until the list comes back, then remove (or edit) the offending widget, and then re-activate the plugins. I know that’s probably fairly obvious to most, and may not always solve the issue, but it’s still a good starting point.

Mike

UPDATE: March 2010
This widget had been running just fine for nearly a year, but today something went screwy and it killed the whole blog. I’ve removed it for now, pending further investigation. It’s a bit tricky because I can’t view the blog to see even what kind of error it’s causing…