PHP Button Generator Script -Help!

**donatello** · 04-29-2009 09:35 AM

I am working on a PHP button generator.
There will be a selection of buttons (images) and fonts. Users will be able to create an image button.

I would like to make the button image stretch to match the length of the text string... or to at be length adjustable by the user.

So far this works without the stretch:
http://www.createbutton.com/buttonmaker.html

Here is the PHP thus far:

PHP Code:


<?php

// Set the content-type

header('Content-type: image/png');



// Create the image

$im = imagecreatefrompng("images/button1.png");



// Create some colors

$white = imagecolorallocate($im, 255, 255, 255);

$grey = imagecolorallocate($im, 128, 128, 128);

$black = imagecolorallocate($im, 0, 0, 0);



// The text to draw

$text = $_POST['label'];

// Replace path by your own font path

$font = 'fonts/arial.ttf';



// Add some shadow to the text

imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);



// Add the text

imagettftext($im, 20, 0, 10, 20, $white, $font, $text);



// Using imagepng() results in clearer text compared with imagejpeg()

imagepng($im);

imagedestroy($im);

?>

The HTML is:

HTML Code:

<form name="form1" method="post" action="buttonmaker.php">
<input type="text" name="label" title="Enter your text here" style="font-size:16px; color:#0000FF; text-decoration:none;" value="Your text here" onfocus="if(this.value=='Your text here'){this.value=''};" onblur="if(this.value==''){this.value='Your text here'};" size="25" class="textbox">
<input type="submit" value="Generate Button" />
</form>

I'm thinking that the best solution would be to use three images... a left side of the button with rounded edges, a center that is stretchable, a right side with rounded edges. The left and right side images will not stretch.

Any ideas?

**SyCo** · 04-30-2009 04:14 PM

Without knowing the width of each letter for each font and font size you can't know how wide to make the button.

You could use a create interface that allow a user to type the text in the chosen font then with javascript increase the button until it fit then post the values back to php to create the button.

You might be able to track the width of a div or span with javascript and have the message echo inside the div using onkeydown/up. So the user writes it in the text input and they get a live display of how the button will look. The width of the div would be the middle part plus you two rounded ends caps equals the width to hand to the image generation functions.

It looks like you have the PHP part down. You might want to take your question to the Javascript forum to see if someone there can help.

**SyCo** · 05-01-2009 12:44 PM

So I was thinking about how to do this and I think I worked it out

PHP Code:


<?
if(!empty($_POST['words'])){
    //process the posted info to generate your image
    print_r($_POST);
}
?>
<html>
<head>
<script language="JavaScript">
<!--
function writetocell(){
        document.getElementById('buttondiv').innerHTML=document.getElementById('words').value;//preview
        document.getElementById("wordswidth").value=document.getElementById("buttondiv").offsetWidth;//assign width to form element
}
//-->
</script>
</head>
<body>
<form id="input" method="post">
<input type="text" name="words" id="words"  onkeyup="writetocell()"><br>
<br />
Button preview : 
<span style="padding:0;border:0;width:10px;background-color:#ceffce;"></span><?//add left end cap image?>
<span id="buttondiv" style="white-space: nowrap;background-color:#cecece;"></span><?//add button background image?>
<span style="padding:0;border:0;width:10px;background-color:#ceffce;"></span><?//add right end cap image?>
<br /><br />
<input type="text" name="wordswidth" id="wordswidth"  style="width:30px;"><?//make hidden input type?>
<input type="submit">
</form>
</body>

**donatello** · 07-30-2012 04:14 AM

You know, a funny thing happened with this post... I did not use it for the original script that I was working on, but have found a use for it elsewhere and am in the process of making a "Sliding Door Sprite Generator" using this neat little script.

I have also tried using it in a policy generator here:

http://jsfiddle.net/WaYAf/

What I would like it to do is to add the text to multiple cells. That is, the company name appears about 15 times in a policy, and I would like them all to be updated when a user types the company name into the input field.
This script works great, but only for a single <span> tag... how can I make it do multiple tags?

Thread: PHP Button Generator Script -Help!

Thread Tools

Display

PHP Button Generator Script -Help!

Moving the goalpost... :) :)

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions