|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
 |
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
|
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
Dev Articles Community Forums Sponsor:
|
|
|
|
#1
February 2nd, 2007, 11:47 AM
|
|||
|
|||
|
Automatically draw lines on web page
Is there a way to draw an image on a web page based on the visitors input into a form?
For example, could you ask a person the height and width of a rectangle they want, and how many of that size, and then have them all drawn on that page? If so, what would you need to do it as far as application/language goes? I think it can be done by flash but I would like to use something that we could do in house so that when we add new designs to draw we don't have to have the whole flash module redesigned. Thanks, Jim
|
|
#2
February 7th, 2007, 10:23 PM
|
||||
|
||||
|
svg ?
Hi kestrel, welcome to the forums,
Some amazing things can be done with javascript and Scalable Vector Graphics (SVG). Depending on the browser, you may need the Adobe plugin, but it's worth a look into. Code:
<html>
<head>
<!-- code by Mittineague, March 2003 -->
<script>
function drawWaveLengths() { //adds element to DOM
var SVGDoc = this.document.viewarea.getSVGDocument();
function drawVertLine(Xstart, Ystart, Xend, Yend, strokecolor){
newElem = SVGDoc.createElement("line");
newElem.setAttribute('x1', Xstart);
newElem.setAttribute('y1', Ystart);
newElem.setAttribute('x2', Xend);
newElem.setAttribute('y2', Yend);
newElem.setAttribute('style', 'stroke-opacity: 0.6; stroke: '+strokecolor+'; stroke-width: 1; fill: none');
newElem.setAttribute('visibility', 'visible');
SVGDoc.getElementById("display").appendChild(newElem);
}
drawVertLine('10','0','10','400','grey');// baseline 10 = 0
drawVertLine('48','0','48','400','grey');// endviolet 38 + 10
drawVertLine('86','0','86','400','grey');// endred 76 + 10
drawVertLine('10','50','55','50','violet');
drawVertLine('10','55','59','55','blue');
drawVertLine('10','60','66','60','green');
drawVertLine('10','65','69','65','yellow');
drawVertLine('10','70','73','70','orange');
drawVertLine('10','75','86','75','red');
}
function addWaveLengths(){
var SVGDoc = this.document.viewarea.getSVGDocument();
var addXstart =10;
var addYstart = document.data.yaxis.value;
var endline = eval(document.data.length.value)/100;
var addXend = 10 + endline;
var addYend = document.data.yaxis.value;
var addstrokecolor = document.data.color.value;
function addVertLine(Xstart, Ystart, Xend, Yend, strokecolor){
newElem = SVGDoc.createElement("line");
newElem.setAttribute('x1', Xstart);
newElem.setAttribute('y1', Ystart);
newElem.setAttribute('x2', Xend);
newElem.setAttribute('y2', Yend);
newElem.setAttribute('style', 'stroke-opacity: 0.9; stroke: '+strokecolor+'; stroke-width: 2; fill: none');
newElem.setAttribute('visibility', 'visible');
SVGDoc.getElementById("display").appendChild(newElem);
}
addVertLine(addXstart, addYstart, addXend, addYend, addstrokecolor);
}
</script>
</head>
<body bgcolor="#badbee" onLoad="drawWaveLengths()">
Angstrom = 10<sup>-10</sup>m 1 pixel = 100 angstroms
<!-- SVG document is embedded in HTML -->
<center>
<embed name="viewarea" src="display.svg" width="700" height="400"/>
<table border="1" bordercolor="#000000"><tr><td>gamma-ray <.1, x-ray .1-100, ultra-violet 100-4000 = ultra-violet <3800,</td></tr><tr><td>violet 3800-4500, blue 4500-4900, green 4900-5600, yellow 5600-5900, orange 5900-6300, red 6300-7600,</td></tr><tr><td>infra-red >7600 = infra-red 7000-10,000,000, microwave 10,000,000-1,000,000,000, radio >1,000,000,000</td></tr></table>
<form name="data">
<table border="1" bordercolor="#000000"><tr><td>
Y-axis location<br/>
<input name="yaxis" type="text" value=""/>
</td><td>
Length in Angstroms<br/>
<input name="length" type="text" value=""/>
</td><td>
Color<br/>
<input name="color" type="text" value=""/>
</td><td>
<input type="button" value="add line" onClick="addWaveLengths()"/>
</td></tr></table>
</form>
</center>
</body>
</html>
|
|
#3
February 7th, 2007, 11:27 PM
|
||||
|
||||
|
svg file
I just realized that other file won't be of much use to you without the "display.svg" file
 Code:
<?xml version="1.0"?> <svg> <!--size of canvas--> <g id="display" width="500" height="250" style="visibility:hidden"/> </svg> Last edited by Mittineague : February 7th, 2007 at 11:30 PM.
|
|
#4
February 8th, 2007, 04:03 AM
|
||||||
|
||||||
|
Alternatively, if your server is running PHP, see if the GD library is active. If it is , you can create all sorts of images using that.
__________________
This is my code. Is it not nifty? "The biggest problem encountered while trying to design a system that was completely foolproof, was, that people tended to underestimate the ingenuity of complete fools." ---Douglas Adams Join the Itsacon fanclub! Zero Tolerance: Spammers banned so far: 280
 
|
|
#5
February 8th, 2007, 10:17 AM
|
|||
|
|||
|
Thank you! I will try both out. My concern about the java scripts and such is that about 20% (and growing) of those that use our site use Firefox. I was't sure how well it would work since you mention about trouble with some browsers.
Then again, would we run into the same problem with PHP? I am chatting with a tech person for the hosting company to find out if te GD Library is available. I do know that we can install other applications so I don't think that will be a proble. I had thought about using CSS like you would for tabs and break since the center of each image is "Stretchable" Either way, thank you both very much! Jim
|
|
| Viewing: Dev Articles Community Forums > Web Design > Advanced Web Development > Automatically draw lines on web page |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
