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.

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.

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).

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

angelfield.com

I’d already changed the look of the main site, making it more of a tribute to Brian, who died tragically last September. He was the singer in the band, a fine musician and lyricist, and my best friend.

We formed Angelfield some time in the late eighties, although we’d been playing music together for many years before that.

As well as music, anyone that knew Brian would know also of his love of horses and racing. With that in mind, his family and friends have sponsored a race in his memory.

The Brian Spencer Memorial Chase is taking place at Plumpton on the 9th of May as part of Family Raceday 2010.

According to the Plumpton Racecourse site the Family Raceday is “an action packed programme of family entertainments … with Free Entry for children under 16″.

So if you’d like to have a child-friendly fun day out, remembering Brian and the good times, in the company of old friends (and horses), then get down to Plumpton on the 9th May. I think there are coaches being organised too, I’ll update this post when I find out more about that.

holiday apartment web design

If you view the site in Internet Explorer you’ll see that all the boxes (including the heading banner image) have square corners, but if you use a proper browser like Firefox, you should see rounded corners. I know it’s a bit of a cop out, and I did (briefly) investigate JQuery rounded corners, but in the end I opted for a IE conditional comment to replace the heading strap with an alternate (square cornered) image so that at least the look and feel is consistent depending on which browser the site is viewed in.

I’m also now a big fan of Parallels Desktop for the Mac. While I was doing a quick check for cross-browser compatibility I was able to run Firefox and Safari and Explorer versions 6, 7 & 8 all at the same time on my laptop. Possibly the subject of a future blog post I think…

Tolkien Fonts - cufon text replacement example

So, the plugin is called WP-Cufon and you can get it at wordpress.org/extend/plugins/wp-cufon/

It’s quick to install, has good documentation, and it’s easy enough to specify some rules to control the text replacement on your site.

So for example I’ve used :

Cufon.replace('h1', { hover:true });
Cufon.replace('h2', { hover:true });
Cufon.replace('h5');
Cufon.replace('#navbar a');

which replaces the font for h1, h2, h5 headings and any link text within the ‘navbar’ div with a special font of my own making. All of the subsequent styling is covered by CSS. It really is very simple to set up.

You need to convert your font first into a format that Cufon can handle – there’s a Cufon generator that does the whole thing very neatly. It also, importantly, allows you to limit usage to certain domains to protect the font from use elsewhere.

I’d previously looked at Scalable Inman Flash Replacement (sIFR) but I have to say I think Cufón may have the edge if only for ease of set-up – although, granted a lot of the hard work has already been done by the plug-in. Oh, and Cufon doesn’t use Flash.

I don’t claim to understand exactly how Cufon works, but if you’re interested in that kind of thing have a look at http://wiki.github.com/sorccu/cufon/about which goes into all the nitty-gritty.

And here’s a link to the creator of the wp-cufon plugin, Tobias Battenberg

OK, Tolkien fans

So this next bit is only really of interest to fans of The Lord of the Rings… (look away now if hobbits and dragons aren’t your thing!). No really.

The site I’ve used Cufon on is a Tolkien book collecting site – and I created a special font that brings to mind the calligraphy of the author J.R.R.Tolkien – I was pretty pleased with the end result, so if anyone’s interested they can buy a copy of Tolkienesque Regular (in Truetype font format) from my store.

I also ended up tackling another Wordress theme design from scratch – so the entire site has a kind of ‘Tolkienesque’ feel to it. That’s the name I gave to the theme too.

Tolkien Wordpress theme

The Wordpress theme makes heavy use of categories to organise the 400-odd entries, and has a neat ‘Random Item’ widget that I made to pull a text link and the first thumbnail image from a random post. Anyway, I was quite pleased with the end result. It’s been a labour of love built in spare minutes snatched here and there over the last few months.

But I’m most pleased by the fact that I can now use any old font I like in Wordpress, subject of course to EULAs and other legal niceties, or at least until the legal quagmire surrounding @font-face, font embedding and linking gets sorted out.

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…

