Cgi script send a bad image to the browser

ruby-talk
1

Hi everyone,
I'd like to use a ruby script to generate an image (directed graph) and
sand it to an ajax-like javascript script that display the image in the
browser.
I tryed to do it but what the browser display only a lot of strange
characters. I think it's a headers problem but I really don't know how
to solve it.
When I run the script in a shell and redirect the input to a file, the
generated image is good
What is the best way to send the image to the browser?
Any idea is welcome,
thanks in advance.

Alex

#this is the ruby script#

require "graphviz"
g = GraphViz::new( "G" )
main = g.add_node( "main" )
parse = g.add_node( "parse" )
g.add_edge( main, parse )
puts "Content-Type: image/png"
puts
g.output( "output" => "png" )

############## This is the client-side javascript to display the
gener0ated image ##############

<script language="javascript" type="text/javascript">
var request = false;
try {
  request = new XMLHttpRequest();
} catch (trymicrosoft) {
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
      request = false;
    }
  }
}

if (!request)
  alert("Error initializing XMLHttpRequest!");

/****************************************************/

function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         var response = request.responseText;
         document.getElementById("address").innerHTML ="<img
src="+response+" />";
       } else
         alert("status is " + request.status);
     }
   }

function getAnswer() {
     var url ="nph-script.rb";
     request.open("GET", url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }

</script>

···

################################################

2

Maybe you want to use the CGI class.
require 'cgi'
cgi = CGI.new
cgi.header['Content-Type'] = 'image/png'
cgi.print cgi.header

···

On Mar 11, 2006, at 3:43 PM, Alex wrote:

Hi everyone,
I'd like to use a ruby script to generate an image (directed graph) and
sand it to an ajax-like javascript script that display the image in the
browser.
I tryed to do it but what the browser display only a lot of strange
characters. I think it's a headers problem but I really don't know how
to solve it.
When I run the script in a shell and redirect the input to a file, the
generated image is good
What is the best way to send the image to the browser?
Any idea is welcome,
thanks in advance.

Alex

#this is the ruby script#

require "graphviz"
g = GraphViz::new( "G" )
main = g.add_node( "main" )
parse = g.add_node( "parse" )
g.add_edge( main, parse )
puts "Content-Type: image/png"
puts
g.output( "output" => "png" )

############## This is the client-side javascript to display the
gener0ated image ##############

<script language="javascript" type="text/javascript">
var request = false;
try {
  request = new XMLHttpRequest();
} catch (trymicrosoft) {
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
      request = false;
    }
  }
}

if (!request)
  alert("Error initializing XMLHttpRequest!");

/****************************************************/

function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         var response = request.responseText;
         document.getElementById("address").innerHTML ="<img
src="+response+" />";
       } else
         alert("status is " + request.status);
     }
   }

function getAnswer() {
     var url ="nph-script.rb";
     request.open("GET", url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }

</script>
################################################

3

Actually forgot what i just said, you're doing this all wrong. src points to a url, not the actual image data. Ajax is also probably pretty silly for this. Do this in your html:

<img src="nph-script.rb">

no javascript, no ajax, just good old fashioned cgi. If you do want this graph to be more dynamic than that, you're going to have to learn how the img tag works (like I said src is not image data its a url).

···

On Mar 11, 2006, at 3:43 PM, Alex wrote:

Hi everyone,
I'd like to use a ruby script to generate an image (directed graph) and
sand it to an ajax-like javascript script that display the image in the
browser.
I tryed to do it but what the browser display only a lot of strange
characters. I think it's a headers problem but I really don't know how
to solve it.
When I run the script in a shell and redirect the input to a file, the
generated image is good
What is the best way to send the image to the browser?
Any idea is welcome,
thanks in advance.

Alex

#this is the ruby script#

require "graphviz"
g = GraphViz::new( "G" )
main = g.add_node( "main" )
parse = g.add_node( "parse" )
g.add_edge( main, parse )
puts "Content-Type: image/png"
puts
g.output( "output" => "png" )

############## This is the client-side javascript to display the
gener0ated image ##############

<script language="javascript" type="text/javascript">
var request = false;
try {
  request = new XMLHttpRequest();
} catch (trymicrosoft) {
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
      request = false;
    }
  }
}

if (!request)
  alert("Error initializing XMLHttpRequest!");

/****************************************************/

function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         var response = request.responseText;
         document.getElementById("address").innerHTML ="<img
src="+response+" />";
       } else
         alert("status is " + request.status);
     }
   }

function getAnswer() {
     var url ="nph-script.rb";
     request.open("GET", url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }

</script>
################################################

4

Logan Capaldo wrote:
....

Actually forgot what i just said, you're doing this all wrong. src points to a url, not the actual image data. Ajax is also probably pretty silly for this. Do this in your html:

<img src="nph-script.rb">

no javascript, no ajax, just good old fashioned cgi. If you do want this graph to be more dynamic than that, you're going to have to learn how the img tag works (like I said src is not image data its a url).

You might be able to us JavaScript to get a reference to the desired Image object (in document.images )and update the src property.

···

--
James Britt

http://www.ruby-doc.org - Ruby Help & Documentation
Ruby Code & Style - The Journal By & For Rubyists
http://www.rubystuff.com - The Ruby Store for Ruby Stuff
http://refreshingcities.org - Design, technology, usability

5

Thanks a lot!

Yes, you are right when you said i'm using the img tag in a wrong
way...
Now I'll start working in a different way.
Thanks again

Ale

6

I'd like do do something like this:

1)The user insert some data in a field, than press a button
2)A script receive the data and return some textual info and an image

With ajax I can make an interface with an instant textual answer from
the system (without page refresh), but I'd like to do the same thing
with the image.
If I use this technique:
<img src="nph-script.rb">
The image is updated only when I refresh the page.
Ummm... maybe I simply cannot do it.

Any hints?

Thanks a lot!

Alex

7

Alex wrote:

I'd like do do something like this:

1)The user insert some data in a field, than press a button
2)A script receive the data and return some textual info and an image

With ajax I can make an interface with an instant textual answer from
the system (without page refresh), but I'd like to do the same thing
with the image.
If I use this technique:
<img src="nph-script.rb">
The image is updated only when I refresh the page.
Ummm... maybe I simply cannot do it.

See my previous response to your initial message

"You might be able to us JavaScript to get a reference to the desired Image object (in document.images )and update the src property."

Google around for DHTML, JavaScript, and image replacement/preloading.

···

--
James Britt

"You harmonize; then you customize."
  - Wilson Pickett

8

I understand, thank you for your help.

Alex