Ok, I lied about no code this week... I swear that one of these days I'll run out of bits of code to hand out, but anyway. Have you ever seen the various picture galleries out there that do a nice rollover effect where every image is in black and white until you roll over it. Thus you get a nice highlighting effect where the one you're on is color. You might think that you'd need to upload the two images but in reality, all you need to do is convert the one image to black and white. And without further ado, here's the code to accomplish it:

All this code does, is opens a single image that you specify, sets up a color matrix, tells GDI to convert the image using said color matrix, and writing it back out to a different file that you specify. That's all it's doing. However, there's one portion that might not be 100% clear if you're looking at it: What the values in the color matrix mean.

A color matrix contains 5 different arrays. The first deals with the resultant red color, second array determines the resultant green, third determines blue, and the fourth determines alpha. The fifth array is a special translation array, basically deals with intensity of the colors. And each of those arrays contains red, blue, green, and alpha values in that order with values normally going from 0 to 1 (although you can go outside that range). So a default matrix would look like this:

This would give us exactly what we put in as the original image. What we're doing in the code above, is taking the average of red, green, and blue at different amounts in order to get the appropriate grey scale. The reason we're not simply using using .5 for all of them is actually due to the sensitivity of the human eye. Basically if you want to read about it, I'd suggest going here: GrayScale.

Anyway, hopefully that explains the only nonobvious portion of the the code and will hopefully fit your needs. So copy it, try it out, leave feedback, and happy coding.

No code coming this week, as I'm struggling with the database end of a poorly designed product... No consistency on data types, no foreign keys, no primary keys even... The product could have been designed by a four year old (which is sad since it's used quite often in rather large law firms, but I'll refrain from outting the company at fault)...

So while I deal with that, I'll point you over to something that you might find useful: Ubiquity. To be honest, all it is, is a glorified command line that they're building into FireFox. But it's rather well made and does have some cool commands built into it. I'd prefer something that dealt with voice commands, etc. that was built into my operating system, but I'll take what I can get. Although, wasn't the point of FireFox to be a stripped down web browser (but it's a plugin, so I guess it doesn't count really)?

One more thing. I've mentioned it recently but Spore is coming out... Fear my "leet" creatures:

Anyway, once I've tracked down and caused physical pain to the programmer responsible for the nightmare I'm in, I'll make sure to create some more "useful" code.

If you've looked for AJAXified progress bars, you've probably seen Matt Berseth's version here. It works great but there were simply certain things I couldn't do with it. For instance, I wanted to know where I was in long async postbacks, have a vertical progress bar, and have the percentage and progress bar in vastly different locations. As such I decided to go ahead and create my own version. Definitely not perfect by any stretch of the imagination, but it does do what I wanted it to.

ProgressBarExtender.zip (2.43 kb)

First, if you've used Matt's code, there is no continuous/manual modes. There is a mode that you can set, but it is specifically there to specify whether you want the bar to change it's height or width (or really any CSS value that takes a percentage). The code allows you to pick an image, div, span, etc. as the target. You pick a maximum percentage, minimum percentage, animation timer value in seconds, and an optional spot to specify where to place the percentage information. None of that is too big of a change, however instead of calling the javascript code to change the value, the code automatically does a call to the server (at whatever location you specify), which returns a float value, stating what percentage of the work has been completed. Once it is equal to or greater that the maximum value, it stops calling the server.

When everything is done you end up with this (it's an image, no need to click the button):

And yes, I'm so lazy that I didn't change the button's text to anything meaningful... However, I put the button there to bring up one aspect of the code that still requires some javascript. Specifically, you have to call show on the object:

As you can see, the button simply calls the function above, which called the progress bar's show function. There is also a hide function which stops any animation and hides the target control. That's all there is to it. Anyway, I hope this helps out someone. And in the future I plan on using this in conjunction with the file upload/update panel post I made to show you how to make a file upload system similar to GMail's. For now though, try out the code, leave some feedback, and happy coding.