Topic: Wind direction arrow using canvas

[FourOhFour]

OK, don't I feel dumb. I posted this in weather website help, but it really belongs here. Deleted that one (no replies), reposting here.

--

Well, I was looking at my site doing a redesign... and thought putting the wind direction as an arrow in a circle would look neat. Now, I could have done this with a bunch of images (one for each direction)... but that limits you to as many directions as images you make.

Instead, I decided to use a little javascript and a little (non-standard) HTML: the <canvas> tag. If you are using Opera, Safari, or Firefox, you'll see this if you visit skigod.us. If you're using IE, you likely won't see it (but it'll degrade nicely and show the direction as an abbreviation).

Now, this code isn't very good as a drop-in thing... you'll have to fiddle with it to fit your site design. But if you want it... cool. Have fun. At a minimum, you'll have to go in and set your foreground color.

The code for the canvas is the functions setup_wind_canvas, draw_arrow, clear_arrow, update_arrow, and unglow_arrow in this file.

Maybe some day I'll make the arrow move smoothly instead of pop to the new position...

[WeatherBeacon]

FourOhFour:

I downloaded your script (thanks for graciously making it available!) and skimmed it. What data file(s) does it read? It looks like it need CSV files?

Thanks!

Regards,

Kevin...

[FourOhFour]

FourOhFour:

I downloaded your script (thanks for graciously making it available!) and skimmed it. What data file(s) does it read? It looks like it need CSV files?

The script reads the data.csv generated by VWS, but the functions for the wind direction arrow should be easy to add to any ajax-related weather script.

setup_wind_canvas() - no arguments. Sets up the canvas for our use. If successful, adds a 'with_canvas' class to the body tag, so your stylesheet can make any changes necessary for the canvas.

draw_arrow(dir, glow) - dir should be the wind direction in degrees, if glow is 1, the arrow is drawn in a highlight color.

clear_arrow() - no arguments. Clears the arrow from the display.

update_arrow(dir) - dir should be the wind direction in degrees. This is the function that needs to be plugged into an existing update script. If the new direction is different from the old one, clears the old arrow and draws a new one with the highlight. Safely does nothing if the canvas couldn't be set up (so there is no need to test for that)

unglow_arrow() - no arguments. Redraws the arrow in the normal color.