Marcin,

Not sure what you have available in your server environment, but you
could create an image generation php script using php's built-in image
library and define the image source in your javascript output using a
URL pointing to this script with height and width parameters added.  The
php script source can then create an appropriate height and width image
with a line drawn in it.  If you're not familiar with the php image
libraries, just read the php documentation for the image library
functions at http://www.php.org to get additional info on the
capabilities.

Some of the following info might be basic knowledge.  I don't want to
offend anyone's intelligence, but I want to give the full details to any
readers of this post.

In PHP, you first send the mimetype header to the server's output buffer
so that the browser knows that it is getting a PNG image, then generate
an image canvas from scratch (defining the height and width from the
input parameters), then draw the line on the canvas, followed by sending
the new image to the output buffer (and your client screen).

Here's what your client browser should use as an image URL:

   <img src="myserverpath/myimage.php?h=20&w=10">

Then myimage.php on the server would include something like this:

      <?php
      header ("Content-type: image/png");                    // Alert
the browser that it is getting a PNG image
      $im = ImageCreate($w,$h);                                 //
Create an image of needed width and height; 'x' pixels are 0 to $w-1,
'y' pixels are 0 to $h-1
      $mycolor = ImageColorAllocate($im, 0,0,0);        // Define
palette color in the new image as Black, in RGB format
      ImageLine($im, 0, 0, $w-1, $h-1, $mycolor);        // Draw the
line from 0,0 (left/top) to $w-1, $h-1 (right/bottom) in black; start
and end positions are always x, y coordinates
      ImagePNG($im);                                                //
Send the new image to the output buffer
      ?>

This will output an image of the proper height and width, with a black
line drawn from the top-left corner to the bottom-right corner.  You can
adjust the color using standard RGB values, and you can change the
direction of the line by changing the start and finish parameters in the
"ImageLine" function.  To get a line in either direction, you can either
add a URL parameter for the direction and call the ImageLine function
according to this input parameter with an IF statement, or you can
create two separate PHP scripts on your server (let's call them
myimageright and myimageleft) to define the two different slant
directions by inserting the appropriate x,y start and end parameters to
ImageLine in the two different PHP scripts.

This PHP script should get you close but may depend on your version of
PHP and server configurations, as the image library has seen some slight
changes between PHP 3 and PHP 5.  The beauty of this is that while the
URL does not look like a PNG image with appropriate file extension, the
browser knows that it's getting an image because of the mimetype header,
and the server uses the php extension to insure that the php script is
processed through PHP.

This allows you to create any line image you need but avoids the need
for a big pile of image files.  If you want to draw the image larger
than on-screen dimensions, you can always add a height or width
parameter to the IMG tag to resize the image back down on-screen.  It
all depends on what you're trying to display to the user and why.

Hope that helps,

   Gene


On Sun, 2009-03-22 at 11:49 +0100, Marcin Jakubowski wrote:

> Hello,
> 
> I'm thinking of a way to connect two points with a line but in a 
> compatible way so using qx.ui.embed.Canvas is not an option because it's 
> not supported in IE.
> 
> Right now, my only idea is to have 180 images with a line representing 
> 180 angles and using appropriate one based on calculations on the 
> positions of those two points, then cropping the image so the distance 
> matches.
> 
> As you may imagine, having 180 images is going to be a major problem, 
> not to mention calculations involving trigonometric functions which are 
> expensive. So, can anyone think of a better solution? Is there a way for 
> example to rotate the image? Or maybe some other idea comes to your mind?
> 
------------------------------------------------------------------------------
Apps built with the Adobe(R) Flex(R) framework and Flex Builder(TM) are
powering Web 2.0 with engaging, cross-platform capabilities. Quickly and
easily build your RIAs with Flex Builder, the Eclipse(TM)based development
software that enables intelligent coding and step-through debugging.
Download the free 60 day trial. http://p.sf.net/sfu/www-adobe-com
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

Reply via email to