-
Notifications
You must be signed in to change notification settings - Fork 27
/
index.html
176 lines (168 loc) · 10.3 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
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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="SVG to Eagle CAD converter">
<meta name="author" content="Gordon Williams & Pnoxi">
<!--<link rel="icon" href="favicon.ico">-->
<title>SVG to Eagle CAD converter</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<div class="container d-flex flex-column flex-md-row justify-content-between align-items-center">
<h5 class="my-0 mr-md-auto font-weight-normal">svgtoeagle</h5>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
How to use?
</button>
</div>
</div>
<div class="py-3"></div>
<div class="container">
<!-- Github corner -->
<a href="https://github.com/gfwilliams/svgtoeagle" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- Modal -->
<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">How to use?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul class="navbar-text">
<li>In Inkscape</li>
<ul class="navbar-text">
<li>File -> Document Properties -> Set correct document size in millimeters</li>
<li>Select all -> Ungroup</li>
<li>Path -> Object to path</li>
<li>Path -> Break apart</li>
<li>Set a fill *or* a stroke set for every shape you want - items without a fill or a stroke won't be rendered</li>
</ul>
<li>Enter the layer to use in Eagle</li>
<li>Choose whether to flip the image horizontally or not</li>
<li>Click the 'Choose File' box below and upload your SVG</li>
<li>Copy contents of Textarea and Paste into Eagle CAD's command box</li>
</ul>
<hr>
<span>Normally copy/paste works fine, however for complex SVGs the commands become
too big to paste into Eagle's command box. You'll need to click 'Download Eagle Script'
and then load that script in Eagle CAD.</span>
<hr>
<span><strong>Note:</strong> Filled polys with holes will show up in the preview as completely
filled - but in Eagle the holes are kept.</span>
<hr>
<span><strong>Note:</strong> This tool assumes that 0,0 (the crosshair) is in the bottom left
of your board in Eagle (which matches SVGs). If it isn't then the positioning of your graphics
may be wrong.</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Result:</span>
</h4>
<div class="mb-3">
<div id="container"></div>
<canvas id="can" width="300" height="10">
</div>
<div class="mb-3">
<p id="dimensions"></p>
</div>
<div id="log" class="alert alert-warning" style="display:none;" role="alert">
</div>
<hr class="mb-4">
<h4 class="mb-3">Script output:</h4>
<div class="mb-3">
<textarea class="form-control" id="result" rows="9"></textarea>
</div>
<div class="mb-3">
<button class="btn btn-primary btn-lg btn-block" id="dwn-btn" type="submit" onclick="download_script(document.getElementById('fileLoader').value);" disabled>Download eagle script</button>
</div>
</div>
<div class="col-md-4 order-md-1">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Config:</span>
</h4>
<div class="mb-3">
<label for="">Eagle CAD Layer <span class="text-muted small">Top=1, Bottom=16, tPlace=21, bPlace=22</span></label>
<input type="text" class="form-control" id="eagleLayer" placeholder="Eagle CAD Layer" value="21" required>
<div class="invalid-feedback">
Eagle CAD Layer is required.
</div>
</div>
<div class="mb-3">
<label for="">Trace Width <span class="text-muted small">Lower widths produce sharper images (mm)</span></label>
<input type="text" class="form-control" id="traceWidth" placeholder="Trace Width" value="0.1" required>
<div class="invalid-feedback">
Trace Width is required.
</div>
</div>
<div class="mb-3">
<label for="">Subsampling <span class="text-muted small">Larger values produce better approximation of SVG paths but increase conversion time</span></label>
<input type="text" class="form-control" id="subsampling" placeholder="Subsampling" value="5" required>
<div class="invalid-feedback">
Subsampling value is required.
</div>
</div>
<div class="mb-3">
<label for="">Signal Name <span class="text-muted small">(for copper layers, ignored by otherwise)</span></label>
<input type="text" class="form-control" id="signalName" placeholder="Signal Name" value="GND" required>
<div class="invalid-feedback">
Signal Name is required.
</div>
</div>
<div class="mb-3">
<label for="">SVG scale factor <span class="text-muted small">(if dimensions not found in document)</span></label>
<input type="text" class="form-control" id="svgScale" placeholder="SVG scale factor" value="3.77953"required>
<div class="invalid-feedback">
SVG scale factor is required.
</div>
</div>
<h4 class="mb-3">Output format:</h4>
<div class="d-block my-3">
<div class="custom-control custom-radio">
<input id="board" name="eagleformat" type="radio" class="custom-control-input" value="board" checked required>
<label class="custom-control-label" for="board">Board</label>
</div>
<div class="custom-control custom-radio">
<input id="library" name="eagleformat" type="radio" class="custom-control-input" value="library" required>
<label class="custom-control-label" for="library">Library</label>
</div>
</div>
<hr class="mb-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="flipImage">
<label class="custom-control-label" for="flipImage">Flip image horizontally?</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="layerColor">
<label class="custom-control-label" for="layerColor">Split layer by color?</label>
</div>
<hr class="mb-4">
<input class="btn btn-lg btn-block" type="file" id="fileLoader"/><br/>
<button class="btn btn-primary btn-lg btn-block" type="submit" onclick="convert();">Convert!</button>
</div>
</div>
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1"><a href="https://github.com/gfwilliams/svgtoeagle">Made by Gordon Williams</a></p>
<p class="mb-1"><a href="https://github.com/Pnoxi/svgtoeagle">HTML design by Pnoxi</a></p>
<p class="mb-1">© 2019 Gordon Williams & Pnoxi</p>
</footer>
</div>
<script src="simplify.js"></script>
<script src="svgtoeagle.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.24/bootstrap-native-v4.min.js"></script>
</body>
</html>