-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (85 loc) · 4.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
<!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">
<title>NYPL Labs - Layering Tool</title>
<meta name="description" content="An experiment by NYPL Labs to warp, layer, and mask images">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/vendor/normalize.css">
<link rel="stylesheet" href="css/vendor/toggle-switch.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="header">
<p><img src="img/logo.png" alt="NYPL Logo" /> An experiment by <a href="http://www.nypl.org/collections/labs">NYPL Labs</a> developer <a href="http://brianfoo.com" target="_blank">Brian Foo</a>.</p>
</div>
<div class="container clearfix">
<p class="description">
This is a tool for warping, layering, and masking of images. You can read more about it
<a href="http://www.nypl.org/blog/2014/06/18/peeling-painted-layers-nyc-walls" target="_blank">here</a>.
</p>
<div class="instructions warp-tool">
<p>Drag the control points to each corner of the painted wall above and
repeat for each image. Once complete, you will be able to align and manipulate them.</p>
</div>
<div class="content" data-src="data/bowery_warped.json" data-mode="mask">
<script id="content-tmpl" type="x-tmpl-mustache">
<div id="{{id}}" class="image-container slave {{active}}">
<img id="image-{{id}}" class="image" src="{{url}}" width="{{w}}" height="{{h}}" data-target="#canvas-{{id}}" />
<canvas id="canvas-{{id}}" class="canvas" width="{{w}}" height="{{h}}"></canvas>
<div class="drawing-board" data-target="#canvas-{{id}}"><div class="shape"></div></div>
<div class="image-label">{{title}}</div>
<div class="image-section-matrix"></div>
<div class="handle tl"></div>
<div class="handle tr"></div>
<div class="handle bl"></div>
<div class="handle br"></div>
</div>
</script>
</div> <!-- /content -->
<div class="controls clearfix">
<button class="warp-link warp-tool hide">Align Images</button>
<button class="next-link warp-tool">Next</button>
<div class="switch mask-tool hide">
<div class="switch-toggle switch-3 switch-candy">
<input id="brush" name="tool" type="radio" value="brush" checked>
<label for="brush" onclick="">Brush</label>
<input id="rectangle" name="tool" value="rectangle" type="radio">
<label for="rectangle" onclick="">Rectangle</label>
<input id="ellipse" name="tool" value="ellipse" type="radio">
<label for="ellipse" onclick="">Ellipse</label>
<a></a>
</div>
</div>
<button class="reset-mask-link mask-tool hide">Reset</button>
</div>
<div class="nav">
<script id="nav-link-tmpl" type="x-tmpl-mustache">
<a href="#{{id}}" class="nav-link {{active}}" title="{{title}}"><img src="{{url}}" /></a>
</script>
</div> <!-- /nav -->
</div> <!-- /container -->
<div id="images-output"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script>window.jQuery.ui || document.write('<script src="js/vendor/jquery-ui-1.10.4.min.js"><\/script>')</script>
<script src="js/vendor/mustache.js"></script>
<script src="js/vendor/jquery.ui.touch-punch.min.js"></script>
<script src="js/vendor/jquery.hammer-full.min.js"></script>
<script type="text/javascript" src="js/vendor/imagewarp/point.js"></script>
<script type="text/javascript" src="js/vendor/imagewarp/matrix22.js"></script>
<script type="text/javascript" src="js/vendor/imagewarp/deformation.js"></script>
<script type="text/javascript" src="js/vendor/imagewarp/interpolation.js"></script>
<script src="js/helpers.js"></script>
<script src="js/transformer.js"></script>
<script src="js/mask.js"></script>
<script src="js/warp.js"></script>
<script src="js/main.js"></script>
</body>
</html>