-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
266 lines (266 loc) · 16.4 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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Examples | Guitar Diagrams JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="./css/styles.css" rel="stylesheet">
</head>
<body>
<div class="container my-5">
<h1>Guitar Diagrams JS - Examples</h1>
<p>This page includes usage examples for <a href="https://github.com/KCarlile/guitar-diagrams-js">Guitar Diagrams JS</a>,
an open source JavaScript library for drawing guitar neck diagrams. The <a href="../index.md">full API
documentation</a> is also available.</p>
<h2 class="border-bottom border-1 mb-4">Preface - Setup</h2>
<div class="row">
<div class="col mb-5">
<p>Before adding the code to draw your diagram, you'll need to include the Guitar Diagrams JS library and
provide a target element (e.g., a <code class="language-html"><div></code>) to which the app can add the canvas and begin drawing.</p>
<p>To include the library, use an import statement at the top of your script<sup>1</sup> with the following:</p>
<pre><code class="language-javascript">import { GuitarDiagramsJS } from 'path/to/guitar-diagrams.mjs';</code></pre>
<p class="small"><sup>1</sup>The <em>script</em> can be an inline script with <code class="language-html"><script></code>
tags, or it could be in its own JavaScript file that you include or reference in some other way.</p>
<p>To give Guitar Diagrams JS a place to add the drawing, you'll need to specify a block-level element
with an ID, such as the following:</p>
<pre><code class="language-html"><div id="diagram-1"></div></code></pre>
<p>That div's ID doesn't need to be <em>diagram-1</em> as shown, but it needs to be a unique name that
you will reference later on in your code, like this:</p>
<pre><code class="language-javascript">gdj1.addCanvasToElement('diagram-1');</code></pre>
</div>
</div>
<!-- BEGIN: example 1 -->
<h2 class="border-bottom border-1 mb-4">Example 1 - Basic fretboard</h2>
<div class="row mb-5">
<div class="col-md-6 mb-4">
<div id="diagram-1"></div>
</div>
<div class="col-md-6 mb-4">
<p>This example demonstrates the most basic usage with a vertical fretboard and no additional options.</p>
<h5>Code</h5>
<pre><code class="language-javascript">let gdj1 = new GuitarDiagramsJS();
gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's an ID
gdj1.addCanvasToElement('diagram-1'); // add the canvas to the specified element ID on the page
gdj1.drawNeck(); // draw the fretboard</code></pre>
</div>
</div>
<!-- END: example 1 -->
<!-- BEGIN: example 2 -->
<h2 class="border-bottom border-1 mb-4">Example 2 - Adding markers</h2>
<div class="row mb-5">
<div class="col-md-6 mb-4">
<div id="diagram-2"></div>
</div>
<div class="col-md-6 mb-4">
<p>This example shows a vertical fretboard with the following configuration options:</p>
<ul class="list-group mb-3">
<li class="list-group-item">String names are enabled</li>
<li class="list-group-item">Adds 7 markers of various shapes with one blank marker and two zero-fret (open string) markers</li>
</ul>
<h5>Code</h5>
<pre><code class="language-javascript">let gdj2 = new GuitarDiagramsJS();
gdj2.config.canvasID = 'diagram-2-canvas';
gdj2.config.stringNamesEnabled = true;
gdj2.addCanvasToElement('diagram-2');
gdj2.drawNeck();
gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square); // add a square marker on string 1, fret 1, text '1'
gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle); // add a triangle marker on string 2, fret 2, text '2'
gdj2.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond); // add a diamond marker on string 3, fret 3, text '3'
gdj2.addMarker(4, 4, '4'); // add a default (circle) marker on string 4, fret 4, text '4'
gdj2.addMarker(5, 0, '0'); // add a default (circle) marker on string 5, fret 0, text '0'
gdj2.addMarker(6, 0, 'X'); // add a default (circle) marker on string 6, fret 0, text 'X'
gdj2.addMarker(3, 1); // add a default (circle) marker on string 3, fret 1, text empty
gdj2.drawAllMarkers(); // draw the markers</code></pre>
</div>
</div>
<!-- END: example 2 -->
<!-- BEGIN: example 3 -->
<h2 class="border-bottom border-1 mb-4">Example 3 - Changing string and fret count with custom string names and horizontal orientation</h2>
<div class="row mb-5">
<div class="col-md-6 mb-4">
<div id="diagram-3"></div>
</div>
<div class="col-md-6 mb-4">
<p>This example shows a horizontal fretboard with the following configuration options:</p>
<ul class="list-group mb-3">
<li class="list-group-item">String names are enabled with custom string names (drop D, 4 strings for bass)</li>
<li class="list-group-item">Horizontal orientation</li>
<li class="list-group-item">Starting on the 3rd fret</li>
<li class="list-group-item">Limited to only 3 frets</li>
<li class="list-group-item">Adds the same 7 markers of various shapes with one blank marker (the same as the previous example),
but 3 of them are off the fretboard so they aren't drawn</li>
</ul>
<h5>Code</h5>
<pre><code class="language-javascript">let gdj3 = new GuitarDiagramsJS();
gdj3.config.canvasID = 'diagram-3-canvas';
gdj3.config.stringNamesEnabled = true; // set string names enabled
gdj3.config.orientHorizontally = true; // set horizontal orientation
gdj3.config.fretStartingNumber = 3; // set starting fret
gdj3.config.stringNames = ['D','A','D','G']; // set string names and count
gdj3.config.fretCount = 3; // set starting fret
gdj3.addCanvasToElement('diagram-3');
gdj3.drawNeck();
gdj3.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj3.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
gdj3.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond);
gdj3.addMarker(4, 4, '4');
gdj3.addMarker(5, 5, '5');
gdj3.addMarker(6, 4, '6');
gdj3.addMarker(3, 1);
gdj3.drawAllMarkers();</code></pre>
<p>The markers that would be rendered off the fretboard are logged in the browser's console log as the errors seen below:</p>
<pre><code>guitar-diagrams.mjs:677 [State] GuitarDiagramsJS.addMarker(): { minFret: 0 | maxFret: 3 }
guitar-diagrams.mjs:679 [Error] GuitarDiagramsJS.addMarker(): Fret marker could not be placed on fretboard. { paramString: 4 | paramFret: 4 | paramText: 4 | paramShape: null }
guitar-diagrams.mjs:677 [State] GuitarDiagramsJS.addMarker(): { minFret: 0 | maxFret: 3 }
guitar-diagrams.mjs:679 [Error] GuitarDiagramsJS.addMarker(): Fret marker could not be placed on fretboard. { paramString: 5 | paramFret: 5 | paramText: 5 | paramShape: null }
guitar-diagrams.mjs:677 [State] GuitarDiagramsJS.addMarker(): { minFret: 0 | maxFret: 3 }
guitar-diagrams.mjs:679 [Error] GuitarDiagramsJS.addMarker(): Fret marker could not be placed on fretboard. { paramString: 6 | paramFret: 4 | paramText: 6 | paramShape: null }</code></pre>
</div>
</div>
<!-- END: example 3 -->
<!-- BEGIN: example 4 -->
<h2 class="border-bottom border-1 mb-4">Example 4 - Scaling</h2>
<div class="row mb-5">
<div class="col-md-6 mb-4">
<div id="diagram-4"></div>
</div>
<div class="col-md-6 mb-4">
<p>This example shows a vertical fretboard with the following configuration options:</p>
<ul class="list-group mb-3">
<li class="list-group-item">Diagram scaled to 60% (.6)</li>
<li class="list-group-item">Adds the same 7 markers of various shapes with one blank marker (the same as the previous examples)</li>
</ul>
<h5>Code</h5>
<pre><code class="language-javascript">let gdj4 = new GuitarDiagramsJS();
gdj4.config.canvasID = 'diagram-4-canvas';
gdj4.config.scaleFactor = .6; // set scaling factor (.6 == 60%)
gdj4.addCanvasToElement('diagram-4');
gdj4.drawNeck();
gdj4.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj4.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
gdj4.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond);
gdj4.addMarker(4, 4, '4');
gdj4.addMarker(5, 5, '5');
gdj4.addMarker(6, 4, '6');
gdj4.addMarker(3, 1);
gdj4.drawAllMarkers();</code></pre>
</div>
</div>
<!-- END: example 4 -->
<!-- BEGIN: example 5 -->
<h2 class="border-bottom border-1 mb-4">Example 5 - Customizing visuals</h2>
<div class="row mb-5">
<div class="col-md-6 mb-4">
<div id="diagram-5"></div>
</div>
<div class="col-md-6 mb-4">
<p>This example, while <em>intentionally</em> not very visually appealing, shows a vertical fretboard that has been customized with varying visual configuration options as shown below:</p>
<ul class="list-group mb-3">
<li class="list-group-item">String names are enabled</li>
<li class="list-group-item">Starting on the 2nd fret</li>
<li class="list-group-item">Customize settings for the following:
<ul class="list-group">
<li class="list-group-item">Fretboard background color</li>
<li class="list-group-item">Nut background and outline colors</li>
<li class="list-group-item">Fret color</li>
<li class="list-group-item">String color</li>
<li class="list-group-item">Fret marker color</li>
<li class="list-group-item">Diagram background color</li>
<li class="list-group-item">Label color for string name and starting fret number</li>
<li class="list-group-item">Marker's stroke width</li>
<li class="list-group-item">Marker's font size</li>
</ul>
</li>
<li class="list-group-item">Adds the same 7 markers of various shapes with one blank marker (the same as the previous examples)</li>
</ul>
<h5>Code</h5>
<pre><code class="language-javascript">let gdj5 = new GuitarDiagramsJS();
gdj5.config.canvasID = 'diagram-5-canvas';
gdj5.config.stringNamesEnabled = true;
gdj5.config.fretStartingNumber = 2;
gdj5.config.colorFretboard = '#FFE0B2'; // specify the fretboard background color
gdj5.config.colorNut = '#FFFFFF'; // specify the nut color
gdj5.config.colorNutOutline = '#7E5109'; // specify the nut outline color
gdj5.config.colorFrets = '#AEB6BF'; // specify the fret color
gdj5.config.colorStrings = '#566573'; // specify the string color
gdj5.config.colorFretMarkers = '#424949'; // specify the fret marker color
gdj5.config.colorDiagramBackground = '#000000'; // specify the diagram background color
gdj5.config.colorLabel = '#FFFFFF'; // specify the label color for string names and starting fret
gdj5.config.markerStrokeWidth = 1; // specify the marker's stroke width
gdj5.config.markerFontSize = 10; // specify the marker text's font size
gdj5.addCanvasToElement('diagram-5');
gdj5.drawNeck();
gdj5.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj5.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
gdj5.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond);
gdj5.addMarker(4, 4, '4');
gdj5.addMarker(5, 5, '5');
gdj5.addMarker(6, 4, '6');
gdj5.addMarker(3, 1);
gdj5.drawAllMarkers();</code></pre>
</div>
</div>
<!-- END: example 5 -->
<!-- BEGIN: example 6 -->
<h2 class="border-bottom border-1 mb-4">Example 6 - Controls</h2>
<div class="row mb-5">
<div class="col-md-6 mb-4">
<div id="diagram-6"></div>
</div>
<div class="col-md-6 mb-4">
<p>This example demonstrates some configuration options for controls as shown below:</p>
<ul class="list-group mb-3">
<li class="list-group-item">String names are enabled</li>
<li class="list-group-item">Controls are enabled<br /><em>Controls must be enabled, then each individual control must be enabled to ensure that all controls are intentionally added. Alternatively, call <code class="language-javascript">gdj6.config.enableAllControls();</code> to enable controls and all individual controls.</em></li>
<li class="list-group-item">Image download button is enabled</li>
<li class="list-group-item">Change orientation button is enabled</li>
<li class="list-group-item">Adds the same 7 markers of various shapes with one blank marker (the same as the previous examples)</li>
</ul>
<h5>Code</h5>
<pre><code class="language-javascript">let gdj6 = new GuitarDiagramsJS();
gdj6.config.canvasID = 'diagram-6-canvas';
gdj6.config.stringNamesEnabled = true;
gdj6.config.controlsEnabled = true;
gdj6.config.downloadImageEnabled = true;
gdj6.config.changeOrientationEnabled = true;
gdj6.addCanvasToElement('diagram-6');
gdj6.drawNeck();
gdj6.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj6.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
gdj6.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond);
gdj6.addMarker(4, 4, '4');
gdj6.addMarker(5, 5, '5');
gdj6.addMarker(6, 4, '6');
gdj6.addMarker(3, 1);
gdj6.drawAllMarkers();</code></pre>
</div>
</div>
<!-- END: example 6 -->
<div class="row">
<div class="col border-top small">
<p><span class="fw-bold">Guitar Diagram JS</span></p>
<ul class="list-group list-group-horizontal">
<li class="list-group-item border-0 flex-fill"><a href="https://github.com/KCarlile/guitar-diagrams-js">GitHub Repository</a></li>
<li class="list-group-item border-0 flex-fill"><a href="../index.md">API Documentation</a></li>
</ul>
</div>
</div>
</div>
<!-- BEGIN: custom script include for Guitar Diagrams JS -->
<script src="../../src/guitar-diagrams.mjs" type="module"></script>
<script src="./js/main.js" type="module"></script>
<!-- END: custom script include for Guitar Diagrams JS -->
<!-- BEGIN: CDN include for Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!-- END: CDN include for Bootstrap -->
<!-- BEGIN: CDN include for highlight.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>
hljs.configure({ cssSelector: 'code' });
hljs.highlightAll();
</script>
<!-- END: CDN include for highlight.js -->
</body>
</html>