This repository has been archived by the owner on Feb 9, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
app-model.html
163 lines (144 loc) · 9.15 KB
/
app-model.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
<!DOCTYPE html>
<html>
<head>
<title>SpectraScope</title>
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<!--Bootstrap-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!--BoostratpToggle-->
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.4.0/js/bootstrap4-toggle.min.js"></script>
<!--FontAwesome-->
<script defer src="https://use.fontawesome.com/releases/v5.8.2/js/all.js" integrity="sha384-DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH" crossorigin="anonymous"></script>
<!--D3-->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!--GoogleFonts-->
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Roboto:300" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/ggirelli/wave2color/src/get_color.js" crossorigin="anonymous"></script>
<script src="js/main-model.js"></script>
</head>
<body>
<div class="row">
<header class="mt-5 mb-5 col col-10 offset-1">
<h1 class="text-center"><i class="fas fa-ghost"></i> SpectraScope <i class="fas fa-microscope" onClick="javascript:wave=prompt('Insert wavelength (in nm) or \'reset\' to reset.');color = wave == 'reset' ? 'white' : get_color(wave); $('body').css('background-color', color);"></i> Model <i class="fas fa-wave-square"></i></h1>
<ul class="nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="app.html"><i class="fas fa-home"></i> Home</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#"><i class="fas fa-wave-square"></i> Model</a></li>
</ul>
</header>
<article class="col col-10 offset-1"><div class="row">
<div class="col col-12 mb-4">
<div class="container">
<p>Click one of each source/ex-filter/em-filter/fluorophore (from <i class="fas fa-sign-in-alt"></i>) to add them to the graph. Click on the selected features (from <i class="far fa-hand-pointer"></i>) to remove them from the graph. <b>Hover over</b> a spectrum to visualize a short description below this paragraph. <b>Click</b> on a spectrum to visualize the raw data at the end of the page.</p>
<small><b>Notice!</b> This interface has been developed for GoogleChrome (v74) and FireFox (v66). Thus, it may not be fully compatible with other browsers (e.g., Safari, IExplorer,...).</small>
<input id="short-details" class="form-control mt-3" type="text" placeholder="Move over a spectrum with the mouse to see its details here." disabled />
</div>
</div>
<div id="page-content" class="col-12 mb-4">
<div class="card">
<div class="card-body">
<p><small>Mouse coordinates (wavelength, relative intensity): <span id="mouse-coords">...</span></small></p>
<div id="d3wrapper">
<svg></svg>
</div>
<div class="alert alert-light mb-0"><input type="checkbox" id="model-trigger" name="model-trigger" data-toggle="toggle" data-size="sm" data-onstyle="info" /> <label onclick="$('#model-trigger').bootstrapToggle('toggle')">Model source/fluorophore intensity through the selected filters.</label><br /><small>You must select one of each of source, excitation/emission fitler, and fluorophore to be able to model the spectra throught the optical configuration.</small></div>
</div>
</div>
</div>
<div id="selection" class="col-12 mb-3">
<div class="row">
<div class="col col-3">
<div class="card mb-1">
<div class="card-header text-right">Selected Source <i class="far fa-lightbulb"></i></div>
<div class="card-body sources selection">
<a class="btn btn-block btn-light disabled">unselected</a>
</div>
</div>
</div>
<div class="col col-3">
<div class="card mb-1">
<div class="card-header text-right">Selected Excitation Filter <i class="fas fa-filter"></i></div>
<div class="card-body ex-filters selection">
<a class="btn btn-block btn-light disabled">unselected</a>
</div>
</div>
</div>
<div class="col col-3">
<div class="card mb-1">
<div class="card-header text-right">Selected Fluorophore <i class="fas fa-tint"></i></div>
<div class="card-body fluorophores selection">
<a class="btn btn-block btn-light disabled">unselected</a>
</div>
</div>
</div>
<div class="col col-3">
<div class="card mb-1">
<div class="card-header text-right">Selected Emission Filter <i class="fas fa-filter"></i></div>
<div class="card-body em-filters selection">
<a class="btn btn-block btn-light disabled">unselected</a>
</div>
</div>
</div>
</div>
<p class="mb-1"><small><i class="far fa-hand-pointer"></i> Click on a selected feature to remove it from the current selection.</small></p>
</div>
<div id="input" class="col-12 mb-4">
<div class="card">
<div class="card-header"><i class="fas fa-sign-in-alt"></i> Input</div>
<div class="card-body">
<div class="accordion" id="accordion-settings">
<div class="card">
<div class="card-header" id="headingOne"><h2 class="mb-0">
<button class="btn btn-link collapsed btn-block text-left text-dark" type="button" data-toggle="collapse" data-target="#sources" aria-expanded="true" aria-controls="sources"><i class="fa fa-lightbulb"></i> Sources</button>
</h2></div>
<div id="sources" class="sources collapse" aria-labelledby="headingOne" data-parent="#accordion-settings"><div class="card-body">
<small>Click to add to current selection.</small>
<div class="input option-list"></div>
</div></div>
</div>
<div class="card">
<div class="card-header" id="headingOne"><h2 class="mb-0">
<button class="btn btn-link collapsed btn-block text-left text-dark" type="button" data-toggle="collapse" data-target="#ex-filters" aria-expanded="true" aria-controls="ex-filters"><i class="fas fa-filter"></i> Excitation Filters</button>
</h2></div>
<div id="ex-filters" class="ex-filters collapse" aria-labelledby="headingOne" data-parent="#accordion-settings"><div class="card-body">
<small>Click to add to current selection.</small>
<div class="input option-list"></div>
</div></div>
</div>
<div class="card">
<div class="card-header" id="headingTwo"><h2 class="mb-0">
<button class="btn btn-link collapsed btn-block text-left text-dark" type="button" data-toggle="collapse" data-target="#fluorophores" aria-expanded="false" aria-controls="fluorophores"><i class="fas fa-tint"></i> Fluorophores</button>
</h2></div>
<div id="fluorophores" class="fluorophores collapse" aria-labelledby="headingTwo" data-parent="#accordion-settings"><div class="card-body">
<small>Click to add to current selection.</small>
<div class="input option-list"></div>
</div></div>
</div>
<div class="card">
<div class="card-header" id="headingOne"><h2 class="mb-0">
<button class="btn btn-link collapsed btn-block text-left text-dark" type="button" data-toggle="collapse" data-target="#em-filters" aria-expanded="true" aria-controls="em-filters"><i class="fas fa-filter"></i> Emission Filters</button>
</h2></div>
<div id="em-filters" class="em-filters collapse" aria-labelledby="headingOne" data-parent="#accordion-settings"><div class="card-body">
<small>Click to add to current selection.</small>
<div class="input option-list"></div>
</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="col col-12"><div class="container">
<textarea class="form-control" name="extended_details" id="extended_details" cols="30" rows="10" disabled></textarea><small>Click on a portion of the spectra to see its extensive details here.</small>
</div></div>
</article>
<footer class="mt-5 col col-10 offset-1 text-center">
<p>Gabriele Girelli © 2019 | <a href="https://ggirelli.github.io/SpectraScope/"><i class="fas fa-question-circle"></i></a> | <a href="https://github.com/ggirelli/SpectraScope"><i class="fab fa-github"></i></a> | <a href="https://github.com/ggirelli/SpectraScope/issues">Feedback</a></p>
<p><small>Powered by: <a href="https://jquery.com/">jQuery</a>, <a href="https://d3js.org/">D3.js</a>, <a href="https://fontawesome.com">Font Awesome</a>, <a href="https://getbootstrap.com/docs/4.3/">Bootstrap v4.3</a>, <a href="https://fonts.google.com/">Google Fonts</a></small></p>
</footer>
</div>
</body>
</html>