Polygon-Tool/index.html at master · Cryru/Polygon-Tool · GitHub

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
<html>

<head>
	<script src="libs/jquery.js"></script>
	<link rel="stylesheet" type="text/css" href="libs/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="libs/bootstrap-grid.min.css">
	<link rel="stylesheet" type="text/css" href="libs/bootstrap-reboot.min.css">
	<script src="libs/transform.js"></script>
	<script src="polygontool.js"></script>
</head>

<body style="overflow: hidden">
	<div class='container-fluid'>
		<div style="margin: 10px"> </div>
		<div class="row">
			<div class="col-sm-9">
				<canvas id='drawarea'> </canvas>
			</div>
			<div class="col-sm-3">
				<textarea id='exportbox' style="width: 100%; height: 75%; font-family: Consolas;" /> </textarea>
			</div>
		</div>
		<div style="margin: 10px"> </div>
		<div class="row">
			<div class="col-sm-6">
				Remember to place your vertices in counter-clockwise order for physics to work!
				<ul>
					<li>Click to create a vertex.</li>
					<li>Click and drag with the middle mouse button to pan.</li>
					<li>Use the scroll wheel to zoom in and out.</li>
				</ul>
			</div>
			<div class="col-sm-6">
				<div class="row">
					<div class="col-sm-6">
						<div class="row">
							<div class="col-sm-12">
								Vertices Object Name: <input type="text" id="vertname">
							</div>
						</div>
						<div style="margin: 10px"> </div>
						<div class="row">
							<div class="col-sm-12">
								Underlay Image: <input type="file" id="file">
							</div>
						</div>
						<div style="margin: 10px"> </div>
						<div class="row">
							<div class="col-sm-12">
								<button id='backbutton'>Undo Last Point</button>
								<button id='resetbutton'>Clear All Points</button>
								<button id='resetview'>Reset View</button>
							</div>
						</div>
						<div style="margin: 10px"> </div>
						<div class="row">
							<div class="col-sm-12">
								<input type='checkbox' id='sePolygon' checked> SoulEngine Polygon</input>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12">
								<input type='checkbox' id='asArray'> Export as an array</input>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="margin: 10px"> </div>

		</div>
	</div>
	<img id="image" style="display: none;">
</body>

</html>