Graphics/CSS SVG

Experiments: SVG Clock

I thought I would go into some detail on some of the experiments I’ve been trying out on the site, starting with the SVG clock in the sidebar.

A major advantage of SVG is that you can actually see how something is created. Try that with a Flash file.

The SVG clock in the sidebar is an adaption of a very simple SVG clock created by Jason Davis. I modified it by creating specific second tick actions, and then altering the appearance. I also added code so that it would reflect my time, not yours. I figured you had your computer clock and didn’t need me repeating it.

The clock is LGPL so you can copy the SVG file directly into your own space, set the width of the container, and even alter the coloring if you wish. I’m using linear gradients to create a clock highlight, interior shadow, and silvery frame. I also added a Gaussian blur as shadow, but this only shows up in Firefox 3, Opera, and Safari.

The function to change to your time zone is:

setInterval("setClock(calcTime(-6))", 1000);

The value to change is “-6”, which states that my timezone is currently 6 hours behind GMT.

It’s just a frill, true, but after seeing some of the crap I’ve seen in sidebars, you could do worse. It takes up less CPU than most animated ads, and requires no external load times. From a browser performance perspective, Safari requires less CPU to run the clock than Firefox or Opera. If you load the clock directly, it will be quite large, but will also eat up considerable CPU. Leave it up for a while and I guarantee your computer’s fan will come on.

Is the clock worth the extra burden on the client’s machine? Yes, and no. As a demonstration of what you can do with SVG and simple animation, I think it’s a valuable tool. There is a Catch 22 about SVG: we don’t use SVG because browser support is incomplete or inefficient; effort to better incorporate SVG is of secondary importance because SVG is little used. The only way to break this cycle is to actually start using the specification, and pushing a bit at the edges while we go about it.

As for the contents of the clock, how much do your web page readers really care about what time is it where you’re at? I would have thought probably not a whole lot, but I find that I’m not particularly good at understanding what particular bits of minutia interest people. I’m told people want to know you bought chewing gum–the brand, the flavor, the date and time when purchased. What time it is where you live must seem monstrously important in comparison.

Graphics/CSS Programming Languages

Experiments in Color

I’ve written about this previously, but worth repeating. CSS can be dynamically created using a PHP application, as long as the content type is set to CSS:

<?php // declare the output of the file as CSS header('Content-type: text/css'); ?>

The style sheet can then be used directly or imported into another:

@import "photographs.php"; I use this feature to randomly assign a background image for my header and also to access the color of select pixels in the image in order to colorize the theme based on image. I based the points on the photographer’s “rule of thirds”, which puts the focus on the photo along an imaginary line, either along the top or bottom horizontal third, or the left or right horizontal third. I also pick a pixel directly in the middle of the image. I could test all pixels and find the most common colors used, but the amount of processing is prohibitive. I’ve haven’t seen this algorithm fail when it comes to creating a compatible color set, yet.
fishie.jpeg (JPEG Image, 818x195 pixels)

I use the built-in graphical GD functions in PHP to pick the color points, as well as find the size of my background image, and adjust the header accordingly. I could also have used IMagick, the PHP-based wrapper for ImageMagick, but GD is almost universally available on web hosts, while IMagick is not.

// create a working image 
$im = imagecreatefromjpeg($imgname);

// get image height and width
$height = imagesy($im);
$width = imagesx($im);

// sample five points in the image, based on rule of thirds and center
$rgb = array();

$topx = round($height / 3);
$bottomx = round(($height / 3) * 2);
$lefty = round($width / 3);
$righty = round(($width / 4) * 2);
$centerx = round($height / 2);
$centery = round($width / 2);

$rgb[1] = imagecolorat($im, $topx,$lefty);
$rgb[2] = imagecolorat($im, $topx, $righty);
$rgb[3] = imagecolorat($im, $bottomx, $lefty);
$rgb[4] = imagecolorat($im, $bottomx, $righty);
$rgb[5] = imagecolorat($im, $centerx, $centery);

// extract each value for r, g, b
$r = array();
$g = array();
$b = array();

