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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Location
    Lexington MA
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Interactive Graphics

    I need help with my project. First some background about me. I am basically a Visual Studio/ASP.net developer with a little javascript.

    My new project involves graphics. I need to draw a circle and have several lines going from the middle to the edge (radius). This is the part I know how to do. The next part is the part I don’t know how to do and would appreciate help. The users need the ability to grab the lines with their mouse and move them. For example if a line is pointing to the 90 degree mark, they might want to grab it and move it to the 45 degree mark. This will affect calculations that will display elsewhere on the page.

    I've been advise in another forum that JavaScript is the way to solve this. Ideally I'd like a solution that integrates JavaScript with asp.net. The problem is I'm almost a novice at JavaScript and this is a very complex problem. It would help if someone could show me an example that is similar to what I need. Any other advise would also be appreciated.

    Regards,

    Bob Avallone

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    If you didn't create the graphics with JS coding--if you used the ASP.NET graphics library to create images that you just then plunked on the page--then you have to start all over.

    You aren't going to be able to animate those images.

    Anyway, start with...what else?...google:
    http://www.google.com/search?hl=en&q...+in+javascript

    Walter Zorn's library is indeed probably the most used in this area.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Here's a canvas solution.

    http://people.mozilla.com/~jdicarlo/piemenus.html

    This is similar to what you ask for. You should be able to pick out what you need.
    Sounds like you just need to make some mouse funtions and pass and object as the point to draw the line to.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    Yeah, a better solution. Won't work in MSIE (maybe in 8, but certainly not before that version), if that matters.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by Old Pedant View Post
    Yeah, a better solution. Won't work in MSIE (maybe in 8, but certainly not before that version), if that matters.
    excanvas.js is all you need.

    the IE I use for testing is version 7 but it works on several scripts I've created.
    http://www.hardwoodfloorspdx.com/mis...ithSpline.html
    Here's a canvas histogram with a spline graph option.
    Click on the spline button. Also click on the canvas and the the interactive window displays the graph X and Y values with titles. It's messed up in Opera for some reason, but works awesome in FF and Chrome. I have to pick at it one of these days.

    This has the mouse functions you need for IE also.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    Very nice. How well does it perform???

    Recall, he wants to do actively moving graphics, following the mouse.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #tst {
      position:absolute;left:100px;top:100px;width:200px;height:200px;border:solid black 1px;
    }
    
    .dot1 {
      position:absolute;width:2px;height:2px;background-Color:red;
    }
    
    .dot2 {
      position:absolute;width:5px;height:5px;background-Color:blue;
    }
    
    .dot3 {
      position:absolute;width:1px;height:1px;background-Color:black;
    }
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // by Vic Phillips (28-January-2010)
    // http://www.vicsjavascripts.org.uk/
    
    function zxcAngleGraphic(o){
     obj=document.getElementById(o.ID);
     this.obj=obj;
     this.rad=o.Radius;
     var cary=zxcCircum(this.rad);
     zxcElipseBorder(obj,cary,o.ClassName);
     this.marks=[];
     this.lines=[];
     this.mark=false;
     this.addevt(document,'mousemove','Move');
     this.addevt(document,'mouseup','MseUp');
     return this;
    }
    
    zxcAngleGraphic.prototype.AddMark=function(o){
     var deg=o.Angle-90,r=Math.PI/180,dot=zxcES('DIV',{position:'absolute',cursor:'move'},this.obj);
     dot.className=o.MarkClassName;
     var ary=this.MarkPos(dot,o.Angle);
     this.addevt(dot,'mousedown','MseDown',this.marks.length);
     this.marks.push(dot);
     this.lines.push(zxcLine(this.obj,[this.rad,this.rad],ary,o.LineClassName));
    }
    
    zxcAngleGraphic.prototype.MarkPos=function(dot,deg){
     deg-=90;
     var r=Math.PI/180,ary=[Math.floor(this.rad*Math.cos(deg*r)+this.rad),Math.floor(this.rad*Math.sin(deg*r)+this.rad)];
     zxcES(dot,{left:ary[0]-dot.offsetWidth/2+'px',top:ary[1]-dot.offsetHeight/2+'px'});
     return ary;
    }
    
    zxcAngleGraphic.prototype.MseDown=function(e,nu){
     this.pos=zxcPos(this.obj);
     this.line=this.lines[nu];
     this.mark=this.marks[nu];
    
    }
    
    zxcAngleGraphic.prototype.Move=function(e){
     if (this.mark){
      var mse=zxcMse(e),x=this.pos[0]+100-mse[0],y=this.pos[1]+100-mse[1],a,c,os;
      if (x<0&&y>0){
       a=-x,c=y,os=0;
      }
      else if (x<0&&y<0){
       a=-x,c=-y,os=90;
      }
      else if (x>0&&y<0){
       a=x,c=-y,os=180;
      }
      else if (x>0&&y>0){
       a=x,c=y,os=270;
      }
      var b=Math.sqrt(a*a+c*c-(2*a*c*Math.cos(90*Math.PI/180)));
      var A=Math.acos((b*b+c*c-a*a)/(2*b*c))*180/Math.PI;
      var C=Math.acos((a*a+b*b-c*c)/(2*a*b))*180/Math.PI;
      if (os==0||os==180){
       this.MarkPos(this.mark,A+os);
      }
      else if (os==90||os==270){
       this.MarkPos(this.mark,C+os);
      }
      this.Line();
     }
    }
    
    zxcAngleGraphic.prototype.MseUp=function(e){
     if (this.mark){
      this.mark=false;
     }
    }
    
    zxcAngleGraphic.prototype.Line=function(){
     var w=this.mark.offsetLeft-this.rad,h=this.mark.offsetTop-this.rad,hyp=Math.sqrt(w*w+h*h),xr=w/hyp,yr=h/hyp,max=Math.max(hyp,this.line.length);
     for (var z0=0;z0<max;z0++){
      if (this.line[z0]){
       zxcES(this.line[z0],{left:z0*xr+'px',top:z0*yr+'px'});
      }
     }
    }
    
    zxcAngleGraphic.prototype.addevt=function(o,t,f,p){
     var oop=this;
     if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
     else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     else {
      var prev=o['on'+t];
      if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
      else o['on'+t]=o[f];
     }
    }
    
    
    function zxcElipseBorder(obj,ary,cls){
     for (var cary=[ary[0]],dy,z0=1;z0<ary.length;z0++){
      cary.push(ary[z0]);
      dy=Math.abs(ary[z0-1][1]-ary[z0][1]);
      for (var z0a=1;z0a<dy;z0a++) cary.push([ary[z0-1][0],ary[z0-1][1]+((ary[z0-1][1]<ary[z0][1])?z0a:-z0a)]);
     }
     for (var z1=0;z1<cary.length;z1++){
      var dot=zxcES('DIV',{position:'absolute'},obj);
      dot.className=cls;
      zxcES(dot,{left:cary[z1][0]-dot.offsetWidth/2+'px',top:cary[z1][1]-dot.offsetHeight/2+'px'});
     }
    }
    
    function zxcCircum(rad){
     for (var r=Math.PI/180,ary=[],z0=-90;z0<271;z0++){
      ary[ary.length]=[Math.floor(rad*Math.cos(z0*r)+rad),Math.floor(rad*Math.sin(z0*r)+rad),z0+90];
     }
     for (var cary=[ary[0]],z1=1;z1<ary.length;z1++){
      for (var z1a=1;z1a<Math.abs(ary[z1-1][0]-ary[z1][0]);z1a++){
       cary.push([ary[z1-1][0]+((ary[z1-1][0]<ary[z1][0])?z1a:-z1a),ary[z1-1][1],ary[z1-1][2]]);
      }
      cary.push(ary[z1]);
     }
     return cary;
    }
    
    function zxcES(ele,style,par,txt){
     if (typeof(ele)=='string') ele=document.createElement(ele);
     for (key in style) ele.style[key]=style[key];
     if (par) par.appendChild(ele);
     if (txt) ele.appendChild(document.createTextNode(txt));
     return ele;
    }
    
    function zxcLine(obj,srt,fin,cls,opc){
     if (cls){
      var line=zxcES('DIV',{position:'absolute'},this.obj);
      line.className=cls;
      zxcES(line,{left:srt[0]+'px',top:srt[1]+'px'});
     }
     var w=fin[0]-srt[0],h=fin[1]-srt[1],hyp=Math.sqrt(w*w+h*h),xr=w/hyp,yr=h/hyp;
     for (var ary=[],z0=0;z0<hyp;z0++){
      if (cls){
       ary.push(zxcES(line.cloneNode(false),{left:z0*xr+'px',top:z0*yr+'px'},line));
      }
     }
     return ary;
    }
    
    
    function zxcMse(ev){
     if(!ev) var ev=window.event;
     if (document.all) return [ev.clientX+zxcDocS()[0],ev.clientY+zxcDocS()[1]];
     return [ev.pageX,ev.pageY];
    }
    
    function zxcDocS(){
     if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.scrollLeft,document.body.scrollTop];
    }
    
    
    function zxcPos(obj){
     var rtn=[0,0];
     while(obj){
      rtn[0]+=obj.offsetLeft;
      rtn[1]+=obj.offsetTop;
      obj=obj.offsetParent;
     }
     return rtn;
    }
    
    
    /*]]>*/
    </script></head>
    
    <body>
    <div id="tst" ></div>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    var oop=new zxcAngleGraphic({
     ID:'tst',
     Radius:100,
     ClassName:'dot1'
    });
    
    oop.AddMark({
     Angle:60,
     MarkClassName:'dot2',
     LineClassName:'dot3'
    });
    
    oop.AddMark({
     Angle:260,
     MarkClassName:'dot2',
     LineClassName:'dot3'
    });
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • The Following 2 Users Say Thank You to vwphillips For This Useful Post:

    newbie01_01 (02-04-2010), TinyScript (01-28-2010)

  • #8
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    That's awesome, Vic.

  • #9
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    http://beradrian.wordpress.com/2009/...s-on-a-circle/


    I came across this page yesterday and it was really close to what the OP asked for here so I tried a really quick test and it worked. I haven't figured out a good solution to move the green dot yet. I mean, I can easily make it move, but I need to not move the blue dot at the same time. I always get stuck here when trying not to have all kinds of booleans to control everything. What's a good way to make the objects draggable?
    Code:
    <html>
    <head> <script src="excanvas.js"></script>
    
    <script>
    
    var mouse={x:0,y:0}, p0 = {x: 350, y: 200}, p1={x: 300, y: 250}, center = {x: 200, y: 200}, draw=false;  
    function mousemove(e,elm){!e ? mouse.x= event.clientX-elm.offsetLeft : mouse.x= e.pageX-elm.offsetLeft; !e?mouse.y=event.clientY-elm.offsetTop:mouse.y=e.pageY-elm.offsetTop; calculateAngle() }
    function calculateAngle() {
    var canmovep1=(Math.abs(mouse.x-p1.x )<= 20 && Math.abs(mouse.y-p1.y )<= 20)
    
     if(canmovep1&&draw==true){ p1 = {x: mouse.x, y: mouse.y}}
        
    var radius = Math.min(Math.max(Math.abs(p1.y - center.y) , Math.abs(p1.x - center.x)),Math.max(Math.abs(p0.y - center.y ), Math.abs(p0.x - center.x)))
    var angle =  Math.atan2(p1.y - center.y, p1.x - center.x);
    var canvas = document.getElementById("canvas");
    if (canvas.getContext == null) return;
    var ctx = canvas.getContext("2d");
    
    canvas.onmousedown=function(e){draw=true}
    canvas.onmouseup=function(e){draw=false}
    canvas.onmouseout=function(e){draw=false}
    canvas.onmousemove=function(e){if(draw==true) mousemove(e,this)}
        
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(center.x, center.y);
    ctx.arc(center.x, center.y, radius,   0, angle , false);
    ctx.moveTo(center.x, center.y);
    ctx.lineTo(p1.x, p1.y);
    ctx.closePath();
    ctx.fillStyle = "purple";
    ctx.globalAlpha=.2
    ctx.fill();
    ctx.globalAlpha=1
            
        ctx.fillStyle = "red";
        ctx.beginPath();
        ctx.arc(center.x, center.y, 5, 0, 2 * Math.PI, true);
        ctx.fill();
    
        ctx.fillStyle = "blue";
        ctx.beginPath();
        ctx.arc(p1.x, p1.y, 5, 0, 2 * Math.PI, true);
        ctx.fill();
    
        ctx.fillStyle = "green";
        ctx.beginPath();
        ctx.arc(p0.x, p0.y, 5, 0, 2 * Math.PI, true);
        ctx.fill();
    
    }
        </script>
    </head>
    <body onload="calculateAngle()">
    <canvas id="canvas" width="400" height="400"></canvas>
    </body>
    </html>
    Last edited by TinyScript; 01-30-2010 at 04:41 AM.

  • Users who have thanked TinyScript for this post:

    newbie01_01 (02-04-2010)

  • #10
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi TnyScript and vwphillips,

    What an awesome example !!!

    Are you guys engineers or just really genius on graphs !!!


  •  

    Tags for this Thread

    Posting Permissions

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