I admit that I really like the AJAX Toolkit however I'm constantly running into instances where I wish I had more leeway with how it did things. One instance was the reorderlist extender.

When using the reorderlist extender I ran into two problems on a project. The first issue was the fact that I had to bind it to data. I needed the ability to feed it information after it had been rendered and as far as I'm aware, that wasn't an option. The second issue was the fact that the information for each item in the list was large (sometimes an entire page of data). The drag and drop model in this instance simply made it infeasible, instead I needed the ability to click on buttons in order to switch positions. So once again I created my own extender...

ReorderList.zip (2.56 kb)

I guess I shouldn't really call this a list extender as it doesn't use HTML lists. Instead it's a list of divs or spans. The extender takes a list of divs and/or spans (a single string with each item separated by a comma) and a basic ID ordering for the items (also separated by a comma), inserts up and down arrows before the first child of the various divs/spans (the locations to the images you provide), and when you click on the arrows it switches the order of the items. In order to save the items it also requires you to associate a button with it. When the button is pressed it calls a static function (the location and name of which you specify) like this:

Note that it has to be a static function, with WebMethod and ScriptMethod definitions as well as have the contextKey variable in there. The function name though can be changed by you. Also if you use it you may want to go in and edit the onMethodComplete and onMethodError functions as they don't do anything at present. Anyway, download the code and take a look, leave feedback, etc. and happy coding.

   

I've shown a couple different methods for generating procedural textures, namely Perlin Noise, Cellular Textures, and Fault Formation. And while Perlin Noise and Cellular Textures generally look OK on their own, Fault Formations generally don't.  They tend to look harsh with drastic changes from dark to light areas (which actually can be good sometimes).  The best way to fight this though is to use some sort of image filtering on the image to soften it up a bit.

So I'm going to show you two methods for doing this... Well sort of and I'll explain later why I say that.

Box Blur

A box blur is a technique where you simply take a "box" of pixels around a particular pixel, add up the sum of those pixels, then take that sum and divide it by the number of items in the box. That becomes the new value for the center pixel of that box. Really simple to do and rather fast at that. In fact here's a basic class that accomplishes it:

Note that this class uses float values for the array as input and can be used with the Perlin noise, cellular texture, and fault formation classes that I've posted with a bit of work. However for your own purposes, it should give you an idea of what to do. Also note that if you're going to change the code to send in pixels, you're going to have to add up the red, green, blue, and alpha channels separately. Otherwise it simply will not work properly.

Gaussian Blur

Gaussian blurring is a technique similar to box blurring but uses a normal distribution to accomplish it's goal. Really if you want to know the math behind it, I suggest you click on the link.  It's pretty common in programs like Photoshop and GIMP. Anyway, I'm not going to show you any code to do this technique because you've already seen it.

See that code for box blurring? Guess what, we can accomplish a Gaussian blur with that.  There's no extra code for this method, all we do is run the box blur method three times and we basically accomplish a Gaussian blur (well -/+3% difference anyway). Rather cool, huh?

Anyway, download the code, take a look, leave feedback, etc. and happy coding.

   

This is a question that comes up rather often: "How do I make a thumbnail automatically when uploading an image?" It's actually really simple to do. All that is required is to figure out the final size that you want, find the coefficient between the old maximum size and the new maximum, and multiply it by the old values (this gives you the new sizes in case the image isn't square), and let .Net save the images at the correct size for you. If that confused you, here's the code to do it:

As you can see, it's rather simple to accomplish, but is definitely one of those items that should be in every web developers tool box. Anyway, use the code, leave comments, etc.