forked from clementzheng/joinery
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
184 lines (135 loc) · 6.05 KB
/
index.html
File metadata and controls
184 lines (135 loc) · 6.05 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Joinery</title>
<meta name="description" content="Parametric joint generation for laser cutting">
<meta name="author" content="Clement Zheng (clementzheng.info)">
<link rel="shortcut icon" href="favicon.png">
<!--CSS-->
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,300,300italic,400italic,500,500italic,700,700italic,100,100italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900,400italic,500italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<!--SCRIPTS-->
<script language="javascript" type="text/javascript" src="js/lib/FileSaver.js"></script>
<script language="javascript" type="text/javascript" src="js/lib/jquery-1.11.3.min.js"></script>
<script language="javascript" type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="js/lib/paper-full.js"></script>
<script language="javascript" type="text/javascript" src="js/main.js"></script>
<script language="javascript" type="text/javascript" src="js/joints.js"></script>
<script language="javascript" type="text/javascript" src="js/mousekey.js"></script>
<script language="javascript" type="text/javascript" src="js/menu.js"></script>
</head>
<body onload="init()">
<div>
<canvas id="bgCanvas"></canvas>
</div>
<div>
<canvas id="paperCanvas"></canvas>
</div>
<div id="leftMenu" class="active menuStyle">
<div id="leftMenuFrame">
<div id="loadSVGDiv">
<label for="loadSVG" class="button2" style="width:120px; margin-bottom: 1px;">load SVG</label>
<input id="loadSVG" style="display:none;" type="file">
</div>
<div id="updateSVGDiv" class="button2 inactive" style="width:120px; margin-bottom: 1px;" onclick="updateSVG()">
update SVG
</div>
<div id="exportSVGDiv" class="button2 inactive" style="width:120px;" onclick="exportProject()">
export SVG
</div>
<div id="loadProjectDiv">
<label for="loadProject" class="button2" style="width:120px; margin-top: 12px; margin-bottom: 1px;">load project</label>
<input id="loadProject" style="display:none;" type="file">
</div>
<div id="saveProjectDiv" class="button2" style="width:120px; margin-bottom: 7px;" onclick="saveProject()">
save project
</div>
<div id="units" style="margin-top: 25px">
<b>Units:</b>
<input id="unitMM" class="checkbox" type="checkbox">
<label class="checkboxLabel">mm</label>
<input id="unitIn" class="checkbox" type="checkbox">
<label class="checkboxLabel">in</label>
</div>
<div id="dimensions" style="margin-top: 25px">
<b>Dimensions:</b>
<input id="dimOn" class="checkbox" type="checkbox">
<label class="checkboxLabel"></label>
</div>
</div>
<div id="leftMenuCollapse" class="collapse" title="system options">‹</div>
</div>
<div id="leftMenu2" class="active menuStyle">
<div id="leftMenuFrame2">
<div id="actionMenu">
<p>Canvas Tools</p>
<li id="arrangeClick" title="arrange individual SVG files"><b>[a]</b> arrange parts</li>
<li id="removeClick" title="remove individual SVG files"><b>[x]</b> remove parts</li>
<li id="panClick" title="move the entire canvas; hold space to pan on the fly"><b>[p]</b> pan</li>
<p style="margin-top: 25px;">Joint Tools</p>
<li class="active" id="setClick" title="define a pair of paths as a joint"><b>[s]</b> set joints</li>
<li id="reverseClick" title="reverse the direction of a path"><b>[r]</b> reverse path</li>
<li id="flipClick" title="flip the side of a path which joints are generated"><b>[f]</b> flip joints</li>
<li id="swapClick" title="swap male and female paths"><b>[w]</b> swap M/F</li>
</div>
</div>
<div id="leftMenuCollapse2" class="collapse" title="tools menu">‹</div>
</div>
<div id="topMessage">
</div>
<div id="jointImageDiv">
</div>
<div id="rightMenu" class="active menuStyle">
<div id="rightMenuCollapse" class="collapse" title="joint profiles">›</div>
<div id="rightMenuFrame">
<div id="jointProfileDiv">
<div id="addJointProfile">
<div style="position: relative; float:left; width: 290px; height: 30px; padding: 10px 0; box-sizing: border-box; line-height: 10px; letter-spacing: 1px; font-weight: 700; text-transform: none">
Joint Profiles
</div>
<div id="jointTypeDiv" style="position: relative; float:left; width: 165px; height: 30px; padding: 0; box-sizing: border-box;">
<div class="dropdown" style="width:165px; height:30px; font-size: 12px;">
<div class="dropdownSelected">
</div>
<div class="optionsDiv">
</div>
</div>
<div id="downArrow">
▼
</div>
</div>
<div onclick="addJointProfile()" class="button2" style="float: left; margin-left: -1px; height: 30px; box-sizing: border-box;">add</div>
<div style="float: right;">
<label for="loadJointProfile" class="button2" style="height: 30px; box-sizing: border-box;">load</label>
<input id="loadJointProfile" style="display:none;" type="file">
</div>
</div>
<div id="jointProfileListDiv">
</div>
</div>
</div>
</div>
<div id="rightMenu2" class="active menuStyle">
<div id="rightMenuCollapse2" class="collapse" title="joint list">›</div>
<div id="rightMenuFrame2">
<div id="jointListTitle" style="position: relative; float:left; width: 290px; height: 30px; padding: 10px 0; box-sizing: border-box; line-height: 10px; letter-spacing: 1px; font-weight: 700; text-transform: none">
Joint List
</div>
<div id="jointListDiv">
</div>
</div>
</div>
<div id="contextMenu">
<li id="contextSet">set joints</li>
<li id="contextRev">reverse path</li>
<li id="contextFlip">flip joints</li>
<li id="contextSwap">swap M/F</li>
</div>
<div class="footer">
<div id="helpDiv"><a href="http://www.instructables.com/id/Joinery-Joints-for-Laser-Cut-Assemblies/" target="_BLANK">?</a></div>
© Clement Zheng 2016
</div>
</body>
</html>