How do I create a rotating signature image?

[MattRobertson]

I get asked this all the time, and since I just pm'd someone a whole bunch of detail (again) on how to do this I thought I'd make up a thread instead.

First of all, whats this about? My signature image changes every 30 minutes. At present I have something like 143 of them.

What do you need to do it yourself? Well, its not for everyone. I am a programmer and I have access to web servers, where I can post files, run programs and most importantly schedule programs to run at repeated intervals.

I'll run thru two ways to do it. Well, maybe three. All three will use ColdFusion as the application language. The code is easy to read so if you don't have access to a CF-enabled web server you can read whats here and convert it to PHP or .NET or whatever.

The cornerstone of the whole thing is my signature is told to display a file named http://lelandwest.com/auto-tech/magnum/sigs/lxsig.jpg. The fact that your signature can display an image sitting on another server is what makes this all possible. You tell your sig to look for a file, and then you change that file on your side of the fence with the tools you have available.

So here is the simplest version of the code. Basically in this example I have 31 sig files. they are named 1.jpg, 2.jpg, 3.jpg and so on up to 31.jpg. The code below will randomly pick one of the 31 available file names and copy that file to lxsig.jpg.

<cfscript>
variables.folderPath="c:/foo/bar/blah/blah/sigs/";
variables.todayFile=variables.folderPath & DatePart('d',now()) &  ".jpg";
</cfscript>
<cffile
    action="copy"
    source="#variables.todayFile#"
    destination="#variables.folderPath#lxsig.jpg"> 

This is very simple but its far from perfect. Assuming we run our sig changer once per day you get the same image on each day of the month. Image #31 will only be seen once every couple of months. Thats not particularly engaging.

You can take a slightly different approach. Lets say I have the 143 files that I have now and I want to figure out a way to use code like whats above to use them. Here's what I could do: Pick a random image from the list of 143 files:

<cfscript>
variables.folderPath="c:/foo/bar/blah/blah/sigs/";
variables.todayFile=variables.folderPath & randRange(1,143) &  ".jpg";
</cfscript>
<cffile
    action="copy"
    source="#variables.todayFile#"
    destination="#variables.folderPath#lxsig.jpg"> 

That gives you access to more than 31 files, but if you don't know it already, you will quickly learn that "random" does not mean "evenly distributed". Sometimes images will show up repeatedly. Many images will show up rarely. Also you have to name the files with numbers, which is kind of a PITA. What you want is to walk thru your list of images and rotate them right down the line, one after the other.

At one time I built such a thing and it ran completely in memory. All of the image names were housed in a persistent two-dimensional array and each image name had a flag element that was used to read in one image after another instead of dealing with random weirdness. The trouble with it was that, even though it was nicely self-contained, another word for a 2d array is 'database table' and it makes sense to use the right tool for the job. Moving the images to a for-reals database also allows me to write almost all of the code in SQL, which is a universal language that will make it easier for you reading this to customize into your own programming language.

Since this is an application that I, a programmer am going to maintain I can take a couple of shortcuts since I don't have to worry about stuff like noobies having to be able to use my code. I'll describe those, but first here is the table spec. This is a mySQL db spec:

