Hey, Where Did Seattle Go?
Last weekend, I noticed that the Seattle weather turning to crap has also turned a good deal of the livecam images in the Mike Industries live header to crap. As it turns out, the moisture we get this time of year in the Northwest can turn a scenic Puget Sound view into an indistinguishable blob of grey in about 15 minutes. To make matters worse, the livecam is actually a Sony DV cam and not a proper high-resolution digital still camera, so a poorly defined subject area really makes for a blurry and unimpressive shot.
Here is a sampling of what the header looks like under different circumstances (Note: If you can’t see the live header, make sure you have Flash installed and click the “Live” theme in the sidebar) —
Header on a good day
Header when it’s extremely foggy
Header at night
Header with no image
Now, all of this wouldn’t be so bad if I wasn’t using the livecam as a masthead for my site, but I quite intentionally am, so I needed another solution. If I could only show something else when the view outside was crappy, then that would be great.
But how can you programmatically detect crappiness in photos? Luckily in my case, it wasn’t so hard.
Contrast.
If the contrast of any given photo from the livecam is not sufficiently high, I can deduce one of two things: it’s really foggy or rainy out, or it’s nighttime. Both of these cases produce ugly livecam images in the header, so if I can detect when low contrast occurs, I can change the header accordingly.
I’d heard about ImageMagick in the past but never actually used it. ImageMagick is basically a server module which lets you do all sorts of programmatic things with images like stretching, rotating, sizing, etc. However, it turns out you can also fetch the standard-deviation of each RGB channel of any given image. The standard deviation of an RGB channel is the range of values which encompasses two-thirds of the total number of pixels in an image. It’s a crude measure of contrast, but it works for my purposes.
The next step was writing a PHP script which would suck in the standard deviation value of each channel, come up with an average, and then output a tiny text file containing only a “0” or “1” depending on if the contrast value was above or below my threshold. Running this script via cron every 15 minutes would give me an accurate indicator of whether current conditions were defined enough to produce a good image. And finally, in order to actually act upon that information, I could simply feed “contrast=0” or “contrast=1” into my Flash header via PHP and the FlashVars property.
So now that I can detect when I don’t want to show the standard livecam image, I need to figure out what to show instead. Right now, I’m simply not loading the image and leaving the header as a block of mostly negative space. The header was originally designed to look presentable without an image, so this doesn’t bother me too much.
But I want to do more. I feel like there’s something more useful I could do in the header when it’s either foggy or night time and I’d love to hear any suggestions. So far, I’ve come up with these:
- Keep it blank.
- Bring back the crappy footage for the sake of it being a “live theme” and that’s what live themes do.
- Show nicer, higher resolution photos of a foggy scene and a night time scene when it’s appropriate (taken from a real digital camera).
- Come up with some sort of other element to load into the header (like an explanatory line of text) when conditions call for it.
Anyway, I have no idea what to do. Someone even suggested doing a panning lighthouse beacon when it’s foggy but that may be over the top. Any ideas?
Thanks for the explaination. In my previous post (iPhone Update) I was apparently getting “crap weather, display nothing but name,” and it was, after all, 2am.
Personally I’d like to see #3, and was thinking of that option before I read your list of choices. Taking some nice Seattle night-life photos to display would be pretty cool. Actual night-life, or just cool shots of the city and its lights at night. Fog images might be a little harder, but I’d place money on you being able to figure something out.
One other thing I was wondering about was why, even on a good day, the image is never really clear. Obviously you are styling it, but why not make the colors a bit more real (it isn’t always grey and wet up there, I saw it in color myself last week!) and clear? Just seems that if you are going to show Seattle, show it!
* drops two cents in jar *
Philip: Yeah, the clarity is related to the fact that it’s a videocamera doing the capturing. I did recently find out that there is precisely one brand of digital-still camera (Canon) which will operate in unattended mode and FTP images up, so I’m thinking of trying to snatch one off eBay or something. I’d buy a new one but not sure if I want to spend $300 for a camera I’m not even taking with me anywhere. Anyone have an old 2-3 megapixel Canon they want to sell? I’d even consider trading my Optio S4 for a decent one.
I like the idea of Seattle pictures as well. Something other than Puget Sound, maybe. Not the Seahawks, though… they’re looking pretty ugly at the moment. Anyway, nice site and great articles.
I’ve got a Canon PowerShot S40 that I rarely use and would be willing to trade.
Great explanation!
I really enjoy reading everything you post up here. I like the thorough explanation of how you worked out ImageMagick, reminds me of something I attempted a while back.
Thanks for the great writing, keep it up.
I have a Canon Powershot S30 sitting here by my desk. I’ll drop you an e-mail.
By example, I personally really dislike pictures of people posing because a picture is taken. Holiday pictures: Hey, look at me, I am standing next to this statue!! So what?! Like this we don’t get see what the holiday was like! Why aren’t there any pictures of you guys waiting for the plane that was to depart seven hours later than scheduled?
So called ‘real live soaps’ are cool because you can basically see everything. The point of live pictures is that the scene is not moderated. The whole thing is intersting because you’d like to visit your site again when the photo might be considered abnormal, might be moderated.
What would it look like when it’s all foggy? Honestly, I remember me thinking this when I discovered your live theme. Please, choose #2.
I just discovered your site earlier today. It’s great. I live in Seattle and immediately noticed the masthead. A long long time ago I used to have a company called Shoreline Media and we had a similar masthead on our site. Ours wasn’t live and we always talked about making it into a live picture or making it throw different photos based on the time of day. We never bothered, but I like it. It’s a cool feature.
Earlier this morning when I found your site, the weather was pretty gray and the masthead wasn’t much to look at. A few hours later I looked out the window and saw the sun was out and thought “I wonder what that site looks like now,” so I came back. But instead of seeing a sunny view, I saw a blank masthead and I noticed your “where did Seattle go” post. Now it’s a little grayer and the masthead is back. I wonder if you have the if/then in your script reversed so that it’s only showing when the image is low contrast??? Just a thought.
As for what to put in it’s place, the plain gray doesn’t look bad at all. If you do substitute other Seattle images, it would be a good oportunity to use nice Seattle shots from other vantage points. It would be nice to have “Puget Sound View” replaced with “Seattle at Night (stock image)” or some other indicator that it’s not the live feed. And it would be nice to still have the weather and temp even when the picture feed is down.
Again, great site.
Ladies and gentlemen, meet Mike West… the most generous person in the world! I’ll take the S30! Thanks so much!
Better quality images to come very shortly…
I only ever visit here in the evening UK time so hadn’t realised that it changed! (I don’t visit that often mind you).
I think option 3 would be best, as long as you state that “this is the view when it’s a clear day/night” or something.
Great idea though!
Nice story & application, thanks.
You used “contrast” as the metric on the server to determine whether to switch sources. Could the client engine also use “motion” as the metric?
(Apologies if I misunderstood the problem, though… I don’t see Live theme in the sidebar.)
jd/mm
I’ve never seen anything but the dark gloom at night…
Probably ’cause I only visit in the evenings…
Stay live and improve the picture when you can. If you want to add a div over for likely bad weather about why they are seeing what they are seeing … then okay. But showing some wonderful shot to cover bad images is as you suggested, not live.
Personally, I was extremely impressed with what Dunstan did on his site. Might be a lot of work for a ‘sometimes’ solution. But DAMN! It’s sweet! Don’t get me wrong, of the options listed, I’d personally live it live – live is as live does!
The live theme is great on clear days at sunset. I agree that if you replace the live image with stock it should be indicated. Perhaps you could create a true live theme and a “location” theme that replaces the images as you described. The “location” theme could even add stock photo randomly when it is clear on occation. Of course this will cause the problem for all of your readers of needing to choose between two very interesting headers.
John:
1. You don’t see a blue square in the sidebar that says “LIVE”? There should be four little squares under “Select a Theme”. The square only shows up if you have Flash installed, but if you’re seeing the live header, you already have it installed, and besides Flash pays your mortgage so you better have it installed! :)
2. Regarding the “motion” thing. Do you mean rigging the system up so that if a boat goes by, it captures the image and keeps displaying it until some other interesting bit of motion occurs (like a parasailer, ferry, etc)? I’ve wanted to do this for quite awhile since the shot really is more interesting when there’s action, but the software I’m using to capture the image just doesn’t do a good job of motion detection. It’s clearly a “feature” of the software, but I just can’t get it to work properly. I think it’s meant to detect motion which is a few feet in front of the camera instead of a few miles.
i would go for a combination of 3 & 4: you could show nice digicam images of the current situation (night, rain, whatever …) and indicate that this is actually NOT a live image.
Dude, if you’re going to swap it out, make it count….
So for me it’s option #4, and a nice cheezy Hawaiian sunset to provide the perfect “contrast” to those cold, wet Pacific NW winters.
It’s easy, get your photo, stamp your “SPECTACULAR 78F” on it and call it a day. Then, simply deny everything, admit nothing.
If nothing else, it’s better than high resolution fog – lol
Cheers
What about trying to tap into the Space Needle’s webcam and using that as your header?
http://www.spaceneedle.com/webcam/
That’s not a bad idea at all. I would have it go through a series of webcams comparing different contrast averages for each one depending on the weather condition until it finds the nicest image and then you can have it write the location of the webcam on the bottom right under the part where you write the weather conditions. I think that would look great. I’m also a great fan of your website, and love the style and coding you use to do this. Keep it up. :)
“You don’t see a blue square in the sidebar that says “LIVE”?”
Yes, I don’t. Might be pilot error here, or it might be my antique setup, Mozilla 1.4 on NT4.
“Regarding the “motion” thing…. “
I’m not sure of the flow there, of when the Macromedia Flash Player enters the picture, but it offers built-in motion detection with varying degrees of resolution. Hmm, I thought I had included the link, but guess I didn’t:
http://snipurl.com/Camera_setMotion
jd/mm
Oh my god JD… NT4! The holidays are a time for celebrating, not suffering!
Thanks for the link to the setMotion function. This would be a great thing to enable if I was using FlashComm to actually stream live video into the header but I’m not sure I want to sign up for that sort of bandwidth consumption just yet. Plus, the image quality would be even worse. As it stands right now, I have a piece of software called ActiveWebCam on my rarely-used PC which just snaps one photo from my DV Cam every two minutes and then FTPs it up to my server. Then, the Flash header just loads that still image when the page loads… so the only good way to do motion detection on that is using the Active WebCam software, which unfortunately sucks at detecting motion which is miles away.
A low rez source, but…
keep it real [http://www.reaxion.org/chief.jpg]
I chose the Live theme because I kind of dream of visiting Seattle someday. I wish the masthead would stay foggy when it’s foggy there. That’s what “live” is about, after all.
Can’t wait to see the improved pictures, though!
I agree with the importance of keeping it Live. I vote for #2, with a better camera. For me, the value of the Live masthead is in documenting the way the view changes over time–not in showing the beauty of Seattle. Of course it would be great to do both, but the Live aspect is more unique.
I vote for #three (automatic canned quality), with a disclaimer (currently the weather is imparing the view from our live cam, here’s a high res example of what this would look like if our web cam could hack it) that would probably have to reside in a tooltip (title/alt) style onmouseover style box.
I like the idea of using a few high resolution digital shots to represent what’s going on. I did a site for newyork.com and did a pseudo webcam off the top of the world trade center. I snapped 24 photos through out the day. Then I’d rotate them every hour. The idea was then to go back during various weather conditions to futher simulate what it sort of looked like outside. That part of the project never happened but in 3 years of the site running, no one ever noticed it wasn’t a truly live feed.
is there someplace else that you can point it? maybe someplace that’s all light up at night?
What about having two livecams, and switching feeds depending on contrast, motion, etc.? Just an idea…
Hello Mike!
Just wanted to drop you some lines from Switzerland! And many compliments for your impressive and creative work.
I was in Seattle about 4 years ago… (no not at Microsoft) – we visited Boeing and the Flight Museum with Air Force One and that stuff. Your city is a beauty! Many nice places to go! I was most surprised by the statement of our sightseeing-guide. She told us, Seattle is that city with most sunglasses per inhabitant – even more than L.A. – I still cannot belive it, when I look at your header :) But Seattle is really cool and so it makes surely sense!
BTW: In the evening we often visited a ‘jazz-club’ downtown. Everything was held in ‘New Orleans-Style’… Even the meals and the whole location of course. Maybe you know the name of this jazz-club. Unfortunately can’t remember it right now…
However – Thank you for your fresh work and keep up doing your creative work. You cannot imagine how it impresses me :)
greetings
felix
What a great concept in its own right. God, I wish I had the technical abilities to pull of ideas such as these. I always keep reminding myself, graphic design is all about the process and the tools involved. But to answer your request…I think the foggy and night pictures are a good thing, not a problem! Why? It has proposed to you a problem with a varying degree of creative solutions (that’s our job, to figure this crap out)…now, just me?
My first instinct would be to have some real fun with it. You could include some pre-made images depicting different moods and scenarios in fog and rain. You could also use Dan Benjamin’s PHP Image Rotator script so it could vary each time somebody loads a “fog” page.
Let’s see…for fog – you could have two pirate ships crashing into one another; a blank image with a cartoon dialog bubble with something like, “Hey, is that your hand or mine?”; or perhaps a static TV-like image of a painting, and underneath a caption, “The livecam is offline due to fog. We will return to our regularly scheduled snoozefest of liveness soon.”
For rain? Same idea of the dialogue bubbles, except, “I’m melting! Melting!!!”; a big pool of water with only the Space Needle sticking out of the surface; or perhaps a caption that simply says, “Just another typical day in Seattle, folks.”
Really, those are just a few silly ideas. I think you’re practically limitless in the fun you can have based on this “creative problem.”