UNPKG

9.11 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 </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><!--/.navbar-collapse -->
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 <!-- Example row of columns -->
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 &raquo;</a></p>
163 <hr>
164
165 <footer>
166 <p>Rlab = (R+Matlab).js in MIT License</p>
167 </footer>
168 </div> <!-- /container -->
169 <!-- Bootstrap core JavaScript
170 ================================================== -->
171 <!-- Placed at the end of the document so the pages load faster -->
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 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
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="
180https://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>
187var R = rlab;
188var codeBox = document.getElementById('codeBox');
189var consoleBox = document.getElementById('consoleBox');
190var fileButton = document.getElementById('fileButton');
191var runButton = document.getElementById('runButton');
192var fileName;
193
194require=function() { return R; }
195
196clear=function() { consoleBox.value = ''; }
197
198print=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
208var editor = CodeMirror.fromTextArea(codeBox, {
209 lineNumbers: true,
210 mode:'javascript',
211});
212
213function 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// codeBox.value = reader.result;
222// E.editor.setValue(codebox.value);
223// run();
224 };
225 fileName = evt.target.files[0].name;
226 reader.readAsText(evt.target.files[0]);
227}
228
229fileButton.addEventListener('change', handleFileSelect, false);
230$("#runButton").click(function() {
231 var code = editor.getDoc().getValue();
232 clear();
233 eval(code);
234});
235
236function 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