I have 1152 short .png files of about 150 bytes each. These files are images of the same arrow pointing in 8 possible directions and in some 144 different colours. The problem is that the background of these images is always white and I'd like to make it match a colour from the main picture in which they are placed.

Note these so-called main pictures are created by HTML and CSS using the colour numbers (#66ff33 etc).

Is it possible at all to write a script that does that?

Thank you for your help.

Have you checked ImageMagick?

jlinkels

Hi, rblampain. Is the color fixed (predetermined) or have to be retrieved dynamically from the main picture? I feel like I already saw these 1152 pictures!

Thank you both for your answers.
To colucix, yes, you kindly created these pictures some months ago because I have no experience with Gimp etc, they are working well but the white background of the image gives, in my view, an unfinished appearance because it is the only common feature in all the "pictures".
Each of these 1152 arrows is a file whose filename is the colour number, a BASIC program creates the main HTML code and calls the correct "arrow". To change the background colour and create appropriate arrows with suitable background and foreground colours would have needed too many files (1152 * 144) to download each time someone visits the site, hence my question.

To answer your question, yes the color is fixed and it is white.

To jlinkels, no, I had never heard of it but I will have a look at it.

You could also look at the GD Library http://www.boutell.com/gd/, not sure about how your basic program generates the html, personally I use php and GD is now included so it's a breeze to manipulate images, and i'm not sure why you don't just have 8 images and adjust accordingly, other than because of generation time and resource, but if your going to consider doing 1152 * 114 separate images, I gotta ask why not a transparent background and a colour mask for the foreground?

Thank you to brazilnut.
I was and still am very ignorant of what can be done. The possibility of using only 8 images is a revelation to me. It is also the solution, I just have to find out how. I have a basic and rusty experience of PHP, could you give me a few hints?

My old method goes like this, the BASIC program selects at random a number of colours used for various displays, one is used also for the foreground colour of the "arrow" (by including the appropriate arrow file of the same colour) and another could be used for the background colour of the "arrow". This random selection gives a 6 digits number in the form "#66ff33". This BASIC program can be rewritten to also include some PHP code. The result, with some text, becomes a HTML/PHP script that is "included" into the pages of a site.

Just so that I understand, are these images being generated before being uploaded to the server, or upon request from the server?

Also when you say BASIC, I now assume you don't mean VB because of your 'Distribution' listing?

As I understand it Coucix has gone to some lengths previously to produce arrows for you and Jinkels gave you the tip to look at Imagemagick. In the following the first convert (an imagemagick command) is merely to create a gif or png image with a white background for you to see before making the white background transparent. The documentation says -transparency, but in my version of imagemagick 6.2.5-1620 which is part of SUSE 10.1 it's -transparent.

imagemagick transparency

You should have no problem changing your 8 arrows to have transparent backgrounds and i'm sure that Coucix will have given them filenames that are eminently processable in a bash loop.
I think that you will need to settle for a gif if you want the transparency, but that second line could have read example.png example.png to do a rewrrite in place if you felf you needed it.
If you have anything to do with image manipulation and scripts then don't learn imagemagick, there is just too much, but make yourself familiar and learn to use what you need.

I bet Jinkels just loves IM. Sigh, it is even available for that OTHER OS.

Google, imagemagick and imagination are your friends.

Don't forget to let us all know how you get on.
How about a link to your arrows (only 8 of them).

PAix

First you get yourself an image called kangaroo.png (or change the name) that is black with a white background, preferably square Have fun, it doesn't have to be a kangaroo of course, an arrow is quite acceptable I'm sure.

PAix
PS forget the link to your arrows - no offence Coucix, I'm sure that they were lovely.
PPS Ok the resizing of the image due to the diagonals 45 degrees etc have allowed me to make a right horlicks of those images. a bit of a smart cropping is needed - I'll be back, then i'll whack it into a tacky animation to show I have no tast as well as being slightly stupid on occasions.

Why not make the background transparent? When the image is displayed, whatever is behind it will show through the transparent background areas? This can be done with Imagemagick, left as an exercise for the reader.... (don't know exactly off the top of my head). Can also be done with the Gimp, or proably just about any image manipulation software.
--- rod.

To answer brazilnut:
The BASIC program is written in YABASIC which is available with Debian distros. There is nothing built dynamically, the selections of arrows is made at the time the containing HTML/PHP script is written, by this BASIC program which selects the colours and, consequently the fg colours of the arrows.

To all:
One confusion I had, these 1152 images do not need to be downloaded by the visitor because the HTML/PHP document that uses them is assembled by PHP before download by the visitor.

It seems the suggestions to make the background transparent is the most practical with my level of experience. It is good to know the whole thing can be based on 8 images only but I think I may need to much help to achieve this.

I will try transparency and theNbomr's script and I will let everybody know the results.

Thank you very much for your advices.

In fact, you can base it on two original images. Two arrows that you can each rotate 90 degrees. I overlooked the effect of rotating an image by 45 degrees which changed the size and complicates life unduly. so if you make two images one vertical and one pointing at 45 degrees. both having the same SQUARE size, then you can rotate each in increments of 90 degrees, suffering no size inflation problems (easy out for me) and life is dead simple. You can either produce and store the images or store the two and generate what you need by the specifying angle and colour to meet your immediate requirements.

IM is certainly worth getting to know. Just bone up on the bits you need to solve your immediate needs, such as titling etc.

PAix

could even create your own arrow data array and rotate that to any arbitrary radian, then place it into any sized and coloured image...

Thank you for the advices but I have no time to learn new software, especially because this is a one-off job involving graphics for an organization run by volunteers.

I followed a couple of links from the net to move white parts of an image to transparency (http://geekswithblogs.net/timh/archi.../20/72797.aspx)
and I have barely managed, using the mouse to get one arrow transparent with gimp although I lost the fg colour, I have also run PAix's script after removing the 45 degrees rotations and inserting the name of a test file but, not understanding the script, this was bound to fail, and it did.

So one question remains now: how can I add transparency to those images with a script using a file containing 1152 filenames as an input? I am willing to learn Bash though.

I have installed "Imagemagick" with "synaptic" and although it went OK I can't find it, nor start it.

Imagemagick, when installed, is a whole collection of utilities. The one you want in this case will be 'convert'.

I have just tried this, so I could explain it to you. I first created an image with the Gimp, which is an arrow, green with a black border on a field of white, saved as arrow.png. I use imagemagick to display it:
I see just what I described above. Next:
I see the same figure, but the white background is now transparent.


--- rod.