ImageMagick GUI

[jorlando]

I built a limited GUI for IM into my Font Image Generator site at http://interactimage.com and I'm looking for suggestions and feedback on how to improve it. It takes an image built by the generator, applies an effect, and outputs the image back to the generator workspace. In the workspace, you can compose via layering, email, etc. You can write your own commandline effect or edit the ones provided

To use the GUI, click on the fx button on the toolbar to expose the menu. There is a brief instruction on the help/info page.

There is a forum at the site if you want to add comments there.

Thanks
Jeff

[anthony]

Very good. I see you made good use of IM Examples compound fonts
http://www.imagemagick.org/Usage/fonts/
I especially like how you can see the IM options you use to create the effect, and let you edit them before applying.

I did find one small bug.

Create a large transpareny font (I used tecnical at 60), and look at the font on a non-white background. You see white edges to the black font!
I think it may be because of the way you generate the font on a transparent background, but you do not show the code used to generate the font itself so I can't be certain.

Also I suggest that you do NOT use -draw for drawing text, (for example in your "thought bubble" FX as you will probably get some major quote escaping problems. Better to use -annotate.

You could also let the font set the image size using "label:". Also you can then offer turning on word wrapping, by using "caption:" rather than "label:"

And finally you are forgetting to use +resize after a -trim, to remove any virtual canvas and offsets that option may leave behind.

All in all I think it is a great application, and look forward to seeing what else you come up with.

[anthony]

Hmmm is there some way to explore what images you have available?
Like different push pins?

Also do you have you font selection available for download. I really like some of the fonts and want to use them in my own projects and examples.

For example the combining the two VariShape dingbat fonts to provide both a background and forground color control would be very interesting for various examples.

[jorlando]

Anthony, thanks much for the reply. I don't have fonts available for down load. All the fonts on the site are downloads from free sites. I was thinking there are so many superb free font sites I wouldn't add much value by doing it again myself. If there are certain ones you want (or all of them) I'll be happy to send them to you.

It was just in the last few days I got the pushpin effect thing going. That red pushpin is the only clipart on the site other than the dingbat fonts. Other cliparts can be added and I have a way to refer to them within the effect script using the word "imgpath" I just haven't had a chance to do any more yet.

The flow of the site is like this ...

The basic font image is generated by PHP/GD rather than ImageMagick using the Font Image generator library offered by Matsuda Shota (http://sgssweb.com/experiments/) The initial font image is stored in a folder. There are various AJAX calls and iFRAMES used to avoid having to refresh the screen all the time. The IM version is 6.2.8 and I'm on a shared webhost so I have no control over the server, IM, or PHP install.

When an ImageMagick effect is applied, it always starts with the current image on the screen. Some of the effects start with a +delete command to get rid of it. The effects that appear on the fx menu are simple ones that work with most any input image. Other effects that need to be modified for the image they work on are listed in the forum connected to the site. That gives the author a chance to give instructions for use along with the script itself. Ones that have their own button (like rotate) are universal

The command line text is sent via AJAX to a PHP script which creates the proper command line string and sends it to IM via a shell command. IM gets the starting image from the folder, does its thing and sends the resulting image back to the image folder. A message is sent back to PHP which sends an AJAX message to the browser to update the image SRC on the visible screen. I can only handle the reurn of one image at a time in the script so if IM returns more than one, the operation fails.

You can use other image sources for the starting image. There is a feature that allows you to upload an image from a remote URL and another to upload from the local HD. On these, IM is used only to scale the image if required. Once the image is acquired, its handled the same way as a font image.

I just finished up the flood fill effect a couple of days ago (I'm still that it works) and plan to devote most effort now to fully exploiting what can be done via fx and ImageMagick. Two months ago, I hadn't ever heard of ImageMagick so I'm learning as I go.

I have a million other questions but first I'll digest your initial feedback.

Some ImageMagick things I'd like to add..

Flood fill a pattern (pattern fill) - tried without success
direct import remote url images to IM - tried without success
vector and freehand bitmap drawing in the browser
speech/thought bubble with text already in place with proper scaling
wrinkled paper effect
rounded corners effect on transparent images

cheers
Jeff

[anthony]

Prehaps then you need to look at using IM to generate the text image.
That will give you lot more control over the font, including fill/stroke/background
color, stroke width, and so on.
You can use fonts as you currently do using gravity and label:, and it will handle mutliple lines (centered or otherwise).
You can also set a canvas size, and if point size is then turned off you can have IM fill the given canvas size instead.
And finally if you swicth from label: to caption: you get word wrap.

This will also fix your edge problem with transparency

If you don't want this you can also fix the transparent edge problem by using a white on balck font as a mask. See the IM Examples, Postscript section on multiple examples of doing this, with transparencys, or patterns.
http://www.imagemagick.org/Usage/text/#postscript
For bother forground and background patterns also see
http://www.imagemagick.org/Usage/text/#size
Though at this very moment there is a bug involving font tile fills.

Actually IM will read images from URL's directly (via a call to wget)
For example...

Code: Select all

   convert http://www.cit.gu.edu.au/~anthony/images/anthony_castle.gif castle.gif

[jorlando]

Prehaps then you need to look at using IM to generate the text image.

I want to do this since the present php/GD method is exhausted. I have concern about performance however. Currently, about 80% of activity on the site is simple text images being handled by PHP/GD. The balance being secondary operations done by IM. If this were all switched over to IM, there may be some issues. I noticed for example that a simple rotate effect by GD returns much quicker than the same effect by IM. I don't know if its IM, the shell operation, or the server running IM but its definitely slower. Traffic averages 1500 new images/day. A few times the rate was approx. 300/hour so this is an important consideration.

I don't know much about servers and have no control over mine so not sure how to address this. Do you know of a hosting service that specializes in ImageMagick applications?

Jeff

[anthony]

Prehaps you should check if some ImageMagick module is installed into PHP, so you can avoid shell parsing and commandline calls.

See IM Examples, Feedback and Questions...
http://www.imagemagick.org/Usage/feedback/#php

[jorlando]

Happy New Year to all.

All of the images on Font Image Generator http://interactimage.com are now created with ImageMagick.. Stroke and fill are also now available. Its a big improvement over PHP/GD method and much more robust especially with the large image sizes. The quality of transparent text images is also far better than with PHP

The -caption function is used to provide wordwrap functionality. One thing I couldn't figure out was how to control leading (line height) of multi-lined caption images. Appreciate any ideas on that.

Also, I've added a lot of new IM effects including colorize, set transparency, borders, frames, dropshadow, etc. as toolbar functions and added a lot of less-developed functions to the function library including distortions, glitter text, image fills, etc.

Now, I'm taking a breather to decide where to focus next on the site. Any input or suggestions are welcome.

Jeff

[anthony]

The -caption function is used to provide wordwrap functionality. One thing I couldn't figure out was how to control leading (line height) of multi-lined caption images. Appreciate any ideas on that.

-splice in the amount of 'leading space' above the text you want after capion: has created the image.

Time for another visit to the site I think.

[anthony]

I like the 'wrinkle' effect created from two waves and rotates. It is particularly nice to produce a distorted hexagonal pattern (without the border)

Code: Select all

   +delete -size 320x240  pattern:hexagons
  -wave 3x100 -background white -rotate 90 -wave 4x66 -rotate -87

You may like to add the colored hexagonal tile...

Code: Select all

  convert -size 30x54 pattern:hexagons \
          -fill tomato     -opaque white \
          -fill dodgerblue -draw 'color 10,10 floodfill' \
          -fill limegreen  -draw 'color 10,25 floodfill' \
          -roll +15+27 \
          -fill dodgerblue -draw 'color 10,10 floodfill' \
          -fill limegreen  -draw 'color 10,25 floodfill'   miff:- |\
    convert -size 100x100 tile:- pattern_color_hexagons.gif

You may also like to add some half tone dither effects
http://www.imagemagick.org/Usage/quantize/#halftone

Note that both though and speech bubbles produces large letters and not the shapes requested.

[jorlando]

The shared host service where my site is located has shut me down saying that ImageMagick processing is using excessive CPU resources for the shared environment.

I set up an account with a virtual private server and installed the site. ImageMagick 6.4.8 is installed. The problem now is that just to return a simple rose image takes over a minute!! A font image can take several minutes. My code runs but the image takes forever to come back. Via Ajax request, I send a command line via PHP-exec to ImageMagick and waut for the image to be written out to my directory.

Are there some configuration options I should check in ImageMagick that might account for this slowness?

Meanwhile, Font Image Generator is down (actually Up but disabled) The old PHP site is still running and linked from FIG.

Any ideas are welcome.

Cheers
Jeff
Font Image Generator
http://interactimage.com

[magick]

Give us a sample command and we can time it for you. Simply converting the rose image to the PNG format takes 0.07 seconds on our computer. Not sure why its so slow on your computer. You can try adding -debug all to your command line and it will display the time consumed at each step of your command line.

[jorlando]

Not sure if this will be useful but an example of a command is

Code: Select all

/usr/bin/convert -size 480x320 -background \#ffffff -stroke none -fill \#000000 -font /home/jeffo/public_html/php/charfonts/New/AlienLeague.ttf -pointsize 28 -gravity northwest caption:"Font Image Generator" +repage -trim -bordercolor \#ffffff -quality 80 -border 0 +repage /home/jeffo/public_html/php/files/264da2fef89097d2775cfa3863059ba21241279065.jpg

Here is a screen grab of the last line for the following command:

Code: Select all

/usr/bin/convert -debug all rose: -flip -flop -resize 200x200 rose4.jpg

Is that .27 seconds?

thx
Jeff

[magick]

Something is clearly wrong. That's 27 seconds. We're using ImageMagick 6.5.1-10 and on various computers that we tried, your command ran in less than 1/2 of a second. Unfortunately we have no idea why its so slow on your computer.

[fmw42]

And finally you are forgetting to use +resize after a -trim, to remove any virtual canvas and offsets that option may leave behind.

I believe he meant +repage and not +resize