Difference between revisions of "Bearing"

From JSXGraph Wiki
Jump to: navigation, search
 
(9 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">
 
var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:true,boundingbox:[-2,1.5,2,-1.5],keepaspectratio:true});
 
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],{shadow:true});
+
var c = brd.create('circle',[[0,0],1]);
var p = brd.create('glider',[-1,0.5,c],{name:'drag me', shadow:true}); // 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 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);
 
             });
 
             });
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);
 
             });
 
             });
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);
 
             });
 
             });

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

}