A Color Gradient Webservice

August 05, 2005

[code], color, css, html, javascript, linguistics, nimbletext, sql, tools

(In which I demonstrate a GDI+, asp.net, color gradient webservice which lets you create blend images in firefox, not just IE)

Three strange and interesting technical things have converged on me recently....

If you wish to use this often, Full Source Code is Now Available.

First, I read about a Sparklines webservice that lets you inject funky little sparklines into your html, like this: or like this: , just by specifying an image source url such as:

"http://bitworking.org/projects/sparklines/spark.cgi? type=smooth&d=10,20,30,90,80,70&step=4"

(where those comma separated values are the datapoints in the sparkline!)

Second, I've taken an inordinate fondness to the gradient transformation features of IE, which let you create smooth color gradients. (If you've got IE you can see some at work in the World's 2nd Simplest Code Generator (or if you've got Opera/Firefox you can see evidence of the filters in these screen shots.)

And third, I've downloaded firefox, which doesn't render gradient transformations, because those mozilla kids are fairly fussy about standards compliance and things like that.

So I find myself wishing for a browser-independent way of generating color gradients, and thanks to the sparklines article, and sunday's hangover (cheers jeb), I had an idea.

With a little bit of .Net GDI+ magic, I've managed to generate pixel-thin 'blend' images for use as backgrounds.

So what does it do?

If you call out to my 'web-service' in an IMG tag, like this:

<img src='https://secretgeek.net/Gradient.aspx?Direction=H&Length=150&StartColor=FF00FF&EndColor=00FF00&Format=jpeg'>

You'll get a result like this:

Basically, a one pixel-wide blend image. Here, i'll stretch it out wide to make it easier to see:

By changing the query string around, you can have any start and end color you want, you can go horizontal or vertical. Plus a few other options.

Tastes better with CSS

Like most things in life, this tastes better with CSS. Use the service (or the test page) to create an image for you, then save it to your server. Set it as the background-color (sic.) using CSS. For 'V' (vertical) images, specify a repeat direction of Y. For 'H' (horizontal) images, specify a repeat direction of X.

background-image: url(css/image/slim_H.jpg);

background-repeat: repeat-x;

background-image: url(css/image/fat_V.jpg);

background-repeat: repeat-y;

Warning! Use this service to generate images ONCE, and store them on your own server. I'd rather you didn't use the webservice to generate images dynamically from within your webpages! I may not be able to afford the bandwidth -- and I reserve the right to alter the service to output nasty images, as a retaliation against bandwidth hogs, at any moment.

To Test the Service...

Use this rather natty little test page to test the service. I have, for once in my damn life, tested it on two different browers. So, with luck, it might work.

Here are some samples of the webservice in use:

image: https://secretgeek.net/Gradient.aspx?Direction=H&Length=100&StartColor=00FFFF&EndColor=00FF00&Format=jpeg

image: https://secretgeek.net/Gradient.aspx?Direction=H&Length=100&StartColor=FF0000&EndColor=000000&Format=jpeg

image: https://secretgeek.net/Gradient.aspx?Direction=H&Length=100&StartColor=FFFF00&EndColor=000000&Format=jpeg

image: https://secretgeek.net/Gradient.aspx?Direction=V&Length=300&StartColor=0088FF&EndColor=FFFFFF&Format=jpeg

image: https://secretgeek.net/Gradient.aspx?Direction=V&Length=100&StartColor=FFFFFF&EndColor=0088FF&Format=jpeg

image: https://secretgeek.net/Gradient.aspx?Direction=H&Length=100&StartColor=FF0000&EndColor=FF8800&Format=jpeg

Parameters...

Parameter	Description
Direction	V for vertical or H for horizontal. Not sure which is which...
Length	How long should the image be? It will always have a breadth of 1-pixel. (Whether Length refers to height or width, depends on whether the image is vertical or horizontal!)
StartColor	The rgb value of the Starting color, excluding the '#' character.
EndColor	The rgb value of the Final color, excluding the '#' character.
Format	Jpeg, Gif or Png?

Error Handling

If parameters are wrongly setup, or if something else goes wrong, you get an image like this one:

The Code

Imports System.Drawing

Imports System.Drawing.Drawing2D

...

Private Sub Page_Load(ByVal sender As System.Object, _

�� ByVal e As System.EventArgs) Handles MyBase.Load

