forked from aganim/canvas-igp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (94 loc) · 5.54 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>
<html>
<head>
<title>CIGP</title>
<script src="js/jquery-1.7.js"></script>
<script src="js/jquery-ui-1.10.3.min.js"></script>
<link rel="stylesheet" href="css/cigp.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
</head>
<body>
<header>
<h1>Canvas Irregular Grid Painter</h1>
<p>This tool is based heavily on the work done by Zlosk on <a href="http://www.zlosk.com/pgmg/igp/">Irregular Grid Painter</a>.</p>
<p>Zlosk's IGP contains a number of features that are not implemented yet here such as freehand drawing and the ability to export to a 3d image file format. It is an excellent tool which many folks have used over the past decade. </p>
<p>I intend to add most of the missing features in the near future. If there is a particular feature you need please comment below and I will try to prioritize it.</p>
<p>This version is a ground-up rewrite which uses the html5 canvas element so that it can run entirely in browser. The primary advantages to this approach are that it is platform independent, and the user does not need to install anything.</p>
<p>For more information, please reference the FAQ (coming soon). </p>
<p>The source code is available on github under the MIT license at <a href="http://github.com/aganim/canvas-igp">Canvas IGP</a>.</p>
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p>This tool currently only works in Chrome and Firefox.</p>
</div>
<ul>
<li>
<label for="patternSelector">Please choose a pattern:</label>
<select id="patternSelector"></select>
</li>
<li hidden="true">
<label for="canvasWidth">Canvas width:</label>
<input type="number" value="800" id="canvasWidth"/>
</li>
<li hidden="true">
<label for="canvasWidth">Canvas height:</label>
<input type="number" value="600" id="canvasHeight"/>
</li>
<li hidden="true">
<label for="colorPicker">Color:</label>
<input type="color" value="#000000" id="colorPicker"/>
<input type="button" id="colorButton" value="Set"/>
</li>
<li>
<label for="sourceFile">Select File:</label>
<input type="file" id="sourceFile"/>
</li>
</ul>
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p>After selecting a file, the canvas will resize and then begin drawing in your patterned image. If your image begins with a large white space, it may initially appear that nothing is happening.</p>
</div>
<button id="saveImageButton">Save Patterned Image</button>
<button id="subtileCountButton">View Subtile Count By Color</button>
</header>
<section>
<article>
<div id="canvasDiv">
<canvas width="50" height="100" id="canvas">
Canvas
</canvas>
</div>
<div id="patternedImageDialog" style="display:none;">
<p>Right click the image in this dialog and "Save Image As..." to save.
<p>Or if you are using Chrome you have to select "Copy Image" and then paste it into an image editing program to save.</p>
</div>
<div id="subtileCountDialog" style="display:none;"></div>
</article>
</section>
<section hidden="true" id="imageResources"></section>
<footer>
<script src="js/imageHandler.js"></script>
<script src="js/subtileCount.js"></script>
<script src="js/classes.js"></script>
<script src="js/patterns.js"></script>
<script src="js/cigp.js"></script>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
$("document").ready(function() {
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
} else {
alert('The browser you are using does not support required features. Please try a recent version of Firefox or Chrome');
}
document.getElementById('sourceFile').addEventListener('change', cigp.handleSourceFileSelect, false);
imageHandler.loadPatternFiles(patterns, cigp.init);
$('#saveImageButton').button().click(imageHandler.savePatternedImage);
$('#subtileCountButton').button().click(subtileCount.showSubtileCount);
})
</script>
</footer>
</body>
</html>