Search code examples
jsxgraph

Using jessiecode to update jsxgraph objects


I'm trying to use jessiecode to update canvas objects. Looks like I'm missing something here - fiddleboard.create('circle', [p1, 2.0],{visible:board.jc.snippet("counter < 5 || counter > 10", true, 'counter', false)}); and board.create('text',[1,1,board.jc.snippet(counter,true,'counter',false)]);

In this fiddle, the circle's visible property and text at 1,1 doesn't change on clicking button.


Solution

  • This is indeed a challenge! The main problem here is that JessieCode is not allowed to access JavaScript variables. This is by design: for security reasons access to the DOM has to be prevented.

    That means, counter has to be a JessieCode variable. Arbitrary JessieCode code can be executed with board.jc.parse("code").
    Here is the complete example see http://jsfiddle.net/a3x5de6t/4/:

    var board = JXG.JSXGraph.initBoard('jxgbox', {
        axis: true
    });
    
    // Set JessieCode variable `counter`
    board.jc.parse("counter = 0;");
    
    var p1 = board.create('point', [-2.0, 2.0]);
    
    // Create `function() {return (counter < 5 || counter > 10) ? true: false; }`
    var c1 = board.create('circle', [p1, 2.0],{visible: board.jc.snippet(
            "(counter < 5 || counter > 10) ? true: false", true, '', false)});
    
    // Increase JessieCode variable `counter`
    var button = board.create('button',[1, 4, 'increase counter',
        function() {
            board.jc.parse('counter = counter + 1;');
        }
    ]);
    
    // Create function `function() {return counter; }` 
    var t = board.create('text',[1, 1, board.jc.snippet('counter' , true, '', )]);
    

    Best wishes, Alfred