Dynamic Rounded Corners

crazy idea

[Tonearm]

I have my site's colors set up dynamically so I just have to use a couple variables to define its color scheme. The only problem with this is that the rounded corners I use can't be generated that way because they are made in Photoshop to look anti-aliased. After a little thinking I realized I could actually create an embedded table in the corner that is made up of a "matrix" of single pixel cells. The cells could have a bgcolor applied to them according to the colors needing to be "blended". All I would really need is some kind of logic that knows what you get when you combine two colors (defined by hex code) in specified proportions. Pretty ridiculous, huh? Here are my questions:

1. Would this kind of intense matrix cell structure be to much for some browsers to handle?

2. Does anyone know where I might be able to find information on the logic for the color combinations?

It sure would be cool to have anti-aliased rounded corners created dynamically like that, and without a single image file involved.

[abbeyvet]

Not sure a table would be a good way to go. Visually it would work, in every other way it would be a mess. It can be done using CSS - do a Google search for "CSS Rounded corners"

[Ryan8720]

Just make different color corners and set them as the background image of that cell. Then when you switch stylesheets (or whatever you are doing) the corners will change.

[Tonearm]

You don't think it would mess up certain browsers with all the 1 pixel cells?

[MonkeeSage]

[kalsey.com...]

Jordan

[PCInk]

Logic behind colours? Simple:

1) Find the Red, Green, Blue values in range 0 to 255
2) Convert the numbers to hexidecimal (00 to FF)
3) Use #RRGGBB for Red, Green and Blue, putting a zero in front of any one digit hex codes

That is why:
#RRGGBB
#FF0000 is red
#00FF00 is green
#0000FF is blue

[dmorison]

Do you have PHP available on your server? I have written a script that can dynamically generate anti-aliased smooth rounded corners at any curve radius from 7 to 15 pixels and in any foreground / background colour combination.

Sticky me if you're interested...

[Tonearm]

PCInk - Thank you, that sheds a lot of light on the subject. How would you handle the combining of colors in specified proportions though? My corners need to have a black outline on the outside edges. That means the black would need to be blended with the dynamically-specified color of the corner. What is the logic that applies when combining two different colors (black and another), and not necessarily in 50/50 proportion?

dmorison - That's a really nice offer, but I'm strictly a Perl user. Do you have any tips for me when setting up my version of this thing?

[dmorison]

dmorison - That's a really nice offer, but I'm strictly a Perl user. Do you have any tips for me when setting up my version of this thing?

If Perl has an easy way to generate images on the fly then it should be straight forward enough to do the same thing.

The way I went about it was to first draw a smooth anti-aliased corner of black on white in each of the dimensions required using an art package, and then saved the images as a bitmap using only 5 colours.

I then studied the bitmaps and created static arrays for each of the dimensions required containing the numbers 0 through 4, where 0 represents the background colour; and 4 the foreground colour.

Here's the bitmap array for a 7x7 pixel corner:

$r[7][0] = array(2,4,4,4,4,4,4);
$r[7][1] = array(1,4,4,4,4,4,4);
$r[7][2] = array(0,4,4,4,4,4,4);
$r[7][3] = array(0,1,4,4,4,4,4);
$r[7][4] = array(0,0,1,4,4,4,4);
$r[7][5] = array(0,0,0,1,4,4,4);
$r[7][6] = array(0,0,0,0,0,1,2);

The inputs to the script are:

$fg (foreground colour)
$bg (background colour)
$cr (curve radius)
$or (orientation - "TL" for top-left, "TR" for top-right etc.)

Using PHP's image library, I then create a palette of the 5 colours needed to create the image - 0 being $bg (background), 4 being $fg (foreground); and 1,2 and 3 being the shades directly in between. There's probably a clever way to do it; but I just calculated the values at 1/4, 1/2 and 3/4 in between foreground and background for each of red green and blue.

Having setup the palette, it is then a case of setting the pixels. The script refers to the bitmap array of the appropriate radius; calling out of the array in the order required for the orientation of the corner ($or).

The PHP functions used to do the job in total are:

$image = imagecreate( $x, $y )

$color = imagecolorallocate( $image, $red, $green, $blue )

imagesetpixel( $image, $x, $y, $color )

and finally:

echo (imagepng( $image ))

to send the output to the browser.

It would be straight forward to create an implementation of this that uses a cache directory to save rebuilding the images every time.

That should be enough info for a Perl hacker to recreate the same thing. The time consuming bit was creating the bitmaps - they should be easy to convert from PHP into Perl so sticky me if you want the source.

[MonkeeSage]

That's very slick dmorison! :)

Jordan

[Tonearm]

dmorison - Nice work! That's a slick setup. I'm just using HTML table cells and bgcolor. Out of the 49 pixels in a 7x7 corner, only 8 need to be dynamically blended. The rest will either be black (my outline color), white (my background color), gray (the blending of the outline color and background color), or the specified color of the body of the corner. The 8 to be blended are symetrical so there are only 4 blended colors to calculate, and the blending will always be between black (my outline color) and the corner's specified body color. Any advice for dynamically calculating those four different hex values?