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 |
|
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 |
|
15 | <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
16 |
|
17 |
|
18 | <link href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
|
19 |
|
20 |
|
21 | <link href="web/rlab.css" rel="stylesheet">
|
22 |
|
23 |
|
24 |
|
25 | <script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
|
26 |
|
27 |
|
28 | |
29 |
|
30 |
|
31 |
|
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 | <nav class="navbar navbar-inverse navbar-fixed-top">
|
43 | <div class="container">
|
44 | <div class="navbar-header">
|
45 | <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
46 | <span class="sr-only">Toggle navigation</span>
|
47 | <span class="icon-bar"></span>
|
48 | <span class="icon-bar"></span>
|
49 | <span class="icon-bar"></span>
|
50 | </button>
|
51 | <a class="navbar-brand" href="#">Rlab = (R + Matlab).js</a>
|
52 |
|
53 | </div>
|
54 | <div id="navbar" class="navbar-collapse collapse">
|
55 | <ul class="nav navbar-nav navbar-right">
|
56 | <li class="dropdown">
|
57 | <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Help<span class="caret"></span></a>
|
58 | <ul class="dropdown-menu">
|
59 | <li><a href="https://github.com/ccckmit/rlab">Rlab on github</a></li>
|
60 | <li><a href="http://ccc.nqu.edu.tw/rlab/rlab.html">Rlab demo site</a></li>
|
61 | </ul>
|
62 | </li>
|
63 | <li class="dropdown https">
|
64 | <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Login<span class="caret"></span></a>
|
65 | <ul class="dropdown-menu">
|
66 | <li><a href="#login" data-toggle="modal" data-target="#loginModal">Login</a></li>
|
67 | <li><a href="#logout">Logout</a></li>
|
68 | </ul>
|
69 | </li>
|
70 | </ul>
|
71 | <form class="navbar-form">
|
72 | <div class="form-group">
|
73 | <input id='fileName', type="text" placeholder="File" class="form-control">
|
74 | <label class="btn btn-primary btn-file" data-toggle="tooltip" title="Open File">
|
75 | <span class="glyphicon glyphicon-file" aria-hidden="true">
|
76 | <input id="loadButton" type="file" style="display: none;">
|
77 | </label>
|
78 | <label class="btn btn-primary" data-toggle="tooltip" title="Run Code">
|
79 | <span class="glyphicon glyphicon-play">
|
80 | <input id="runButton" type="button" style="display: none;">
|
81 | </label>
|
82 | <label class="btn btn-primary https" data-toggle="tooltip" title="Save File">
|
83 | <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true">
|
84 | <input id="saveButton" type="button" style="display: none;">
|
85 | </label>
|
86 | </div>
|
87 | </form>
|
88 | </div>
|
89 | </div>
|
90 | </nav>
|
91 |
|
92 | <div class="container">
|
93 | <div class="row">
|
94 | <div class="col-md-6">
|
95 | <h4>Code</h4>
|
96 | <textarea class="form-control" rows="10" id="codeBox" wrap="soft">
|
97 | print('The chart demo of Rlab.\nPlease scroll down to see charts below ...')
|
98 |
|
99 | G.chart2D('#chart1', function(g) {
|
100 | dt = R.dt;
|
101 | G.curve(g, "dt(3)" , (x)=>dt(x,3) );
|
102 | G.curve(g, "dt(10)", (x)=>dt(x,10));
|
103 | G.curve(g, "dt(25)", (x)=>dt(x,25));
|
104 | });
|
105 |
|
106 | G.chart2D('#chart2', function(g) {
|
107 | var x = R.rnorm(10000, 3, 2);
|
108 | G.hist(g, "x", x, 'bar', -10, 10, 0.3);
|
109 | // G.curve(g, "N(5,2)", (x)=>R.dnorm(x, 3, 2)*1000);
|
110 | });
|
111 |
|
112 | G.chart2D('#chart3', function(g) {
|
113 | Ax = R.rnorm(100, 10, 1);
|
114 | Ay = R.rnorm(100, 0, 0.5);
|
115 | Bx = R.rnorm(100, 0, 1);
|
116 | By = R.rnorm(100, 0, 0.5);
|
117 | G.plot(g, "A", Ax, Ay);
|
118 | G.plot(g, "B", Bx, By);
|
119 | });
|
120 |
|
121 | function hist(g,name,x,k) {
|
122 | var mk = x.fillVM(k,x.length/k);
|
123 | var xbar = mk.colSum();
|
124 | G.ihist(g, name, xbar, 'bar');
|
125 | }
|
126 |
|
127 | var x = R.samples([0,1], 100000, {replace:true});
|
128 | G.chart2D('#chart4', (g)=>hist(g,'x1bar', x,1));
|
129 | G.chart2D('#chart5', (g)=>hist(g,'x2bar', x,2));
|
130 | G.chart2D('#chart6', (g)=>hist(g,'x10bar', x,10));
|
131 | G.chart2D('#chart7', (g)=>G.pie(g, {A:30, B:40, C:20, D:10}));
|
132 | G.chart2D('#chart8', (g)=>G.timeSeries(g, [
|
133 | ['x','2013-01-01','2013-01-02','2013-01-03','2013-01-04','2013-01-05'],
|
134 | ['data1', 30, 200, 100, 400, 150],
|
135 | ['data2', 130, 340, 200, 500, 250]
|
136 | ]));
|
137 |
|
138 | G.chart3D('#chart9', 'surface', function(x, y) {
|
139 | return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
|
140 | });
|
141 |
|
142 | </textarea>
|
143 | </div>
|
144 | <div class="col-md-6">
|
145 | <div class="form-group">
|
146 | <h4>Console</h4>
|
147 | <textarea class="form-control" rows="14" id="consoleBox"></textarea>
|
148 | </div>
|
149 | </div>
|
150 | </div>
|
151 | <div class="container-fluid">
|
152 | <h4>Chart(Grid)</h4>
|
153 | <div class="row box">
|
154 | <div class="col-md-4"><div id="chart1" class="chart"></div></div>
|
155 | <div class="col-md-4"><div id="chart2" class="chart"></div></div>
|
156 | <div class="col-md-4"><div id="chart3" class="chart"></div></div>
|
157 | <div class="col-md-4"><div id="chart4" class="chart"></div></div>
|
158 | <div class="col-md-4"><div id="chart5" class="chart"></div></div>
|
159 | <div class="col-md-4"><div id="chart6" class="chart"></div></div>
|
160 | <div class="col-md-4"><div id="chart7" class="chart"></div></div>
|
161 | <div class="col-md-4"><div id="chart8" class="chart"></div></div>
|
162 | <div class="col-md-4"><div id="chart9" class="chart"></div></div>
|
163 | </div>
|
164 | </div>
|
165 | <h4>Chart(Big)</h4>
|
166 | <div class="row">
|
167 | <a name="bigChart"></a>
|
168 | <div class="col-md-12">
|
169 | <div id="bigChart" class="chart-big"></div>
|
170 | <p><a class="btn btn-success" href="#" role="button">Top »</a></p>
|
171 | </div>
|
172 | </div>
|
173 | <hr>
|
174 | <footer>
|
175 | <p>Rlab = (R+Matlab).js in MIT License</p>
|
176 | </footer>
|
177 | </div>
|
178 | |
179 |
|
180 |
|
181 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
182 | <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
183 | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
184 |
|
185 | <script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
186 | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/codemirror.js"></script>
|
187 | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/mode/javascript/javascript.js"></script>
|
188 | <script src="
|
189 | https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
|
190 | <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
|
191 | <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.js"></script>
|
192 | <script src="web/rlab.js"></script>
|
193 | <script src="web/glab.js"></script>
|
194 | <script src="web/editor.js"></script>
|
195 |
|
196 | <script>
|
197 | var codeBox = document.getElementById('codeBox');
|
198 | var consoleBox = document.getElementById('consoleBox');
|
199 | var loadButton = document.getElementById('loadButton');
|
200 | var runButton = document.getElementById('runButton');
|
201 | var fileName;
|
202 |
|
203 | require=function() { return R; }
|
204 |
|
205 | clear=function() { consoleBox.value = ''; }
|
206 |
|
207 | print=function() {
|
208 | var args = [].slice.apply(arguments);
|
209 | console.log.apply(console, args);
|
210 | var logStr = "";
|
211 | for (var i=0; i<args.length; i++) {
|
212 | logStr += args[i] + " ";
|
213 | }
|
214 | consoleBox.value += logStr+"\n";
|
215 | }
|
216 |
|
217 | var editor = CodeMirror.fromTextArea(codeBox, {
|
218 | lineNumbers: true,
|
219 | mode:'javascript',
|
220 | });
|
221 |
|
222 | function handleFileSelect(evt) {
|
223 | editor.getDoc().setValue('');
|
224 | codeBox.value = "";
|
225 | var reader = new FileReader();
|
226 | reader.onload = function(e) {
|
227 | editor.getDoc().setValue(reader.result);
|
228 |
|
229 | var path = fileButton.value;
|
230 | var fileName = path.split(/(\\|\/)/g).pop();
|
231 | $('#fileName').val(fileName);
|
232 | };
|
233 | fileName = evt.target.files[0].name;
|
234 | reader.readAsText(evt.target.files[0]);
|
235 | }
|
236 |
|
237 | loadButton.addEventListener('change', handleFileSelect, false);
|
238 |
|
239 | $("#runButton").click(function() {
|
240 | var code = editor.getDoc().getValue();
|
241 | clear();
|
242 | try {
|
243 | eval(code);
|
244 | } catch (e) {
|
245 | print('error : ', e.message);
|
246 | print('stack trace : ', e.stack);
|
247 | }
|
248 | });
|
249 |
|
250 | $('#saveButton').click(function() {
|
251 | if (!E.isLogin()) return;
|
252 | E.Server.save($('#fileName').val(), $('#codeBox').val());
|
253 | });
|
254 |
|
255 | function showChart(i) {
|
256 | return function() {
|
257 | G.show('#bigChart', G.tgMap['#chart'+i]);
|
258 | window.location.href = '#bigChart';
|
259 | }
|
260 | }
|
261 |
|
262 | $(document).ready(function() {
|
263 | for (var i=1; i<=9; i++) {
|
264 | $('#chart'+i).click(showChart(i));
|
265 | }
|
266 | });
|
267 | </script>
|
268 |
|
269 | <script>
|
270 | $('body').append(E.loginBoxHtml);
|
271 | if (window.location.protocol !== 'https:')
|
272 | $('.https').hide();
|
273 | </script>
|
274 |
|
275 | </body>
|
276 | </html> |
\ | No newline at end of file |