�� 'Put user code to initialize the page here

�� Dim sMessage As String

�� Try

�� 'Parameters:

�� Dim _Direction As String 'Horizontal or Vertical

�� Dim _Length As Long

�� Dim _StartColor As String

�� Dim _EndColor As String

�� Dim _Format As String

�� sMessage = "retrieving parameters"

�� _Direction = Request.QueryString.Item("Direction")

�� _Length = Request.QueryString.Item("Length")

�� _StartColor = Request.QueryString.Item("StartColor")

�� _EndColor = Request.QueryString.Item("EndColor")

�� _Format = Request.QueryString.Item("Format")

�� Dim lWidth As Integer

�� Dim lHeight As Integer

�� Dim m_Color1 As Color

�� Dim m_Color2 As Color

�� Dim myFormat As System.Drawing.Imaging.ImageFormat

�� Dim myGradientMode As LinearGradientMode

�� sMessage = "processing parameters"

�� 'Now use the parameters

�� If _Direction.ToUpper.StartsWith("H") Then

�� lWidth = 1

�� lHeight = _Length

�� myGradientMode = LinearGradientMode.Vertical

�� Else

�� lWidth = _Length

�� lHeight = 1

�� myGradientMode = LinearGradientMode.Horizontal

�� End If

�� If _Format.ToUpper.StartsWith("J") Then

�� myFormat = Imaging.ImageFormat.Jpeg

�� Else

�� myFormat = Imaging.ImageFormat.Gif

�� End If

�� sMessage = "determining colors"

�� m_Color1 = Color.FromArgb(255, _

�� CLng("&H" & _StartColor.Substring(0, 2)), _

�� CLng("&H" & _StartColor.Substring(2, 2)), _

�� CLng("&H" & _StartColor.Substring(4, 2)))

�� m_Color2 = Color.FromArgb(255, _

�� CLng("&H" & _EndColor.Substring(0, 2)), _

�� CLng("&H" & _EndColor.Substring(2, 2)), _

�� CLng("&H" & _EndColor.Substring(4, 2)))

�� 'GO!

�� sMessage = "determining size"

�� Dim bmpGradient As New Bitmap(lWidth, lHeight)

�� Dim m_BrushSize As New Rectangle(0, 0, lWidth, lHeight)

�� Dim grBitmap As Graphics = Graphics.FromImage(bmpGradient)

�� sMessage = "creating gradient brush"

�� Dim myLinearGradientBrush As New LinearGradientBrush( _

�� m_BrushSize, m_Color1, m_Color2, _

�� myGradientMode)

�� sMessage = "filling rectangle"

�� grBitmap.FillRectangle(myLinearGradientBrush, 0, 0, _

� ��lWidth, lHeight)

� ��sMessage = "saving image to response stream"

� ��'Write the image to the client!!��

� ��bmpGradient.Save(Response.OutputStream, myFormat)

� ��Catch ex As System.Exception

� ��Dim bmpGradient As New Bitmap(600, 100)

� ��Dim m_BrushSize As New Rectangle(0, 0, 600, 100)��

� ��Dim grBitmap As Graphics = Graphics.FromImage(bmpGradient)

� ��Dim myLinearGradientBrush As New LinearGradientBrush( _

� ��m_BrushSize, _

�� Color.FromArgb(255, 255, 0, 0), _

�� Color.FromArgb(255, 0, 0, 0), _

�� LinearGradientMode.Vertical)

�� grBitmap.FillRectangle(myLinearGradientBrush, 0, 0, _

�� 600, 100)

�� grBitmap.DrawString("Error while " & _

�� sMessage & " for '" & Request.UserHostAddress & _

�� "'." & vbCrLf & ex.Message, _

�� New System.Drawing.Font("Arial", 12, _

�� System.Drawing.FontStyle.Italic), _

�� System.Drawing.Brushes.White, 10, 12)

�� 'Write the error message image to the client

�� bmpGradient.Save(Response.OutputStream, _

�� System.Drawing.Imaging.ImageFormat.Jpeg)

�� End Try

End Sub

Button Makers

Next → ← Previous

My book "Choose Your First Product" is available now.

It gives you 4 easy steps to find and validate a humble product idea.

Learn more.

secretGeek.net