Page 1 of 1

Display both text +multiple images from imagepng on 1 page

Posted: Sat Nov 15, 2008 10:49 pm
by ExpertAlmost
I use PHP to calculate some lines of data and then create four images using imagepng. I can display one image. Or display the text. But I can not do both on the same page. And I want to display the text, go down a few blank lines and then display the four images, from left to right, on the same page. The images are not stored in a file but created dynamically.

Right now, I have one index.php page to display the text and another index.php page to display one image. Two rowboats, one oar...

How do I show text and four images on one html page inside my php code? Or is it outside the php code?

I am just learning PHP and know NOTHING about HTML so clear examples would be very helpful. :teach:

Thank you so much! :bow:

Re: Display both text +multiple images from imagepng on 1 page

Posted: Sat Nov 15, 2008 11:14 pm
by requinix
ExpertAlmost wrote:Right now, I have one index.php page to display the text and another index.php page to display one image. Two rowboats, one oar...
Your analogy is off. Your purpose is to get the rowboat to the other side of the river and you use oars to do it.
Similarly, your purpose is to make an HTML page with text and four images; you use two pages (one for the text, one to generate the image) to do it.
One rowboat, two oars. You can do it with one oar if you have to, but it's a lot easier if you have two.

You're doing it right.

Re: Display both text +multiple images from imagepng on 1 page

Posted: Sun Nov 16, 2008 12:08 am
by ExpertAlmost
Thank you for the general advice. Unfortunately, I do not know enough to implement any of it. Some examples would be great. Even just to output four images on the same page would be helpful.

Nor do I know how to create two pages. to display text, I use one program. To display one graphic, I use a different program. I have only started learning PHP a month ago and know nothing about HTML.

Thank you again for your help!

The sinking rowboat...

Re: Display both text +multiple images from imagepng on 1 page

Posted: Sun Nov 16, 2008 12:40 am
by requinix
All you need is two files*: the HTML page which shows the images and the text, and another to create the images.

HTML file looks like

Code: Select all

<html>
...
<p>Data data data</p>
<p>Data data data</p>
<p><img src="file2.php?image=1">
   <img src="file2.php?image=2">
   <img src="file2.php?image=3">
   <img src="file2.php?image=4"></p>
...
</html>
The image file (file2.php) does whatever it needs to display the images: $_GET[image] tells it which image it needs to create. Of course you don't have to do it exactly that way, but the general idea is the same.

* If the four images are drastically different you might want to use four PHP files instead.

You said you had two files (one for the text, one for the images) already. How does your current system work?

Re: Display both text +multiple images from imagepng on 1 page

Posted: Sun Nov 16, 2008 1:12 am
by ExpertAlmost
Thank you! But I do not really have a "system." I have one index.php file with several included php files to generate images and an array of data. I comment out the image part to see the text and comment out the text part to see the image.

I use this code to display the graphics. I try to display four but only the first one displays.

Code: Select all

 
header("Content-Type: image/png"); 
imagepng($CrwdMvImg1);
imagepng($CrwdMvImg2);
imagepng($CrwdMvImg3);
imagepng($CrwdMvImg4);
 
I have to comment out that code and then use the following to display an array of data:

Code: Select all

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<?php
show_matrix($SlowAry,"Slow Array");
?>
</body>
</html>
 
Crude but...learning as I go...
PHP Caveman

Re: Display both text +multiple images from imagepng on 1 page

Posted: Sun Nov 16, 2008 1:45 am
by requinix
You can't show text and images at the same time. Nor can you show more than one image at a time.
Which is what <img> tags are for. You take an HTML page and put your text in it. Then you can use special language to tell the browser that it should show an image at a certain location.

As I see it there's only a couple changes you need to make to get the result you want.
First, that one file should only display the HTML. Move the image generating code to another file (for simplicity).
In your HTML file, wherever you wanted those images to appear you add the right HTML. Something like

Code: Select all

<img src="other_file.php?image=1">
where other_file.php is where you moved the image code you had earlier. Depending on what $_GET[image] is you display one of those $CrwdMvImgX images.

