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