www.webdeveloper.com
Results 1 to 4 of 4

Thread: PHP Button Generator Script -Help!

  1. #1
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096

    PHP Button Generator Script -Help!

    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($im255255255);
    $grey imagecolorallocate($im128128128);
    $black imagecolorallocate($im000);

    // 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($im2001121$grey$font$text);

    // Add the text
    imagettftext($im2001020$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?

  2. #2
    Join Date
    Apr 2007
    Posts
    1,664
    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.
    Anti Linux rants are usually the result of a lack of Linux experience, while anti Windows rants are usually a result of a lot of Windows experience.

  3. #3
    Join Date
    Apr 2007
    Posts
    1,664
    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>
    Anti Linux rants are usually the result of a lack of Linux experience, while anti Windows rants are usually a result of a lot of Windows experience.

  4. #4
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096

    Moving the goalpost... :) :)

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles