web notes - a blog

This is a bash script which accepts an image file, determines the width and height, and creates five vertical segments. It can be used to create a ‘puzzle’, tiles, CAPTCHA sequences and other interesting visual effects.

#!/bin/bash
if [ "$#" -le 2 ]; then
       echo "usage: $0 <base directory> <image file> <segments> [<imagemagick directory>]"
else
BASE_DIR="$1"
ORIGINAL_IMAGE="$2"
SEGMENTS="$3"
if [ "$#" -ge 4 ]; then
        IMAGEMAGICK_DIR="$4"
else
        IMAGEMAGICK_DIR=''
fi
RESIZED_IMAGE="image.jpg"
IMAGE_WIDTH=300
"$IMAGEMAGICK_DIR"convert "$BASE_DIR$ORIGINAL_IMAGE" -resize "$IMAGE_WIDTH"x +repage "$BASE_DIR$RESIZED_IMAGE"
IMAGE_DIMENSIONS=`"$IMAGEMAGICK_DIR"identify "$BASE_DIR$RESIZED_IMAGE" | cut -f 3 -d ' '`
SEGMENT_WIDTH=$((`echo "$IMAGE_DIMENSIONS" | cut -f 1 -d 'x'`/$SEGMENTS))
SEGMENT_HEIGHT=`echo "$IMAGE_DIMENSIONS" | cut -f 2 -d 'x'`
echo '<?php'
echo define\(\'SEGMENTS\',"$SEGMENTS"\)\;
echo define\(\'IMAGE_WIDTH\',"$IMAGE_WIDTH"\)\;
echo define\(\'IMAGE_HEIGHT\',"$SEGMENT_HEIGHT"\)\;
echo define\(\'SEGMENT_WIDTH\',"$SEGMENT_WIDTH"\)\;
echo define\(\'SEGMENT_HEIGHT\',"$SEGMENT_HEIGHT"\)\;
for A in `seq 0 $(($SEGMENTS-1))`
do
       SEGMENT_OFFSET=$(($SEGMENT_WIDTH * $A))
       "$IMAGEMAGICK_DIR"convert "$BASE_DIR$RESIZED_IMAGE" -crop "$SEGMENT_WIDTH"x"$SEGMENT_HEIGHT+$SEGMENT_OFFSET+0" "$BASE_DIR"segments/"$A".jpg
done
"$IMAGEMAGICK_DIR"convert "$BASE_DIR$RESIZED_IMAGE" -colorspace gray -level 0,80%,4.0 "$BASE_DIR"target.jpg
fi

The last convert command creates a a faded version of the image.

Further customization could include segmentation on a different axis, different image file formats, etc.

This reduces the opacity of the logo to 10%.

convert logo.png +flatten -alpha on -channel A -evaluate set 10% +channel opac.png

Creating rounded rectangles has become a bit of a quest.

This blog links to a utility that lets you create a rounded rectangle image that can be used in a page to help organize the content (http://wirehopper.com/design/rounded.php). It has a link to an approach that allows you to create nine images and use them to display a rounded rectangle using CSS and XHTML. Unfortunately, it doesn’t work (http://www.wirehopper.com/design/rr/). So far, the nicest implementation of rounded corner rectangles I’ve found for page layout is eZ publish’s ezwebin (http://now.ezpublish.no/).

Another approach I tried was to use dojox/gfx, which uses javascript to draw on a page.(http://docs.dojocampus.org/dojox/gfx#rectangle). This works really nicely, however, if you want to place text in the rectangle, you must be creative. The approach I tried was to use divs to position the rectangles, then use absolute positioning of additional divs to put text in the boxes. To be dynamic, the dimensions of the rectangles must be adjusted to work well with the content they’ll surround. This can be done fairly easily with javascript, by getting the dimensions of the text div using screen.clientWidth and screen.clientHeight.

After investing a significant amount of time in this fundamental layout issue, I have come to the conclusion that if you have a framework or library that has themes (http://docs.dojocampus.org/dijit-themes), you should choose one and use it, and if not, unless you’ve already found a great way to do rounded rectangles, or you really have to have them, it’s probably not worth the effort.

Rounded rectangles are excellent learning tools for web designers and developers, because they include several skill areas.

• Proper image format. .gifs are probably the best for simple rounded rectangles, including those with transparency, .jpgs or .pngs would be good if there are gradients. It’s worth checking the file sizes and checking how they look on the page.
• CSS layout and dimension control. Depending on the implementation, you may have a three by three block. Each ‘row’ will float, and between the rows, there must be a break. Browser compatibility must be tested.
• Page construction. Computing the bandwidth required for each rounded rectangle is another good exercise. The bandwidth required includes the XHTML, CSS, and all images. Reusing CSS and images can reduce both bandwidth and the number of requests.
• Server-side support. I looked into using PHP to help set up the dojox/gfx rounded rectangles, but abandoned it due to time constraints. Using a server-side technology, or template engine / taglib may be helpful.
• Appreciation of complexity. Many people mistake the simplicity of the XHTML language as an indicator that web work is “easy”. It’s not.
• Cost of labor. As above, it is good to understand that if a task takes longer, one must consider the cost. Spending many hours on rounded rectangles will undoubtedly reduce the time available for other, more important, tasks. In the business world, time is money.

This ends the quest for rounded rectangles. I learned:

• Rounded rectangles are not simple.
• Even if you invest a lot of time, sometimes, there isn’t a ‘graceful’ solution. Bear in mind this is a subjective definition - others may feel that some of the offered ideas are perfect.

• A lot about ImageMagick (http://imagemagick.org). Including …

  • How to draw a rounded rectangle
  • How to crop pieces out of an image
  • How to tint an image
  • How to apply a gradient to an image
• The CSS border attributes and how to apply them
• Rounded corners on images look really nice with ezwebin
• Many other people have posted cool ideas about rounded corners and rectangles - it’s a popular pursuit, or a necessary one. :)
• Rounded rectangles just aren’t that important to me anymore

Additional posts in this blog:

http://web-notes.wirehopper.com/2009/07/05/imagemagick-rounded-rectangles
http://web-notes.wirehopper.com/2009/06/07/smoother-imagemagick-rounded-rectangles
http://web-notes.wirehopper.com/2009/05/11/imagemagick-rounded-corners
http://web-notes.wirehopper.com/2009/11/19/ez-publish-rounded-image-corners
http://web-notes.wirehopper.com/2009/11/06/tint-with-imagemagick
http://web-notes.wirehopper.com/2009/06/27/round-image-corners-imagemagick
http://web-notes.wirehopper.com/2009/05/17/imagemagick-rounded-corners-images

Quantizing an image reduces the number of colors. It’s an easy way to convert a photo into an image that looks more like a paint by number pattern, or ‘cartoon’.

It might be a fun way to create an avatar, improve image presentation while speeding delivery, or just have fun.

Thanks to: http://www.imagemagick.org/Usage/quantize

Nutshell explanation:

Make these changes to allow rounded image corners under eZ publish.

All .gifs and .pngs will have their corners rounded.
No .jpgs will have their corners rounded, unless you use the rounded aliases below, which force the output type to .png.

ez/settings/override/image.ini.append.php settings

<?php /* #?ini charset="utf-8"?

[AliasSettings]
AliasList[]=rounded-small
AliasList[]=rounded-medium
AliasList[]=rounded-large

[rounded-small]
MIMEType=image/png
Reference=small

[rounded-medium]
MIMEType=image/png
Reference=medium

[rounded-large]
MIMEType=image/png
Reference=large

[ImageMagick]
IsEnabled=true
ExecutablePath=/usr/local/bin
Executable=convert
ExecutableUnix=convert

# This line causes ALL images to have their corners rounded.  Only .gifs and .pngs will display with rounded corners, .jpgs
# will display with sharp corners, because they don't support transparency.  If a .jpg image is uploaded, the display class
# must be set to one of the above for the rounded corner version to display.
#
# The PostParameters settings must also be applied before the destination file name, modify /var/www/html/ez/lib/ezimage/classes/ezimageshellhandler.php
#
# Thanks to: http://www.imagemagick.org/Usage/thumbnails/#rounded
PostParameters=\( +clone -threshold -1 -draw "fill black polygon 0,0 0,10 10,0 fill white circle 10,10 10,0" \( +clone -flip \) -compose Multiply -composite \( +clone -flop \) -compose Multiply -composite \) +matte -compose CopyOpacity -composite

*/ ?>

/var/www/html/ez/lib/ezimage/classes/ezimageshellhandler.php

        if ( $filters !== false )
        {
            foreach ( $filters as $filterData )
            {
                $argumentList[] = $this->textForFilter( $filterData );
            }
        }

        /* Move PostParameters up before the destination file is named */
        if ( $this->PostParameters )
            $argumentList[] = $this->PostParameters;

        $destinationURL = $destinationMimeData['url'];

… same file … to help you see the command being executed …

file_put_contents('/tmp/eZ.out',$systemString."\n",FILE_APPEND);
system( $systemString, $returnCode );