[TUT]Dynamic Image Creation

[anuj]

Mmmkay, I got a couple of PMs about my sig so I figured I'd post how to do it.

 

First, you need four things.

 

1. Any text editor.

2. A host with PHP/FTP access.

3. Winamp + Now-Playing Plugin

4. http://www.2graphik.com/template.html <- Save to <winampdirectory>/np_templates

 

If you're running your own server, chances are you know your own PHP version and now if you've got GD library

 

installed.

 

Next, we'll configure the now-playing plugin.

1. Download and install the plugin
2. Start Winamp
3. Right Click -> Options -> Preferences or Ctrl+P.
4. Click Plugins -> General Purpose
5. Choose Now Playing Plugin, and click Configure Selected Plugin

Play with the options to your liking, but there are three things you'll NEED to do for this tutorial.

 

1. Under General Options, ENABLED must be checked. (duh)

2. Under Information Settings, ONLY check Title and Artist.

3. Under FTP, fill out your FTP's information.

 

There are several other ways to get your song information, but for the quickest, cleanest, easiest code I'm going with

 

this method. I know this alienates the 90% of people who don't have paid hosting, but chances are you can find free

 

FTP/php host somewhere. In the future, I'll include a snippet so you can use your Audioscrobbler account, if you

 

have one.

 

Now, let's get to it.

 

 

<?echo "Hello world!";?>

 

 

Any code between <? and ?> will be executed as PHP code. EVERY LINE OF CODE, with a few exceptions, is ended

 

with a semicolon ( ; ). So your first step in your new script:

 

 

<??>

 

 

First things first, we have to declare that this script is going to return a PNG image. If we don't do that, you'll

 

just get a bunch of jumbled nonsense.

 

 

<?header("Content-Type:image/png");?>

 

 

Mkay, we're getting somewhere.

 

Now, let's assemble the variables we'll be needing.

 

Now Playing:

 

 

$songarray = file("http://www.domain.com/song.txt");

 

 

In PHP, variables begin with a dollar sign ($). This line of code does two things.

 

