Difference between revisions of "Bearing"

From JSXGraph Wiki
Jump to: navigation, search
 
(17 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);
 
             });
 
             });
  
Line 17: 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),500]);
+
   p.moveTo([r*Math.cos(phi),r*Math.sin(phi)],1000);
 
 
 
}
 
}
 
</jsxgraph>
 
</jsxgraph>
Line 24: 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 34: 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 41: 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);
  
 
}
 
}
Line 49: 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 64: 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);
 
             });
 
             });
Line 78: 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="degrees">
+
<button onclick="setDirection2()">set direction</button>
<input type="button" value="set direction" onclick="setDirection2()">
 
</form>
 
 
</source>
 
</source>
  
Line 93: 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);
 
             });
 
             });

Latest revision as of 09: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)]);

}