?

Log in

No account? Create an account

one more lisp web toy/tool

I just put up Cornershop, a tool for generating rounded corner graphics for website design. It's another skippy-powered project, but it does get a little tricky.

The initial version used Wu's circle algorithm to generate one quarter of an anti-aliased circle, then flipped it or translated it to get all four corners. That was pretty fast, but as the radius got big (I allow up to 150 pixels), it consed a lot (about 300KB) and got pretty slow (about 0.25s for four graphics).

The output images differ by foreground, background, and size. Since GIF is an indexed image format, changing the color table doesn't involve changing a single bit of image data. If you have an existing GIF for each allowed size, you can make a new image in any color by reading the "template" gif, munging its color table in memory, and writing out a new file. With that strategy, making any size from 2 to 150 pixels in any color takes a relatively constant 0.001s, and it takes only about 3MB of template images.

Go check it out!

Tags: ,

Comments

(Anonymous)

Super cool!

I was just groaning about having to create a set of rounded corners and her they are along with the css to boot!
Awesome!

(Anonymous)

Interesting

Your list of binary file manipulation apis is growing.

Re: Interesting

For replacing the color table, the API usage is mostly:

READ-SEQUENCE
REPLACE
(SETF AREF)
WRITE-SEQUENCE

It helps that I created the template GIFs and know exactly where the color table lives, so I can hardcode some things and I don't have to parse at all.

(Anonymous)

Fighing the good fight

Way to keep common lisp going!

Re: Fighing the good fight

Fortunately it's not just me!

(Anonymous)

Wow

Thank you so much : D
I was looking for a way to make the corners when your site popped up.
This was a big help.
I spent 3 hours trying to do what this did in minutes.

Man, I just can't say how grateful I am!

For the last couple of days I was going through the state of despair because of the following facts: it's 21 century, still there is no CSS3 support, none of jQ/corners plugins is perfect enough. I have decided to follow the good'ol'rule - "if you want to do something right, ..." - you know the score. I though that I will be wasting a good deal of my time for that monkey business - creating corners in GIMP, watching for anti-aliasing, exporting to gif, applying to site, refine ideas, go to step one. And suddenly the light shined upon - I have found your tool. Tiny effort, a bit of time - and a great life saver as a result. The tool is ideal - just like it has to be.

!!* THANK YOU *!!

P.S. I've decided to use my own approach to elements layout/css:

1. html
<element-with-corners-to-be class="stylish_element c_h">
<img src=".../blue-grey-4-nw.gif" width="4" height="4" alt="" class="c_nw"/>
<img src=".../blue-grey-4-ne.gif" width="4" height="4" alt="" class="c_ne"/>
<img src=".../blue-grey-4-sw.gif" width="4" height="4" alt="" class="c_sw"/>
<img src=".../blue-grey-4-se.gif" width="4" height="4" alt="" class="c_se"/>
--element-contents--
</element-with-corners-to-be>

2. css
.stylish_element { background: blue } /* fallback for non-compliant browsers */
.c_h { position: relative } /* corners holder */
.c_nw { display: none ; position: absolute ; top: 0 ; left: 0 } /* display-none for non-compliant browsers */
.c_ne { display: none ; position: absolute ; top: 0 ; right: 0 }
.c_sw { display: none ; position: absolute ; bottom: 0 ; left: 0 }
.c_se { display: none ; position: absolute ; bottom: 0 ; right: 0 }

3. js
is_compatible = jQuery.support.boxModel;
if ( is_compatible ) {
$('.c_nw, .c_ne, .c_sw, .c_se').show();
}