Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Network Diagram Technique

    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.
    --------------

    [I]<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.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>

  • #2
    New Coder
    Join Date
    Sep 2010
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    jayakodiu@yahoo.com

    Network Diagram Technique:

    The demo code to my post was not properly pasted from notepad; the demo file is now added as a zip file.
    Attached Files Attached Files


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •