u jayakodi
11-18-2010, 07:41 AM
jayakodiu@yahoo.com
A network diagram ideally consists of non-overlapping boxes with non-intersecting connectors; the initial layout shall be capable of fine-tuning by moving the boxes and connector ends, coloring a part of the network, saving the diagram as a html file. A technique in scripting such a program is to define and use specific attributes for the elements in addition to their basic properties.
The above technique is demonstrated in the enclosed snippet made for PERT
network diagram used for a typical highway project construction. The required functions are in the <head> section and description & data are in the <script> section at the end.
CAUTION: The technique and program have been developed and used so far in IE only.
--------------
<html xmlns:v>
<head><style>
v\:* {behavior:url(#default#VML)}
div{position:absolute;width:100;height:40;padding:1;text-align:center;cursor:hand;background:#ffffff;
font-family:arial;font-size:12;border:double 3 blue}
</style>
<script>
var ele,jk,tc,lc,kk
tsk=Array(99);ln=Array(99)
var tt=Array()
tc=0;lc=0;jk=''
function mdn(){ele=window.event.srcElement;if(ele.tagName=='line')
{x=0.75*window.event.x;y=0.75*window.event.y;sx=x-ele.from.x;sy=y-ele.from.y
ex=x-ele.to.x;ey=y-ele.to.y;sd=Math.sqrt(sx*sx+sy*sy);ed=Math.sqrt(ex*ex+ey*ey);jk='s'
if(sd>ed)jk='e'}
}
function mov(){if(window.event.button==1){kk=0;x=document.body.scrollLeft+window.event.x;
y=document.body.scrollTop+window.event.y;nn=ele.tagName
switch(nn)
{case 'DIV':ele.style.left=x-50;ele.style.top=y-20;jk=ele.getAttribute("indx")
for(i=1;i<=lc;i++){ss=ln[i].getAttribute("bn");ee=ln[i].getAttribute("fn");xe=x-50;xs=x+50
if(ss==jk){ln[i].from=xs+','+y};if(ee==jk){ln[i].to=xe+','+y}}
case 'line':zz=x+','+y;if(jk=='e')ele.to=zz; else ele.from=zz}window.event.returnValue=false;}
}
function mup(){if(kk==67){nn=ele.tagName
switch (nn)
{case "line":ccl=ele.strokeColor;
if(ccl=='blue'){ele.strokeColor='red'}
else{ele.strokeColor='blue'}
case 'DIV':ccl=ele.style.borderColor
if(ccl=='red'){ele.style.borderColor='blue'}
else{ele.style.borderColor='red'}}}
}
function kgp(){kk=window.event.keyCode
if(kk==83){var fn=window.prompt("Full name of file, with htm extn","c:/1.htm");var fso,f
fso=new ActiveXObject("Scripting.FileSystemObject");f=fso.OpenTextFile(fn,2,true);tn=document.all.length
jt='<HTML xmlns:v><HEAD><STYLE>v'+'\\:* {behavior:url(#default#VML)} body{margin:0} div{position:absolute;width:100;height:40;padding:1;text-align:center;font-family:arial;font-size:12;border:double 3 blue}</STYLE></HEAD><BODY>'
for(i=1;i<tn;i++){var el=document.all[i];nn=el.tagName
if(nn=='DIV'){jt=jt+el.outerHTML}
if(nn=='line'){jt=jt+'<v:line from='+el.from+' to='+el.to+'><v:stroke color='+el.strokeColor+' endArrow="block" /></v:line>'}}
jt=jt+'</BODY></HTML>'
f.write(jt);f.close()}
}
function dra(){tc=tt.length-1
for(i=tc;i>=0;i--){tsk[i]=document.body.appendChild(document.createElement('div'))
tsk[i].setAttribute("indx",i);ts=tt[i].split(',');k=ts.length;ps=ts[3]
for(j=4;j<k;j++){ps=ps+','+ts[j]};tsk[i].innerText=ts[0]+'\n'+ts[1]+'\n'+ts[2]
tsk[i].setAttribute('pdr',ps)}
tsk[0].style.left=50;tsk[0].style.top=50;ky=0
for(i=1;i<=tc;i++){ps=parseInt(tsk[i].getAttribute('pdr'))
tsk[i].style.left=120+parseInt(tsk[ps].style.left)
yy=parseInt(tsk[ps].style.top);if(ps==i-1){tsk[i].style.top=yy}
else{ky=ky+1;tsk[i].style.top=ky*60+yy}}
for(i=0;i<=tc;i++){tl=tsk[i].getAttribute("pdr")
if(tl!='m'){k=tl.search(',');zt=tl.split(',');n=zt.length
for(j=0;j<n;j++){hn=parseInt(zt[j]);jlin(hn,i)}}}
}
function jlin(hn,i)
{lc=lc+1;ex=parseInt(tsk[i].style.left);ey=20+parseInt(tsk[i].style.top)
sx=100+parseInt(tsk[hn].style.left);sy=20+parseInt(tsk[hn].style.top)
ln[lc]=document.body.appendChild(document.createElement("v:line"))
ln[lc].from=sx+','+sy;ln[lc].to=ex+','+ey
ln[lc].strokeColor='blue';ln[lc].stroke.endArrow='block'
ln[lc].setAttribute('bn',hn);ln[lc].setAttribute('fn',i)
}
</script>
</head>
<body style="margin:0;cursor:crosshair" onmousedown=mdn() onmousemove=mov() onclick=mup() onkeyup=kgp()>
</body>
<script>
/*
List the tasks as shown below and invoke the function dra()
Each task is a string with a minimum of 4 elements separated by commas;
the order of elements is: name, start date, end date and predecessors;
if there is no predecessor, use m.
Other Features are:
After the network is drawn, drag the tasks to alter the lay-out;
drag the tips of arrows to refine them.
Press C and click on an element to toggle its color to red/blue, for critical path;
color toggle is cancelled on dragging or pressing anyother key.
Press S to save the network diagram.
*/
tt[0]='Start,01-12-10,01-12-10,m'
tt[1]='EarthWks,01-12-10,31-03-11,0'
tt[2]='Pavement,15-12-10,30-04-11,1'
tt[3]='MiscWks,01-02-11,31-05-11,2'
tt[4]='Clvt Foun,01-12-10,15-12-10,0'
tt[5]='Clvt Str,16-12-10,31-12-10,4'
tt[6]='Bridge Fn,01-12-10,31-01-11,0'
tt[7]='Bridge Str,01-02-11,31-05-11,6'
tt[8]='Finish,31-05-11,31-05-11,3,5,7'
dra()
</script>
</html>
A network diagram ideally consists of non-overlapping boxes with non-intersecting connectors; the initial layout shall be capable of fine-tuning by moving the boxes and connector ends, coloring a part of the network, saving the diagram as a html file. A technique in scripting such a program is to define and use specific attributes for the elements in addition to their basic properties.
The above technique is demonstrated in the enclosed snippet made for PERT
network diagram used for a typical highway project construction. The required functions are in the <head> section and description & data are in the <script> section at the end.
CAUTION: The technique and program have been developed and used so far in IE only.
--------------
<html xmlns:v>
<head><style>
v\:* {behavior:url(#default#VML)}
div{position:absolute;width:100;height:40;padding:1;text-align:center;cursor:hand;background:#ffffff;
font-family:arial;font-size:12;border:double 3 blue}
</style>
<script>
var ele,jk,tc,lc,kk
tsk=Array(99);ln=Array(99)
var tt=Array()
tc=0;lc=0;jk=''
function mdn(){ele=window.event.srcElement;if(ele.tagName=='line')
{x=0.75*window.event.x;y=0.75*window.event.y;sx=x-ele.from.x;sy=y-ele.from.y
ex=x-ele.to.x;ey=y-ele.to.y;sd=Math.sqrt(sx*sx+sy*sy);ed=Math.sqrt(ex*ex+ey*ey);jk='s'
if(sd>ed)jk='e'}
}
function mov(){if(window.event.button==1){kk=0;x=document.body.scrollLeft+window.event.x;
y=document.body.scrollTop+window.event.y;nn=ele.tagName
switch(nn)
{case 'DIV':ele.style.left=x-50;ele.style.top=y-20;jk=ele.getAttribute("indx")
for(i=1;i<=lc;i++){ss=ln[i].getAttribute("bn");ee=ln[i].getAttribute("fn");xe=x-50;xs=x+50
if(ss==jk){ln[i].from=xs+','+y};if(ee==jk){ln[i].to=xe+','+y}}
case 'line':zz=x+','+y;if(jk=='e')ele.to=zz; else ele.from=zz}window.event.returnValue=false;}
}
function mup(){if(kk==67){nn=ele.tagName
switch (nn)
{case "line":ccl=ele.strokeColor;
if(ccl=='blue'){ele.strokeColor='red'}
else{ele.strokeColor='blue'}
case 'DIV':ccl=ele.style.borderColor
if(ccl=='red'){ele.style.borderColor='blue'}
else{ele.style.borderColor='red'}}}
}
function kgp(){kk=window.event.keyCode
if(kk==83){var fn=window.prompt("Full name of file, with htm extn","c:/1.htm");var fso,f
fso=new ActiveXObject("Scripting.FileSystemObject");f=fso.OpenTextFile(fn,2,true);tn=document.all.length
jt='<HTML xmlns:v><HEAD><STYLE>v'+'\\:* {behavior:url(#default#VML)} body{margin:0} div{position:absolute;width:100;height:40;padding:1;text-align:center;font-family:arial;font-size:12;border:double 3 blue}</STYLE></HEAD><BODY>'
for(i=1;i<tn;i++){var el=document.all[i];nn=el.tagName
if(nn=='DIV'){jt=jt+el.outerHTML}
if(nn=='line'){jt=jt+'<v:line from='+el.from+' to='+el.to+'><v:stroke color='+el.strokeColor+' endArrow="block" /></v:line>'}}
jt=jt+'</BODY></HTML>'
f.write(jt);f.close()}
}
function dra(){tc=tt.length-1
for(i=tc;i>=0;i--){tsk[i]=document.body.appendChild(document.createElement('div'))
tsk[i].setAttribute("indx",i);ts=tt[i].split(',');k=ts.length;ps=ts[3]
for(j=4;j<k;j++){ps=ps+','+ts[j]};tsk[i].innerText=ts[0]+'\n'+ts[1]+'\n'+ts[2]
tsk[i].setAttribute('pdr',ps)}
tsk[0].style.left=50;tsk[0].style.top=50;ky=0
for(i=1;i<=tc;i++){ps=parseInt(tsk[i].getAttribute('pdr'))
tsk[i].style.left=120+parseInt(tsk[ps].style.left)
yy=parseInt(tsk[ps].style.top);if(ps==i-1){tsk[i].style.top=yy}
else{ky=ky+1;tsk[i].style.top=ky*60+yy}}
for(i=0;i<=tc;i++){tl=tsk[i].getAttribute("pdr")
if(tl!='m'){k=tl.search(',');zt=tl.split(',');n=zt.length
for(j=0;j<n;j++){hn=parseInt(zt[j]);jlin(hn,i)}}}
}
function jlin(hn,i)
{lc=lc+1;ex=parseInt(tsk[i].style.left);ey=20+parseInt(tsk[i].style.top)
sx=100+parseInt(tsk[hn].style.left);sy=20+parseInt(tsk[hn].style.top)
ln[lc]=document.body.appendChild(document.createElement("v:line"))
ln[lc].from=sx+','+sy;ln[lc].to=ex+','+ey
ln[lc].strokeColor='blue';ln[lc].stroke.endArrow='block'
ln[lc].setAttribute('bn',hn);ln[lc].setAttribute('fn',i)
}
</script>
</head>
<body style="margin:0;cursor:crosshair" onmousedown=mdn() onmousemove=mov() onclick=mup() onkeyup=kgp()>
</body>
<script>
/*
List the tasks as shown below and invoke the function dra()
Each task is a string with a minimum of 4 elements separated by commas;
the order of elements is: name, start date, end date and predecessors;
if there is no predecessor, use m.
Other Features are:
After the network is drawn, drag the tasks to alter the lay-out;
drag the tips of arrows to refine them.
Press C and click on an element to toggle its color to red/blue, for critical path;
color toggle is cancelled on dragging or pressing anyother key.
Press S to save the network diagram.
*/
tt[0]='Start,01-12-10,01-12-10,m'
tt[1]='EarthWks,01-12-10,31-03-11,0'
tt[2]='Pavement,15-12-10,30-04-11,1'
tt[3]='MiscWks,01-02-11,31-05-11,2'
tt[4]='Clvt Foun,01-12-10,15-12-10,0'
tt[5]='Clvt Str,16-12-10,31-12-10,4'
tt[6]='Bridge Fn,01-12-10,31-01-11,0'
tt[7]='Bridge Str,01-02-11,31-05-11,6'
tt[8]='Finish,31-05-11,31-05-11,3,5,7'
dra()
</script>
</html>