one more lisp web toy/tool
« previous entry | next entry »
Nov. 1st, 2006 | 05:22 pm
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.
Super cool!
from: anonymous
date: Nov. 1st, 2006 07:22 pm (UTC)
Link
Reply | Thread
(no subject)
from:![[info]](http://l-stat.livejournal.com/img/userinfo.gif?v=91.6)
batkins_
date: Nov. 1st, 2006 07:35 pm (UTC)
Link
Reply | Thread
Interesting
from: anonymous
date: Nov. 1st, 2006 07:55 pm (UTC)
Link
Reply | Thread
Re: Interesting
from:![[info]](http://l-stat.livejournal.com/img/userinfo.gif?v=91.6)
xach
date: Nov. 1st, 2006 08:00 pm (UTC)
Link
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.
Reply | Parent | Thread
Fighing the good fight
from: anonymous
date: Feb. 27th, 2008 03:01 pm (UTC)
Link
Reply | Thread
Re: Fighing the good fight
from:![[info]](http://l-stat.livejournal.com/img/userinfo.gif?v=91.6)
xach
date: Feb. 27th, 2008 03:06 pm (UTC)
Link
Reply | Parent | Thread
Wow
from: anonymous
date: Apr. 4th, 2008 06:35 pm (UTC)
Link
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.
Reply | Thread
Man, I just can't say how grateful I am!
from:![[info]](http://l-stat.livejournal.com/img/userinfo.gif?v=91.6)
nmi_ru
date: Jan. 15th, 2010 11:27 am (UTC)
Link
!!* 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();
}
Reply | Thread