GD Examples?

[Scott McCollough]

Re: GD Examples?

I'm very close to making it all come together. I'll post a sample script when it's ready.

However I have encountered a problem. My guess is the way that MivaScript is trying to change header info.

So in one file we have

<img src="{ [l.filename].Draw_BarChart( l.name, 150, l.array ) }" />

In the file/function it calls, the first thing it does is set the header so the output will be evaluated as an image

<MvFUNCTION NAME = "Draw_BarChart" PARAMETERS = "name, height, array" STANDARDOUTPUTLEVEL = "" ERROROUTPUTLEVEL = "">
	<MvASSIGN NAME = "l.null" VALUE = "{ miva_output_header('Content-type','image/png' ) }">

The problem is that it's changing the header of the CALLING script. But since regular HTML has been output, all that is shown is a broken image icon.

If I put it all into a single file with a blank outputlevel and eval the same function it displays properly.

Am I correct in my diagnosis? And if so, is there a way around it so that the header information can be set at the function level? Or at least set for each file?

Thanks

[eMediaSales]

Re: GD Examples?

Hi Scott,

I believe you want "miva_output_header" to set the content type...

Best,
James

[kayakbabe]

Re: GD Examples?

could it be a that without simulating the browser interaction with the server... you don't get the request ack exchange happening. I've not see an image file contents dumped in line before. but i have seen a ton of img src=script types of things done. this means the browser and hosting server still interact normally... it's just the script itself returning the contents differently, but the browser still perceives it as a seperate file. browser do all kinds of caching and differential loading of different types of elements/content of the items that make up a web page. So trying to inline the contents of an image would probalbly create some problems.

Have you tried calling the image src as a stand alone script that is external to your script that generates the framework of the html page? if that works.. then you know you would have a big job simulating all the ping-ack-request-content stuff that a browser normally expects to happen with external files like images.

okay, nobody smack me for my jargon.. ping-ack-request-content isn't the technical geek speak.. but it does describe in a laymans way what happens for every single file request a browser makes to a host server.

[Scott McCollough]

Re: GD Examples?

Here is what I'm working with.

image.mv looks like this:

<MIVA STANDARDOUTPUTLEVEL="">
<MvASSIGN NAME = "l.null" VALUE = "{ miva_output_header('Content-type','image/png' ) }">

<MvASSIGN NAME = "l.array" INDEX = "1" MEMBER = "data"		VALUE = "{ 80 }">
<MvASSIGN NAME = "l.array" INDEX = "2" MEMBER = "data"		VALUE = "{ 60 }">
<MvASSIGN NAME = "l.array" INDEX = "3" MEMBER = "data"		VALUE = "{ 75 }">
<MvASSIGN NAME = "l.array" INDEX = "4" MEMBER = "data"		VALUE = "{ 99 }">
<MvASSIGN NAME = "l.array" INDEX = "5" MEMBER = "data"		VALUE = "{ 20 }">
<MvASSIGN NAME = "l.array" INDEX = "6" MEMBER = "data"		VALUE = "{ 75 }">
<MvASSIGN NAME = "l.filename" VALUE = "{'image.mvc'}">
<MvASSIGN NAME = "l.name" VALUE = "{'test'}">

<MvEVAL EXPR = "{ [l.filename].Draw_BarChart( l.name, 150, l.array ) }">
<MvEXIT>

<MvFUNCTION NAME = "Draw_BarChart" PARAMETERS = "name, height, array" STANDARDOUTPUTLEVEL = "" ERROROUTPUTLEVEL = "">
	<MvASSIGN NAME = "l.null" VALUE = "{ miva_output_header('Content-type','image/png' ) }">

	<MvASSIGN NAME = "l.location" VALUE = "data">
	<MvASSIGN NAME = "l.filename" VALUE = "{ l.name $ '_' $ s.dyn_time_t $ random( 9 ) $ random( 9 ) $ random( 9 ) $ random( 9 ) $ '_barchart.png' }">
	<MvASSIGN NAME = "l.width" VALUE = "{ 10 }">
	<MvASSIGN NAME = "l.pos" VALUE = "{ 0 + l.width }">
	<MvASSIGN NAME = "l.elements" VALUE = "{ miva_array_elements( l.array ) }">

	<MvCOMMENT>More Mivascript</MvCOMMENT>

	<MvASSIGN NAME = "l.draw" VALUE = "{ gdImagePng( l.image, l.filename, l.location ) }">
	<MvASSIGN NAME = "l.read" VALUE = "{ file_read( l.filename, l.location, l.display_image ) }">

	<MvEVAL EXPR = "{ l.display_image }">

	<MvASSIGN NAME = "l.destroy" VALUE = "{ gdImageDestroy( l.image ) }">
