Marcin,
I attempted to create a test script to generate an image per my earlier
post, but I had to make a minor adjustment in order to get a background
color into the new image. Here's the modified script, noting the
creation of an initial palette entry for the background color. It
doesn't have to be used anywhere in the image, but it DOES have to be
added to the palette in order for the background color to be shown in
the image output. I think any undefined pixel is assigned the first
color in the palette...
<?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
$background_color = ImageColorAllocate($im, 255, 255, 255); // Define
the background color as the first palette entry
$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 is pretty lightweight, as it doesn't require any additional classes
in your javascript code, but you'll need to have PHP running on your web
server. Since the URL for the image includes the size values, you can
update an image object in your UI by changing the image source URL,
which should regenerate the image from the server whenever the URL is
modified - including the size parameters. The transmitted image bytes
are pretty low because it's palette-based with only two colors, so the
PHP server script should provide an updated image file pretty quickly as
well. Since it's just a PNG image, any client browser that supports PNG
images should have no problem with it either - I think PNG support is
pretty standard.
PHP allows a variety of image types to be generated and transmitted this
way, including GIF and JPG, so you can adjust per your actual
requirements. You could even add parameters for the background and
foreground colors, if desired. If you want the actual image size to be
fixed, you could pass in different values for the image height and
width. I think you can make this as simple or complex as you need it to
be.
I think you have several ways to generate the image you need - hope one
works for you.
Gene
On Sun, 2009-03-22 at 10:34 -0400, Gene Amtower wrote:
> 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
------------------------------------------------------------------------------
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
