-
Notifications
You must be signed in to change notification settings - Fork 166
/
index.html
262 lines (219 loc) · 13.9 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
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="en">
<head>
<title>Infragram | by Public Lab - Home</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Public Lab's online, open source service for generating plant health analyses from near-infrared imagery.">
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
<!-- CSS Link -->
<link href="dist/infragram.css" rel="stylesheet">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/webrtc-adapter/out/adapter.js"></script>
<script src="node_modules/getusermedia-js/dist/getUserMedia.min.js"></script>
<script src="dist/infragram.js"></script>
<script type="x-shader/x-vertex" id="shader-vs"></script>
<script type="x-shader/x-fragment" id="shader-fs-template"></script>
<script type="x-shader/x-fragment" id="shader-fs"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TC8EC01HKK"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-TC8EC01HKK');
</script>
</head>
<body>
<div class="container page" style="padding-top:10px;">
<div class="modal" tabindex="-1" role="dialog" id="preset-modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<!--<div class="modal-header"></div>-->
<div class="modal-body">
<h3>Quick start</h3>
<p>Choose from these presets to get up and running quickly. These auto-load common 2. Analysis and 3. Colorize settings so you don't have to manually choose them.</p>
<table class="table">
<tr>
<td width="30%"><b>Raw</b></td>
<td width="30%">Just what your camera sees.</td>
<td><a class="btn btn-primary" id="preset_raw">Begin</a></td>
</tr>
<tr>
<td><b>NDVI for <span style="color:blue;">BLUE</span> filters</b></td>
<td>basic plant analysis for <a href="http://store.publiclab.org/product/infragram-diy-filter-pack">Infragram filter packs</a> and <a href="http://store.publiclab.org/product/infragram-webcam">webcams</a></td>
<td><a class="btn btn-primary" id="preset_ndvi_blue">Basic</a>
<a class="btn btn-success" id="preset_ndvi_blue_color">Colorized</a></td>
</tr>
<tr>
<td><b>NDVI for <span style="color:red;">RED</span> filters</b></td>
<td>basic plant analysis for <a href="http://store.publiclab.org/products/infragram-point-shoot-plant-cam">Infragram Point & Shoot cameras</a></td>
<td><a class="btn btn-primary" id="preset_ndvi_red">Basic</a>
<a class="btn btn-success" id="preset_ndvi_red_color">Colorized</a></td>
</tr>
</table>
<p>Post a research note at <a href="http://publiclab.org">PublicLab.org</a> and email <a href="mailto:[email protected]">[email protected]</a> to suggest new presets.</p>
</div>
<div class="modal-footer">
<a data-dismiss="modal" data-toggle="modal" class="btn">cancel</a>
</div>
</div>
</div>
</div>
<h1><img src="assets/infragram-logo.png" alt="Infragram logo image." style="float:left;margin-right:14px;width:80px;"../> <a style="color:#444;padding-top:8px;" href="../">Infragram</a> <small>by <a href="http://publiclab.org" target="_blank">Public Lab</a></small></h1>
<p>Analyze plant health with near-infrared imagery! <a href="http://publiclab.org/wiki/infragram">Learn more & mod a camera</a>, or <a href="http://store.publiclab.org/products/infragram-diy-filter-pack">buy a modded camera</a>.</p>
<div class="content">
<div class="alert alert-success" style="margin-top: 0;">
Support Public Lab’s mission to provide this platform freely to the whole world!
<a href="https://secure.lglforms.com/form_engine/s/zIbQWRjJiBYCVwCN6tXIHw">Join our Software Stewards with a $5/month donation</a>.
</div>
<div id="toolbar">
<div class="zone">
<p>QUICK START</p>
<div class="btn-group">
<a target="_blank" href="http://publiclab.org/wiki/infragram-sandbox" id="btn-webcam" type="button" class="btn btn-lg btn-default"><i class="fa fa-question-circle"></i></a>
<button href="#preset-modal" data-toggle="modal" id="preset-modal-btn" type="button" class="btn btn-lg btn-primary"><i class="fa fa-magic"></i> Presets</button>
</div>
</div>
<div class="zone">
<p>1. SOURCE (<a target="_blank" href="http://publiclab.org/infragram#cameras">CAMERAS</a>)</p>
<div class="btn-group" id="imageselect">
<label for="file-sel" class="btn btn-lg btn-primary" rel="tooltip" title="Upload an image">
<i class="fa fa-upload"></i>
<input type="file" id="file-sel">
</label>
<button rel="tooltip" title="Connect to an Infragram webcam" id="webcam-activate" type="button" class="btn btn-lg btn-primary"><i class="fa fa-camera"></i></button>
</div>
</div>
<div class="zone zone-analysis">
<p>2. CONVERT/ANALYZE (<a target="_blank" href="http://publiclab.org/infragrammar">ABOUT INFRAGRAMMAR</a>)</p>
<select class="form-control" style="display:inline;width:80px;" id="modeSwitcher" onChange="if(this.value == 'infragrammar_mono'){$('.colorize').show()}else{$('.colorize').hide()}">
<option value='infragrammar_mono'>Grey</option>
<option value='infragrammar'>RGB</option>
<!-- <option value='infragrammar_hsv'>HSV</option> -->
</select>
<form id="infragrammar_mono" class="form-inline" style="display:inline;" action="javascript:void(0);">
<input placeholder="monochrome" type="text" id="m_exp" class="form-control" value="(R-B)/(R+B)">
<button type="submit" class="btn btn-primary">Run</button>
</form>
<form id="infragrammar" class="form-inline" style="display:none;" action="javascript:void(0);">
<input placeholder="R" type="text" id="r_exp" class="form-control" value="R">
<input placeholder="G" type="text" id="g_exp" class="form-control" value="G">
<input placeholder="B" type="text" id="b_exp" class="form-control" value="B">
<button type="submit" class="btn btn-primary">Run</button>
</form>
<form id="infragrammar_hsv" class="form-inline" style="display:none;" action="javascript:void(0);">
<input placeholder="H" type="text" id="h_exp" class="form-control" value="-(R-B)/(R+B)">
<input placeholder="S" type="text" id="s_exp" class="form-control" value="1">
<input placeholder="V" type="text" id="v_exp" class="form-control" value="1">
<button type="submit" class="btn btn-primary">Run</button>
</form>
</div>
<div class="zone colorize">
<p>3. <a href="https://publiclab.org/tag/colormap">COLORIZE</a></p>
<div class="btn-group">
<button type="submit" class="btn btn-lg btn-default btn-colorize"><i class="fa fa-adjust"></i></button>
<a class="btn btn-lg dropdown-toggle btn-default" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a id="default_colormap">Default colormap</a></li>
<li><a id="stretched_colormap">Stretched colormap</a></li>
</ul>
</div>
</div>
<div class="zone">
<p>4. OVERLAY</p>
<div class="row">
<div class="col-md-4">
<button id="overlay-btn" class="btn btn-lg btn-default">
<i class="fa fa-th" aria-hidden="true"></i>
</button>
</div>
<div class="col-md-8" id="overlay-controls-container" style="display:none;">
<input id="overlay-slider" type="range" min="10" max="50" value="100"/>
<span id="overlay-size" style="color:#ccc;"></span>
<button id="overlay-save-btn" class="btn btn-primary">Save</button>
<span id="overlay-save-info" style="color:green; display: none;">Size saved!</span>
</div>
</div>
</div>
<div class="zone last" id="save-zone" style="display:none;">
<p>OUTPUT</p>
<button onClick="openInPl()" type="button" class="btn btn-primary btn-lg">Save</button>
<button onClick="infragram.download()" type="button" class="btn btn-primary btn-lg">Download</button>
<button onClick="openInSequencer()" type="button" class="btn btn-primary btn-lg">Export</button>
</div>
<br style="clear:both;" />
</div>
<div id="image-container">
<div style="display:none;"><div id="webcam"></div></div>
<a class="btn btn-default fullscreen" style="opacity:0.3;position:absolute;z-index:3;margin:6px;"><i class="fa fa-expand"></i></a>
<div onClick="$('.choose-prompt').hide();" class="choose-prompt" style="display:inline;color:white;position:absolute;z-index:3;padding-top:14px;text-align:left;padding-left:60px;">
<p>1. Choose an input above: select an image, or choose live video.</p>
<p>2. Choose an analysis mode or click PRESETS.</p>
<p>3. Colorize your results (optional).</p>
<p>Click this message to hide it.</p>
</div>
<div style="background:#111;display:none;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;" id="backdrop"></div>
<div id="overlay-container" class="container" style="display:none;">
<img id="overlay-img" src="assets/grid.svg">
</div>
<a class="btn-inverse btn-small" style="display:none;position:absolute;top:6px;left:6px;z-index:3;" id="exit-fullscreen"><i class="fa fa-remove"></i> Exit full screen</a>
<canvas class="fullscreen" id="image" width="800" height="600"></canvas>
<div id="colorbar-container" style="display:none;">
<span id="colorbar-min">-1.00</span>
<canvas id="colorbar"></canvas>
<span id="colorbar-max">1.00</span>
</div>
</div>
<hr style="clear:both;">
<h2>Q&A</h2>
<p>Ask and answer questions to peer-troubleshoot this system:</p>
<iframe style="border:none;" width="100%" height="900px" src="//publiclab.org/embed/grid/question:infragram?"></iframe>
</div>
<footer class="footer">
<hr>
<h4 style="margin-bottom:40px;"><a style="color:#444;" href="http://publiclab.org/infragram" target="_blank">Infragram</a> <small>by <a href="http://publiclab.org" target="_blank">Public Lab</a> | This web app is <a href="https://github.com/publiclab/infragram/" target="_blank">open source software</a>; <a href="https://github.com/publiclab/infragram/issues" target="_blank">please report bugs</a></small></h4>
<p>Infragram was created by <a href="https://github.com/bgamari" target="_blank">Ben Gamari</a>, <a href="http://github.com/donblair" target="_blank">Don Blair</a>, <a href="http://publiclab.org/profile/warren">Jeff Warren</a> and <a href="http://github.com/pfoltyn" target="_blank">Piotr Foltyn</a> and others from <a href="http://publiclab.org/contributors/infragram" target="_blank">Public Lab</a>.</p>
</footer>
</div>
<script>
//tooltip hides after one click
$('[rel="tooltip"]').tooltip({
trigger: "hover",
});
var infragram, openInPl, openInSequencer;
(function() {
infragram = Infragram({
uploader: false,
processor: 'webgl',
version: 1
});
openInPl = function openInPl() {
var dataurl = infragram.options.processor.getCurrentImage();
function postToPL(imgSrc) {
var uniq = Date.now();
var color = $('#m_exp').val().substr(1,3) == "R-B" ? "blue" : "red";
var bodyText = "The lead image is a processed Infragram image from https://infragram.org. It is good practice to upload the original image as well. The sequence used to generate the above image was: https://sequencer.publiclab.org/examples/#steps=ndvi{filter:" + color + "},colormap{colormap:default}";
$('body').append('<form method="post" id="postToPL' + uniq + '" action="https://publiclab.org/post?tags=infragram,infragram-upload&body=' + bodyText + '" target="postToPLWindow"><input type="hidden" name="datauri_main_image" /></form>');
f = $('#postToPL' + uniq)[0];
f.datauri_main_image.value = imgSrc;
window.open('', 'postToPLWindow');
f.submit();
}
postToPL(dataurl);
}
openInSequencer = function openInSequencer() {
var color = $('#m_exp').val().substr(1,3) == "R-B" ? "blue" : "red";
var dataurl = infragram.options.processor.getInputImage();
window.location = "https://sequencer.publiclab.org/examples/#steps=ndvi{filter:" + color + "},colormap{colormap:default}&src=" + dataurl;
}
})()
</script>
</body>
</html>