Implementing User-Controlled Style Changes in ASP.NET

Question

Ok, so we have clients and those clients get to customize their web facing page. One option we are giving them is to be able to change the color of a graphic (it's like a framish-looking bar) using one of those hex wheels or whatever.

So, I've thought about it, and I don't know where to start. I am sending comps out this week to my xhtml guy and I want to have the implementation done at least in my mind before I send things out.

Something about System.Drawing sounds about right, but I've never worked with that before and it sounds hella complicated. Does anyone have an idea?

UPDATE: The color of an image will be changing. So if I want image 1 to be green, and image 2 to be blue, I go into my admin screen and enter those hex values (probably will give them an interface for it) and then when someone else looks at their page they will see the changes they made. Kind of like customizing a facebook or myspace page (OMFGz soooo Werb 2.0)

Thanks!

Answer 1

What exactly will be changing? Depending on what's changing you may be able to overlay a transparent png on top of an html background color. Just change the background color and the logo color will change. Of course this limits what you can change, but you'd be surprised how much you can get away with.

And yes, the alternative is to paint the image on the web server. Here's a post on it from hanselman.

Answer 2

What exactly are you looking for, a color picker control, or example code to generate the image?

Answer 3

I've done stuff like this in PHP before, and I used ImageMagick and GD libraries. I'm not sure if ASP and C# can plug into that using the .NET framework, but it's a start.

Answer 4

System.Drawing is GDI+ based. Only useful if you're drawing bitmaps in teh worlda web.

Answer 5

EDIT (since you changed the title):

If you have a small number of colours on the hex-wheel thing then you could simply use JavaScript to change the image source from some pre-made graphics.

If you have a large or changeable set of colours for the user to choose from then I'd use an AJAX call to generate the graphic using the relevant ASP functions you'll find online or in a book.

---

We'd need to see the frame or graphic that you're talking about.

Might be doable client-side with CSS and JavaScript, or might need to be a server-side graphic generation using PHP or ASP etc.

Answer 6

Your solution will depend on how complex the graphics are. If you have simple graphics (you can make with MS Paint), then you can use the System.Drawing namespace to re-create the image fairly reliably.

If you have complex graphics, like ones made in photoshop or Paint.NET with multiple layers, you may be better off by allowing the client a choice of only a few colors (4-8-16) and pre-make the graphics to match the selections.

You can check out http://www.bobpowell.net/ for some neat idea's and how to's on System.Drawing.

Answer 7

You maybe search for this example. But I'm not sure.

Answer 8

Standard way to obtain something like this is linking to different CSS files (or classes) depending on the user choice (You probably want to store the user choice and retrieve whenever the same user logs in, but that's out of scope here).

If you're using ASP.NET you could use Themes as an optimized and centralized way to control presentation for your web application. You can have stylesheets in your themes and easily programmatically switch between themes, automatically applying associated stylesheets.

To see how to define ASP.NET page themes have a look at this link:

http://msdn.microsoft.com/en-us/library/ms247256.aspx

To see how to programmatically switch between themes follow this other link:

http://msdn.microsoft.com/en-us/library/0yy5hxdk(VS.80).aspx

Answer 9

I'm sort of intuiting that you'll have a black on white bitmap that you use as the base image. The client can then select any other color combination. This may not be exactly your situation, but it should get us started. (The code below is VB -- it's what I know, but converting to C# should be trivial for you.)

Imports System.Drawing

Private Function createImage(ByVal srcPath As String, ByVal fg As Color, ByVal bg As Color) As Bitmap
    Dim img As New Bitmap(srcPath)
    For x As Int16 = 0 To img.Width
        For y As Int16 = 0 To img.Height
            If img.GetPixel(x, y) = Color.Black Then
                img.SetPixel(x, y, fg)
            Else
                img.SetPixel(x, y, bg)
            End If
        Next
    Next
    Return img
End Function

And then you can do whatever with the image...