many problems with Jsxgraph

[Cyrille Piatecki]

I find Jsxgraph wonderfull and perfectly adapted to what I want. I use Sagemath normaly by in waht concerns interactions it is overpassed by Jsxgraph.

Nevertheless I find the documentation complex and not always clear and some functions are not clear. For instance :

1) Tangency is a degenerate intersection. So when I try to construct the intersection of an hyperbola and a line which is neither horizontal neither vertical I have no problem to find two intersections. But if I deplace the line until the two intersections collapse in one, it disapears (A friend find that just at that very moment the value becomes NaN).

2) I have some options which do not works. I just have discovered they need options.js. Is this file used by default ? I do not believe so and I do not know how to load it.

3) For the slider, when what I am designing is a theoretical subject I do not need that the value be displayed. So can I obtain the Jsxgraph doesn't display the value of the slider.

4) When I want  a latex argument for the slider I cannot position it wher I want and the value is not latex displayed.

5) How can I change the increments of the slider to be sure that a certain value is displayed ?

5) Is there a way to change the colors of the slider ?

6) I cannot rotate a Latex text.

7) How to construct a button ON/OFF (right now I us  a button ON and a button OFF) ?

I know I should have written a question by subject...

 

If some one could answer

[Murray]

Hello Cyrille

I'm not one of the JSXGraph developers, but I'll help as much as I can.

(1) I'm not sure what you mean by "the two intersections collapse in one". In this fiddle, when the tangent is vertical, it behaves properly and doesn't disappear. https://jsfiddle.net/mbourne/mwp64h3r/ 

This next one has 2 tangents (I'm trying to see what you mean), but it also behaves well: https://jsfiddle.net/mbourne/ks5L8ryb/

(2) I'm not sure how JSXGraph applies options.js, so I will leave that to Alfred to respond to. In general, my understanding is JSXGraph makes use of the defaults in options.js, and the developer can change those by setting options when creating elements.

(3) To make the value invisible, you just add withLabel: false when creating the slider.

var n = brd.create('slider',[[0.1,1.4],[1.1,1.4],[3,3,20]],{name:'n', snapWidth:1, withLabel:false});

See it in action here: 

https://jsfiddle.net/mbourne/0qLzxkh3/

(4) Presumably you are using MathJax to display your LaTeX? Are you following the steps in this page? https://jsxgraph.uni-bayreuth.de/wiki/index.php/Using_MathJax (The MathJax part was really slow for me when I looked at this page just now and the fonts didn't load properly. Use the CDN version of MathJax.)

If you can create a fiddle with what you have tried it would be better - we can take a look at why it's not working.

(5a) The answer to the increments for a slide is given in my answer (3). "snapWidth" is what you need.

(5b) I recall there is some syntax for changing slider colours, but I couldn't find it.

Here is one way to do it. I got the required IDs via the DOM inspector. (This is dangerous as the IDs could change when you add other elements - it's just to show you one way it could be done.)

// This changes the initial circle and segment colours:

document.getElementById("jxgbox_jxgBoard1L19").setAttribute("stroke", "#f0f");

document.getElementById("jxgbox_jxgBoard1L21").setAttribute("stroke", "#f0f");

// This changes the colors as you drag the slider (otherwise, they just go back to being black)

n.on("drag", function() {

  document.getElementById("jxgbox_jxgBoard1L19").setAttribute("stroke", "#f0f");

  document.getElementById("jxgbox_jxgBoard1L21").setAttribute("stroke", "#f0f")

});

You can see it in action here:

https://jsfiddle.net/mbourne/79na1jxz/

The highlight colours still default to black. I'll leave that as an exercise for the reader :-)

(6) This appears to be related to (4).

(7) My advise is to put your radio button (for on-off) outside of the JSXGraph construction (that is, next to the graph but using normal HTML). It's usually neatest, especially if the user wants to zoom in-out on the graph (whereby any buttons or other interactive elements can disappear).

I hope it helps

Regards

Murray

[Alfred Wassermann]

Dear Cyrille,

Here are my takes on some of your interesting question:

1) It may be that there are some numerical problems for certain constellations. Please, send us an example.

2) yes, options.js is contained in jsxgraphcore.js. You may overwrite them by setting e.g.  JXG.Options.point.strokeColor = 'blue' before initialising the board.

5) Here is an example for setting colors of a slider with JSXGraph, see https://jsfiddle.net/jeb1hk4u/1/

    var sl = board.create('slider', [[-3, 1], [1, 1], [-10, 1, 10]], {

    baseline: { strokeColor: 'blue'},
    highline: { strokeColor: 'red'},
  fillColor: 'yellow',
  label: {fontSize: 24, strokeColor: 'orange'},
  name: 'xyz', // Not shown, if suffixLabel is set
  suffixLabel: 'x = ',
  postLabel: ' u'

});
6) See my answer https://stackoverflow.com/questions/67540928/jsxgraph-rotation-and-latex-text/67570737#67570737 (just mentioning this for other readers)

7) Murray already recommended external buttons. Here is the implementation of a toggle button in JSXGraph, an external button would be quite similar.

A live demo is also at https://jsfiddle.net/jeb1hk4u/1/

var butt = board.create('button', [-2, -2, 'Off', function() {
  var txt;
  butt.value = !butt.value;
  if (butt.value) {
      txt = 'On';
  } else {
      txt = 'Off';
  }
    butt.rendNodeButton.innerHTML = txt;
}]);

// Set initial value for the button
if (!JXG.exists(butt.value)) {
    butt.value = false;
}

var p = board.create('point', [2, -2], {
    visible: () => butt.value
});

Hope that helps a little bit and thank you for the nice words about JSXGraph. This is always motivating,

Alfred