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 ); ?>