Page 1 of 1

Preview Dynamic Image Button

Posted: Mon Apr 17, 2006 11:55 am
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]

Posted: Mon Apr 17, 2006 12:03 pm
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.

Posted: Mon Apr 17, 2006 12:11 pm
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.

Posted: Mon Apr 17, 2006 12:16 pm
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.

Posted: Mon Apr 17, 2006 12:51 pm
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.

Posted: Mon Apr 17, 2006 12:59 pm
by feyd
have basePreview() return false, and use "return basePreview(..." in your button.