-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·198 lines (175 loc) · 10.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Data Monitor</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<a class="navbar-brand" href="#">Data Monitor</a>
<div class="pull-right">
<button id="startDataMonitoring" class="btn btn-success navbar-btn">Start</button>
<button id="stopDataMonitoring" class="btn btn-danger navbar-btn">Stop</button>
<button id="loadData" class="btn btn-primary navbar-btn">Load data once</button>
<a data-toggle="modal" href="#settingsModal" class="btn btn-default navbar-btn">Settings <span class="glyphicon glyphicon-cog"></span></a>
<a data-toggle="modal" href="#creditsModal" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-info-sign"></span></a>
</div>
</div>
</nav>
<!-- all the data ends up here -->
<div id="data">
<pre class="data"></pre>
</div>
<div id="welcome" class="jumbotron">
<h1>Hello there!</h1>
<hr>
<p class="lead">Set me going and I'll periodically show you changes to your data</p>
<p>It's recommended you DON'T use the automatic data refresh feature of this viewer (controled with the red and green buttons at the top) unless you know what you're doing and really need to (ie for a local install).</p>
<p>For the most part you should be fine selecting the data source form the settings pane, configuring the options and hitting "Load Data Once" to set the app off. To reload the data, click the button again or use the <code>l</code> key as a keyboard shortcut</p>
</div>
<!-- Used for AJAX errors only currently -->
<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content alert alert-block alert-danger fade in">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Oops!</h4>
</div>
<div class="modal-body">
<p id="alertText">Something went wrong :(</p>
</div><!-- .modal-body -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- credits modal -->
<div class="modal fade" id="creditsModal" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel" aria-hidden="true" style="text-align:center">
<div class="modal-dialog">
<div class="modal-content fade in">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Credits</h4>
</div>
<div class="modal-body">
<h3>Lovingly crafted by <a href="http://jeshua.co">Jeshua Maxey</a></h3>
<br>
<p>
<a href="http://twitter.com/jeshuamaxey">
<img src="img/sm-icons/twitter.png" alt="">
</a>
<a href="http://github.com/jeshuamaxey">
<img src="img/sm-icons/github.png" alt="">
</a>
<a href="http://tumblr.com/i-likeitwhatisit">
<img src="img/sm-icons/tumblr.png" alt="">
</a>
</p>
<br>
<hr>
<p>Graphing made possible by <a href="http://highcharts.com">Highcharts JS</a>.</p>
<p>Many thanks to <a href="http://getbootstrap.com">Twitter Bootstrap</a> as always.</p>
<p>Social media icons by <a href="http://veodesign.com/en/">VEO</a>.</p>
</div><!-- .modal-body -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Settings Modal -->
<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Settings</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="">Data Source:</label>
<button id="refreshDataFiles" class="btn btn-small btn-default pull-right">Refesh Listing</button>
<br>
<!--<input id="dataURL" type="text" class="form-control" placeholder="URL">-->
<select id="dataFiles"></select>
</div>
<div class="form-group">
<label for="">Refresh Interval (s)</label>
<input id="interval" type="number" class="form-control" value="2.0" step="0.2" min="0.2">
</div>
<div class="form-group">
<label for="">Format data as:</label>
<br>
<div class="btn-group data-format clearfix" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="data-format-options" value="raw"> Raw
</label>
<label class="btn btn-primary">
<input type="radio" name="data-format-options" value="csv"> CSV
</label>
<label class="btn btn-primary">
<input type="radio" name="data-format-options" value="tsv"> TSV
</label>
<label class="btn btn-primary">
<input type="radio" name="data-format-options" value="json"> JSON
</label>
</div>
<small>(If raw is selected, you won't be able to plot or visualise data. Select CSV for use with sample data)</small>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#pendulums" data-toggle="tab">Pendulums</a></li>
<li><a href="#isner" data-toggle="tab">Isner Model</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="pendulums" class="form-group beta-features">
<label>
<input type="checkbox" id="plotLineGraph"> Plot line graph (beta feature - select CSV or TSV)
</label>
<label>
<input type="checkbox" id="simulatePendulum"> Simulate pendulum (beta feature - select CSV or TSV)
</label>
<label>
Pendulum visualisation mode:
<select id="simMode">
<option value="single-pen">multiple single pendulums</option>
<option value="double-pen">double pendulum</option>
</select>
</label>
<label>Number of single pendulums: <input id="numberOfPendulums" type="number" step="1" min="1" value="1"> </label>
</div><!-- #pendulums -->
<div id="isner">
<div class="tab-pane active" id="pendulums" class="form-group beta-features">
<label>
<input type="checkbox" id="plotLineGraph"> Plot line graph (beta feature - select CSV or TSV)
</label>
<label>
<input type="checkbox" id="heatMap"> Generate Heat Map (beta feature - requires JSON)
</label>
</div><!-- #isner -->
</div>
</div><!-- .modal-body -->
<div class="modal-footer">
<button id="saveChanges" type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- javascript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/jquery.csv-0.71.min.js"></script>
<script src="js/jquery.tsv-0.96.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>