-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
221 lines (214 loc) · 9.06 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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Knitting Graph Paper Generator</title>
<link rel="stylesheet" href="styles.css"/>
<script src="app.js"></script>
<script src="lib/jscolor.min.js"></script>
<script src="lib/analytics.js"></script>
</head>
<body>
<a href="https://github.com/moisbo/grids"><img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
<div class="header">
<h2>Create Graph Paper for Knitters</h2>
<p class="intro">When you need to graph a pattern for knitting, it is really helpful if
the graph paper grid corresponds with the knitting stitch size. This web application can help
you to create some graph paper that matches your knitting. If you have not used this
web application before then please read the help below.
</p>
<button onclick="toggle('Show' ,'Help', 'help', this)">Show Help</button>
<div class="hide" id="help">
<div class="help">
<h2>1. Create the test swatch</h2>
<p>The first thing to do is to knit a small swatch (sometimes called a tension square)
using the yarn and needles which you intend to use for the main garment. That's
right, a test swatch, an often-overlooked requirement!
</p>
<ol>
<li>Cast on enough stitches to make at least 15 cm width of knitting.
The exact number does not really matter.
</li>
<li>Now knit enough rows to make at least 15 cm of fabric.</li>
<li>Cast off. Your test swatch is completed but not blocked.</li>
</ol>
<h2>2. Block the test swatch</h2>
<p>Blocking is the term given to pressing or otherwise setting your work to prevent it
from distorting. Depending on your material, blocking can be a simple process.
Here is one method which works with Marlyn Alpaca and most natural fibres:
</p>
<ol>
<li>Pin the test swatch to an ironing board, ensuring that it is square and not distorted.</li>
<li>Spray lightly with water.</li>
<li>Leave it to dry (could be overnight).</li>
<li>When it is dry, your test swatch is blocked and should be stable.</li>
</ol>
<p>It is a good idea to label your test swatch with details of the yarn,
needle size (hand knit) or tension settings (machine knit).
</p>
<h2>3. Measure the test swatch</h2>
<p>Measuring the number of stitches per 10 cm of fabric gives you a good
idea as to how many stitches and rows you will need for your garment.
</p>
<ol>
<li>Using a flat rule, place it across the test swatch so you can see a 10 cm
portion in the middle of the knitting. Make sure the knitting is not stretched
or distorted. Write down how many <b>stitches</b> you can count in the 10 cm portion.
Near enough is OK.
</li>
<li>Rotate the rule now so it is going down the work, and count how many <b>rows</b>
you see in a 10 cm portion of the middle of the work. Again near enough is OK.
</li>
</ol>
<h2>4. Now make your graph paper</h2>
<p>Now that you have the number of stitches and rows for a 10 cm portion of
knitted fabric, we can insert those values into the form above and generate a
sheet of graph paper which has been customised for your fabric.
</p>
<p>There are some additional options that you may find useful such as sheet
size, whether you want a darker line every 10 stitches and rows,
and whether you want the graph paper as a printable PDF file or whether
you intend to do something else with it such as edit your picture onto it,
which will be an SVG file.
</p>
</div>
</div>
</div>
<div class="controls">
<p><b>Settings that change the graph size</b>:</p>
<div class="control-inter not-implemented">
<label>Stitch count: <input type="number" id="stich" min="1" value="20"
onchange="stich({value: this.value})"/></label> and
<label>Row count: <input type="number" id="row" min="1" value="19"
onchange="row({value: this.value})"/> </label>
per 10 cm of fabric from measuring your tension square
</div>
<div class="control-inter">
<label>Graph width: <input type="number" value="212" id="width"/> mm</label>
<label>Graph height: <input type="number" value="297" id="height"/> mm</label>
<button onclick="resize()">Resize Graph</button>
</div>
</div>
<div class="controls">
<p><b>Settings that change the graph appearance (see sample below)</b>:</p>
<div class="control-inter">
<span>Major grid lines:
<label>Stroke Width
<input type="number" value="2" min="0" onchange="grid({strokeWidth:this.value})"/>
</label>
<label>Color
<input class="gridColor jscolor" value="#40BDFF" onchange="grid({color:this.jscolor})"/>
</label>
</span>
</div>
<div class="control-inter">
<button onclick="toggle('Show', 'Size', 'majorGridControls', this)">Show Size:</button>
<span id="majorGridControls" class="hide">
<label> Width
<input type="number" value="94.25" min="0"
id="widthGrid" onchange="grid({gridDimWidth:this.value})"/>
</label>
<label> Height
<input type="number" value="104.72222222222221" min="0"
id="heightGrid" onchange="grid({gridDimHeight:this.value})"/>
</label>
</span>
</div>
<div class="control-inter">
<span>Minor grid lines:
<label>Stroke Width
<input type="number" value="0.5" min="0" onchange="smallGrid({strokeWidth: this.value})"/>
</label>
<label>Color
<input class="smallGridColor jscolor" value="#3D3D3D" onchange="smallGrid({color:this.jscolor})"/>
</label>
</span>
</div>
<div class="control-inter">
<button onclick="toggle('Show', 'Size', 'minorGridControls', this)">Show Size:</button>
<span id="minorGridControls" class="hide">
<label>Width
<input id="widthSmallGrid" type="number" value="18.85" min="0"
onchange="smallGrid({gridDimWidth:this.value})"/>
</label>
<label>Height
<input id="heightSmallGrid" type="number" value="20.944444444444443" min="0"
onchange="smallGrid({gridDimHeight:this.value})"/>
</label>
</span>
</div>
</div>
<div class="controls">
<p>Select DPI
<select id="dpi"> <!--Supplement an id here instead of using 'name'-->
<option value="283" selected>72 (Default for AI)</option>
<option value="378">96 (Default for Web)</option>
</select>
</p>
<button class="generate" onclick="generateSVG()">Generate SVG</button>
<a class="hide" id="link" href="" download="pattern.svg" onclick="toggle('', 'Download SVG', 'link', this)">Download
SVG</a>
</div>
<div>
<button onclick="location.reload()">Refresh</button>
</div>
<div class="sample">
<p>Sample</p>
<svg class="ruler" width="1mm" height="10cm">
<rect width="100%" height="100%" fill="url(#grid)"></rect>
</svg>
<svg class="ruler-top" width="10cm" height="1mm">
<rect width="100%" height="100%" fill="url(#grid)"></rect>
</svg>
<div class="view">
<svg id="svg" width="212mm" height="297mm"
xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
.grid {
fill: url("#grid");
}
.smallGrid {
fill: url("#smallGrid");
}
#grid {
fill: none;
}
#smallGrid {
fill: none;
}
#smallRect {
fill: none;
}
#gridPath {
fill: none;
}
#smallPath {
fill: none;
}
</style>
<defs>
<pattern id="grid" width="0" height="0" fill="white" patternUnits="userSpaceOnUse">
<rect id="rect" width="0" height="0" fill="url(#smallGrid)"></rect>
<path id="gridPath" d="M 0 0 L 0 0 0 0" fill="none" stroke="#40BDFF"
stroke-width="2" style=""></path>
</pattern>
<pattern id="smallGrid" width="0" height="0" fill="white" patternUnits="userSpaceOnUse">
<rect id="smallRect" width="0" height="0" fill="url(#smallGrid)"></rect>
<path id="smallPath" d="M 0 0 L 0 0 0 0" fill="none" stroke="#3D3D3D"
stroke-width="0.5" style=""></path>
</pattern>
</defs>
<rect width="100%" class="smallGrid" height="100%" fill="url(smallGrid)"></rect>
<rect width="100%" class="grid" height="100%" fill="url(#grid)"></rect>
</svg>
</div>
</div>
<div class="footer">
<p>For this page code visit: </p>
<p><a href="//github.com/moisbo/grids">https://github.com/moisbo/grids</a></p>
</div>
</body>
</html>