Topic awaiting preservation: outlining a website help please

I have a website that I am building and would like some help on the best way to handle it.

Here is what the website is going to be able to do :

[*] Let users either print or submit to us Business cards, flyers (2 and 3 column), posters and banners.

Now one at a time.

For the Business cards, the base of the card is going to be static. i.e. Logo, company name, things like Phone :, Fax:, etc...
But the info such as Name, title, phone number, fax number, email address will be entered by the user.
Once this info is entered, it will give them the choice to either print it at their location or have it submitted to us over email for the company I work for to print it.

They want the ability to change font size but I am thinking the color should probably be the same as the other text. I am thinking that I can use the gdlib to create a PNG file and then have it converted to a PDF to submit to us or they can print the PDF at their office. For the PDF creation I was thinking of using either R&OS PDF or DOM PDF.

My biggest concern is font selection. If I use the gdlib's then I have to use the fonts from the server. If this is a linux server, they don't really have the option of fonts like "Helvetica" or "Times New Roman".

Does this sound like a good approach? Or does someone have a better idea?


As for the flyers, I can use the R&OS PDF have something like TinyMCE to do the editing. Or some other HTML -> PDF api. Maybe....


Thanks in advance!

Later,

C:\

quote:

---

CPrompt said:

If this is a linux server, they don't really have the option of fonts like "Helvetica" or "Times New Roman".

---

Sure they do.

quote:

---

reisio said:

Sure they do.

---

hmmm....mine doesn't, at least not that I can find. Where would these fonts be?

Later,

C:\

ok, immaidiot. I found the fonts

Still the question remains, would it be best to use the GDLib's to create the image and then run it through the PDF functions to submit to us?

I was running some tests today using the R&OS pdf class and a base image, but had some problems with resolution. Might just have to be one of those things to play around with it until I get the best results?

Later,

C:\

quote:

---

CPrompt said:

Where would these fonts be?

---

Times New Roman comes with Microsoft's Core fonts for the Web.

Not sure what the best route would be for Helvetica, but due to its popularity, it's easy enough to get a hold of... both legally and not.

ok, hope you don't mind me answering here, CPrompt.

Basic idea is sound - but you could simply use R&OS 'straight' to create the cards - that would net you a cleaner and fully scalable pdf
that's suitable both to online viewing and printing ( and of course somewhat mitigates the font issue, since you'd emmbed the fonts into the
pdf.

On another note, I seem to remember GD being able to use true type fonts - you can grab them from the font pack that reiso linked to, and supply them to GD.

So long,

->Tyberius Prime

Take a look at this:
Aliased text on image with GD/PHP

Thanks for that.

zavaboy, I must have looked all over the place for that and couldn't find it

quote:

---

Tyberius Prime said:

ok, hope you don't mind me answering here, CPrompt.

---

not at all.

Another note.

I have decided on basically using the GD library to make the Business card. This way the user can see the card being built. Font's don't seem to be an issue anymore since (like TP said), GD can use TrueType fonts.

However, I got a snag. When the user fills out the info that places onto the card, I can't seem to figure out how to get the image on the page with the form to "refresh" with the users input text. It just calls the page that I have the GD functions in. All the text is there but I would rather the image stay on the same page.

Does that make sense?

