Sliders
39 views
Skip to first unread message
Cyrille Piatecki
Oct 2, 2021, 4:23:22 AM10/2/21
to JSXGraph
Dear Jsxgraphers,
I would like to know how to use Latex (Computer modern) in the displayed values of a slider. Also, I don't know how to use only integer in this context (it seems weird touse Integer values for the slider displayed as reals). I need also to change the size of the font.
I have the same problem when I define a button. I do not know how to change the font
(it could be that the button displays a mathematical formula), how to cahnge the differrents colors (font, border, back ground)...
Thanks in advance for your help
Alfred Wassermann
Oct 4, 2021, 6:01:05 AM10/4/21
to JSXGraph
You have to us MathJax (or KaTeX) for texts elements. Here is an example:
Add MathJax:
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>
JSXGraph code:
JXG.Options.text.useMathjax = true;
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
snapWidth: 1,
precision: 0, // digits
suffixlabel:'\\(t_1=\\)',
unitLabel: ' \\(\\text{ ms}\\)'
}),
func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
text1 = board.create('text', [5, 1, function(){
return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)';
}], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false});
unitLabel: ' \\(\\text{ ms}\\)'
}),
func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
text1 = board.create('text', [5, 1, function(){
return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)';
}], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false});
For styling of buttons the most flexible approach is to set the attribute CssClass since buttons are the usual html buttons.
board.create('button' , [...], {CssClass: 'mybutton'});
Best wishes,
Alfred
Murray
Oct 13, 2021, 2:59:36 AM10/13/21
to JSXGraph
Hello Cyrille
If you are already using MathJax (or KaTeX) on your page, Alfred's suggestion is appropriate.
But if you are not, it's probably overkill, depending on the complexity of what you want to put on your sliders.
On the following page, I indicate with examples how things can look by just making use of the KaTex fonts, rather than loading the whole KaTeX library. Just using the fonts makes the page load faster and uses up less bandwidth.
On this next page you can see examples of how I'm using Computer modern in an SVG grapher (it's not JSXGraph, it's one I cobbled together from various places). I actually do load KaTeX on this page (for ease of typing), but I didn't need to.)
Reply all
Reply to author
Forward
0 new messages