Slider.Value() is not working
55 views
Skip to first unread message
Raed Shorrosh
Nov 2, 2021, 2:45:38 AM11/2/21
to JSXGraph
Hi all
I am trying this code where I draw a horizontal line at certain height and continue a parabola after that. I am fixing the height using the variable leftY. It works fine. However, I wanted to be able to get the value of leftY from a slider value, like this
leftY=function(){return s.Value();}
but this is not working and even causes an error. I appreciate your help in this.
var topL = 16,
a = 4,
lineL = 8;
//-----------------------------------------------------------------------
JXG.Options.point.snapToGrid = true;
var board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-20, 20, 20, -20],
axis: false,
showCopyright: false
});
var s = board.create('slider',[[-10,-10],[-10,10],[-15,5,15]]);
//var leftY=function(){return s.Value();};
var leftY = 5;
var rightY = -10;
var f=function(x) {
return -(x - a) * (x - a) + topL;
};
var rg = function(x) {
return a + Math.sqrt(topL - x)
};
var lg = function(x) {
return a - Math.sqrt(topL - x)
};
var isless = function(x, y) {
return Object.is((x - y) % 1, -0)
};
var leftX2 = lg(leftY),
leftX1 = leftX2 - lineL,
rightX1 = rg(rightY),
rightX2 = rightX1 + lineL,
leftL = [
[leftX1, leftY],
[leftX2, leftY]
],
leftLH = [
[leftX1, leftY + 1],
[leftX2, leftY + 1]
],
rightL = [
[rightX1, rightY],
[rightX2, rightY]
],
rightLH = [
[rightX1, rightY + 1],
[rightX2, rightY + 1]
];
/*--------plotting the axis-------------------------------------*/
var y_axis = [
[leftX1, -16],
[leftX1, 16]
];
var x_axis = [
[leftX1 - 0.15, -16],
[18, -16]
];
/*----- plotting dotted lines*/
var dotted1 = [
[0, 0],
[0, 0]
],
dotted2 = [
[0, 0],
[0, 0]
],
dotted3 = [
[0, 0],
[0, 0]
];
if (isless(rightY, leftY)) {
dotted1 = [
[leftX2, leftY],
[2 * a - leftX2, leftY]
];
dotted2 = [
[leftX1, rightY],
[rightX1, rightY]
];
} else {
dotted1 = [
[2 * a - rightX1, rightY],
[rightX1, rightY]
];
dotted2 = [
[leftX2, leftY],
[rightX2, leftY]
];
}
dotted3 = [
[a, topL],
[rightX2, topL]
];
//
var leftLine = board.create('segment', leftL, {
fixed: true
}),
leftLineH = board.create('segment', leftLH, {
fixed: true,
strokeWidth: 0,
highlightStrokeWidth: 0
}),
rightLine = board.create('segment', rightL, {
fixed: true
}),
rightLineH = board.create('segment', rightLH, {
fixed: true,
strokeWidth: 0,
highlightStrokeWidth: 0
});
var dotted_1 = board.create('segment', dotted1, {
fixed: true,
dash: 2
}),
dotted_2 = board.create('segment', dotted2, {
fixed: true,
dash: 2
}),
dotted_3 = board.create('segment', dotted3, {
fixed: true,
dash: 2
});
board.create('functiongraph', [f, leftX2, rightX1]);
//draw the axis
board.create('arrow', y_axis, {
strokeColor: 'black',
strokeWidth: 3,
fixed: true
});
board.create('arrow', x_axis, {
strokeColor: 'black',
strokeWidth: 3,
fixed: true
});
board.update();
Alfred Wassermann
Nov 2, 2021, 4:45:41 AM11/2/21
to JSXGraph
The problem with the code is that functions are evaluated too early.
If a JSXGraph object is defined by a dynamic value, i.e. a function,
the function is called after dragging the slider. That is, all information must
be contained in the function. I tried to fix your example, see it live at https://jsfiddle.net/a2he5rsL/2/.
I'm not sure, if the fix is complete, but it should be easy to continue.
Here is the code:
var topL = 16,
a = 4,
lineL = 8;
JXG.Options.point.snapToGrid = true;
var board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-20, 20, 20, -20],
axis: false,
showCopyright: false
});
var s = board.create('slider',[[-10,-10],[-10,10],[-15,5,15]]);
//var leftY = 5;
var leftY = function() { return s.Value(); };
var rightY = -10;
var f=function(x) {
return -(x - a) * (x - a) + topL;
};
var rg = function(x) {
return a + Math.sqrt(topL - x)
};
var lg = function(x) {
return a - Math.sqrt(topL - x)
};
var isless = function(x, y) {
return Object.is((x - y) % 1, -0)
};
var leftX2 = function() { return lg(leftY()); },
leftX1 = function() { return leftX2() - lineL; },
rightX1 = function() { return rg(rightY); },
rightX2 = function() { return rightX1() + lineL; },
leftL = [
[leftX1, leftY],
[leftX2, leftY]
],
leftLH = [
[leftX1, function() { return leftY() + 1; }],
[leftX2, function() { return leftY() + 1; }]
],
rightL = [
[rightX1, rightY],
[rightX2, rightY]
],
rightLH = [
[rightX1, rightY + 1],
[rightX2, rightY + 1]
];
/*--------plotting the axis-------------------------------------*/
var y_axis = [
[leftX1, -16],
[leftX1, 16]
];
var x_axis = [
[function() { return leftX1() - 0.15; }, -16],
[18, -16]
];
/*----- plotting dotted lines*/
var dotted1 = [
[0, 0],
[0, 0]
],
dotted2 = [
[0, 0],
[0, 0]
],
dotted3 = [
[0, 0],
[0, 0]
];
//if (isless(rightY, leftY)) {
dotted1 = [
[
function() {
if (rightY < leftY()) {
return leftX2();
} else {
return 2 * a - rightX1();
}
},
function() {
if (rightY < leftY()) {
return leftY();
} else {
return rightY;
}
}
],
[function() {
if (rightY < leftY()) {
return 2 * a - leftX2();
} else {
return rightX1();
}
},
leftY]
];
dotted2 = [
[
function() {
if (rightY < leftY()) {
return leftX1();
} else {
return leftX2();
}
},
function() {
if (rightY < leftY()) {
return rightY;
} else {
return leftY();
}
}
],
[
function() {
if (rightY < leftY()) {
return rightX1();
} else {
return rightX2();
}
},
function() {
if (rightY < leftY()) {
return rightY;
} else {
return leftY();
}
}
]
];
dotted3 = [
[a, topL],
[rightX2, topL]
];
//
var leftLine = board.create('segment', [
[leftX1, leftY], [leftX2, leftY]
], {
fixed: true
}),
leftLineH = board.create('segment', leftLH, {
fixed: true,
strokeWidth: 0,
highlightStrokeWidth: 0
}),
rightLine = board.create('segment', rightL, {
fixed: true
}),
rightLineH = board.create('segment', rightLH, {
fixed: true,
strokeWidth: 0,
highlightStrokeWidth: 0
});
var dotted_1 = board.create('segment', [
[leftX2, leftY],
[function() { return 2 * a - leftX2(); }, leftY]
], {
fixed: true,
dash: 2
}),
dotted_2 = board.create('segment', dotted2, {
fixed: true,
dash: 2
}),
dotted_3 = board.create('segment', dotted3, {
fixed: true,
dash: 2
});
board.create('functiongraph', [f, leftX2, rightX1]);
//draw the axis
board.create('arrow', y_axis, {
strokeColor: 'black',
strokeWidth: 3,
fixed: true
});
board.create('arrow', x_axis, {
strokeColor: 'black',
strokeWidth: 3,
fixed: true
});
board.update();
Best wishes,
Alfred
Raed Shorrosh
Nov 8, 2021, 1:40:23 AM11/8/21
to JSXGraph
Thank you
Reply all
Reply to author
Forward
0 new messages