CREATE TABLE `sigfiles` (
  `ID` int(11) NOT NULL,
  `filename` varchar(255) default NULL,
  `isCurrent` char(1) default NULL,
  PRIMARY KEY  (`ID`),
  KEY `isCurrent` (`isCurrent`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 

Note that the ID field is NOT an auto-increment field (thats an Identity field if you are using SQL Server). You will manually enter the ID number when you create each record, ensuring there are no gaps in your numbering sequence. The filename field holds your image name, without the path. For example: 'myimage.jpg'. Lastly, the value in the isCurrent field defaults to 0 (thats the number zero). Yes you could use a binary field and no I don't and I won't explain why :-)

So you enter in all of your sig files into this table using the gui of your choice, or you write SQL to do it if you are a masochist. This is the code that walks thru the sigs. Almost everything is SQL here except for a few lines of code. One line of code in here needs to be updated by you, the genius programmer: The value in variables.sigs.lastID. If you want to get fancy you can do something like

SELECT COUNT(ID) FROM sigfiles

and plug that number in. On the version I use I actually do this. But thats a needless extra hit on the database. Just write in the record count.

The code below has comments in it marked off with either <!--- and ---> or beginning with // on a line.

<!--- 
pull the current signature
--->
<cfquery 
    username="#request.global.dbUN#"
    password="#request.global.dbPwd#" 
    name="getCurrent" 
    datasource="#request.global.dsn#">
    SELECT    
        sigfiles.ID
    FROM    
        sigfiles
    WHERE    
        sigfiles.isCurrent='1'
    ORDER BY
        sigfiles.ID ASC
</cfquery>
<cfscript>
// set the base path 
variables.sigs.folderPath="c:/foo/bar/yoo/hoo/magnum/sigs/";
// List how many sigs I have in the database 
variables.sigs.lastID=143;
// default output to the first sig in the recordset
variables.sigs.newCurrent=1;
// now figure out if the current record is the last record in the recordset 
if (getCurrent.ID is not variables.sigs.lastID) {
    // no its not the last one.  increment the current picture ID 
    variables.sigs.newCurrent=getCurrent.ID+1;
}    
</cfscript>
<!--- reset what was once the current signature --->
<cfquery 
    username="#request.global.dbUN#"
    password="#request.global.dbPwd#" 
    datasource="#request.global.dsn#">
    UPDATE sigfiles
    SET 
        sigfiles.isCurrent='0'
    WHERE 
        sigfiles.ID=#getCurrent.ID#
</cfquery>
<!--- update to the new current sig --->
<cfquery 
    username="#request.global.dbUN#"
    password="#request.global.dbPwd#" 
    datasource="#request.global.dsn#">
    UPDATE sigfiles
    SET 
        sigfiles.isCurrent='1'
    WHERE 
        sigfiles.ID=#variables.sigs.newCurrent#
</cfquery>
<!--- pull the filename of the new current file ... --->
<cfquery 
    username="#request.global.dbUN#"
    password="#request.global.dbPwd#" 
    name="getName" 
    datasource="#request.global.dsn#">
    SELECT    
        sigfiles.filename
    FROM    
        sigfiles
    WHERE    
        sigfiles.ID=#variables.sigs.newCurrent#
</cfquery>
<!--- ... and use that filename to physically make a new default sig file. --->
<cffile
    action="copy"
    source="#variables.sigs.folderPath##getName.filename#"
    destination="#variables.sigs.folderPath#lxsig.jpg"> 

Even thought the code windows above say 'PHP Code' thats just something the VBulletin software inserts. Its really ColdFusion. Also I did not use some essential best practices like cfqueryparam, to make the SQL easy for everyone to read. If you are using ColdFusion, use cfqueryparam or die.

So THAT is how you make rotating signature images.

[MAN WGN]

WOW, thanks for that now I feel even more stupid than before.

[EXTREME]

you lost me at coldfusion, lol

I look forward to seeing what your sig is everytime i see one of your posts.. always a treat!

[HULK]

Me no speaky techy....





OK, maybe I speak it a little bit.... but not that much, lol. Some day I shall be on your level, oh great one.

[Shelby]

Very nice....another option is to have a random image selected for each hit real-time:


==== perl code snippet for 143 images named 1.gif to 143.gif ====
#!/usr/local/bin/perl
print "Content-Type: image/gif\n\n";

my $random=int(rand(144));
my $randomSig="c:/foo/bar/yoo/hoo/magnum/sigs/$random.gif";

open (IMAGE, "<$randomSig");
while ( <IMAGE> ) {
print $_;
}
==== end of code ====

A few more lines of code and you could give it the folder name and let it get all the file names and then select randomly among them. This would not require a running job or cron job to swap the files- random new one every time.

Note: untested, but should work with something close.

[BobF's 6POINT1]

No flux capaciter with that? I guess I'll just stick to animated gifs. I know - sooooo 2 years ago.

[Carfinish]

eeeeeyyaaaAAA...... ummm Matt, like how many keyboards do you go through in a month?.... 'cause like, mine last for yeeeeeears doooooood.....mmmm'kay.

[MattRobertson]

Very nice....another option is to have a random image selected for each hit real-time

Thats an interesting idea. How does perl interject itself into the mix when calling a .gif file from an outside source?

If I could do this in VB:

[img]http:\\foohbar.com\arf\arf\imageflipper.cfm[/img]

In other words, link an image to a .cfm file instead of a .gif or a .jpg - then I could serve up an image like what you're doing. But the CF processor only handles certain file extensions.

In perl wouldn't I have to do this:

[img]http:\\foohbar.com\arf\arf\imageflipper.cgi[/img]

in my signature window?

[MattRobertson]

If I could do this in VB:

[img]http:\\foohbar.com\arf\arf\imageflipper.cfm[/img]

Well I'll be damned (probably am, anyway). You *can* do that. My sig is running like that right now. Still calls the same image. Just in a different way. Could have sworn that VB didn't allow images with nonstandard extensions.

To write shelby's idea in Coldfusion it would look like this:

<cfcontent 
    file="c:/foo/bar/blah/blah/sigs/#randRange(1,143)#.jpg" 
    type="image/jpeg" 
    deletefile="No"> 

This will serve up an image randomly every single time. It won't do the nice neat even progression of images, which you might find to be an issue, but its quick and dirty and works just dandy.


edit: For all the CF stuff, you have to know your server's physical path to the files from root. Not the url... the path. Tech geeks will know what this means.

[Shelby]

Thats an interesting idea. How does perl interject itself into the mix when calling a .gif file from an outside source?

If I could do this in VB:

[img]http:\\foohbar.com\arf\arf\imageflipper.cfm[/img]

In other words, link an image to a .cfm file instead of a .gif or a .jpg - then I could serve up an image like what you're doing. But the CF processor only handles certain file extensions.

In perl wouldn't I have to do this:

[img]http:\\foohbar.com\arf\arf\imageflipper.cgi[/img]

in my signature window?

Correct.....glad you like it!

[ChargerChick]

Ooof. My head hurts now.

[MattRobertson]

There will be a quiz later so I hope you took notes :D

...

So. We have a few examples in ColdFusion and one in Perl. Who wants to write something in PHP or .NET? If anyone's interested post it up here.

[Cam]

Dooooood, you REALLY need to get a girl friend.

[Zoban]

Hmm interesting.. may have to look at doing up some sigs vs. just the text soon..

Have IIS7, php, MSSQL, MySQL and about anything else I wanna install available.

[Shelby]

You could obviously do the Super-Geek:

Random real-time images delivered via script with animated images (either cool animations or a few rotating ones)