The problem has been that everyone has been trying to get their hands on the old BBC ones which I ‘refreshed’ slightly as part of the 2005 BBC Weather relaunch. Obviously those symbols are owned by the Beeb, but I’ve been directing people back to the Weather Centre anyway, in the sure knowledge that they won’t be allowed to use them for copyright reasons. One visitor also reported back that they were refused permission because it also might be perceived as a ‘degree of endorsement by the BBC’.

Which is entirely fair enough.

So I decided to design a set of 40 new and unique weather symbols / icons that have a kind of ‘homage to old school TV graphics’ quality to them, but which have been designed entirely from scratch and obviously haven’t taken a single point, line or vector from the originals.

To start with I built the basic cloud shape from 3 circles, giving it a slightly more ‘graphic’ quality and a neat symmetry. This new set has a different sunshine element too, with pointed ‘rays’ – I’d never been entirely happy with the placement of the rectangular rays on the Beeb ones – it might have been OK for TV forecasts back in the day, but I figured I could use something slightly less blocky for my own set.

Cloud Symbol construction

I’d also wanted to see how different background colours might help to give some added sense of the weather conditions, so the symbol sits on a blue background for sunshine or showers, and a grey background for overcast conditions. Also, as the cloud shape is not broken by a rain/snow/hail symbol I could make the cloud opaque, and have used two shades of grey for precipitation – so the darker grey is used for heavy rain/snow etc.

Strangely, the Beeb set had a number of shared weather symbols for day and night (even when the night conditions were showery) so I’ve added a complete set of new night-time weather symbols that sit on a dark blue colour for showers, and a dark grey colour for the rest.

I suppose there’s always the chance that rain is ’showery’ even under total cloud cover (is that right?), but I guess if the sun peeping out is good enough for daytime, then the moon should make sense for night. Obviously the downside of this is the appearance of a crescent moon symbol – which says ‘night-time’ for sure – but may upset purists who would prefer to see the correct moon phase. If there’s enough interest I may add alternate moon-phase versions to the package.

It may be that the darker grey (night) versions could actually be used as part of the day-time set anyway – perhaps the darker grey could be used for 10 oktas only – or when very heavy precipitation is expected. I’ll wait and see whether the symbols are used like this (if they end up being used at all).

So, hopefully now if anyone arrives at this site looking to ‘borrow’ some weather symbols they might instead decide to buy this new set and avoid any risk of copyright infringement. It’s probably worth pointing out that these symbols come as a set of 40 PNG images at four different sizes, but they do not include transparency (they all sit on a coloured square). They’re designed for use in weather tables or charts – they’re not so ideal for placing over a map. I may produce some more weather symbol sets with transparency for use on weather maps if there turns out to be enough interest in this set.

Let’s see.

Buy : Weather Symbols

Comments welcome (we operate a ‘follow free’ policy for useful comments!)

I also rendered out a 1024×576 version too which I’ve tried out on YouTube. The size seems just about right for YouTube to process a single acceptable quality version (rather than having a separate ‘high quality’ link and showing a low res version by default). It may have more to do with frame rate though – some of my other videos were uploaded at the same size, but at 25fps and I’m thinking this might trigger the low-resolution default and ‘watch in high quality’ link option. The YouTube version of the textatrack web movie was output from After Effects at 20fps and then converted separately to MP4 using MPEG Streamclip.

Here’s the YouTube version running at 560 pixel width.

About TEXTATRACK.CO.UK

It really is a neat idea – a way of paying for legal music downloads without needing a credit card. Every song on the site has a unique number associated with it. You just text ‘track’ and the number to 83262 (UK) – you get a text back with a PIN that you enter to download that track from the site. The mobile phone is charged so there’s no mucking about with credit cards. A US version of the site textatrack.com is launching soon.

Blackheath Village website

A quick redesign for the local website for Blackheath – a lovely little village in Surrey.

Visit the site at www.blackheathsurrey.co.uk

If you have a website of your own – maybe one that was built years ago and in need of a quick ‘refresh’ – please do get in touch. We can copy your existing content over to a fresh new design in no time at all.

As well as a cleaner look, your new site will be optimised for faster loading and better search engine placement. So if your site is looking a bit tired and worn out, contact us for a bit of ‘website spring cleaning’.