1 | <html>
|
2 | <head>
|
3 | <meta charset="UTF-8">
|
4 | <link rel="stylesheet" type="text/css" href="css/c3.css">
|
5 | <link rel="stylesheet" href="js/codemirror/lib/codemirror.css">
|
6 | <link rel="stylesheet" href="js/codemirror/addon/hint/show-hint.css">
|
7 | <style>
|
8 | body, fieldset, div { font-size:large; }
|
9 | button , input, select { font-size:large; }
|
10 | textarea { width:95%; }
|
11 | fieldset { width:90%; height:98%; }
|
12 | </style>
|
13 | </head>
|
14 | <body onload="E.loadEditor(codebox);run();">
|
15 | <div style="width:100%; height:400px;">
|
16 | <div style="width:50%;height:95%;float:left;">
|
17 | <fieldset>
|
18 | <legend>JavaScript</legend>
|
19 | <textarea id="codebox" class="lined" style="height:95%" onmouseup="onLineNumber();">
|
20 | function f(x, y) {
|
21 | return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
|
22 | }
|
23 | G.curve3d(f);
|
24 | </textarea>
|
25 | </div>
|
26 | <div style="width:50%;height:95%;float:left;">
|
27 | <fieldset>
|
28 | <legend>Graph</legend>
|
29 | <div id="chart" style="height:95%"></div>
|
30 | </fieldset>
|
31 | </div>
|
32 | </div>
|
33 | <center>
|
34 | <div style="width:98%">
|
35 | <input type="radio" name="mode" value="code" checked="true"/>code
|
36 | <input type="radio" name="mode" value="line"/>line
|
37 | <input type="file" id="filebox" name="filebox" style="width:250px"/>
|
38 | <button onclick="load()">load</button>
|
39 | <button onclick="run()">run</button>
|
40 | <button onclick="save()">save</button>
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 | </div>
|
49 | <div style="width:98%;height:100px">
|
50 | <textarea id="msgbox" style="width:100%;height:100%"></textarea>
|
51 | </div>
|
52 | </center>
|
53 | <script src="U.js"></script>
|
54 | <script>
|
55 | U.use("R.js", "R");
|
56 | U.use("G.js", "G");
|
57 | U.use("E.js", "E");
|
58 | var filebox = document.getElementById('filebox');
|
59 | var codebox = document.getElementById('codebox');
|
60 | var msgbox = document.getElementById('msgbox');
|
61 | var chartbox= document.getElementById('chart');
|
62 | var filename= "test.js";
|
63 | var lineNo = 1;
|
64 | var mode, code, lines, results;
|
65 |
|
66 | function msgClear() { msgbox.value = ""; }
|
67 |
|
68 | function getRadioValue(name) {
|
69 | return document.querySelector('input[name='+name+']:checked').value;
|
70 | }
|
71 |
|
72 | function handleFileSelect(evt) {
|
73 | msgClear();
|
74 | var reader = new FileReader();
|
75 | reader.onload = function(e) {
|
76 | codebox.value = reader.result;
|
77 | E.editor.setValue(codebox.value);
|
78 | run();
|
79 | };
|
80 | filename = evt.target.files[0].name;
|
81 | reader.readAsText(evt.target.files[0]);
|
82 | }
|
83 |
|
84 | filebox.addEventListener('change', handleFileSelect, false);
|
85 |
|
86 | function onLineNumber() {
|
87 | if (mode === "line") {
|
88 | lineNo = codebox.value.substr(0, codebox.selectionStart).split("\n").length;
|
89 | var msg = "";
|
90 | if (lineNo < results.length) {
|
91 | var r = results[lineNo];
|
92 | msg += "line "+lineNo+" : "+lines[lineNo];
|
93 | if (r.error !== null)
|
94 | msg += "\nerror : "+r.error;
|
95 | msg += "\nreturn : "+r.value;
|
96 | }
|
97 | msgbox.value = msg;
|
98 | }
|
99 | }
|
100 |
|
101 | function codekeyup(event) {
|
102 | onLineNumber();
|
103 | }
|
104 |
|
105 | codebox.addEventListener('keyup', codekeyup, false);
|
106 |
|
107 | function run() {
|
108 | code = E.editor.getValue();
|
109 | mode = getRadioValue("mode");
|
110 | msgbox.value = "running...";
|
111 | if (mode === "code") {
|
112 | try {
|
113 | eval("G.newGraph(chartbox);"+code);
|
114 | } catch (e) {
|
115 | msgbox.value = "error : ";
|
116 | if (typeof(e.lineNumber) !== "undefined")
|
117 | msgbox.value += "line="+e.lineNumber+" column="+e.columnNumber;
|
118 | msgbox.value += "\nmessage : "+e.message;
|
119 | }
|
120 | } else {
|
121 | lines = ["G.newGraph(chartbox)"].concat(code.split("\n"));
|
122 | results = [];
|
123 | for (var i in lines) {
|
124 | var v = null, e=null;
|
125 | try {
|
126 | v=eval(lines[i]);
|
127 | } catch (error) {
|
128 | e=error;
|
129 | }
|
130 | results.push({value:v,error:e});
|
131 | }
|
132 | }
|
133 | msgbox.value += "finished!";
|
134 | }
|
135 | </script>
|
136 | </body>
|
137 | </html>
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 |
|
145 |
|
146 |
|
147 |
|
148 |
|
149 |
|
150 |
|
151 |
|
152 |
|
153 |
|
154 |
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 |
|
165 |
|
166 |
|
167 |
|
168 |
|
169 |
|
170 |
|
171 |
|
172 |
|
173 |
|
174 |
|
175 |
|
176 |
|
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 |
|
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 |
|
206 |
|
207 |
|
208 |
|
209 |
|
210 |
|
211 |
|
212 |
|
213 |
|
214 |
|