smokinggun source code
back to Code | back to Home

This is a primitive solution to connect HTML text to images, or visually connect text objects to text objects. This is not final. Additional methods need to be added to allow for dragging and user initiated linking.

Info | Source
Info

The idea for this came to me when looking at the poster for Being John Malkovich. I haven't had a chance to document this much yet, sorry. - jw

The lines are generated on the server and placed via CSS. See demo line draw for another example of this.

Syntax

Text: String to be used as the label. It can be either text or HTML.

Container_ID: The id of the DIV or other element to hold this object.

x,y: The pixel position of the object.

Creating an object:
obA = createNewObjects("Text",Container_ID,x,y);

Connecting one object to another:
objA.connect(objB);

Connecting an object to a point:
obj.connectPoint(x,y);

Bugs

There is a bug with drawing straight lines. I believe this to be a problem with the GD(graphics library) installed on this server since the script has performed better on other servers.

PHP Source
Below is the PHP source to generate the gif line. View the HTML source for the javascript code.
<?
# this code is in here since I got 17,000 hits yesterday from someone
# using this script
if (eregi("Simulator",$HTTP_REFERER))
    {
    # please run this script locally, otherwise I will just take it offline
    header("Location: http://i.cnn.net/cnn/images/main/cnn_logo_260.gif");
    exit;
    }
    
# draws a line based upon cordinates ($x1,$x2,$y1,$y2)
# syntax:
# image.php?$x1=&$x2=&$y1=&$y2=

$x1 = $_REQUEST["x1"];
$x2 = $_REQUEST["x2"];
$y1 = $_REQUEST["y1"];
$y2 = $_REQUEST["y2"];

$width = abs($x1-$x2);
$height = abs($y1-$y2);


$imgOut = ImageCreate($width,$height);
$white = ImageColorAllocate($imgOut, 255, 255, 255);
$black = ImageColorAllocate($imgOut, 0, 0, 0);
$gray = ImageColorAllocate($imgOut, 255, 255, 255);

# fill background color
imageFill($imgOut, $width, $height, $white);

# get slope
if ($width != 0 && $height != 0)
    $m = ($x1-$x2)/($y1-$y2);
    
else $m = 0;

# draw line based on slope
if ($m >= 0) 
    {
    imageline($imgOut, 1, 1, $width+1, $height+1, $black);
    #draw shadow
    #imageline($imgOut, 0, 0, $width, $height, $black);
    }
else  
    {
    imageline($imgOut, $width+1, 1, 1,$height+1, $black);
    #draw shadow
    #imageline($imgOut, $width, 0, 0,$height, $black);
    }

imagecolortransparent ($imgOut, $white);

    Header("Content-type: image/png");
    ImagePNG($imgOut);
    ImageDestroy($imgOut);
?>