Bearing: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This is an example of bidirectional communication of JSXGraph with other elements of the web page. a You can type a new value for the angle into the text box and see the actual value of the angle in the text box.
This is an example of bidirectional communication of JSXGraph with other elements of the web page. a You can type a new value for the angle into the text box and see the actual value of the angle in the text box.
<br /><br />
<html>
<html>
<form>
<input type="text" id="degrees">
<input type="text" id="degrees">
<input type="button" value="set direction" onclick="setDirection()">
<button onclick="setDirection()">set direction</button>
</form>
</html>
</html>
<jsxgraph width="600" height="500">
<jsxgraph width="600" height="500">
Line 10: Line 9:
var c = brd.create('circle',[[0,0],1]);
var c = brd.create('circle',[[0,0],1]);
var p = brd.create('glider',[-1,0.5,c],{name:'drag me'}); // global variable
var p = brd.create('glider',[-1,0.5,c],{name:'drag me'}); // global variable
brd.addHook(function(){
p.on('drag', function(){
                   document.getElementById('degrees').value = (Math.atan2(p.Y(),p.X())*180/Math.PI).toFixed(0);
                   document.getElementById('degrees').value = (Math.atan2(p.Y(),p.X())*180/Math.PI).toFixed(0);
             }, 'mousemove');
             });


var setDirection = function() {
var setDirection = function() {
Line 23: Line 22:
===The underlying JavaScript code===
===The underlying JavaScript code===
<source lang="html4strict">
<source lang="html4strict">
<form>
<input type="text" id="degrees">
<input type="text" id="degrees">
<input type="button" value="set direction" onclick="setDirection()">
<button onclick="setDirection()">set direction</button>
</form>
</source>
</source>


Line 33: Line 30:
var c = brd.create('circle',[[0,0],1]);
var c = brd.create('circle',[[0,0],1]);
var p = brd.create('glider',[-1,0.5,c],{name:'drag me'}); // global variable
var p = brd.create('glider',[-1,0.5,c],{name:'drag me'}); // global variable
brd.addHook(function(){
p.on('drag', function(){
                   document.getElementById('degrees').value = (Math.atan2(p.Y(),p.X())*180/Math.PI).toFixed(0);
                   document.getElementById('degrees').value = (Math.atan2(p.Y(),p.X())*180/Math.PI).toFixed(0);
             }, 'mousemove');
             });


var setDirection = function() {
var setDirection = function() {
Line 48: Line 45:


<html>
<html>
<form>
<input type="text" id="degrees2">
<input type="text" id="degrees2">
<input type="button" value="set direction" onclick="setDirection2()">
<button onclick="setDirection2()">set direction</button>
</form>
</html>
</html>
<jsxgraph box="box2" width="600" height="500">
<jsxgraph box="box2" width="600" height="500">
Line 63: Line 58:
brd2.create('segment',[q,p1]);
brd2.create('segment',[q,p1]);


brd2.addHook(function(){
q.on('drag', function(){
                   document.getElementById('degrees2').value = (Math.atan2(q.Y(),q.X())*180/Math.PI).toFixed(0);
                   document.getElementById('degrees2').value = (Math.atan2(q.Y(),q.X())*180/Math.PI).toFixed(0);
             }, 'mousemove');
             });


var setDirection2 = function() {
var setDirection2 = function() {
Line 77: Line 72:
===The underlying JavaScript code===
===The underlying JavaScript code===
<source lang="html4strict">
<source lang="html4strict">
<form>
<input type="text" id="degrees2">
<input type="text" id="degrees2">
<input type="button" value="set direction" onclick="setDirection2()">
<button onclick="setDirection2()">set direction</button>
</form>
</source>
</source>


Line 92: Line 85:
var q = brd2.create('glider',[0.5,0.5,a],{name:'drag me'}); // global variable
var q = brd2.create('glider',[0.5,0.5,a],{name:'drag me'}); // global variable
brd2.create('segment',[q,p1]);
brd2.create('segment',[q,p1]);
 
q.on('drag', function(){
brd2.addHook(function(){
                   document.getElementById('degrees2').value = (Math.atan2(q.Y(),q.X())*180/Math.PI).toFixed(0);
                   document.getElementById('degrees2').value = (Math.atan2(q.Y(),q.X())*180/Math.PI).toFixed(0);
             }, 'mousemove');
             });


var setDirection2 = function() {
var setDirection2 = function() {

Latest revision as of 07:57, 6 April 2017

This is an example of bidirectional communication of JSXGraph with other elements of the web page. a You can type a new value for the angle into the text box and see the actual value of the angle in the text box.

The underlying JavaScript code

<input type="text" id="degrees">
<button onclick="setDirection()">set direction</button>
var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:true,boundingbox:[-2,1.5,2,-1.5],keepaspectratio:true});
var c = brd.create('circle',[[0,0],1]);
var p = brd.create('glider',[-1,0.5,c],{name:'drag me'}); // global variable
p.on('drag', function(){
                  document.getElementById('degrees').value = (Math.atan2(p.Y(),p.X())*180/Math.PI).toFixed(0);
            });

var setDirection = function() {
   var phi = 1*document.getElementById('degrees').value*Math.PI/180.0;
   var r = c.Radius();
   p.moveTo([r*Math.cos(phi),r*Math.sin(phi)],1000);

}

Version 2

The underlying JavaScript code

<input type="text" id="degrees2">
<button onclick="setDirection2()">set direction</button>
var brd2 = JXG.JSXGraph.initBoard('box2',{axis:true,boundingbox:[-2,1.5,2,-1.5],keepaspectratio:true});
var p1 = brd2.create('point',[0,0], {visible:false, fixed:true});
var p2 = brd2.create('point',[1,0]);
var p3 = brd2.create('point',[0,1]);
var a = brd2.create('arc',[p1,p2,p3]);

var q = brd2.create('glider',[0.5,0.5,a],{name:'drag me'}); // global variable
brd2.create('segment',[q,p1]);
q.on('drag', function(){
                  document.getElementById('degrees2').value = (Math.atan2(q.Y(),q.X())*180/Math.PI).toFixed(0);
            });

var setDirection2 = function() {
   var phi = 1*document.getElementById('degrees2').value*Math.PI/180.0;
   var r = a.Radius();
   q.moveTo([r*Math.cos(phi),r*Math.sin(phi)]);

}