$ct = 0; $val = 5000;
// process points
for ($i = 1; $i <= 5; $i++) {
   $r[$i] = ($rgb[$i] >> 16) & 0xFF;
   $g[$i] = ($rgb[$i] >> 8) & 0xFF;
   $b[$i] = $rgb[$i] & 0xFF;

   // find darkest color
   $tmp = $r[$i] + $g[$i] + $b[$i];
   if ($tmp < $val) {
       $val = $tmp;
       $ct = $i;


   printf(".color1 { fill: rgb($r[1],$g[1],$b[1]); stroke: rgb($r[4],$g[4],$b[4]); }\n");
   printf(".color2 { fill: rgb($r[2],$g[2],$b[2]); stroke: rgb($r[3],$g[3],$b[3]); }\n");
   printf(".color3 { fill: rgb($r[3],$g[3],$b[3]); stroke: rgb($r[2],$g[2],$b[2]); }\n");
   printf(".color4 { fill: rgb($r[4],$g[4],$b[4]); stroke: rgb($r[1],$g[1],$b[1]); }\n");
   printf(".color5 { fill: rgb($r[5],$g[5],$b[5]); }\n");

   printf("stop.begin { stop-color: rgb($r[1],$g[1],$b[1]); }\n");
   printf("stop.middle   { stop-color: rgb($r[5],$g[5],$b[5]); }\n");
   printf("stop.end { stop-color: rgb($r[4],$g[4],$b[4]); }\n");
   printf(".nameExpanded, .nameCollapsed { background-color: rgb($r[4],$g[4],$b[4]); } \n");
   printf(".column-post h2, .column-post h2 a, .firstpost, 
                .firstpost a { color: rgb($r[$ct],$g[$ct],$b[$ct]); } \n");

To ensure that the title and title bars contrast strongly enough to be viewable, I test the selected colors for the ‘darkest’, ie the less saturated of colors. Adding up the RGB separate values does the trick: a value of RGB(0,0,0) totals to 0, while one for RGB(255,255,255) totals to 765. Everything else falls in between.

Again, the reason for doing this type of adjustment is not only to add an interesting, and changing element, to the site interface, but also to demonstrate what can be done with both images and CSS. Neither is static, and none of the modifications requires scripting on the client, and many of the modifications aren’t impacted by browser type.

For more details on the processing, access the viewable copy of the PHP program.

Technology Web

Apple meet orange

Speaking of email, how absolutely idiotic to pronounce the death of email because today’s teens aren’t using their email accounts.

Today’s teens are also wearing their pants around their ankles–does this mean, then, that civilization will eventually lose its waist? I’m sorry, dear people, but frankly I’d rather not see most of your underwear clad butts.

We seem to be desperate to be the first to ‘spot trends’ that we take an audience that is known to have certain behavioral characteristics, and extrapolate what this means into the future. This is silly, as history shows us that teen behavior does not a forecast for the future make.

For instance, from my own youth, extrapolating our behavior into the future, one would assume the phone would be dead by now, because we spent all of our time in each other’s ‘pads’: smoking weed, dropping acid, and painting flowers on our bell bottoms, as we contemplated revolution and free love with equal passion. The phone was The Man.

From what I can see of drivers wherever I go, not only is the telephone not dead, it’s used more now than at any time in the past.

Focusing on what teens want has already ruined television. You can’t watch a show now without some blurb showing up obscuring half the screen with instructions about how the person watching can make the experience more ‘interactive’. Why add these to shows? Because marketing has deemed that today’s youth insist on such a barrage of noise in order to grasp and hold their attention.

Now, we’re ready to hold requiem on email, and other longer, thoughtful communications, because kids have the attention span of gnats. Welcome to the brave new world. Oh, excuse me: BRV NW WRLD. LOL.


An anonymous response in another weblog to the “email is for old people” pronouncement:

To be fair, what is a more efficient method for communicating “I AM WATCHING TELEVISION” or “I JUST TOOK A POOP AND IT STANK UP THE BATHROOM” than through something like twitter? It’s too frivolous for an email.

But likewise, am I going to communicate an action plan or discuss something with a customer via AIM or twitter or myspace? Fuck no. IM is for instant communication. Twitter is for pointless, self-involved drivel. Myspace is for idiots who want to consoladate their entire internet experience into a single website (and a single point of failure) just like the good old BBS days, before they were born —- and email is for people who need to convey important information, delicate information, detailed information or otherwise engage in an actual conversation.

I use IM constantly in my line of work. I’m a developer and our entire company of 45,000 people globally requires that everyone use our own developed commercial messenger (uses XMPP, much like jabber and is for all intents and purposes — jabber). Most of my colleagues are not even within driving distance. And even if they were, a lot of us telecommute full time. So IM is absolutely a necessity.

But for every IM message, there are a few dozen email messages. Whether it’s discussions on an internal list or another. Whether it’s communicating with customers or field engineers or team discussions and management discussions to touch base or regarding staffing or action plans.

So yes, young people may just use twitter, IM and myspace today . . . but if they plan to ever have discussions that go beyond what color their crap was and what they’re doing at that very instant (OH MY GOD, WE’RE ALL EAGERLY AWAITING YOUR NEXT TWITTER!) and beyond self-involved attention-whoring on myspace or trying to get off with some loser on instant messaging, they’ll eventually find themselves forced to gravitate toward email. And if they don’t – they’ll be shark food for the rest of us in the workforce.

outdoors Photography

Fall 2007

My fall color photos for the year. From trips to the Botanical Garden and Shaw’s Nature Center.

Shaw Nature Center

Botanical Gardens

Botanical Gardens

Botanical Gardens


Fall Colors

Recovered from the Wayback Machine.

My fall color photos for the year. From trips to the Botanical Garden and Shaw’s Nature Center.

Shaw Nature Center

Botanical Gardens

Botanical Gardens

Botanical Gardens