UNPKG

10.6 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 <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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
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><!--/.navbar-collapse -->
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">
97print('The chart demo of Rlab.\nPlease scroll down to see charts below ...')
98
99G.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
106G.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
112G.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
121function 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
127var x = R.samples([0,1], 100000, {replace:true});
128G.chart2D('#chart4', (g)=>hist(g,'x1bar', x,1));
129G.chart2D('#chart5', (g)=>hist(g,'x2bar', x,2));
130G.chart2D('#chart6', (g)=>hist(g,'x10bar', x,10));
131G.chart2D('#chart7', (g)=>G.pie(g, {A:30, B:40, C:20, D:10}));
132G.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
138G.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 &raquo;</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 <!-- Bootstrap core JavaScript
179 ================================================== -->
180 <!-- Placed at the end of the document so the pages load faster -->
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 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
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="
189https://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>
197var codeBox = document.getElementById('codeBox');
198var consoleBox = document.getElementById('consoleBox');
199var loadButton = document.getElementById('loadButton');
200var runButton = document.getElementById('runButton');
201var fileName;
202
203require=function() { return R; }
204
205clear=function() { consoleBox.value = ''; }
206
207print=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
217var editor = CodeMirror.fromTextArea(codeBox, {
218 lineNumbers: true,
219 mode:'javascript',
220});
221
222function 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 // file name
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
237loadButton.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
255function 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);
271if (window.location.protocol !== 'https:')
272 $('.https').hide();
273</script>
274
275 </body>
276</html>
\No newline at end of file