jayakodiu@yahoo.com Network Diagram Technique
The demo code could not be attached to my post; the same is given as below:
<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 language=vbs>
dim tt(99),tsk(99),ln(99)
dim ele,jk,tc,lc,kk
tc=0:lc=0:jk=""
sub dra()
tp=0
for i=0 to 99
if tt(i)="" then tc=i-1:exit for
set tsk(i)=document.body.appendChild(document.createElement("div"))
tsk(i).setAttribute "indx",i
ts=split(tt(i),","):k=ubound(ts):ps=ts(3)
tsk(i).innerText=ts(0)+vbcrlf+ts(1)+vbcrlf+ts(2)
for j=4 to k:ps=ps+","+ts(j):next
tsk(i).setAttribute "pdr",ps
next
tsk(0).style.left=50
tsk(0).style.top=50
y=0
for i=1 to tc
tl=tsk(i).getattribute("pdr")
tl=split(tl,",")
k=ubound(tl)
bb=cint(tl(0))
xb=tsk(bb).style.left
xb=cint(left(xb,len(xb)-2))
yb=tsk(bb).style.top
yb=cint(left(yb,len(yb)-2))
tsk(i).style.left=xb+120
if i=bb+1 then tsk(i).style.top=yb else y=y+1:tsk(i).style.top=50+y*70
for j=0 to k
hn=cint(tl(j))
jlin hn,i
next
next
end sub
sub jlin(hn,i)
lc=lc+1
ex=tsk(i).style.left
zz=tsk(i).style.top
ey=20+csng(left(zz,len(zz)-2))
zz=tsk(hn).style.left
sx=100+csng(left(zz,len(zz)-2))
zz=tsk(hn).style.top
sy=20+csng(left(zz,len(zz)-2))
set ln(lc)=document.body.appendchild(document.createelement("v:line"))
ln(lc).from=cstr(sx)+","+cstr(sy)
ln(lc).to=cstr(ex)+","+cstr(ey)
ln(lc).strokecolor="blue"
ln(lc).stroke.endarrow="block"
ln(lc).setattribute "bn",hn
ln(lc).setattribute "fn",i
end sub
sub mdn()
set ele=window.event.srcelement
if ele.tagname="line" then
x=window.event.x-1.5+document.body.scrollleft
y=window.event.y-1.5+document.body.scrolltop
set le=ele.from
dx=x-le.x*4/3
dy=y-le.y*4/3
sd=sqr(dx*dx+dy*dy)
set le=ele.to
dx=x-le.x*4/3
dy=y-le.y*4/3
ed=sqr(dx*dx+dy*dy)
jk="e"
if ed>=sd then jk="s"
end if
end sub
sub mov()
if window.event.button<>1 then exit sub
kk=0
window.event.returnvalue=false
x=window.event.x-1.5+document.body.scrollleft
y=window.event.y-1.5+document.body.scrolltop
nn= ele.tagname
select case nn
case "DIV"
ele.style.left=x-50
ele.style.top=y-20
jn=ele.getattribute("indx")
for i=1 to lc
ss=ln(i).getattribute("bn")
ee=ln(i).getattribute("fn")
if ss=jn then ln(i).from=cstr(x+50)+","+cstr(y)
if ee=jn then ln(i).to=cstr(x-50)+","+cstr(y)
next
case "line"
zz=cstr(x)+","+cstr(y)
if jk="s" then ele.from=zz
if jk="e" then ele.to=zz
end select
end sub
sub mup()
if kk=67 then
nn=ele.tagname
select case nn
case "line"
cc=ele.strokecolor
if cc="red" then ele.strokecolor="blue" else ele.strokecolor="red"
case "DIV"
cc=ele.style.bordercolor
if cc="red" then ele.style.bordercolor="blue" else ele.style.bordercolor="red"
end select
end if
end sub
sub kgp()
kk=window.event.keycode
if kk=83 then
fn=inputbox("Full name of file, with htm extn","JK","c:/1.htm")
set fso=CreateObject("Scripting.FileSystemObject")
set f=fso.CreateTextFile(fn):tn=document.all.length-1
set eel=document.all(0)
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 to tn
set el=document.all(i)
nn=el.tagname
zt=""
select case nn
case "DIV"
zt=el.outerHTML
case "line"
zt="<v:line from="+el.from+" "+"to="+el.to+"><v:stroke color="+el.strokecolor+" endarrow=block></v:stroke></v:line>"
end select
jt=jt+zt
next
jt=jt+"</BODY></HTML>"
f.Write jt
f.Close
end if
end sub
</script>
</head>
<body style="margin:0;cursor:crosshair" onmousedown=mdn() onmousemove=mov() onmouseup=mup() onkeyup=kgp()>
</body>
<script language=vbs>
'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)="Bridges,01-12-10,31-01-11,0"
tt(7)="Bridge1 Fn,01-02-11,31-05-11,6"
tt(8)="Bridge1 Str,01-02-11,31-05-11,7"
tt(9)="Bridge2 Fn,01-12-10,31-01-11,6"
tt(10)="Bridge2 Str,01-02-11,31-05-11,9"
tt(11)="Finish,31-05-11,31-05-11,3,5,8,10"
dra
</script>
</html>