UNPKG

14.4 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
8 <meta name="description" content="">
9 <meta name="author" content="">
10 <link rel="icon" href="http://getbootstrap.com/favicon.ico">
11
12 <title>Rlab IDE</title>
13
14 <!-- Bootstrap core CSS -->
15 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
16
17 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
18 <link href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
19
20 <!-- Custom styles for this template -->
21 <link href="web/rlab.css" rel="stylesheet">
22
23 <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
24 <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
25 <script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
26
27 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
28 <!--[if lt IE 9]>
29 <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
30 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
31 <![endif]-->
32
33 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/codemirror.css">
34
35 <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/>
36
37 <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.css" rel="stylesheet"/>
38
39 </head>
40
41 <body>
42<!-- Modal -->
43<div class="modal fade" id="bigChartModal" tabindex="-1" role="dialog" aria-labelledby="bigChartModalLabel">
44 <div class="modal-dialog" role="document">
45 <div class="modal-content">
46 <div class="modal-header">
47 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
48 <h4 class="modal-title" id="myModalLabel">Chart(Big)</h4>
49 </div>
50 <div id="bigChart2" class="modal-body chart-big">
51 </div>
52 <div class="modal-footer">
53 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
54 <button type="button" class="btn btn-primary">Save changes</button>
55 </div>
56 </div>
57 </div>
58</div>
59
60 <nav class="navbar navbar-inverse navbar-fixed-top">
61 <div class="container">
62 <div class="navbar-header">
63 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
64 <span class="sr-only">Toggle navigation</span>
65 <span class="icon-bar"></span>
66 <span class="icon-bar"></span>
67 <span class="icon-bar"></span>
68 </button>
69 <a class="navbar-brand" href="#">Rlab = (R + Matlab).js</a>
70 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
71 </div>
72 <div id="navbar" class="navbar-collapse collapse">
73<!--
74 <ul class="nav navbar-nav navbar-right">
75 <li class="active"><a href="#chartGrid"><span class="glyphicon glyphicon-th" aria-hidden="true"></a></li>
76 <li><a href="#chartBig"><span class="glyphicon glyphicon-picture" aria-hidden="true"></a></li>
77 <li class="dropdown">
78 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Help<span class="caret"></span></a>
79 <ul class="dropdown-menu">
80 <li><a href="#aboutRlab">About Rlab</a></li>
81 <li><a href="#">User Guide</a></li>
82 <li><a href="#">Rlab API</a></li>
83 <li role="separator" class="divider"></li>
84 <li><a href="#">More</a></li>
85 </ul>
86 </li>
87 </ul>
88-->
89 <form class="navbar-form">
90<<<<<<< HEAD
91
92 <label class="btn btn-primary btn-file" data-toggle="tooltip" title="Open File">
93 <span class="glyphicon glyphicon-file" aria-hidden="true">
94 <input id="fileButton" type="file" style="display: none;">
95 </label>
96 <label class="btn btn-primary" data-toggle="tooltip" title="Run Code">
97=======
98 <label class="btn btn-primary btn-file">
99 <span class="glyphicon glyphicon-file" aria-hidden="true">
100 <input id="fileButton" type="file" style="display: none;">
101 </label>
102 <label class="btn btn-primary">
103>>>>>>> 59726d7d35cd87e5a100a410ce3a21d192375617
104 <span class="glyphicon glyphicon-play">
105 <input id="runButton" type="button" style="display: none;">
106 </label>
107 </form>
108 </div><!--/.navbar-collapse -->
109 </div>
110 </nav>
111
112 <div class="container">
113 <div class="row">
114 <div class="col-md-6">
115 <h4>Code</h4>
116 <textarea class="form-control" rows="10" id="codeBox" wrap="soft">
117<<<<<<< HEAD
118print('The chart demo of Rlab.\nPlease scroll down to see charts below ...')
119
120G.chart2D('#chart1', function(g) {
121 dt = R.dt;
122 G.curve(g, "dt(3)" , (x)=>dt(x,3) );
123 G.curve(g, "dt(10)", (x)=>dt(x,10));
124 G.curve(g, "dt(25)", (x)=>dt(x,25));
125});
126
127G.chart2D('#chart2', function(g) {
128 var x = R.rnorm(10000, 3, 2);
129 G.hist(g, "x", x, 'bar', -10, 10, 0.3);
130// G.curve(g, "N(5,2)", (x)=>R.dnorm(x, 3, 2)*1000);
131});
132
133G.chart2D('#chart3', function(g) {
134 Ax = R.rnorm(100, 10, 1);
135 Ay = R.rnorm(100, 0, 0.5);
136 Bx = R.rnorm(100, 0, 1);
137 By = R.rnorm(100, 0, 0.5);
138 G.plot(g, "A", Ax, Ay);
139 G.plot(g, "B", Bx, By);
140});
141
142function hist(g,name,x,k) {
143 var mk = x.fillVM(k,x.length/k);
144 var xbar = mk.colSum();
145 G.ihist(g, name, xbar, 'bar');
146}
147
148var x = R.samples([0,1], 100000, {replace:true});
149G.chart2D('#chart4', (g)=>hist(g,'x1bar', x,1));
150G.chart2D('#chart5', (g)=>hist(g,'x2bar', x,2));
151G.chart2D('#chart6', (g)=>hist(g,'x10bar', x,10));
152G.chart2D('#chart7', (g)=>G.pie(g, {A:30, B:40, C:20, D:10}));
153G.chart2D('#chart8', (g)=>G.timeSeries(g, [
154 ['x','2013-01-01','2013-01-02','2013-01-03','2013-01-04','2013-01-05'],
155 ['data1', 30, 200, 100, 400, 150],
156 ['data2', 130, 340, 200, 500, 250]
157]));
158
159G.chart3D('#chart9', 'surface', function(x, y) {
160 return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
161});
162
163=======
164>>>>>>> 59726d7d35cd87e5a100a410ce3a21d192375617
165 </textarea>
166 </div>
167 <div class="col-md-6">
168 <div class="form-group">
169 <h4>Console</h4>
170 <textarea class="form-control" rows="14" id="consoleBox"></textarea>
171 </div>
172 </div>
173 </div>
174 <div class="container-fluid">
175 <h4>Chart(Grid)</h4>
176 <div class="row box">
177 <div class="col-md-4"><div id="chart1" class="chart"></div></div>
178 <div class="col-md-4"><div id="chart2" class="chart"></div></div>
179 <div class="col-md-4"><div id="chart3" class="chart"></div></div>
180 <div class="col-md-4"><div id="chart4" class="chart"></div></div>
181 <div class="col-md-4"><div id="chart5" class="chart"></div></div>
182 <div class="col-md-4"><div id="chart6" class="chart"></div></div>
183 <div class="col-md-4"><div id="chart7" class="chart"></div></div>
184 <div class="col-md-4"><div id="chart8" class="chart"></div></div>
185 <div class="col-md-4"><div id="chart9" class="chart"></div></div>
186 </div>
187 </div>
188 <h4>Chart(Big)</h4>
189 <div class="row">
190 <a name="bigChart"></a>
191 <div class="col-md-12">
192 <div id="bigChart" class="chart-big"></div>
193 <p><a class="btn btn-success" href="#" role="button">Top &raquo;</a></p>
194 </div>
195 </div>
196 <hr>
197 <footer>
198 <p>Rlab = (R+Matlab).js in MIT License</p>
199 </footer>
200 </div>
201 <!-- Bootstrap core JavaScript
202 ================================================== -->
203 <!-- Placed at the end of the document so the pages load faster -->
204 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
205 <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
206 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
207 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
208 <script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
209 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/codemirror.js"></script>
210 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/mode/javascript/javascript.js"></script>
211 <script src="
212https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
213 <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
214 <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.js"></script>
215 <script src="web/rlab.js"></script>
216 <script src="web/glab.js"></script>
217
218<script>
219var codeBox = document.getElementById('codeBox');
220var consoleBox = document.getElementById('consoleBox');
221var fileButton = document.getElementById('fileButton');
222var runButton = document.getElementById('runButton');
223var fileName;
224
225require=function() { return R; }
226
227clear=function() { consoleBox.value = ''; }
228
229print=function() {
230 var args = [].slice.apply(arguments);
231 console.log.apply(console, args);
232 var logStr = "";
233 for (var i=0; i<args.length; i++) {
234 logStr += args[i] + " ";
235 }
236 consoleBox.value += logStr+"\n";
237}
238
239var editor = CodeMirror.fromTextArea(codeBox, {
240 lineNumbers: true,
241 mode:'javascript',
242});
243
244function handleFileSelect(evt) {
245 editor.getDoc().setValue('');
246 codeBox.value = "";
247 var reader = new FileReader();
248 reader.onload = function(e) {
249 editor.getDoc().setValue(reader.result);
250 };
251 fileName = evt.target.files[0].name;
252 reader.readAsText(evt.target.files[0]);
253}
254
255fileButton.addEventListener('change', handleFileSelect, false);
256$("#runButton").click(function() {
257 var code = editor.getDoc().getValue();
258 clear();
259 try {
260 eval(code);
261 } catch (e) {
262 print('error : ', e.message);
263 print('stack trace : ', e.stack);
264 }
265});
266
267function showChart(i) {
268 return function() {
269 G.show('#bigChart', G.tgMap['#chart'+i]);
270 window.location.href = '#bigChart';
271 }
272}
273
274$(document).ready(function() {
275 for (var i=1; i<=9; i++) {
276 $('#chart'+i).click(showChart(i));
277 }
278});
279</script>
280
281<script>
282<<<<<<< HEAD
283
284=======
285G.loadImage('./demo/demo_small.png', function(image) {
286 console.log('load Image complete!');
287 G.drawCanvas('#chart1', function(ctx1, canvas1) {
288 ctx1.drawImage(image, 0, 0);
289 ctx1.fillText('Hello World!', 10, 50);
290 var idata = G.getImageData(canvas1);
291 G.gray(idata);
292 G.drawCanvas('#chart2', function(ctx2) {
293 ctx2.putImageData(idata, 0, 0);
294 });
295 idata = G.getImageData(canvas1);
296 G.bright(idata, 50);
297 G.drawCanvas('#chart3', function(ctx) {
298 ctx.putImageData(idata, 0, 0);
299 });
300 idata = G.getImageData(canvas1);
301 G.threshold(idata, 128);
302 G.drawCanvas('#chart4', function(ctx) {
303 ctx.putImageData(idata, 0, 0);
304 });
305 idata = G.getImageData(canvas1);
306 var blurData = G.blurC(idata);
307 G.drawCanvas('#chart5', function(ctx) {
308 ctx.putImageData(blurData, 0, 0);
309 });
310 idata = G.getImageData(canvas1);
311 var sharpenData = G.sharpen(idata);
312 G.drawCanvas('#chart6', function(ctx) {
313 ctx.putImageData(sharpenData, 0, 0);
314 });
315 idata = G.getImageData(canvas1);
316 var sobelData = G.sobel(idata);
317 G.drawCanvas('#chart7', function(ctx) {
318 ctx.putImageData(sobelData, 0, 0);
319 });
320 idata = G.getImageData(canvas1);
321 var sobelData = G.sobel(idata);
322 var weights =
323 [1, 1, 1,
324 1,0.7, -1,
325 -1,-1 , -1];
326 idata = G.getImageData(canvas1);
327 var convData = G.convolute(idata, weights, true);
328 G.drawCanvas('#chart8', function(ctx) {
329 ctx.putImageData(convData, 0, 0);
330 });
331 var weights =
332 [-1, -1, -1,
333 -1,0.3, 1,
334 1, 1, 1];
335 idata = G.getImageData(canvas1);
336 var conv2Data = G.convolute(idata, weights, true);
337 G.drawCanvas('#chart9', function(ctx) {
338 ctx.putImageData(conv2Data, 0, 0);
339 });
340 });
341});
342
343/*
344G.drawCanvas('#chart1', function(ctx1, canvas1) {
345 G.drawImage(ctx1, './demo/demo_small.png', function(){
346 G.drawText(ctx1, 10, 50, "Hello World!");
347 G.showCanvas('#chart1', G.tgMap['#chart1'].graph); // 這行補還沒畫好就先 showCanvas 的問題！
348 var idata = G.getImageData(canvas1);
349 G.gray(idata);
350 G.drawCanvas('#chart2', function(ctx2) {
351 ctx2.putImageData(idata, 0, 0);
352 });
353 idata = G.getImageData(canvas1);
354 G.bright(idata, 50);
355 G.drawCanvas('#chart3', function(ctx) {
356 ctx.putImageData(idata, 0, 0);
357 });
358 idata = G.getImageData(canvas1);
359 G.threshold(idata, 128);
360 G.drawCanvas('#chart4', function(ctx) {
361 ctx.putImageData(idata, 0, 0);
362 });
363 idata = G.getImageData(canvas1);
364 var blurData = G.blurC(idata);
365 G.drawCanvas('#chart5', function(ctx) {
366 ctx.putImageData(blurData, 0, 0);
367 });
368 idata = G.getImageData(canvas1);
369 var sharpenData = G.sharpen(idata);
370 G.drawCanvas('#chart6', function(ctx) {
371 ctx.putImageData(sharpenData, 0, 0);
372 });
373 idata = G.getImageData(canvas1);
374 var sobelData = G.sobel(idata);
375 G.drawCanvas('#chart7', function(ctx) {
376 ctx.putImageData(sobelData, 0, 0);
377 });
378 idata = G.getImageData(canvas1);
379 var sobelData = G.sobel(idata);
380 var weights =
381 [1, 1, 1,
382 1,0.7, -1,
383 -1,-1 , -1];
384 idata = G.getImageData(canvas1);
385 var convData = G.convolute(idata, weights, true);
386 G.drawCanvas('#chart8', function(ctx) {
387 ctx.putImageData(convData, 0, 0);
388 });
389 var weights =
390 [-1, -1, -1,
391 -1,0.3, 1,
392 1, 1, 1];
393 idata = G.getImageData(canvas1);
394 var conv2Data = G.convolute(idata, weights, true);
395 G.drawCanvas('#chart9', function(ctx) {
396 ctx.putImageData(conv2Data, 0, 0);
397 });
398 });
399});
400*/
401>>>>>>> 59726d7d35cd87e5a100a410ce3a21d192375617
402</script>
403
404 </body>
405</html>
\No newline at end of file