extending jsxgraph objects

[yikes]

Hi
I would like to know, probably an example or two, the way to extend the objects in jsxgraph. For example, how can I extend a point to include some new method without modifying the source code?

Regards
agentyikes

[Alfred Wassermann]

You can add methods to objects for example like this:

    JXG.Point.prototype.msgBox() = function() {
         var txt = this.X() + this.Y();
         alert( txt );
    }

Then, if you create a point like
    var a = board.create('point',[1,2]);
you can call
    a.msgBox();

Of course you have to load the file containing this code after loading jsxgraphcore.js.
By the way, you can also change the internal JavaScript objects like String or Array in that way
(which is not a good idea in the most cases).

Best wishes,
Alfred

[yikes agent]

Hi Alfred,

Thanks for the example. I would also like to ask if I have created a point, say pt and a line le using the board.create command. I want to test whether the point pt lies on the line le.
Does the command le.hasPoint(pt.X(),pt.Y()) give me the result ?

agentyikes

--
You received this message because you are subscribed to the Google Groups "JSXGraph" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsxgraph+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

Mr Hilary Lai

(agentyikes)

Sent from my gmail account

[Alfred Wassermann]

Not quite, because hasPoint() wants screen coordinates as input parameters.
Therefore, you should define a method "point.isOn(line)" like this:
    JXG.Point.prototype.isOn = function(line) {
        return line.hasPoint(this.coords.scrCoords[1], this.coords.scrCoords[2]);
    };

But beware, the hasPoint-methods of JSXGraph use some sensitive are around the line which is optimized for
mouse and touch devices, i.e. hasPoint() gives not a mathematically correct result.
If you want to have an exact result (up to some numerical instability) you should use
the following method:

    JXG.Point.prototype.isOnExact = function(line) {
        var r = JXG.Math.innerProduct(this.coords.usrCoords, line.stdform, 3);
        return (Math.abs(r) < JXG.Math.eps);
    };

Now, it can be used like this:
       
    var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10]});
    var A = ...
    var B = ...
    var line = board.create('line', [A, B]);
    var po = board.create('point', [-7, 2]);
   
    board.on('update', function() {
        document.getElementById('out').innerHTML = po.isOnExact(line);
    });


Best wishes,
Alfred

[yikes agent]

Hi Alfred

I include jsxgraph as usual

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.97/jsxgraphcore.js"></script>


<link rel="stylesheet" type="text/css" href="jsxgraph.css" />

and a link to my js file of extending the jsxgraph point object as
<script type="text/javascript" src="jsxgraphext.js"></script

Inside the jsxgraphext.js, the code is like :
(function() {
    JXG.Point.prototype.msg = function() {
        alert("Hi there!");
    };   
})();

However, firebug flags Type error:
pt.msg() is not a function

I would like to place all extensions in a single js file.How can I fix it?

Regards

agentyikes

Best wishes,
Alfred

--
You received this message because you are subscribed to the Google Groups "JSXGraph" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsxgraph+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Alfred Wassermann]

This should work. I suppose there is some other small typo somewhere.
Just write an
alert("hello");
at the end of jsxgraphext.js to see if this file is executed correctly.
Best wishes,
Alfred