Add JSFiddle examples from the wiki.

They are easier to maintain in the repository. If updates are required, just copy and paste the source into the target JSFiddle.
0xfe · Mar 30, 2022 · c53ff2e · c53ff2e
1 parent 7d69bc3
commit c53ff2e
Show file tree

Hide file tree

Showing 3 changed files with 205 additions and 0 deletions.
diff --git a/demos/jsfiddle/tutorial/step1_basics.html b/demos/jsfiddle/tutorial/step1_basics.html
@@ -0,0 +1,39 @@
+<!DOCTYPE >
+<!-- 
+This example is available at: https://jsfiddle.net/cwnsrep9/
+It is included in the VexFlow Tutorial: https://github.com/0xfe/vexflow/wiki/Tutorial
+-->
+<html>
+  <style>
+    body {
+      font-family: Arial, 'sans-serif';
+    }
+  </style>
+  <body>
+    <!--
+    On JSFiddle.net, we pin the dependency to an exact version number,
+    to prevent a future release from accidentally breaking the example. 
+    -->
+    <script src="https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js"></script>
+    <script>
+      const { Renderer, Stave } = Vex.Flow;
+
+      // Create an SVG renderer and attach it to the DIV element named "boo".
+      const div = document.getElementById('output');
+      const renderer = new Renderer(div, Renderer.Backends.SVG);
+
+      // Configure the rendering context.
+      renderer.resize(500, 500);
+      const context = renderer.getContext();
+
+      // Create a stave of width 400 at position 10, 40 on the canvas.
+      const stave = new Stave(10, 40, 400);
+
+      // Add a clef and time signature.
+      stave.addClef('treble').addTimeSignature('4/4');
+
+      // Connect it to the rendering context and draw!
+      stave.setContext(context).draw();
+    </script>
+  </body>
+</html>
diff --git a/demos/jsfiddle/tutorial/step2_addnotes.html b/demos/jsfiddle/tutorial/step2_addnotes.html
@@ -0,0 +1,80 @@
+<!DOCTYPE >
+<!-- 
+This example is available at: https://jsfiddle.net/c36p8eo2/
+It is included in the VexFlow Tutorial: https://github.com/0xfe/vexflow/wiki/Tutorial
+-->
+<html>
+  <style>
+    body {
+      font-family: Arial, 'sans-serif';
+    }
+  </style>
+  <body>
+    <!--
+    On JSFiddle.net, we pin the dependency to an exact version number,
+    to prevent a future release from accidentally breaking the example. 
+    -->
+    <script src="https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js"></script>
+    <script>
+      const { Renderer, Stave, StaveNote, Voice, Formatter } = Vex.Flow;
+
+      // Create an SVG renderer and attach it to the DIV element named "boo".
+      const div = document.getElementById('output');
+      const renderer = new Renderer(div, Renderer.Backends.SVG);
+
+      // Configure the rendering context.
+      renderer.resize(500, 500);
+      const context = renderer.getContext();
+
+      // Create a stave of width 400 at position 10, 40 on the canvas.
+      const stave = new Stave(10, 40, 400);
+
+      // Add a clef and time signature.
+      stave.addClef('treble').addTimeSignature('4/4');
+
+      // Connect it to the rendering context and draw!
+      stave.setContext(context).draw();
+
+      // Create the notes
+      const notes = [
+        // A quarter-note C.
+        new StaveNote({
+          keys: ['c/4'],
+          duration: 'q',
+        }),
+
+        // A quarter-note D.
+        new StaveNote({
+          keys: ['d/4'],
+          duration: 'q',
+        }),
+
+        // A quarter-note rest. Note that the key (b/4) specifies the vertical
+        // position of the rest.
+        new StaveNote({
+          keys: ['b/4'],
+          duration: 'qr',
+        }),
+
+        // A C-Major chord.
+        new StaveNote({
+          keys: ['c/4', 'e/4', 'g/4'],
+          duration: 'q',
+        }),
+      ];
+
+      // Create a voice in 4/4 and add above notes
+      const voice = new Voice({
+        num_beats: 4,
+        beat_value: 4,
+      });
+      voice.addTickables(notes);
+
+      // Format and justify the notes to 400 pixels.
+      new Formatter().joinVoices([voice]).format([voice], 350);
+
+      // Render voice
+      voice.draw(context, stave);
+    </script>
+  </body>
+</html>
diff --git a/demos/jsfiddle/tutorial/step2_secondvoice.html b/demos/jsfiddle/tutorial/step2_secondvoice.html
@@ -0,0 +1,86 @@
+<!DOCTYPE >
+<!-- 
+This example is available at: https://jsfiddle.net/awe4vdms/
+It is included in the VexFlow Tutorial: https://github.com/0xfe/vexflow/wiki/Tutorial
+-->
+<html>
+  <style>
+    body {
+      font-family: Arial, 'sans-serif';
+    }
+  </style>
+  <body>
+    <!--
+    On JSFiddle.net, we pin the dependency to an exact version number,
+    to prevent a future release from accidentally breaking the example. 
+    -->
+    <script src="https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js"></script>
+    <script>
+      const { Renderer, Stave, StaveNote, Voice, Formatter } = Vex.Flow;
+
+      // Create an SVG renderer and attach it to the DIV element named "boo".
+      const div = document.getElementById('output');
+      const renderer = new Renderer(div, Renderer.Backends.SVG);
+
+      // Configure the rendering context.
+      renderer.resize(500, 500);
+      const context = renderer.getContext();
+
+      // Create a stave of width 400 at position 10, 40 on the canvas.
+      const stave = new Stave(10, 40, 400);
+
+      // Add a clef and time signature.
+      stave.addClef('treble').addTimeSignature('4/4');
+
+      // Connect it to the rendering context and draw!
+      stave.setContext(context).draw();
+
+      // Create the notes
+      const notes = [
+        new StaveNote({
+          keys: ['c/5'],
+          duration: 'q',
+        }),
+        new StaveNote({
+          keys: ['d/4'],
+          duration: 'q',
+        }),
+        new StaveNote({
+          keys: ['b/4'],
+          duration: 'qr',
+        }),
+        new StaveNote({
+          keys: ['c/4', 'e/4', 'g/4'],
+          duration: 'q',
+        }),
+      ];
+
+      const notes2 = [
+        new StaveNote({
+          keys: ['c/4'],
+          duration: 'w',
+        }),
+      ];
+
+      // Create a voice in 4/4 and add above notes
+      const voices = [
+        new Voice({
+          num_beats: 4,
+          beat_value: 4,
+        }).addTickables(notes),
+        new Voice({
+          num_beats: 4,
+          beat_value: 4,
+        }).addTickables(notes2),
+      ];
+
+      // Format and justify the notes to 400 pixels.
+      new Formatter().joinVoices(voices).format(voices, 350);
+
+      // Render voices.
+      voices.forEach(function (v) {
+        v.draw(context, stave);
+      });
+    </script>
+  </body>
+</html>