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 |
|
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">×</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 | </div>
|
71 | <div id="navbar" class="navbar-collapse collapse">
|
72 | <ul class="nav navbar-nav navbar-right">
|
73 | <li class="active"><a href="#console">Console</a></li>
|
74 | <li><a href="#canvas">Canvas</a></li>
|
75 | <li class="dropdown">
|
76 | <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Help<span class="caret"></span></a>
|
77 | <ul class="dropdown-menu">
|
78 | <li><a href="#aboutRlab">About Rlab</a></li>
|
79 | <li><a href="#">User Guide</a></li>
|
80 | <li><a href="#">Rlab API</a></li>
|
81 | <li role="separator" class="divider"></li>
|
82 | <li><a href="#">More</a></li>
|
83 | </ul>
|
84 | </li>
|
85 | </ul>
|
86 | <form class="navbar-form">
|
87 | <label class="btn btn-primary btn-file">
|
88 | File <input id="fileButton" type="file" style="display: none;">
|
89 | </label>
|
90 | <label class="btn btn-primary">
|
91 | Run <input id="runButton" type="button" style="display: none;">
|
92 | </label>
|
93 | </form>
|
94 | </div>
|
95 | </div>
|
96 | </nav>
|
97 |
|
98 |
|
99 | <div class="container">
|
100 | <div class="row">
|
101 | <div class="col-md-6">
|
102 | <div class="form-group">
|
103 | <fieldset>
|
104 | <legend>Code</legend>
|
105 | <textarea class="form-control" rows="10" id="codeBox" wrap="soft">
|
106 | </textarea>
|
107 | </fieldset>
|
108 | </div>
|
109 | </div>
|
110 | <div class="col-md-6">
|
111 | <div class="form-group">
|
112 | <fieldset>
|
113 | <legend>Console</legend>
|
114 | <textarea class="form-control" rows="14" id="consoleBox"></textarea>
|
115 | </fieldset>
|
116 | </div>
|
117 | </div>
|
118 |
|
119 | </div>
|
120 |
|
121 |
|
122 | <div class="row">
|
123 | <div class="col-md-4">
|
124 | <div id="chart1" class="chart"></div>
|
125 | </div>
|
126 | <div class="col-md-4">
|
127 | <div id="chart2" class="chart"></div>
|
128 | </div>
|
129 | <div class="col-md-4">
|
130 | <div id="chart3" class="chart"></div>
|
131 | </div>
|
132 | </div>
|
133 | <br/>
|
134 | <div class="row">
|
135 | <div class="col-md-4">
|
136 | <div id="chart4" class="chart"></div>
|
137 | </div>
|
138 | <div class="col-md-4">
|
139 | <div id="chart5" class="chart"></div>
|
140 | </div>
|
141 | <div class="col-md-4">
|
142 | <div id="chart6" class="chart"></div>
|
143 | </div>
|
144 | </div>
|
145 | <br/>
|
146 | <div class="row">
|
147 | <div class="col-md-4">
|
148 | <div id="chart7" class="chart"></div>
|
149 | </div>
|
150 | <div class="col-md-4">
|
151 | <div id="chart8" class="chart"></div>
|
152 | </div>
|
153 | <div class="col-md-4">
|
154 | <div id="chart9" class="chart"></div>
|
155 | </div>
|
156 | </div>
|
157 |
|
158 | <a name="bigChart"></a>
|
159 | <div id="bigChartPanel">
|
160 | <div id="bigChart" class="chart-big"></div>
|
161 | </div>
|
162 | <p><a class="btn btn-success" href="#" role="button">Top »</a></p>
|
163 | <hr>
|
164 |
|
165 | <footer>
|
166 | <p>Rlab = (R+Matlab).js in MIT License</p>
|
167 | </footer>
|
168 | </div>
|
169 | |
170 |
|
171 |
|
172 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
173 | <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
174 | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
175 |
|
176 | <script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
177 | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/codemirror.js"></script>
|
178 | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/mode/javascript/javascript.js"></script>
|
179 | <script src="
|
180 | https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
|
181 | <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
|
182 | <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.js"></script>
|
183 | <script src="web/rlab.js"></script>
|
184 | <script src="web/glab.js"></script>
|
185 |
|
186 | <script>
|
187 | var R = rlab;
|
188 | var codeBox = document.getElementById('codeBox');
|
189 | var consoleBox = document.getElementById('consoleBox');
|
190 | var fileButton = document.getElementById('fileButton');
|
191 | var runButton = document.getElementById('runButton');
|
192 | var fileName;
|
193 |
|
194 | require=function() { return R; }
|
195 |
|
196 | clear=function() { consoleBox.value = ''; }
|
197 |
|
198 | print=function() {
|
199 | var args = [].slice.apply(arguments);
|
200 | console.log.apply(console, args);
|
201 | var logStr = "";
|
202 | for (var i=0; i<args.length; i++) {
|
203 | logStr += args[i] + " ";
|
204 | }
|
205 | consoleBox.value += logStr+"\n";
|
206 | }
|
207 |
|
208 | var editor = CodeMirror.fromTextArea(codeBox, {
|
209 | lineNumbers: true,
|
210 | mode:'javascript',
|
211 | });
|
212 |
|
213 | function handleFileSelect(evt) {
|
214 | console.log('handleFileSelect');
|
215 | editor.getDoc().setValue('');
|
216 | codeBox.value = "";
|
217 | var reader = new FileReader();
|
218 | reader.onload = function(e) {
|
219 | console.log('reader.onload');
|
220 | editor.getDoc().setValue(reader.result);
|
221 |
|
222 |
|
223 |
|
224 | };
|
225 | fileName = evt.target.files[0].name;
|
226 | reader.readAsText(evt.target.files[0]);
|
227 | }
|
228 |
|
229 | fileButton.addEventListener('change', handleFileSelect, false);
|
230 | $("#runButton").click(function() {
|
231 | var code = editor.getDoc().getValue();
|
232 | clear();
|
233 | eval(code);
|
234 | });
|
235 |
|
236 | function showChart(i) {
|
237 | return function() {
|
238 | G.show('#bigChart', G.dgMap['#chart'+i]);
|
239 | window.location.href = '#bigChart';
|
240 | }
|
241 | }
|
242 |
|
243 | $(document).ready(function() {
|
244 | for (var i=1; i<=9; i++) {
|
245 | $('#chart'+i).click(showChart(i));
|
246 | }
|
247 | });
|
248 | </script>
|
249 |
|
250 | <script>
|
251 | </script>
|
252 |
|
253 | </body>
|
254 | </html> |
\ | No newline at end of file |