</MvFUNCTION>

If I call image.mvc by itself as is, it displays an image. It acts just like any other image file.

However, if I have a second file, test_display.mvc, that outputs this HTML

<img src="{ ['image.mvc'].Draw_BarChart( l.name, 150, l.array ) }" />

The whole thing breaks.

Even if I MvEVAL the function from a second file, it breaks. If I MvDO the whole file, it breaks. So it's not a matter of being inside an HTML command.

It starts outputting HTML from the main file, but when it calls the Draw_BarChart() function, the first line in it is miva_output_header() which I THOUGHT would change the output of the file being referenced. If I remove the miva_output_header() from the function the HTML displays but where an image should be is just a random string of text starting with "PNG".

Somehow we need a way to change the header of the called file without changing the header of the originating file. I mean, it happens all the time with PHP so I'm not asking for the impossible.

Any ideas? Maybe some combination with miva_output_flush()?

[Kent Multer]

Re: GD Examples?

The way you've written that last <img> tag, the Draw_BarChart function has to return a URL. You can't just drop a pile of image data into the middle of the tag, unless you're using a rather new technique called a "data URI," which doesn't seem to be the case.

I think you need to modify your function so that it writes the image into a file, and then uses MvFUNCRETURN to pass the URL of the file back to the <img> tag. Then you don't need to mess with the HTTP headers at all. Of course, you can't delete the file until after the user has seen it.

If you want to create the file, send it to the user, and delete it, all in one operation, I think you need to use a data URI; you can Google it for details. I'm not sure which browsers support it, though.

HTH --

[kayakbabe]

Re: GD Examples?

Scott your draw barchart has to be inside your image.mvc script. That action of drawing the bar chart has to occur inside the src. The src has to be a complete image string That represents an entire finished image. Because the header exchange between the browser and server had to occur before the image . The image has to be completely finished before you can call it as an HTML image src.

Move your draw barchart into your image creation script.

[Scott McCollough]

Re: GD Examples?

The way you've written that last <img> tag, the Draw_BarChart function has to return a URL. You can't just drop a pile of image data into the middle of the tag, unless you're using a rather new technique called a "data URI," which doesn't seem to be the case.

Thank you Kent. That got me on the right track.

You're right, I need to output a filename inside the IMG tag, not the results of creating an image. So if image.mvc is written in such as way that it can run self-contained, this works:

<img src="{ l.filename }" />

The next trick is getting actual data over to the file.

But as promised, here is the code to draw a quickie bar chart with the new gd functions. Obviously it can be improved to add text, better height ratios, etc.

<MIVA STANDARDOUTPUTLEVEL="">
<MvASSIGN NAME = "l.null" VALUE = "{ miva_output_header('Content-type','image/png' ) }">

<MvASSIGN NAME = "l.array" INDEX = "1" MEMBER = "data" VALUE = "{ 80 }">
<MvASSIGN NAME = "l.array" INDEX = "2" MEMBER = "data" VALUE = "{ 60 }">
<MvASSIGN NAME = "l.array" INDEX = "3" MEMBER = "data" VALUE = "{ 75 }">
<MvASSIGN NAME = "l.array" INDEX = "4" MEMBER = "data" VALUE = "{ 99 }">
<MvASSIGN NAME = "l.array" INDEX = "5" MEMBER = "data" VALUE = "{ 20 }">
<MvASSIGN NAME = "l.array" INDEX = "6" MEMBER = "data" VALUE = "{ 75 }">

<MvASSIGN NAME = "l.filename" VALUE = "{'image.mvc'}">
<MvASSIGN NAME = "l.name" VALUE = "{'test'}">

