Preview Dynamic Image Button

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
User avatar
tmaiden
Forum Commoner
Posts: 64
Joined: Fri Feb 24, 2006 3:15 pm
Location: Philadelphia
Contact:

Preview Dynamic Image Button

Post by tmaiden »

Jcart | Please use

Code: Select all

and

Code: Select all

tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Please move this topic if I am in the wrong thread.  Thought this would be the best place for this post.
To make this easier to understand, I am shorting everything I want to accomplish.

I currently have a php page which I intergrated to work with joomla by adding:

Code: Select all

define( '_VALID_MOS', 1 );
        include_once( 'globals.php' );
        require_once( 'configuration.php' );
        require_once( 'includes/joomla.php' );
On this page, there is a form which posts information to a table in my database (this table is used to save settings to create a dynamic image, when it is called from another page).

Fields on this form are: Text Color, Background Color.

Next to the submit button, I want to create a preview button, so the user can see a preview of their dynamic image; prior to submitting it. The code below, is found on the page that dynamically creates the image.

Code: Select all

header("Content-type: image/jpeg");
        $im = imagecreate(460,90);
        $bg = imagecolorallocate($im,255,255,255);
        $fg = imagecolorallocate($im,100,120,130);
        $borc = imagecolorallocate($im,0,0,0);
        imagefill($im,0,0,$bg);
        imagerectangle($im,0,5,459,89,$borc);
        imagestring($im,3,6,7,"Banner Message Here",$fg);
        imagejpeg($im);
        imagedestroy($im);
$bg = Background Color
$fg = Foreground Color

I know the code above is called at the sever level and javascript runs at the user level. Is there any way I can have the preview button run the code above and display the image? I know that the page would have to be called again, since the image is created server side.

Thanks again!


Jcart | Please use

Code: Select all

and

Code: Select all

tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Code: Select all

var img = new Image();
img.src = 'yourDynamicImageGeneratorUrlHere';
or similar.

The page does not have to be called again if you tell the Javascript to change the "src" of an existing image on the page. You will need to add random data to the URL requested so the browser doesn't pull the image from cache.
User avatar
tmaiden
Forum Commoner
Posts: 64
Joined: Fri Feb 24, 2006 3:15 pm
Location: Philadelphia
Contact:

Post by tmaiden »

The page that generates the the image also runs other stuff which I don't want it to run.

How do I have it use the information in the form text boxes, and pass those value to another page, so the created imaged reflects the boxes which the user has filled.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

You may need to make a separate script that generates the same image. Have it pull the information from the URL. Use Javascript to read the fields and compose a query string for the URL to the image generator. This is all simple Javascript string concatenation and the like.
User avatar
tmaiden
Forum Commoner
Posts: 64
Joined: Fri Feb 24, 2006 3:15 pm
Location: Philadelphia
Contact:

Post by tmaiden »

Ahh.... I see, I see. Didn't think of passing the variables through the url; which I am glad I can do it this way b/c I'm not that comfortable with session variables.

Thanks!

Also came accross another problem. When the preview button is clicked, it still submits the data to the database. This is what I have.

Code: Select all

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function bashPreview(form) { 
win = window.open('http://www.google.com','','width=400,height=400,left=312,top=184,toolbar=0,location=0,directories=0,status=0,scrollbars=0,menubar=0,resizable=0'); 
} 
//--> 
</script> 

<?

define( '_VALID_MOS', 1 );

include_once( 'globals.php' );
require_once( 'configuration.php' );
require_once( 'includes/joomla.php' );

$mainframe = new mosMainFrame( $database, $_REQUEST['option'], '.' );
$mainframe->initSession();

$my = $mainframe->getUser();


	if(isset($_GET['submitted']))
	{ 
		// Submit to database      
	}
	// Added For Preview Button
	elseif(isset($_GET['preview']))
	{ 
		echo('PREVIEW BUTTON CLICKED');
   		exit; 
   	}
	else
	{
		?>
                <table width='500' border='0' cellpadding='2' cellspacing='1'>	
		...	
                	<form name='myform' method='get' action='<? echo'addbulletin.php'; ?>'>
			...
				<input type='submit' value='preview' onClick='bashPreview(myform)' /> 
				<input type='submit' value='Create Watch'>
                </table>
		<?

	}

?>
http://www.google.com will be the page that displays the temp image. Right now though, Im not sure how to seperate the 2 buttons, submit & preview.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

have basePreview() return false, and use "return basePreview(..." in your button.
Post Reply