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 3 of 3

Thread: memory leak?

  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts

    memory leak?

    New Question: I've created some buttons using css is there anyway I can make them point to a function on my Raphael canvas? I'm not sure that question even makes sense. I pretty much want to use the button in my html file to trigger an action that is expressed in the code in my .js file. I have no idea if that can even work. I've found things of this form:
    Code:
    <a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
    but I have no idea how to fill in the "doSomething()" part such that it executes my code. Do I need to move the code directly into the html file?


    I'm sure this is full of poor programming practices so I apologize in advance.

    The following code can be seen in action at math.antosca.com/polya.html

    My problem is that I want to clear the canvas and update the images(counter, dots, and paths) with new information but my buttons are within the raphael canvas so using the clear function does not work for me(or at least I'm not sure how to make it work). I'm currently having white squares hide the previous information and redrawing everything but this obviously bogs down the system since I'm just piling on more and more circles to keep track of.

    I tried to create buttons outside of the canvas but I can't seem to figure out how to make it work that the buttons will trigger actions within the canvas. Any help in figuring this out would be greatly appreciated!

    Code:
    window.onload = function() {
      var n = prompt("Please enter your desired size","10");
      var paper = new Raphael(document.getElementById('canvas_container'), 80*n, 80*n);
    	var square = paper.rect(10, 50, 70*n, 70*n);  
            square.attr({fill: '#FFFFFF', stroke: 'none'});
    	var hbox = paper.rect(5, 35, 20*n, 20*n);  
            hbox.attr({fill: '#FFFFFF', stroke: 'none'});
      //Draw Nodes array
      var nodes = [];
      for (var x = 0; x <= n; x++)
      {
        for (var y = 0; y < x; y++)
        {
          nodes[x]= new Array(y);
          var w = 50 + 5*n + 40*x;
          var h = 20 + 8*n + 20*(n-x) + 40*y;
          paper.circle(h, w, 10).attr({fill: '#FF0000'});
        } 
      } 
      //Establish counter matrix
      var counter = [];
      for ( var i = 0; i <= n; i++)
      {
          counter [i] = [];
          for ( var j = 0; j <= n; j++ )
          {
              counter[i][j] = 0;
          }
      }
    	//printable counter matrix
    	  var pcounter = [];
      for ( var p = 0; p <= n; p++)
      {
          pcounter [p] = [];
          for ( var q = 0; q <= n; q++ )
          {
              pcounter[p][q] = 0;
          }
      }
      // while counter[9][9]==0;
      i = 0;
      j = 0;
    	var butclk = 0;
    	
    	//next particle button
    		var button2 = paper.set();
        	var rect2 = paper.rect(75, 10, 113, 25);
        			rect2.attr({fill: '#9cf', stroke: 'none'});
        	var label2 = paper.text(131, 23, 'Next Particle')  
        			label2.attr({'font-size': 18});
    		button2.push(rect2, label2);
        button2.attr({cursor: "pointer"});
    		button2.click(function()
    		{
    		for(var k = 0; k < n; k++)
    			{
    			if ((butclk % n) == 0)
    			{
    			square.toFront();
    			for(i=0; i<n; i++)
    			{
    			   for (j=0; j<=i; j++)
    				 {
    				 var s = 90 + 5*n + 40*i;
          	 var t = 8*n + 20*(n-i) + 40*j;
    				 if(counter[i][j]== 0)
    				 {
    				 paper.circle(t, s, 10).attr({fill: '#FF0000'});
    				 }
    				 else if ((counter [i][j]-1)%(i+2)<(i+1-j))
    				 {
    				 paper.circle(t, s, 10).attr({fill: '#0000FF'});
    				 }
    				 else if ((counter[i][j]-1)%(i+2)<(i+2))
    				 {
    				 paper.circle(t, s, 10).attr({fill: '#FF0000'});
    				 }
    				 } 
    			}
    			j = 0;
    			i = 0;
    			} 
    			butclk += 1; 
    
          var s = 90 + 5*n + 40*i;
          var t = 8*n + 20*(n-i) + 40*j;
          if (counter [i][j]%(i+2)<(i+1-j))
          {
            paper.circle(t, s, 10).attr({fill: '#0000FF'});
            var left_string = "M " + t + "," + s + " l -20,40";
            var left = paper.path(left_string);
            left.attr({stroke:'#8B008B','stroke-width': 5});
            counter[i][j]+=1
              i+=1;
          }
          else if (counter[i][j]%(i+2)<(i+2))
          {
            paper.circle(t, s, 10).attr({fill: '#FF0000'});
    				var right_string = "M " + t + "," + s + " l 20,40";
            var right = paper.path(right_string);
            right.attr({stroke:'#8B008B','stroke-width': 5});
            counter[i][j]+=1
              i+=1;
            j+=1;
          }
    			}
    									
    			//show counter array
    			hbox.toFront();
    			for(p = 0; p < n; p++)
    			{
    			   for (q=0; q<=p; q++)
    				 {
    				pcounter[p][q]= counter[p][q];
    				pcounter[p][q].toString();
    				var count = paper.text(10 + 10*(n-p)+ 18*q, 50 + 18*p, pcounter[p][q]);
    				count.attr({'font-size': 15});
    				 }
    			}
    		}); 
        //next button
    		var button = paper.set();
        var rect = paper.rect(10, 10, 50, 25);
        		rect.attr({fill: '#9cf', stroke: 'none'});
        var label = paper.text(34, 23, 'Next')  
        		label.attr({'font-size': 18});
    		button.push(rect, label);
        button.attr({cursor: "pointer"});
        button.click(function() 
        {  
          if ((butclk % n) == 0)
    			{
    			square.toFront();
    			for(i=0; i<n; i++)
    			{
    			   for (j=0; j<=i; j++)
    				 {
    				 var s = 90 + 5*n + 40*i;
          	 var t = 8*n + 20*(n-i) + 40*j;
    				 if(counter[i][j]== 0)
    				 {
    				 paper.circle(t, s, 10).attr({fill: '#FF0000'});
    				 }
    				 else if ((counter [i][j]-1)%(i+2)<(i+1-j))
    				 {
    				 paper.circle(t, s, 10).attr({fill: '#0000FF'});
    				 }
    				 else if ((counter[i][j]-1)%(i+2)<(i+2))
    				 {
    				 paper.circle(t, s, 10).attr({fill: '#FF0000'});
    				 }
    				 } 
    			}
    			j = 0;
    			i = 0;
    			} 
    			butclk += 1; 
    
          var s = 90 + 5*n + 40*i;
          var t = 8*n + 20*(n-i) + 40*j;
          if (counter [i][j]%(i+2)<(i+1-j))
          {
            paper.circle(t, s, 10).attr({fill: '#0000FF'});
            var left_string = "M " + t + "," + s + " l -20,40";
            var left = paper.path(left_string);
            left.attr({stroke:'#8B008B','stroke-width': 5});
            counter[i][j]+=1
              i+=1;
          }
          else if (counter[i][j]%(i+2)<(i+2))
          {
            paper.circle(t, s, 10).attr({fill: '#FF0000'});
    				var right_string = "M " + t + "," + s + " l 20,40";
            var right = paper.path(right_string);
            right.attr({stroke:'#8B008B','stroke-width': 5});
            counter[i][j]+=1
              i+=1;
            j+=1;
          }
    						
    			//show counter array
    			hbox.toFront();
    			for(p = 0; p < n; p++)
    			{
    			   for (q=0; q<=p; q++)
    				 {
    				pcounter[p][q]= counter[p][q];
    				pcounter[p][q].toString();
    				var count = paper.text(10 + 10*(n-p)+ 18*q, 50 + 18*p, pcounter[p][q]);
    				count.attr({'font-size': 15});
    				 }
    			}
    
    			//  draw boxes to indicate particle exit pattern
              
    		});
    
    }
    Last edited by Kathya; 04-23-2013 at 10:50 PM. Reason: New question

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,217
    Thanks
    23
    Thanked 605 Times in 604 Posts
    The buttons do not do something inside of the canvas. They call on javascript functions that contain the code to do something inside of the canvas.
    I don't use the canvas, but this is how to write text to a div:
    Code:
    <!DOCTYPE html> 
    <html>
    <head>
    </head>
    <body>
    <div id="theplace"><br></div>
    <input type="button" onclick="MyJavascript();" value="Go">
    <script type="text/javascript">
    function MyJavascript(){
    	document.getElementById('theplace').innerHTML = 'You pushed the button';
    }
    </script>
    </body>
    </html>
    Does help?

    P.S. this is not a button. It's a anchor.
    <a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    I'm not at all sure what you are trying to do with the external buttons, but if we look at your internal "button2" which gets a label of "Next Particle", you can see where it invokes some code:
    Code:
    		button2.click(function()
    		{
      		    for(var k = 0; k < n; k++)
    			{
    			if ((butclk % n) == 0) ... etc ...
    So why couldn't you simply rewrite that as:
    Code:
    function myButton2Click( )
    {
        for(var k = 0; k < n; k++)
        {
            if ((butclk % n) == 0) ... etc ...
    And then you could have an external button as simple as:
    Code:
    <input type="button" value="Next Particle" onclick="myButton2Click();" />
    But your code to create the canvas and your code for the buttons and their processing is so mixed up together I'm not sure how easy it will be for you to pull it apart and make it more modular.
    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.


  •  

    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
    •