1. It reads the contents of song.txt (for example, http://www.2graphik.com/song.txt ) Your file might not be called

 

song.txt, it depends on how you configured your plugin.

2. It places the contents of the file into an array, broken up BY LINE. So the first line of song.txt will be stored in

 

$songarray[0], the second line in $songarray[1], etc.

 

So now, we got our song read.

 

Actual Image Creation:

 

We'll cover image creation by means of using an already created image. We could go and do it all from scratch, but we'll keep it short, sweet, and looking good.

 

We'll be using this suitably creepy background of a clown for the backdrop of our now-playing string.\

 

 

...

 

I'm glad you like it.

 

 

//Image Creation Code$image = ImageCreateFromPNG("URL TO PNG BACKGROUND HERE");//define colorz$white = ImageColorAllocate($image, 255, 255, 255);$aliaswhite = ImageColorAllocate($image, -255, -255, -255);$black = ImageColorAllocate($image, 0, 0, 0);//actual text output using dropshadowImageString($image, 2, 9, 65, $songarray[0], $black);ImageString($image, 2, 9, 64, $songarray[0], $black);ImageString($image, 2, 7, 63, $songarray[0], $white);ImagePNG($image);ImageDestroy($image);

 

 

This was a doozy. Lots of things can go wrong here, so let's be careful.

 

 

$image = ImageCreateFromPNG("URL TO PNG BACKGROUND HERE");

 

 

This simply creates the image using the URL to the image we want. For simplicity's sake, we'll use ImageCreateFromPNG, although ImageCreateFromJPEG & ImageCreateFromGIF are also available.

 

 

$white = ImageColorAllocate($image, 255, 255, 255);$aliaswhite = ImageColorAllocate($image, -255, -255, -255);$black = ImageColorAllocate($image, 0, 0, 0);

 

 

Here, we are just defining variables as colors. ImageColorAllocate has four parameters that we use:

 

ImageColorAllocate(1, 2, 3, 4)

1: Resource Image

2. R value

3. G value

4. B value.

 

White is #FFFFFF, and RGB translates to 255, 255, 255.

Black is #000000, -> 0, 0, 0.

 

You can find more colors easily using Photoshop's color selector or simple hex->dec conversion.

 

 

ImageString($image, 2, 9, 65, $songarray[0], $black);ImageString($image, 2, 9, 64, $songarray[0], $black);ImageString($image, 2, 7, 63, $songarray[0], $white);

 

 

ImageString writes a string of text using the specified parameters.

 

ImageString(1, 2, 3, 4, 5, 6)

1: Resource Image

2. Resource Font (just use 2)

3. X Position

4. Y Position

5. string to be written

6. color

 

One very important thing: Imagestrings third and fourth parameter specify the UPPER LEFT corner of the string.

Second important thing: Using the negative value of RGB has the effect of turning off anti-aliasing. It's a matter of taste.

 

This part of the code writes $songarray[0] (our song information) to 7, 63 on the resource image, using the color $white.

 

Another important thing: PHP DRAWS IN THE ORDER YOU GIVE IT. So we do those first two lines first so the white is written over the black. If you don't want the dropshadow, you can either delete or comment out (place // before the line) those two lines.

 

 

ImagePNG($image);ImageDestroy($image);

 

 

ImagePNG creates the image, and despite the name, all ImageDestroy does is clean up loose ends.

 

So, let's look at the entire thing:

 

 

<?header("Content-Type:image/png");$songarray = file("http://www.2graphik.com/song.txt");//Image Creation Code$image = ImageCreateFromPNG("URL TO PNG BACKGROUND HERE");//define colorz$white = ImageColorAllocate($image, 255, 255, 255);$aliaswhite = ImageColorAllocate($image, -255, -255, -255);$black = ImageColorAllocate($image, 0, 0, 0);//actual text output using dropshadowImageString($image, 2, 9, 65, "Now Playing: ".$songarray[0], $black);ImageString($image, 2, 9, 64, "Now Playing: ".$songarray[0], $black);ImageString($image, 2, 7, 63, "Now Playing: ".$songarray[0], $white);ImagePNG($image);ImageDestroy($image);?>

 

 

whew, that's a LOT of information for just a few lines of code. You may notice I altered some of the code so that the above example should be a fully working code/add some aesthetic features.

 

 

OPTIONAL:

 

[NowPlaying]Enabled=1Frequency=1Seconds=30Dialog=1Icon=1History=1[FTP]Enabled=1Host=FTP.YOURHOSTHERE.COMUsername=YOUR FTP USERNAMEPassword=YOUR FTP PASSWORDFile=song.txtPort=21Folder=PATH\TO\ROOT (usually public_html)Passive=0[Post]Enabled=0Url=Port=80Extra=[Local]Enabled=1File=song.htmlPath=C:\Program Files\Winamp\[information]Title=1Artist=1Album=0Year=0Genre=0Track=0Comment=0Length=0Quality=0Filename=0[html]Background=clWhiteFont=clBlackBorder=0CSS=Generate=0Template=1Templates=template.html

 

 

 

Copy that, and save it as gen_NowPlaying.ini in your Winamp root directory to use my settings (remember to replace it with your FTP/path details. This step is optional, especially if you can just set the settings yourself.

 

 

Now, if you've made it this far, stick with me. Now that all that is done: Upload your PHP file.

 

 

THE RESULT:

 

 

I suppose this tutorial seems a little difficult at the moment, mainly because I didn't fully explain the intricacies of the Now Playing Plugin. But I tried my best with the core PHP, so you should be good to go.

Edited August 30, 2005 by anuj

[anuj]

Bumped to show what a real tutorial consists of.

[SWEETSAPRIK]

I saw this when you first posted it, unfortunately I don't use Winamp, or even understand half of the thread. Yeah, I'm stupid. Anyway, I demand that this be pinned.

 

/rins

[Clown.]

We know you are slightly annoyed at hardly getting any replays 'nuj (see adam schillers thread), But thats because hardly anyone here in gfx understands php and all that jazz. Including me. plus, like sweets, I don't use winamp, I use iTunes. But its well written and nicely detailed tutorial.

You might want to post this in WD&P, cause the guys in there might understand it more. just a thought.

[anuj]

We know you are slightly annoyed at hardly getting any replays 'nuj (see adam schillers thread), But thats because hardly anyone here in gfx understands php and all that jazz. Including me. plus, like sweets, I don't use winamp, I use iTunes. But its well written and nicely detailed tutorial.

You might want to post this in WD&P, cause the guys in there might understand it more. just a thought.

I don't care if nobody uses it. This took me maybe thirty minutes to write. I bumped this because I wanted people to see what a tutorial should consist of. As long as I'm here, I'm not going to allow some pseudo-PROTIP bullsh*t to pass for a viable tutorial.

[Clown.]

The tutorial itself is great. Very detailed and well explained, and set out in a very easy to follow way.

 

I'm not going to allow some pseudo-PROTIP bullsh*t to pass for a viable tutorial.

who was that directed at? My tutorial took me around four hours to do, and got some good responses. Actually I don't have a clue what pseudo-PROTIP is so I have no idea if it is an insult or not, but I'm guessing it is.

[adam schiller]

I have a feeling it was aimed at me........... I'm annoyed with this aswell I think we Should Have 1 post with links to all our tutorials we all spent a large amont of time on them why should be pushed down the page with topics that took 2 seconds to create.

[king surfer]

with topics that took 2 seconds to create.

 

Like your "Tutorial" right?

 

@ Topic-Excellent tut Anuj its helped me greatly in making these things but has also explained a lot to me about PHP.

 

Cheers.

[adam schiller]

god never thought I would get so much stick from making a tutorial and it didn't take to seconds I was referring to request topics sheez last time I try to help anyone.

[anuj]

 

The tutorial itself is great. Very detailed and well explained, and set out in a very easy to follow way.

 

I'm not going to allow some pseudo-PROTIP bullsh*t to pass for a viable tutorial.

who was that directed at? My tutorial took me around four hours to do, and got some good responses. Actually I don't have a clue what pseudo-PROTIP is so I have no idea if it is an insult or not, but I'm guessing it is.

It wasn't directed anywhere near you. Yours wasn't half-bad, and it explained something that was a hot-topic back then. I don't remember why your topic was locked, but I could've sworn you requested it.

 

 

Adam: Speak English, please.

 

edit -

 

@topic - If nothing else, this tutorial will teach you graphic creation with PHP, which is so open ended it's ridiculous. You don't need Winamp or the plugin, if you skim over the tut you should pick up snippets relating from beginning to end how to create a picture.

[Clown.]

Mine was locked because some gut bumped it about a month after everyone had finished with it. Thanks for the complements though. I think i might have a go at one of these php sigs, I'll post my attempt if i do any good.

[Fatality.]

Awesome tutorial, man. I bow down to you.