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

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

Categories
Internet Web

The next good thing

A VC wrote:

My view, for those who haven’t been reading this blog for a long time, is that all of this privacy stuff is way over the top. You need to disclose what you are doing and Facebook has done that. You need to give users a way to opt out and I believe but am not sure that Facebook has done that. Certainly the partner sites that are runnning Facebook’s beacon need to disclose and provide an opt out

But beyond that, tracking what we do and reporting it to our friends and using that data to target advertising and content is a good thing. In fact, its why the Internet is getting better and better every day.

This is why the internet is getting worse, not better–Tim Berners-Lee buying into the hype, notwithstanding.

One of the earlier stated advantages of the internet and the web is that we would have access to new ideas and concepts beyond that which were typical and usual and familiar. We had become a global world of insular neighborhoods, suffering not one but two world wars, as we stumbled from one fear of the unknown to the next. A despot works best with those least informed, so the concept was simple: inform. With the internet, first, and then the web, the walls around our communities would first crack, and then crumble.

Now, not only have we taken that insularity with us into the threaded void, we’ve monetized it.

I don’t know why I write on this, I’m not part of the discussion. I’m not part of the discussion because I don’t show in Techmeme. I don’t show on Techmeme because I don’t fit the white listing criteria. Because I don’t fit the white listing criteria, and don’t show on Techmeme, no one needs feel constrained to respond. Because no one responds, I am the tree, falling the forest. Eventually, I stop responding, and homogeneity is safely preserved. This is, the good thing to which we are heading.

Techmeme is based on the exact same principles of Facebook’s Beacon–celebrating, nay, demanding sameness, while filtering differences. What Facebook has done, though, is infinitely worse: not only can it ensure that insularity is preserved within the gated communities in its utopia, but it has also assured it’s marketing partners a ready supply of people perfectly mapped, neatly categorized, sans any pesky contrariness, because those of us aghast at what we’re seeing have bailed. No tears are shed at Facebook, though, because we’ve deactivated our accounts. Why? Because we generate noise, and no income.

Aristotle wrote in my comments:

The strategy is obvious and simple, no?

First they spring something “can they really mean this?!” outrageous on the userbase, then they let the protests ring for a while, until finally they “recant.” Of course recanting means falling back to a position that would have outraged users nearly as much as the initial proposition – but under the circumstances, seems like a compromise that users feel they can grudgingly accept.

Then they wait until the frogs have gotten thoroughly used to the warmer water before springing the next aspect of enforced exhibitionism on them.

Hey, it worked for politicians in grinding down civil liberties and those pesky checks and balances.

The strategy is obvious and simple, yes.

Categories
Social Media

Face about

I watched with some interest the fooflah about Facebook’s Beacon.

On the one hand, I think the application serves a useful purpose–it provides a dose of reality for those who have been extolling the virtues of the ‘social graph’ in all dewey eyed innocence. It’s hard to ignore that purchase of Depends showing up for all your friends to see. Hard for your friends to miss, too. Yes, it’s nice to actually see the snooping that’s happening without having to indulge in guesswork: am I, or am I not, a commodity. Now we know for sure: just stick us on the shelf between the sardines and the peanut butter.

On the other hand, how rude.

Now Facebook has come out with a new plan: the stores will still track you, still send your purchase information to Facebook, but you have to actively OK the first story for the site. This still means that the information is sent to Facebook. As proud as you are buying that new Nikon D300, how do you feel about information being sent to Facebook about the good deal on that…oh oh.

Users must click on “OK” in a new initial notification on their Facebook home page before the first Beacon story is published to their friends from each participating site. We recognize that users need to clearly understand Beacon before they first have a story published, and we will continue to refine this approach to give users choice.

(emph. mine)

Uh huh.

Of course, I expect those people who signed the petition and protested such an invasion of their privacy and trust to quit the service. Why else would people get so uptight but still continue? Unless, like the young lady quoted in the New York Times, they also feel they don’t have a right to privacy.

Indeed.

Am I quitting Facebook? Well, one doesn’t quit Facebook. One deactivates, leaves, never to return, and hopefully hunts down and eradicates every Facebook cookie stored on any and all machines, promising to never, ever, buy into the hype on Techmeme, ever again. It’s not quitting, per se, as much as throwing up barricades. After all, when I go shopping for … it’s none of your damn business.

updated

Oh, look, the Manz R sayin de same thing. Well, that’s a relief. I wouldn’t want people to have to rely on the opinion of a girl.

Categories
SVG

Comments line graph

I had promised a WordPress pluggable version of the comments line graph and here it is. The line graph application is in two pieces: one to place in your theme directory and include in your page template; and a plug-in that will create the cached comment count file.

File one is graphcomments.php, which is installed in your theme. You’ll include the following in your web page template where you want the graph positioned:

<object style="width: 810px" data="/wp/theme/graphcomments.php" type="image/svg+xml" ></object>

Change the location for your environment. The element needs to be styled to fit the preferred width. The number of comments remains the same, but the graph resizes based on this width. The following is the same graph, but the containing element is set to 500 pixels wide.

[object removed]

In addition, the graphcomments.php has a style section with three values that you can change: line width (stroke-width), color (stroke), and opacity (stroke-opacity, a value between 0 and 1, with 0 being transparent, 1 being fully opaque).

The second piece is the plug-in, store_comments.php, which needs to be added to your plug-in directory. Both of the files require access to a single file, called comments.csv. This is a file that must be writable by the world, stored wherever you want. You can make it by creating an empty text file, and then use “chmod 766” to make it writable. If you don’t make this file, the application will attempt to create the file, which means the whole directory has to be world writable.

Both store_comments.php and graphcomments.php have a constant, FILENAME, which needs to be altered to fit the location of where the comments.csv file is stored.

How the comment graph line works is that whenever a new comment is saved, the comments.csv is updated to reflect the comment counts from the most recent 100 posts. The application that generates the SVG reads this file for the comma-separated values, and then creates the line graph.

At this time, the comments line graph is restricted to 100 comments or less, so, be forewarned if you get those 130+ comment days, the peak will be truncated.

The graphcomments.php application can be used on any data that is located in the file, each value separated by a comma. You can use it for category counts, unique visitor counts, anything that has simple totals over time.

Version 1.0 beta:

graphcomments.php store_comments.php

Steps:

  • Click the links and save the files, changing the extension to php from phps.
  • Place the graphcomments.php in your theme.
  • Place the store_comments.php in your plug-ins directory.
  • Create an empty text file named comments.csv, and place it in a directory. The directory does not have to be web accessible.
  • Change the file permissions to world writable, chmod 766.
  • Change the FILENAME value in both graphcomments.php and store_comments.php to the location of comments.csv file.
  • Add the line graph object element, example given above, to wherever your want the line graph to display.
  • Style the object element and the line graph.

The line graph is created using SVG. You don’t have to serve your pages as XHTML when you include SVG via an object element, as this application does. The line graph should work in IE if the person has the Adobe SVG plug-in installed, but no promises. Or you can set a container DIV element in which the object is installed to not display for IE. Check my header to see how to create IE specific style sheets.

I tried to center the line graph so that the tips aren’t truncated until after the 100 comment mark. There is white space at the top and bottom, but using negative margins for the top and bottom should eliminate most of it.

NOTE:

Safari fills in the background with white, by default, for the object container. I’m exploring how to change this, but I don’t expect to have a lot of luck. It looks like this behavior is a bug (or as planned, but not wanted). Feel free to use, but the graph won’t have a transparent background like the graph in my header, which is inline SVG. Of course, you can also copy my inline SVG, but then you’ll have to serve your pages as XHTML.