-
Notifications
You must be signed in to change notification settings - Fork 31
/
Copy pathindex.html
122 lines (93 loc) · 6.04 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Infragram | by Public Lab - Home</title>
<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="bootstrap/css/bootstrap.css" rel="stylesheet">
<style> body { padding-top: 60px; } </style>
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="bootstrap/css/slider.css" rel="stylesheet">
<link href="/static/css/application.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-slider.js"></script>
<script src="png.js/zlib.js"></script>
<script src="png.js/png.js"></script>
<script src="jpgjs/jpg.js"></script>
<script src="infragram.js"></script>
</head>
<body>
<div class="container page" style="padding-top:10px;">
<img src="/static/img/infragram-logo.png" style="float:left;margin-right:14px;"/>
<br />
<h1><a style="color:#444;" href="/">Infragram</a> <br class="visible-phone"/><small>by <a href="http://publiclab.org">Public Lab</a></small></h1>
<p>Welcome to Public Lab's online service for generating plant health analyses from near-infrared imagery!</p>
<hr>
<p>For more information about the Infragram platform, <a href="http://publiclab.org/wiki/near-infrared-camera">read about the open source cameras we are developing</a>, or see our <a href="http://www.kickstarter.com/projects/publiclab/infragram-the-infrared-photography-project">Kickstarter</a> video. To purchase a filter kit to make your own camera, visit <a href="http://store.publiclab.org/products/infragram-diy-filter-pack">the Public Lab Store</a></p>
<div class="content">
<hr />
<h3>JavaScript Infragram Sandbox</h3>
<p>This page is a demo of an under-development, browser-based infrared compositing environment, <a href="https://github.com/bgamari/infragram-js">created by Ben Gamari</a> with additions by Don Blair and Jeff Warren.</p>
<div class="well">
<div style="float:right;margin-right:20px;">
<span style="margin-right:20px;">Learn how to use this <a href="http://publiclab.org/wiki/infragram-js">at PublicLab.org/wiki/infragram-js</a></span>
<b>Slider: </b>
<input id="slider" type="text" value="100" data-slider-min="0" data-slider-max="100" data-slider-value="100" />
</div>
<form name="file-form">
<b>Select an <a href="http://publiclab.org/wiki/near-infrared-camera">infrablue image</a>: </b>
<input type="file" name="file-sel" onchange="on_file_sel();"></input>
</form>
<form id="infragrammar" class="form-inline" style="display:inline;margin-right:20px;" action="javascript:void();">
<b>Channel mixer:</b>
<input placeholder="R" type="text" id="r_exp" class="input-small" />
<input placeholder="G" type="text" id="g_exp" class="input-small" />
<input placeholder="B" type="text" id="b_exp" class="input-small" />
<button type="submit" id="run" class="btn btn-primary">Run</button>
</form>
<form id="infragrammar_mono" class="form-inline" style="display:inline;margin-right:20px;" action="javascript:void();">
<input placeholder="monochrome" type="text" id="m_exp" class="input-small" />
<button type="submit" id="run" class="btn btn-primary">Run</button>
</form>
<b>Presets:</b>
<span class="btn-toolbar">
<div class="btn-group" data-toggle="buttons-radio">
<button id="raw" type="button" class="btn active">Raw</button>
<button id="ndvi" type="button" class="btn">NDVI</button>
<button id="nir" type="button" class="btn">NIR</button>
</div>
<button style="display:none;margin-left:30px;" id="download" type="button" class="btn btn-primary"><i class="icon-white icon-download"></i> Download</button>
</span>
</div>
<canvas id="image" style="width: 800; height: 800;"></canvas>
<script>
(function(){
$('button#raw').on('click', function() { mode="raw"; update(image); });
$('button#ndvi').on('click', function() { mode="ndvi"; update(image); });
$('button#nir').on('click', function() { mode="nir"; update(image); });
$('#download').on('click', function() { download(); });
$('#infragrammar').on('submit', function() { save_expressions($('#r_exp').val(),$('#g_exp').val(),$('#b_exp').val());update(image,"infragrammar"); });
$('#infragrammar_mono').on('submit', function() { save_expressions($('#m_exp').val(),$('#m_exp').val(),$('#m_exp').val());update(image,"infragrammar"); });
// http://www.eyecon.ro/bootstrap-slider/
$('#slider').slider().on('slide', function(ev){
save_expressions($('#r_exp').val(),$('#g_exp').val(),$('#b_exp').val());update(image,"infragrammar");
});
})()
</script>
</div>
<footer class="footer" style="clear:both;padding-top:10px;">
<hr>
<h4 style="margin-bottom:40px;"><a style="color:#444;" href="/">Infragram</a> <small>by <a href="http://publiclab.org">Public Lab</a> | This web app is <a href="https://github.com/bgamari/infragram-js/">open source software</a></small></h4>
</footer>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-43030180-1', 'infragram.org');
ga('send', 'pageview');
</script>
</body>
</html>