Here is the script that makes the image (I'll clean it up later)

<?

/*
**	Draw text over a base image
*/


$baseImg = "images/bcard_template3.jpg"; //base image
$baseFont = "fonts/timesbd.ttf";	//base font (will be able to change these later)
$uNamefontSize = 16; //font size for the users name
$uTitlefontSize = 10; //fonts size for the users Title
$angle = 0;

//username info
$uNameX = 142;
$uNameY = 20;
$uName = $_POST['userName'];

//user Title info 
	//box 1
$uTitle1X = 142;  //keep it in line with the name
$uTitle1Y = 40; //bring it below the name
$uTitle1 = $_POST['userTitle'];

//user Title info
	//box 2
$uTitle2X = 142;
$uTitle2Y = 55;
$uTitle2 = "For Assistant Vice Chancellor";

//create a image and set some colors
$image = imagecreatefromjpeg($baseImg);
$colorYellow = imagecolorallocate($image,0xFF,0xFF,0x99); //the colors will be selectable.
$colorGrey = imagecolorallocate($image,0xCC,0xCC,0xCC);
$colorBlack = imagecolorallocate($image,0,0,0);

//output the name and titles
$uNameBox = imagettftext($image, $uNamefontSize,$angle,$uNameX,$uNameY,$colorGrey,$baseFont,$uName);
$uTitleBox1 = imagettftext($image, $uTitlefontSize,$angle,$uTitle1X,$uTitle1Y,$colorBlack,$baseFont,$uTitle1);
$uTitleBox2 = imagettftext($image, $uTitlefontSize,$angle,$uTitle2X,$uTitle2Y,$colorBlack,$baseFont,$uTitle2);

//red rover - red rover - send the image on over
header('Content-type:image/png');
imagepng($image);


?>

The page that calls this script it just a form with the action="bcardtemplate.php"

Later,

C:\

You could have an onSubmit JS function replace a image on the page based on what's in the form. Or another way would be using an iframe and submit to that, this could also be the alternative to the JS way with <noscript>.

zavaboy : the actual problem is, once the form is submitted it goes from the form page (index.php) straight to the script that was called from the form (bcardtemplate.php). I don't want to leave the index.php page but I have in that page

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

If I were to add that code to the index.php page, it will cause an error since the headers were already sent.

I think I'm starting to confuse myself

Later,

C:\

I'd do this differently - dynamically replace the url of the image (javascript) and submit the fields via get.
(If the fields get to be too much, the answer here goes along the lines of: 'use ajax for postback of the form ( most
ajax libs support that right out of the box), return false on onsubmit (so the page does not reload), , store data in session,
reload image (image script reads session) after ajax call returns...

hope I made sense... feeling a little bit light headed right now

I *think* I got ya on that. I might look at the Ajax thing. Never used it before. I was just getting ready to try the session stuff though. That might easiest for me at this point.

quote:

---

Tyberius Prime said:

hope I made sense... feeling a little bit light headed right now

---

It's all them "red" drinks

Later,

C:\

quote:

---

Tyberius Prime said:

dynamically replace the url of the image (javascript) and submit the fields via get

---

That's what a meant.........

CPrompt: Did you find what you needed? I'm back and can help out if you still need me. This might require some brushing up on my part, but that never hurt anyone.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

Suho : yeah I found what I was looking for. I do need some assistance though. Making progress but ran into a snag.

Here is the index page with the Ajax stuff:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dynamic Image</title>
<meta name="generator" content="MAX's HTML Beauty++ 2004" />

<script type="text/javascript">

	// Set path to PHP script
var phpscript = 'output.php';

function createRequestObject() {

   var req;

   if(window.XMLHttpRequest){
      // Firefox, Safari, Opera...
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      // Internet Explorer 5+
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      // There is an error creating the object,
      // just as an old browser is being used.
      alert('Problem creating the XMLHttpRequest object');
   }

   return req;

}

// Make the XMLHttpRequest object
var http = createRequestObject();
	
function sendRequestGet(userName) {
	
	// Open PHP script for requests
	http.open('get', phpscript+'?userName='+userName);
	http.onreadystatechange = handleResponseGet;
	http.send(null);
	
}

function handleResponseGet() {

	if(http.readyState == 4 && http.status == 200){
		// Text returned from PHP script
		var response = http.responseText;
		if(response) {
			// Update ajaxTest content
			document.getElementById("uImage").innerHTML = response;
		}
		
	}
	
}

</script>

</head>

<body>

	<table>
		<tr>
			<td>Username:</td><td><input type="text" id="userName" name="userName" /></td>
		<tr>
		<tr>
			<td>
				<input type="button" value="Submit" onclick="sendRequestGet(<?echo $_GET['userName'];?>);" />
			</td>	
		</tr>
	</table>


<div id="uImage">
	<img src="bcardtemplate.php"  />	
</div>

</body>
</html>

The output.php page that is called in the Ajax above :

<?

if(isset($_GET['userName'])) {
	echo "<img src=\"bcardtemplate.php?userName=" . $_GET['userName'] . "/>";  	
}


?>

real slick right there

It is creating the image just fine. When something is entered into the text field, it writes to it but instead of giving the text from the input box, it always says "undefined". When I see this in PHP I usually am screwing something up with an array. What is this doing?

Thanks in advance!

Later,

C:\

(Edited by CPrompt on 07-03-2007 20:00)

(Edited by CPrompt on 07-03-2007 20:02)

OK...after reading a website over and over, I found the "prototype.js". Using that I found a way to do this.

I replaced all the Ajax stuff up there ^^ with

<script type="text/javascript">


/* ajax.Request */
function ajaxRequest(url,data) {
	var aj = new Ajax.Request(url,{ 
		method:'get',
		parameters: data,
		onComplete: getResponse
	}
  );
}

/* ajax.Response */
function getResponse(oReq) {
	$('uImage').innerHTML = oReq.responseText;
}

</script>

Working OK right now. Moving on to step 2

Later,

C:\

OK...I'm gonna ask one more question about this today.

If the user enters text such as "MYNAME", it works fine, however, if you enter "MY NAME", it doesn't print anything but "MY". So it is not doing anything with the space.

Any suggestions?

Later,

C:\

care if I just use this as my personal log of aggravations?

using str_replace did the trick for me.

So let me ask this. Do you all ever get confused when going from one web language to the next? Luckily things like JavaScript and PHP have similar syntax (sort of). But things are handled differently. I find myself getting VERY confused sometimes when going from one to the other and back again.

whewww...

Later,

C:\

quote:

---

CPrompt said:

Do you all ever get confused when going from one web language to the next?

---

YES!

[babble]
But I started with JavaScript before I even touched PHP, but it gave the backbone of my knowledge of PHP which made my learning of it much more simple. Unfortunately I've lost most of my JS knowledge to PHP, thus I tend to avoid JS when possible. Once I get more free time, I'm jumping for AJAX and will try to spiffy up my tiny JS toolbelt. Though I must say, ActionScript helped maintain much of my JS knowledge in the way of it's OOP style.

All in all, I'm just a PHP (much including the GD library) freak! I'm currently 50% PHP, 30% XHTML/CSS, 10% AS, 10% others.

Other languages I'm building up on: Perl and SSH
[/babble]