I'm not sure how better I can explain the process. If you don't understand, posting your current code or mentioning exactly what part you don't get would be helpful.

Re: Display both text +multiple images from imagepng on 1 page

Posted: Sun Nov 16, 2008 2:12 am
by ExpertAlmost
Thank you so much! You are very kind in helping me.

I think I understand the basic idea about using a tag for my image in an HTML page. However, if I make a new php file for creating my images, "create_my_image.php" and it contains four calls to imagepng, how do I specify which image is in the tag? I am not sure what the "image=1" part of the tag means in: <img src="other_file.php?image=1">.

Also, I am looking into a $_GET call but I did not think I was using global server variables....I need it to do what?

So would my html file look something like:

Code: Select all

 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
 
<?php
show_matrix($SlowAry,"Slow Array");               //my array of data
<img src="create_my_image.php?image=1">      //image from first call to imagepng(my_image1)
<<img src="create_my_image.php?image=2">     //image from second call to imagepng(my_image2)
<img src="create_my_image.php?image=3">
<img src="create_my_image.php?image=4">
?>
</body>
</html>
 
The interface between the html and my php is confusing.

Thank you again for your generosity! :D
raising the rowboat slowly

Re: Display both text +multiple images from imagepng on 1 page

Posted: Sun Nov 16, 2008 2:52 am
by requinix
Ah, I'm now realizing you're not just green new, you're new new.

You have two types of stuff to display: text and images. HTML pages - the building blocks of a website - are especially made for text. It also lets you do some more advanced stuff, like embed images, change colors, and a whole lot of stuff that Microsoft Notepad can't do. The one thing they can't do* is hold text and image content at the same time: images must be outsourced to another file.
* At least not reliably, and not in all browsers

So you put your text in the HTML page, and then you put the <img> tags that I mentioned before in the places that you want the images to appear. Those also tell the browser where to load the images from. It doesn't care exactly what it says: the web server handles it.

Onto the images.
Everything after the ? in the URL is available to PHP. It's separated into different key/value pairs by a & in the form key=value. $_GET is an associative array holding that information.
If the query string is ?image=1 then $_GET["image"] is the number 1. In your situation you can use that to know which image your PHP script should display. Otherwise, since you're using one file to display each of those images, it wouldn't know which one it should use.

You already have some code that can generate the images you want. It should be in the create_my_image.php file. In the interests of keeping things simple, make this change: where you had those four imagepng's use

Code: Select all

if ($_GET["image"] == 1) imagepng($CrwdMvImg1);
else if ($_GET["image"] == 2) imagepng($CrwdMvImg2);
else if ($_GET["image"] == 3) imagepng($CrwdMvImg3);
else if ($_GET["image"] == 4) imagepng($CrwdMvImg4);
PHP will execute the right imagepng depending on what was in the query string.


The online PHP manual is a great place for looking up information. Not the best as a tutorial but unbeatable for a reference. Here are some links for you:

Re: Display both text +multiple images from imagepng on 1 page

Posted: Mon Nov 17, 2008 12:50 am
by ExpertAlmost
Thank you for the help and the links for other study materials! Yes, I am so new I am not even green...kind of a transparent new new :lol:

I suppose one thing that is confusing me is program flow in general. But that is another topic. I have done what I thought was correct but while I do get my text data, all I get from the graphic looks like hex text, and a lot of it. Perhaps the image stream?

In my "picture.php" file I the following because I always display ALL FOUR images from left to right (not sure how to do that either):

Code: Select all

imagepng($MyImg1);
imagepng($MyImg2);
imagepng($MyImg3);
imagepng($MyImg4);
In my index.php file I have:

Code: Select all

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No Title</title>
</head>
<?php
require("MM_Main.php");
?>
header("Content-Type: image/png"); 
<p>
<img src="MM_Main.php?image_id=$MyImg1" border="0">
<img src="MM_Main.php?image_id=$MyImg2" border="0">
<img src="MM_Main.php?image_id=$MyImg3" border="0">
<img src="MM_Main.php?image_id=$MyImg4" border="0">
</p>
</html>
I also have some print statements in my php files prior to the image tags. But even if I comment those out, I still see no image. Just the hex text. Will the HTML put the four images top to bottom or left to right or overwrite?

