<iframe src="https://jsxgraph.org/share/iframe/3d-curve-assessment" style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" name="JSXGraph example: 3D – curve (assessment)" allowfullscreen ></iframe>
<h4>From circle to sine, cosine and beyond</h4> Adopt slider AZ from \(\pi\) to \(\frac{\pi}{2}\) and then EL from \(0\) to \(-\frac{\pi}{2}\). Then change the view as desired. <div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; "> <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div> </div> <h4>Result</h4> [<span id="outputID">Change JSXGraph construction.</span>] <script type = "text/javascript"> /* This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License. https://creativecommons.org/licenses/by-sa/4.0/ Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits. */ const BOARDID = 'board-0'; // input data let input = { 'coordinates': { '-x': -3, '+x': 3, '-y': -3, '+y': 3, '-z': -3, '+z': 3 }, 'view': { 'projection': 'parallel', 'trackball': true, 'controls': true, 'azimuth': Math.PI, 'elevation': 0}, 'axis': { 'x': true, 'y': true, 'z': true, 'position': 'center'}, 'planeRear': { 'x': true, 'y': true, 'z': true, 'axis': false, 'border': 3, 'mesh': true, 'color': '#dddddd'}, 'planeFront': { 'x': true, 'y': true, 'z': true, 'axis': false, 'border': 3, 'mesh': false, 'color': 'none'} }; // JSXGraph board let board = JXG.JSXGraph.initBoard(BOARDID, boardAttr()); // JSXGraph 3D view let view = initBoard3D(board); // JSXGraph construction let a = board.create('slider', [[9, -5], [9, 5], [0, 1, 4]], { name: 'a', ...(sliderAttr()), ...(elAttr()) }); let curve = view.create('curve3d', [ (t) => (a.Value() * Math.sin(t)), (t) => t, (t) => (a.Value() * Math.cos(t)), [-Math.PI, Math.PI] ], { strokeWidth: 2, dash: 0 }); let circle = view.create('curve3d', [ (t) => (a.Value() * Math.sin(t)), (t) => 0, (t) => (a.Value() * Math.cos(t)), [-Math.PI, Math.PI] ], { strokeWidth: 2, dash: 2 }); // Controls function initBoard3D(b) { let sliderA = sliderAttr(); let elA = elAttr(); let v = b.create('view3d', [[-5, -4], [10, 10], [[input['coordinates']['-x'], input['coordinates']['+x']], [input['coordinates']['-y'], input['coordinates']['+y']], [input['coordinates']['-z'], input['coordinates']['+z']]]], { projection: input['view']['projection'], trackball: { enabled: input['view']['trackball'] }, // Main axes axesPosition: input['axis']['position'], xAxis: {visible: input['axis']['x'], strokeColor: '#888888', strokeWidth: 2}, yAxis: {visible: input['axis']['y'], strokeColor: '#888888', strokeWidth: 2}, zAxis: {visible: input['axis']['z'], strokeColor: '#888888', strokeWidth: 2}, // Planes xPlaneRear: { visible: input['planeRear']['x'] | input['planeRear']['border'], strokeColor: '#dddddd', strokeWidth: input['planeRear']['border'], mesh3d: {visible: input['planeRear']['x'] & input['planeRear']['mesh']}, fillColor: input['planeRear']['x'] ? input['planeRear']['color'] : 'none' }, yPlaneRear: { visible: input['planeRear']['y'] | input['planeRear']['border'], strokeColor: '#dddddd', strokeWidth: input['planeRear']['border'], mesh3d: {visible: input['planeRear']['y'] & input['planeRear']['mesh']}, fillColor: input['planeRear']['y'] ? input['planeRear']['color'] : 'none' }, zPlaneRear: { visible: input['planeRear']['z'] | input['planeRear']['border'], strokeColor: '#dddddd', strokeWidth: input['planeRear']['border'], mesh3d: {visible: input['planeRear']['z'] & input['planeRear']['mesh']}, fillColor: input['planeRear']['z'] ? input['planeRear']['color'] : 'none' }, xPlaneFront: { visible: input['planeFront']['x'] | input['planeFront']['border'], strokeColor: '#dddddd', strokeWidth: input['planeFront']['border'], mesh3d: {visible: input['planeFront']['x'] & input['planeFront']['mesh']}, fillColor: input['planeFront']['x'] ? input['planeFront']['color'] : 'none' }, yPlaneFront: { visible: input['planeFront']['y'] | input['planeFront']['border'], strokeColor: '#dddddd', strokeWidth: input['planeFront']['border'], mesh3d: {visible: input['planeFront']['y'] & input['planeFront']['mesh']}, fillColor: input['planeFront']['y'] ? input['planeFront']['color'] : 'none' }, zPlaneFront: { visible: input['planeFront']['z'] | input['planeFront']['border'], strokeColor: '#dddddd', strokeWidth: input['planeFront']['border'], mesh3d: {visible: input['planeFront']['z'] & input['planeFront']['mesh']}, fillColor: input['planeFront']['z'] ? input['planeFront']['color'] : 'none' }, // Axes on planes xPlaneRearYAxis: {visible: input['planeRear']['x'] & input['planeRear']['axis']}, xPlaneRearZAxis: {visible: input['planeRear']['x'] & input['planeRear']['axis']}, yPlaneRearXAxis: {visible: input['planeRear']['y'] & input['planeRear']['axis']}, yPlaneRearZAxis: {visible: input['planeRear']['y'] & input['planeRear']['axis']}, zPlaneRearXAxis: {visible: input['planeRear']['z'] & input['planeRear']['axis']}, zPlaneRearYAxis: {visible: input['planeRear']['z'] & input['planeRear']['axis']}, xPlaneFrontYAxis: {visible: input['planeFront']['x'] & input['planeFront']['axis']}, xPlaneFrontZAxis: {visible: input['planeFront']['x'] & input['planeFront']['axis']}, yPlaneFrontXAxis: {visible: input['planeFront']['y'] & input['planeFront']['axis']}, yPlaneFrontZAxis: {visible: input['planeFront']['y'] & input['planeFront']['axis']}, zPlaneFrontXAxis: {visible: input['planeFront']['z'] & input['planeFront']['axis']}, zPlaneFrontYAxis: {visible: input['planeFront']['z'] & input['planeFront']['axis']}, // Controls bank: { slider: {...sliderA, ...{visible: input['view']['controls']}} }, az: { slider: {...sliderA, ...{visible: input['view']['controls']}} }, el: { slider: {...sliderA, ...elA, ...{visible: input['view']['controls']}} } } ); v.el_slide.point1.setPosition(JXG.COORDS_BY_USER, [-9, -5]); v.el_slide.point2.setPosition(JXG.COORDS_BY_USER, [-9, 5]); v.el_slide.setMin(-Math.PI); v.el_slide.setMax(Math.PI); v.el_slide.setAttribute({ snapValues: [-Math.PI, -Math.PI / 2, 0, Math.PI / 2, Math.PI].concat(input['view']['elevation']) }); v.el_slide.name = 'EL'; v.az_slide.point1.setPosition(JXG.COORDS_BY_USER, [-5, -9]); v.az_slide.point2.setPosition(JXG.COORDS_BY_USER, [5, -9]); v.az_slide.setMin(0); v.az_slide.setMax(Math.PI * 2); v.az_slide.setAttribute({ snapValues: [0, Math.PI / 2, Math.PI, Math.PI * 1.5, Math.PI * 2].concat(input['view']['azimuth']) }); v.az_slide.name = 'AZ'; v.bank_slide.point1.setPosition(JXG.COORDS_BY_USER, [-5, 9]); v.bank_slide.point2.setPosition(JXG.COORDS_BY_USER, [5, 9]); v.bank_slide.setAttribute({ snapValues: [-Math.PI, -Math.PI / 2, 0, Math.PI / 2, Math.PI] }); v.bank_slide.name = 'BK'; v.setView(input['view']['azimuth'], input['view']['elevation'], 0); return v; } function boardAttr() { let bA = { boundingbox: [-10, 10, 10, -10], keepaspectratio: true, axis: false, showcopyright: false, shownavigation: false, movetarget: null, pan: { enabled: false, needTwoFingers: false, needShift: true }, zoom: { enabled: false, } }; return bA; } function sliderAttr() { let slA = { baseline: { highlight: false, strokeWidth: 16, lineCap: 'round', strokeColor: '#f3f3f3' }, point1: {frozen: false, fixed: true}, point2: {frozen: false, fixed: true}, drawLabel: true, face: 'o', fillColor: '#aaaaaa', highlightFillColor: '#aaaaaa', highlightStrokeColor: '#aaaaaa', highlightStrokeWidth: 5, highline: { highlight: false, strokeWidth: 16, lineCap: 'round', strokeColor: '#dddddd' }, label: { strokeColor: '#aaaaaa', anchorX: 'left', anchorY: 'middle', layer: 0, cssStyle: 'border: 0px solid red; padding: 1px 8px 1px 8px; border-radius: 20px;background-color: #f2f2f2', }, size: 7, snapValueDistance: 0.1, snapWidth: 0.001, strokeColor: '#009900', strokeWidth: 0, ticks: { layer: 7, digits: 2, maxLabelLength: 2, majorHeight: 0, majorTickEndings: [1, 1], strokeWidth: 4, strokeColor: '#cccccc' }, visible: true }; return slA; } function elAttr() { let elA = { label: { rotate: 90, strokeColor: '#aaaaaa', anchorX: 'left', anchorY: 'middle', layer: 0, cssStyle: 'border: 0px solid red; padding: 1px 8px 1px 8px; border-radius: 20px;background-color: #f2f2f2; white-space: nowrap;' } } return elA; } // output data for LMS, additional binding to LMS necessary let output = function () { let out = []; out.push(JXG.evaluate(() => { return view.az_slide.Value(); })); out.push(JXG.evaluate(() => { return view.el_slide.Value(); })); out.push(JXG.evaluate(() => { return view.bank_slide.Value(); })); out.push(JXG.evaluate(() => { return a.Value(); })); return out; } // output events, binding to LMS board.on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); </script>
/* This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License. https://creativecommons.org/licenses/by-sa/4.0/ Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits. */ const BOARDID = 'your_div_id'; // Insert your id here! // input data let input = { 'coordinates': { '-x': -3, '+x': 3, '-y': -3, '+y': 3, '-z': -3, '+z': 3 }, 'view': { 'projection': 'parallel', 'trackball': true, 'controls': true, 'azimuth': Math.PI, 'elevation': 0}, 'axis': { 'x': true, 'y': true, 'z': true, 'position': 'center'}, 'planeRear': { 'x': true, 'y': true, 'z': true, 'axis': false, 'border': 3, 'mesh': true, 'color': '#dddddd'}, 'planeFront': { 'x': true, 'y': true, 'z': true, 'axis': false, 'border': 3, 'mesh': false, 'color': 'none'} }; // JSXGraph board let board = JXG.JSXGraph.initBoard(BOARDID, boardAttr()); // JSXGraph 3D view let view = initBoard3D(board); // JSXGraph construction let a = board.create('slider', [[9, -5], [9, 5], [0, 1, 4]], { name: 'a', ...(sliderAttr()), ...(elAttr()) }); let curve = view.create('curve3d', [ (t) => (a.Value() * Math.sin(t)), (t) => t, (t) => (a.Value() * Math.cos(t)), [-Math.PI, Math.PI] ], { strokeWidth: 2, dash: 0 }); let circle = view.create('curve3d', [ (t) => (a.Value() * Math.sin(t)), (t) => 0, (t) => (a.Value() * Math.cos(t)), [-Math.PI, Math.PI] ], { strokeWidth: 2, dash: 2 }); // Controls function initBoard3D(b) { let sliderA = sliderAttr(); let elA = elAttr(); let v = b.create('view3d', [[-5, -4], [10, 10], [[input['coordinates']['-x'], input['coordinates']['+x']], [input['coordinates']['-y'], input['coordinates']['+y']], [input['coordinates']['-z'], input['coordinates']['+z']]]], { projection: input['view']['projection'], trackball: { enabled: input['view']['trackball'] }, // Main axes axesPosition: input['axis']['position'], xAxis: {visible: input['axis']['x'], strokeColor: '#888888', strokeWidth: 2}, yAxis: {visible: input['axis']['y'], strokeColor: '#888888', strokeWidth: 2}, zAxis: {visible: input['axis']['z'], strokeColor: '#888888', strokeWidth: 2}, // Planes xPlaneRear: { visible: input['planeRear']['x'] | input['planeRear']['border'], strokeColor: '#dddddd', strokeWidth: input['planeRear']['border'], mesh3d: {visible: input['planeRear']['x'] & input['planeRear']['mesh']}, fillColor: input['planeRear']['x'] ? input['planeRear']['color'] : 'none' }, yPlaneRear: { visible: input['planeRear']['y'] | input['planeRear']['border'], strokeColor: '#dddddd', strokeWidth: input['planeRear']['border'], mesh3d: {visible: input['planeRear']['y'] & input['planeRear']['mesh']}, fillColor: input['planeRear']['y'] ? input['planeRear']['color'] : 'none' }, zPlaneRear: { visible: input['planeRear']['z'] | input['planeRear']['border'], strokeColor: '#dddddd', strokeWidth: input['planeRear']['border'], mesh3d: {visible: input['planeRear']['z'] & input['planeRear']['mesh']}, fillColor: input['planeRear']['z'] ? input['planeRear']['color'] : 'none' }, xPlaneFront: { visible: input['planeFront']['x'] | input['planeFront']['border'], strokeColor: '#dddddd', strokeWidth: input['planeFront']['border'], mesh3d: {visible: input['planeFront']['x'] & input['planeFront']['mesh']}, fillColor: input['planeFront']['x'] ? input['planeFront']['color'] : 'none' }, yPlaneFront: { visible: input['planeFront']['y'] | input['planeFront']['border'], strokeColor: '#dddddd', strokeWidth: input['planeFront']['border'], mesh3d: {visible: input['planeFront']['y'] & input['planeFront']['mesh']}, fillColor: input['planeFront']['y'] ? input['planeFront']['color'] : 'none' }, zPlaneFront: { visible: input['planeFront']['z'] | input['planeFront']['border'], strokeColor: '#dddddd', strokeWidth: input['planeFront']['border'], mesh3d: {visible: input['planeFront']['z'] & input['planeFront']['mesh']}, fillColor: input['planeFront']['z'] ? input['planeFront']['color'] : 'none' }, // Axes on planes xPlaneRearYAxis: {visible: input['planeRear']['x'] & input['planeRear']['axis']}, xPlaneRearZAxis: {visible: input['planeRear']['x'] & input['planeRear']['axis']}, yPlaneRearXAxis: {visible: input['planeRear']['y'] & input['planeRear']['axis']}, yPlaneRearZAxis: {visible: input['planeRear']['y'] & input['planeRear']['axis']}, zPlaneRearXAxis: {visible: input['planeRear']['z'] & input['planeRear']['axis']}, zPlaneRearYAxis: {visible: input['planeRear']['z'] & input['planeRear']['axis']}, xPlaneFrontYAxis: {visible: input['planeFront']['x'] & input['planeFront']['axis']}, xPlaneFrontZAxis: {visible: input['planeFront']['x'] & input['planeFront']['axis']}, yPlaneFrontXAxis: {visible: input['planeFront']['y'] & input['planeFront']['axis']}, yPlaneFrontZAxis: {visible: input['planeFront']['y'] & input['planeFront']['axis']}, zPlaneFrontXAxis: {visible: input['planeFront']['z'] & input['planeFront']['axis']}, zPlaneFrontYAxis: {visible: input['planeFront']['z'] & input['planeFront']['axis']}, // Controls bank: { slider: {...sliderA, ...{visible: input['view']['controls']}} }, az: { slider: {...sliderA, ...{visible: input['view']['controls']}} }, el: { slider: {...sliderA, ...elA, ...{visible: input['view']['controls']}} } } ); v.el_slide.point1.setPosition(JXG.COORDS_BY_USER, [-9, -5]); v.el_slide.point2.setPosition(JXG.COORDS_BY_USER, [-9, 5]); v.el_slide.setMin(-Math.PI); v.el_slide.setMax(Math.PI); v.el_slide.setAttribute({ snapValues: [-Math.PI, -Math.PI / 2, 0, Math.PI / 2, Math.PI].concat(input['view']['elevation']) }); v.el_slide.name = 'EL'; v.az_slide.point1.setPosition(JXG.COORDS_BY_USER, [-5, -9]); v.az_slide.point2.setPosition(JXG.COORDS_BY_USER, [5, -9]); v.az_slide.setMin(0); v.az_slide.setMax(Math.PI * 2); v.az_slide.setAttribute({ snapValues: [0, Math.PI / 2, Math.PI, Math.PI * 1.5, Math.PI * 2].concat(input['view']['azimuth']) }); v.az_slide.name = 'AZ'; v.bank_slide.point1.setPosition(JXG.COORDS_BY_USER, [-5, 9]); v.bank_slide.point2.setPosition(JXG.COORDS_BY_USER, [5, 9]); v.bank_slide.setAttribute({ snapValues: [-Math.PI, -Math.PI / 2, 0, Math.PI / 2, Math.PI] }); v.bank_slide.name = 'BK'; v.setView(input['view']['azimuth'], input['view']['elevation'], 0); return v; } function boardAttr() { let bA = { boundingbox: [-10, 10, 10, -10], keepaspectratio: true, axis: false, showcopyright: false, shownavigation: false, movetarget: null, pan: { enabled: false, needTwoFingers: false, needShift: true }, zoom: { enabled: false, } }; return bA; } function sliderAttr() { let slA = { baseline: { highlight: false, strokeWidth: 16, lineCap: 'round', strokeColor: '#f3f3f3' }, point1: {frozen: false, fixed: true}, point2: {frozen: false, fixed: true}, drawLabel: true, face: 'o', fillColor: '#aaaaaa', highlightFillColor: '#aaaaaa', highlightStrokeColor: '#aaaaaa', highlightStrokeWidth: 5, highline: { highlight: false, strokeWidth: 16, lineCap: 'round', strokeColor: '#dddddd' }, label: { strokeColor: '#aaaaaa', anchorX: 'left', anchorY: 'middle', layer: 0, cssStyle: 'border: 0px solid red; padding: 1px 8px 1px 8px; border-radius: 20px;background-color: #f2f2f2', }, size: 7, snapValueDistance: 0.1, snapWidth: 0.001, strokeColor: '#009900', strokeWidth: 0, ticks: { layer: 7, digits: 2, maxLabelLength: 2, majorHeight: 0, majorTickEndings: [1, 1], strokeWidth: 4, strokeColor: '#cccccc' }, visible: true }; return slA; } function elAttr() { let elA = { label: { rotate: 90, strokeColor: '#aaaaaa', anchorX: 'left', anchorY: 'middle', layer: 0, cssStyle: 'border: 0px solid red; padding: 1px 8px 1px 8px; border-radius: 20px;background-color: #f2f2f2; white-space: nowrap;' } } return elA; } // output data for LMS, additional binding to LMS necessary let output = function () { let out = []; out.push(JXG.evaluate(() => { return view.az_slide.Value(); })); out.push(JXG.evaluate(() => { return view.el_slide.Value(); })); out.push(JXG.evaluate(() => { return view.bank_slide.Value(); })); out.push(JXG.evaluate(() => { return a.Value(); })); return out; } // output events, binding to LMS board.on('up', function (e) { document.getElementById('outputID').innerHTML = output(); });
<h4>From circle to sine, cosine and beyond</h4> Adopt slider AZ from \(\pi\) to \(\frac{\pi}{2}\) and then EL from \(0\) to \(-\frac{\pi}{2}\). Then change the view as desired.
// Define the id of your board in BOARDID // input data let input = { 'coordinates': { '-x': -3, '+x': 3, '-y': -3, '+y': 3, '-z': -3, '+z': 3 }, 'view': { 'projection': 'parallel', 'trackball': true, 'controls': true, 'azimuth': Math.PI, 'elevation': 0}, 'axis': { 'x': true, 'y': true, 'z': true, 'position': 'center'}, 'planeRear': { 'x': true, 'y': true, 'z': true, 'axis': false, 'border': 3, 'mesh': true, 'color': '#dddddd'}, 'planeFront': { 'x': true, 'y': true, 'z': true, 'axis': false, 'border': 3, 'mesh': false, 'color': 'none'} }; // JSXGraph board let board = JXG.JSXGraph.initBoard(BOARDID, boardAttr()); // JSXGraph 3D view let view = initBoard3D(board); // JSXGraph construction let a = board.create('slider', [[9, -5], [9, 5], [0, 1, 4]], { name: 'a', ...(sliderAttr()), ...(elAttr()) }); let curve = view.create('curve3d', [ (t) => (a.Value() * Math.sin(t)), (t) => t, (t) => (a.Value() * Math.cos(t)), [-Math.PI, Math.PI] ], { strokeWidth: 2, dash: 0 }); let circle = view.create('curve3d', [ (t) => (a.Value() * Math.sin(t)), (t) => 0, (t) => (a.Value() * Math.cos(t)), [-Math.PI, Math.PI] ], { strokeWidth: 2, dash: 2 }); // Controls function initBoard3D(b) { let sliderA = sliderAttr(); let elA = elAttr(); let v = b.create('view3d', [[-5, -4], [10, 10], [[input['coordinates']['-x'], input['coordinates']['+x']], [input['coordinates']['-y'], input['coordinates']['+y']], [input['coordinates']['-z'], input['coordinates']['+z']]]], { projection: input['view']['projection'], trackball: { enabled: input['view']['trackball'] }, // Main axes axesPosition: input['axis']['position'], xAxis: {visible: input['axis']['x'], strokeColor: '#888888', strokeWidth: 2}, yAxis: {visible: input['axis']['y'], strokeColor: '#888888', strokeWidth: 2}, zAxis: {visible: input['axis']['z'], strokeColor: '#888888', strokeWidth: 2}, // Planes xPlaneRear: { visible: input['planeRear']['x'] | input['planeRear']['border'], strokeColor: '#dddddd', strokeWidth: input['planeRear']['border'], mesh3d: {visible: input['planeRear']['x'] & input['planeRear']['mesh']}, fillColor: input['planeRear']['x'] ? input['planeRear']['color'] : 'none' }, yPlaneRear: { visible: input['planeRear']['y'] | input['planeRear']['border'], strokeColor: '#dddddd', strokeWidth: input['planeRear']['border'], mesh3d: {visible: input['planeRear']['y'] & input['planeRear']['mesh']}, fillColor: input['planeRear']['y'] ? input['planeRear']['color'] : 'none' }, zPlaneRear: { visible: input['planeRear']['z'] | input['planeRear']['border'], strokeColor: '#dddddd', strokeWidth: input['planeRear']['border'], mesh3d: {visible: input['planeRear']['z'] & input['planeRear']['mesh']}, fillColor: input['planeRear']['z'] ? input['planeRear']['color'] : 'none' }, xPlaneFront: { visible: input['planeFront']['x'] | input['planeFront']['border'], strokeColor: '#dddddd', strokeWidth: input['planeFront']['border'], mesh3d: {visible: input['planeFront']['x'] & input['planeFront']['mesh']}, fillColor: input['planeFront']['x'] ? input['planeFront']['color'] : 'none' }, yPlaneFront: { visible: input['planeFront']['y'] | input['planeFront']['border'], strokeColor: '#dddddd', strokeWidth: input['planeFront']['border'], mesh3d: {visible: input['planeFront']['y'] & input['planeFront']['mesh']}, fillColor: input['planeFront']['y'] ? input['planeFront']['color'] : 'none' }, zPlaneFront: { visible: input['planeFront']['z'] | input['planeFront']['border'], strokeColor: '#dddddd', strokeWidth: input['planeFront']['border'], mesh3d: {visible: input['planeFront']['z'] & input['planeFront']['mesh']}, fillColor: input['planeFront']['z'] ? input['planeFront']['color'] : 'none' }, // Axes on planes xPlaneRearYAxis: {visible: input['planeRear']['x'] & input['planeRear']['axis']}, xPlaneRearZAxis: {visible: input['planeRear']['x'] & input['planeRear']['axis']}, yPlaneRearXAxis: {visible: input['planeRear']['y'] & input['planeRear']['axis']}, yPlaneRearZAxis: {visible: input['planeRear']['y'] & input['planeRear']['axis']}, zPlaneRearXAxis: {visible: input['planeRear']['z'] & input['planeRear']['axis']}, zPlaneRearYAxis: {visible: input['planeRear']['z'] & input['planeRear']['axis']}, xPlaneFrontYAxis: {visible: input['planeFront']['x'] & input['planeFront']['axis']}, xPlaneFrontZAxis: {visible: input['planeFront']['x'] & input['planeFront']['axis']}, yPlaneFrontXAxis: {visible: input['planeFront']['y'] & input['planeFront']['axis']}, yPlaneFrontZAxis: {visible: input['planeFront']['y'] & input['planeFront']['axis']}, zPlaneFrontXAxis: {visible: input['planeFront']['z'] & input['planeFront']['axis']}, zPlaneFrontYAxis: {visible: input['planeFront']['z'] & input['planeFront']['axis']}, // Controls bank: { slider: {...sliderA, ...{visible: input['view']['controls']}} }, az: { slider: {...sliderA, ...{visible: input['view']['controls']}} }, el: { slider: {...sliderA, ...elA, ...{visible: input['view']['controls']}} } } ); v.el_slide.point1.setPosition(JXG.COORDS_BY_USER, [-9, -5]); v.el_slide.point2.setPosition(JXG.COORDS_BY_USER, [-9, 5]); v.el_slide.setMin(-Math.PI); v.el_slide.setMax(Math.PI); v.el_slide.setAttribute({ snapValues: [-Math.PI, -Math.PI / 2, 0, Math.PI / 2, Math.PI].concat(input['view']['elevation']) }); v.el_slide.name = 'EL'; v.az_slide.point1.setPosition(JXG.COORDS_BY_USER, [-5, -9]); v.az_slide.point2.setPosition(JXG.COORDS_BY_USER, [5, -9]); v.az_slide.setMin(0); v.az_slide.setMax(Math.PI * 2); v.az_slide.setAttribute({ snapValues: [0, Math.PI / 2, Math.PI, Math.PI * 1.5, Math.PI * 2].concat(input['view']['azimuth']) }); v.az_slide.name = 'AZ'; v.bank_slide.point1.setPosition(JXG.COORDS_BY_USER, [-5, 9]); v.bank_slide.point2.setPosition(JXG.COORDS_BY_USER, [5, 9]); v.bank_slide.setAttribute({ snapValues: [-Math.PI, -Math.PI / 2, 0, Math.PI / 2, Math.PI] }); v.bank_slide.name = 'BK'; v.setView(input['view']['azimuth'], input['view']['elevation'], 0); return v; } function boardAttr() { let bA = { boundingbox: [-10, 10, 10, -10], keepaspectratio: true, axis: false, showcopyright: false, shownavigation: false, movetarget: null, pan: { enabled: false, needTwoFingers: false, needShift: true }, zoom: { enabled: false, } }; return bA; } function sliderAttr() { let slA = { baseline: { highlight: false, strokeWidth: 16, lineCap: 'round', strokeColor: '#f3f3f3' }, point1: {frozen: false, fixed: true}, point2: {frozen: false, fixed: true}, drawLabel: true, face: 'o', fillColor: '#aaaaaa', highlightFillColor: '#aaaaaa', highlightStrokeColor: '#aaaaaa', highlightStrokeWidth: 5, highline: { highlight: false, strokeWidth: 16, lineCap: 'round', strokeColor: '#dddddd' }, label: { strokeColor: '#aaaaaa', anchorX: 'left', anchorY: 'middle', layer: 0, cssStyle: 'border: 0px solid red; padding: 1px 8px 1px 8px; border-radius: 20px;background-color: #f2f2f2', }, size: 7, snapValueDistance: 0.1, snapWidth: 0.001, strokeColor: '#009900', strokeWidth: 0, ticks: { layer: 7, digits: 2, maxLabelLength: 2, majorHeight: 0, majorTickEndings: [1, 1], strokeWidth: 4, strokeColor: '#cccccc' }, visible: true }; return slA; } function elAttr() { let elA = { label: { rotate: 90, strokeColor: '#aaaaaa', anchorX: 'left', anchorY: 'middle', layer: 0, cssStyle: 'border: 0px solid red; padding: 1px 8px 1px 8px; border-radius: 20px;background-color: #f2f2f2; white-space: nowrap;' } } return elA; } // output data for LMS, additional binding to LMS necessary let output = function () { let out = []; out.push(JXG.evaluate(() => { return view.az_slide.Value(); })); out.push(JXG.evaluate(() => { return view.el_slide.Value(); })); out.push(JXG.evaluate(() => { return view.bank_slide.Value(); })); out.push(JXG.evaluate(() => { return a.Value(); })); return out; } // output events, binding to LMS board.on('up', function (e) { document.getElementById('outputID').innerHTML = output(); });
<h4>Result</h4> [<span id="outputID">Change JSXGraph construction.</span>]
This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License. Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.