<MvEVAL EXPR = "{ [ l.filename ].Draw_BarChart( l.name, 150, l.array ) }">
<MvEXIT>

<MvFUNCTION NAME = "Draw_BarChart" PARAMETERS = "name, height, array" STANDARDOUTPUTLEVEL = "" ERROROUTPUTLEVEL = "">
 <MvASSIGN NAME = "l.location" VALUE = "data">
 <MvASSIGN NAME = "l.filename" VALUE = "{ l.name $ '_' $ s.dyn_time_t $ random( 9 ) $ random( 9 ) $ random( 9 ) $ random( 9 ) $ '_barchart.png' }">
 <MvASSIGN NAME = "l.width" VALUE = "{ 10 }">
 <MvASSIGN NAME = "l.pos" VALUE = "{ 0 + l.width }">
 <MvASSIGN NAME = "l.elements" VALUE = "{ miva_array_elements( l.array ) }">

 <MvASSIGN NAME = "l.y_size" VALUE = "{ l.height }">
 <MvASSIGN NAME = "l.x_size" VALUE = "{ ( 2 * l.width ) + ( l.elements * l.width ) }">

 <MvASSIGN NAME = "l.image" VALUE = "{ gdImageCreateTrueColor( l.x_size, l.y_size ) }">
 <MvASSIGN NAME = "l.black" VALUE = "{ gdImageColorAllocate( l.image, 0, 0, 0 ) }">
 <MvASSIGN NAME = "l.clear" VALUE = "{ gdImageColorTransparent( l.image, l.black ) }">

 <MvASSIGN NAME = "l.color" INDEX ="1" VALUE = "{ gdImageColorAllocate( l.image, 255, 0, 0 ) }">
 <MvASSIGN NAME = "l.color" INDEX ="2" VALUE = "{ gdImageColorAllocate( l.image, 0, 255, 0 ) }">
 <MvASSIGN NAME = "l.color" INDEX ="3" VALUE = "{ gdImageColorAllocate( l.image, 0, 0, 255 ) }">

 <MvASSIGN NAME = "l.colors_available" VALUE = "{ miva_array_elements( l.color ) }">

 <MvASSIGN NAME = "l.count" VALUE = "1">
 <MvASSIGN NAME = "l.color_use" VALUE = "1">

 <MvWHILE EXPR = "{ l.count LE l.elements }">
 <MvASSIGN NAME = "l.data" VALUE = "{ l.array[ l.count ]:data }">

 <MvASSIGN NAME = "l.fill" VALUE = "{ gdImageFilledRectangle( l.image, l.pos, l.y_size - l.data, l.pos + l.width - 1, l.y_size, l.color[ l.color_use ] ) }">

 <MvASSIGN NAME = "l.count" VALUE = "{ l.count + 1 }">
 <MvASSIGN NAME = "l.pos" VALUE = "{ l.pos + l.width }">
 <MvASSIGN NAME = "l.color_use" VALUE = "{ l.color_use + 1 }">
 <MvIF EXPR = "{ l.color_use GT l.colors_available }">
 <MvASSIGN NAME = "l.color_use" VALUE = "1">
 </MvIF>
 </MvWHILE>

 <MvASSIGN NAME = "l.draw" VALUE = "{ gdImagePng( l.image, l.filename, l.location ) }">
 <MvASSIGN NAME = "l.read" VALUE = "{ file_read( l.filename, l.location, l.display_image ) }">

 <MvEVAL EXPR = "{ l.display_image }">

 <MvASSIGN NAME = "l.destroy" VALUE = "{ gdImageDestroy( l.image ) }">
 <MvASSIGN NAME = "l.delete" VALUE = "{ fdelete( l.filename ) }">

 <MvCOMMENT>
 <MvASSIGN NAME = "l.error" VALUE = "{ gdLastError() }">
 <MvEXPORT FILE = "error.txt" FIELDS = "l.image, l.fill, l.draw, l.read, l.destroy, l.error" DELIMITER = "|">
 </MvCOMMENT>
</MvFUNCTION>

Hopefully this will get those interested a starting point.