1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
<html>
<head>
<title>JSXGraph example</title>
<link rel="stylesheet" type="text/css" href="../distrib/jsxgraph.css" />
<!--script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/MathJax/MathJax.js"></script-->
<script type="text/javascript" src="../src/loadjsxgraph.js"></script>
<script type="text/javascript" src="../src/reader/geonext.js"></script>
<script type="text/javascript" src="/javascript/jquery/jquery.js"></script>
</head>
<body>
<h2>WRP Playground</h2>
<input type="radio" name="export" id="type-js" /> JavaScript <input type="radio" name="export" id="type-jc" checked="checked" /> JessieCode
<div style="width:800px">
<div id="jxgbox" class="jxgbox" style="width:800px; height:800px; float: left;"></div>
</div>
<textarea id="debug" style="display:block;" cols="100" rows="50">DEBUG</textarea>
<button onclick="exec();">Execute</button>
<div id="jxgbox2" class="jxgbox" style="width:800px; height:800px; float: left;"></div>
<script type="text/javascript">
/* <![CDATA[ */
var board, test,
wrp = (function() {
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5], axis: true, keepaspectratio: true});
var p = board.create('point', [1, 2], {strokeColor: 'blue'});
if ($('#type-jc').is(':checked')) {
console.log('dumping jessie');
$('#debug').html(JXG.Dump.toJessie(board));
} else {
console.log('dumping js');
$('#debug').html(JXG.Dump.toJavaScript(board));
}
})();
function exec() {
var code = document.getElementById('debug').value,
p;
test = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 5, 5, -5], axis: false, keepaspectratio: true});
code = 'use jxgbox2;\n' + code;
p = new JXG.JessieCode();
p.parse(code);
}
(function () {
var file_drop = document.getElementById('jxgbox');
function supportsFileAPI() {
return window.File && window.FileReader && window.FileList && window.Blob;
}
function playFile(f) {
var freader = new FileReader();
freader.onload = function(e) {
if (board) {
JXG.JSXGraph.freeBoard(board);
}
board = JXG.JSXGraph.loadBoardFromString('jxgbox', e.target.result, 'geonext');
if ($('#type-jc').is(':checked')) {
console.log('dumping jessie');
$('#debug').html(JXG.Dump.toJessie(board));
} else {
console.log('dumping js');
$('#debug').html(JXG.Dump.toJavaScript(board));
}
};
freader.readAsText(f);
}
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files, // file list object
output = [], i, f;
if (files.length > 0) {
f = files[0];
playFile(f);
}
}
function handleDragOver(e) {
e.stopPropagation();
e.preventDefault();
}
file_drop.addEventListener('dragover', handleDragOver, false);
file_drop.addEventListener('drop', handleDrop, false);
})();
/* ]]> */
</script>
</body>
</html>
|
