forked from GRIFFINCollaboration/SpectrumViewer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
2dSpectrumViewer.html
145 lines (120 loc) · 6.69 KB
/
2dSpectrumViewer.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
<html>
<head>
<title>TITAN 2d Spectrum Viewer</title>
<!--libraries-->
<script src='scripts/HTMLImports.min.js' type="text/javascript"></script>
<script type='text/javascript' src='scripts/heatmap.js'></script>
<script src="scripts/jquery1-11-3.min.js" type="text/javascript"></script>
<script src="scripts/bootstrap3-3-5.min.js" type="text/javascript"></script>
<script src="scripts/mustache.js" type="text/javascript"></script>
<!--stylesheets-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css"/>
<!--scripts-->
<script src="scripts/helpers.js" type="text/javascript"></script>
<script src="scripts/2dSpectrumViewer.js" type="text/javascript"></script>
<!--templates-->
<link id='plotList' rel="import" href="templates/plotList/plotList.html">
<link id='cutVertex' rel="import" href="templates/2dSpectrumViewer/cutVertex.html">
<link id='footer' rel="import" href="templates/footer/footer.html">
</head>
<body>
<div id='analyzerPlots'></div>
<!--Plotting-->
<div id='plotRegion' class='sectionWrapper item'>
<div id='plotWrap' class='col-md-6 col-md-offset-1 plotRegion'>
<div id='heatmapTarget' class='well no-pad'>
<div id='intro-plot-picker' class="alert alert-warning" role="alert">
<span class="glyphicon glyphicon-check" aria-hidden="true"></span>
Choose a plot from the menu at the top to get started.
</div>
</div>
</div>
<div class='col-md-4 no-pad'>
<div id='plotControl'>
<div class='ui-group-vertical'> <!-- Not implemented yet -->
<span id='cursorReport'>Cursor x: - y: -</span>
</div>
<div id='updateWrap' class='ui-group-vertical'>
<h4>Data Fetching</h4>
<div class="input-group">
<span class="input-group-addon">Update Every:</span>
<select id="upOptions" class='form-control' style='max-width:7em' autocomplete='off'>
<option value="3000">3 s</option>
<option value="5000">5 s</option>
<option value="10000">10 s</option>
<option value="-1" selected="selected">never</option>
</select>
</div>
<button id="upNow" class="btn btn-default" type="button">Update Now</button>
</div>
<div id='axisControl' class='ui-group-vertical'>
<h4>Axis Control</h4> <!-- Not implemented yet -->
<div class="input-group">
<span class='input-group-addon'>min x</span>
<input id="minX" value="0" type="number" class='black-text'></input>
</div>
<div class="input-group">
<span class='input-group-addon'>max x</span>
<input id="maxX" value="20" type="number" class='black-text'></input>
</div>
<div class="input-group">
<span class='input-group-addon'>min y</span>
<input id="minY" value="0" type="number" class='black-text'></input>
</div>
<div class="input-group">
<span class='input-group-addon'>max y</span>
<input id="maxY" value="20" type="number" class='black-text'></input>
</div>
</div>
<div id='cutBounds' class='ui-group-vertical'>
<h4>Cut Bounds</h4>
<div id='intro-shift-click' class="alert alert-warning hidden" role="alert">
<span class="glyphicon glyphicon-check" aria-hidden="true"></span>
Shift-click several points on the plot to mark a region of interest.
</div>
<div id='intro-unzoom' class="alert alert-warning hidden" role="alert">
<span class="glyphicon glyphicon-check" aria-hidden="true"></span>
You can unzoom by double-clicking.
</div>
<!-- Not working -->
<!--
<ul id='cutPolyVertices' class='list-unstyled'></ul>
<button class='btn btn-success' onclick='saveCutToODB()'>Save Cut Region to ODB</button>
-->
</div>
<div id='info-slow-data' class="alert alert-info hidden" role="alert">
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
Building your histogram...
</div>
</div>
</div>
</div>
<div id='foot'></div>
<script>
window.addEventListener('HTMLImportsLoaded', function(e) {
var _plotList, dim;
//generic asset setup
dataStore.templates = prepareTemplates(['plotList', 'cutVertex', 'footer']);
_plotList = new plotList('analyzerPlots');
_plotControl = new plotControl('plotControl');
_plotList.setup();
_plotControl.setup();
setupFooter('foot');
//start with GRIFFIN menu displayed
document.getElementById('annikal').onclick();
//empty plot
dim = Math.min(document.getElementById('heatmapTarget').offsetWidth, window.innerHeight)
dataStore.hm = new heatmap(dim,dim);
document.getElementById('heatmapTarget').appendChild(dataStore.hm.canvas);
dataStore.hm.preRender = generateOverlay;
dataStore.hm.slowDataWarning = function(state){
if(state === 'on')
document.getElementById('info-slow-data').classList.remove('hidden');
else
document.getElementById('info-slow-data').classList.add('hidden');
}
});
</script>
</body>
</html>