Advertisements

Archive for July 29th, 2014

Generating Button Images With ImageMagick

Starting with the hints and commands at ImageMagick Advanced Techniques for Gel Effects, I came up with a script that spits out colorful gel-flavored buttons:

convert -size 120x64 xc:none -fill red -draw "roundrectangle 10,10 110,54 8,8" \
  gel_shape.png
#display gel_shape.png
convert gel_shape.png \
  \( +clone -alpha extract -blur 0x12 -shade 110x0 \
  -normalize -sigmoidal-contrast 16,60% -evaluate multiply .5\
  -roll +4+8 +clone -compose Screen -composite \) \
  -compose In  -composite \
  gel_highlight.png
#display gel_highlight.png
convert gel_highlight.png \
  \( +clone -alpha extract  -blur 0x2 -shade 0x90 -normalize \
  -blur 0x2  +level 60,100%  -alpha On \) \
  -compose Multiply -composite \
   gel_border.png
#display gel_border.png
convert gel_border.png \
  -font Verdana-Bold  -pointsize 20  -fill white  -stroke black \
  -gravity Center  -annotate 0 "Jelly"  -trim -repage 0x0+7+7 \
  \( +clone -background navy -shadow 80x4+4+4 \) +swap \
  -background snow4  -flatten \
  gel_button.png
convert gel_button.png -type truecolor Gelly24.bmp
display -resize 300% Gelly24.bmp

I could not ever figure that stuff out on my own.

For some reason, WordPress chokes when uploading the starting shape as a PNG file, so here it is as a JPG with a black border replacing the original transparency:

 

gel_shape

gel_shape

With the gel highlight:

gel_highlight

gel_highlight

Adding a border:

gel_border

gel_border

Adding text, shadow, and background:

gel_button

gel_button

Adding the drop shadow may increase the image size ever so slightly, so the -repage 0x0+7+7 operation may require resetting the exact image size.

The final step converts the PNG image into the 24-bit uncompressed BMP format required by the Adafruit routine that slaps it into the TFT display:

Adafruit TFT display - timing demo

Adafruit TFT display – timing demo

The smaller buttons came directly from The GIMP, with full-frontal manual control over everything. Obviously, that doesn’t scale well for many buttons that should all look pretty much the same, because you want to get your fingers out of the loop.

But, obviously, when you do this on a mass scale, you want better control over the colors and text and suchlike; that’s in the nature of fine tuning when it’s needed.

I’m not entirely convinced I want gel-flavored buttons, but it was a fun exercise.

Advertisements

,

2 Comments