Looks like I will have to also learn HTML...

Thank you again for all your help. I read what I could about the GET and POST and REQUEST. Those will be next on my list to use.

Treading water barely.

Re: Display both text +multiple images from imagepng on 1 page

Posted: Mon Nov 17, 2008 1:46 am
by requinix
A file can only do one thing at a time: display one image or display one HTML page.

That means you can only use one imagepng at a time. Not four. You need to choose which one to execute, which is what the code I posted does, using $_GET[image] to identify the right image.
Which means your links need a ?image=__, and the blank needs to be a number. You set image=$MyImgX which doesn't do your script any good.

So

Code: Select all

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No Title</title>
</head>
<?php
require("MM_Main.php");
?>
<p>
<img src="MM_Main.php?image_id=1" border="0">
<img src="MM_Main.php?image_id=2" border="0">
<img src="MM_Main.php?image_id=3" border="0">
<img src="MM_Main.php?image_id=4" border="0">
</p>
</html>
header() is for PHP: you put it in the HTML part. Besides that, this page will display only HTML. Nothing else. Your other page will display the images, and that's where the header() goes.

Code: Select all

header("Content-Type: image/png");
if ($_GET["image_id"] == 1) imagepng($MyImg1);
else if ($_GET["image_id"] == 2) imagepng($MyImg2);
else if ($_GET["image_id"] == 3) imagepng($MyImg3);
else if ($_GET["image_id"] == 4) imagepng($MyImg4);
I assume you edited the image file so that $MyImgX are the variables containing the images to display (they used to be $CrwdMvImgX).

Re: Display both text +multiple images from imagepng on 1 page

Posted: Mon Nov 17, 2008 3:17 am
by ExpertAlmost
Well well well...this is nothing short of a minor miracle! My page shows my text and then shows my four images, left to right! Thank you. :bow:

A few questions to wrap up this thread.
1) I get the following messages:
Notice: Undefined index: image_id in C:\AppServ\www\MM_Main.php on line 92
Notice: Undefined index: image_id in C:\AppServ\www\MM_Main.php on line 93
Notice: Undefined index: image_id in C:\AppServ\www\MM_Main.php on line 94
Notice: Undefined index: image_id in C:\AppServ\www\MM_Main.php on line 95

and my print statement print "Image ID={$_GET["image_id"]}<br/>";
shows: Image ID= and then nothing. Are these two issues related? It seems like I am not accessing or passing the image_id. Or can I not print it out like that?
2) Right now I just destroy all four images after the if-then-else section. When exactly should I destroy the image?
3) How would I force the browser to refresh? It seems that if I rebuild the images and rerun the page, the new images are not shown until I close that page and open a new one.

My index.php file:

Code: Select all

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My PHP Catastrophe</title>
</head>
<body>
<?php
# All required PHP files for Market Mirror
require("MM_Main.php");
show_calcs($SlowAry,"Slow Array", $Symbol, $SlowMaxBar);
?>
<p>
<img src="MM_Main.php?image_id=1" border="0">
<img src="MM_Main.php?image_id=2" border="0">
<img src="MM_Main.php?image_id=3" border="0">
<img src="MM_Main.php?image_id=4" border="0">
</p>
</body>
</html>
My MM_Main.php code:

Code: Select all

header("Content-Type: image/png");
print"Image ID={$_GET["image_id"]}<br/>";
if ($_GET["image_id"] == 1) imagepng($CrwdMvImg1); 
else if ($_GET["image_id"] == 2) imagepng($CrwdMvImg2);
else if ($_GET["image_id"] == 3) imagepng($CrwdMvImg3);
else if ($_GET["image_id"] == 4) imagepng($CrwdMvImg4);
imagedestroy($CrwdMvImg1);
imagedestroy($CrwdMvImg2);
imagedestroy($CrwdMvImg3);
imagedestroy($CrwdMvImg4);
I also took your advice and am reading some ebooks about HTML :)

Row row row my boat! Thank you again for the new oar :D

