Bearing: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(31 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.
<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 9: 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);
             });
             });
Line 16: Line 16:
   var phi = 1*document.getElementById('degrees').value*Math.PI/180.0;
   var phi = 1*document.getElementById('degrees').value*Math.PI/180.0;
   var r = c.Radius();
   var r = c.Radius();
   p.moveTo([r*Math.cos(phi),r*Math.sin(phi)]);
   p.moveTo([r*Math.cos(phi),r*Math.sin(phi)],1000);
 
}
}
</jsxgraph>
</jsxgraph>


===The underlying JavaScript code===
===The underlying JavaScript code===
<code xml">
<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);
             });
             });
Line 40: Line 37:
   var phi = 1*document.getElementById('degrees').value*Math.PI/180.0;
   var phi = 1*document.getElementById('degrees').value*Math.PI/180.0;
   var r = c.Radius();
   var r = c.Radius();
   p.moveTo([r*Math.cos(phi),r*Math.sin(phi)]);
   p.moveTo([r*Math.cos(phi),r*Math.sin(phi)],1000);
 
}
</source>
 
==Version 2==
 
<html>
<input type="text" id="degrees2">
<button onclick="setDirection2()">set direction</button>
</html>
<jsxgraph box="box2" width="600" height="500">
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)]);
 
}
</jsxgraph>
 
===The underlying JavaScript code===
<source lang="html4strict">
<input type="text" id="degrees2">
<button onclick="setDirection2()">set direction</button>
</source>
 
<source lang="javascript">
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)]);


}
}

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)]);

}