Re: Display both text +multiple images from imagepng on 1 page

Posted: Mon Nov 17, 2008 3:36 am
by requinix
ExpertAlmost wrote:1) I get the following messages:
Notice: Undefined index: image_id in C:\AppServ\www\MM_Main.php on line 92
Notice: Undefined index: image_id in C:\AppServ\www\MM_Main.php on line 93
Notice: Undefined index: image_id in C:\AppServ\www\MM_Main.php on line 94
Notice: Undefined index: image_id in C:\AppServ\www\MM_Main.php on line 95

and my print statement print "Image ID={$_GET["image_id"]}<br/>";
shows: Image ID= and then nothing. Are these two issues related? It seems like I am not accessing or passing the image_id. Or can I not print it out like that?
It means that there is no $_GET[image_id] defined; that there isn't a ?image_id=... in the URL.

It seems like MM_Main.php is serving more than one purpose: some library stuff and displaying the images. Doing that will just make things harder.
Do what you did with the HTML file: create a new PHP file, put in a require(MM_Main.php), and put the image creation stuff afterwards. Exactly how you do that depends on what that MM_Main thing is.
(Then remove the image stuff from MM_Main.php)
ExpertAlmost wrote:2) Right now I just destroy all four images after the if-then-else section. When exactly should I destroy the image?
You actually don't need to do it at all.
imagedestroy frees up the memory used to hold the image. When the script quits that happens automatically. If you still want to do it yourself (no problem with that) then leave it right where it is: after you're done with the images. Once they've been outputted you don't need them anymore.
ExpertAlmost wrote:3) How would I force the browser to refresh? It seems that if I rebuild the images and rerun the page, the new images are not shown until I close that page and open a new one.
Not quite sure what you mean. It's probably a side-effect of how the images are created (not the code but the decisions and data and stuff used to make them). Could be browser caching too: hit Ctrl+F5 and see if the problem remains.

Re: Display both text +multiple images from imagepng on 1 page

Posted: Mon Nov 17, 2008 6:40 am
by ExpertAlmost
I think I have a scoping misunderstanding. Probably from my previous C coding adventures.

In brief I have:
index.php: shown below
main.php: as you guessed, is the "main program" with several "program wide" variables such as $CrwdMvImg1. Also has "require" statements for five other php files reflecting various functional groupings (file handling, data handling, etc)

I tried to create a new php file just with the imagepng calls but cannot get it to work because of various program wide variables such as $CrwdMvImg1.

But in testing I found that if I DO NOT HAVE LINE 9 in index.php, "require MM_Main.php", I DO NOT get the Notice: Undefined index: image_id in C:\AppServ\www\MM_Main.php on line 94 messages. And my images appear fine. BUT if I then also try to output text, no text appears and the images become empty boxes.

If I DO HAVE LINE 9 in index.php, "require MM_Main.php", I DO get the Notice: Undefined index: image_id in C:\AppServ\www\MM_Main.php on line 94 messages, as before. But I can output data. (Besides the call to show_calcs(), I also have print statements throughout my code for testing purposes.) The images appear fine.

I am at a loss. Other than functions calls for my MM_Main.php "program wide" variables to yet another new php file, or user defined global variables (which I view as a dangerous coding practice) I am not sure how to proceed. Is there some way I can test the $_GET variables? It appears they are empty when I include line 9 in index.php. No idea why that would happen.

Hope that is all clear! One thing certainly is clear, your patience and generosity in guiding me through this issue is exemplary! You raise the bar for all of us. :)

Code: Select all

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My PHP Catastrophe</title>
</head>
<body>
<?php
require("MM_Main.php"); //The line that solves or causes problems, why does this break $_GET for image_id?
show_calcs($SlowAry,"Slow Array", $Symbol, $SlowMaxBar); //data output func. Other funcs also use print statements
?>
<p>
<img src="MM_Main.php?image_id=1" border="0">
<img src="MM_Main.php?image_id=2" border="0">
<img src="MM_Main.php?image_id=3" border="0">
<img src="MM_Main.php?image_id=4" border="0">
</p>
</body>
</html>