Add demo gif

sonph · Apr 16, 2024 · a77e656 · a77e656
1 parent 281f4ba
commit a77e656
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -1,21 +1,40 @@
 # README #
 
-A stripped down fork of https://github.com/montulli/GrooveScribe to embed drum
-sheet notation in [Notion](https://www.notion.so/).
+A barebone fork of GrooveScribe for embedding drum sheet notation in
+[Notion](https://www.notion.so/).
 
-First, read
-[GrooveScribe README](https://github.com/montulli/GrooveScribe?tab=readme-ov-file#).
+GrooveScribe is a visual tool for musicians to annotate their drum grooves and
+fills. It is accessible at https://www.mikeslessons.com/gscribe or
+http://montulli.github.io/GrooveScribe/.
 
-Changes:
+The original GrooveScribe project source code is at
+https://github.com/montulli/GrooveScribe.
+
+#### How to use:
+
+1. Transcribe your drum groove or fill at one of the URLs listed above.
+
+2. Copy the link.
+
+3. Use the [converter](https://sonph.github.io/notion-drum-sheet/convert.html)
+to convert the URL to an embeddable link.
+
+4. Embed the link in Notion with `/embed` and pasting the link.
+
+#### Demo:
+
+![demo](./demo.gif)
+
+#### Changes:
 
 1. Make `GrooveEmbed.html` the default `index.html`.
 
 2. Remove included javascript related to MIDI, sounds, sharing, etc. You can
 still click on the notation to be linked to the full GrooveScribe page where
 you can edit the notation and play it.
 
-3. Add a HTML query string to display tempo and time signature with the
-notation. To use this, add `&EmbedTempoTimeSig=true` to the end of the URL.
-
-4. An utility to convert a `https://www.mikeslessons.com/groove` link to an
+3. An utility to convert a `https://www.mikeslessons.com/groove` link to an
 embeddable link: https://sonph.github.io/notion-drum-sheet/convert.html
+
+4. Add a HTML query string to display tempo and time signature with the
+notation. To use this, add `&EmbedTempoTimeSig=true` to the end of the URL.
diff --git a/convert.html b/convert.html
@@ -4,14 +4,28 @@
 <head>
   <title>Embedded Groove</title>
   <style>
+    body {
+      padding-top: 5%;
+      padding-left: 5%;
+    }
+
     input#url,
     input#convertedUrl {
-      width: 80%
+      padding-left: 10%;
     }
   </style>
 </head>
 
 <body>
+  <h3>Tool for converting a GrooveScribe drum notation for embedding in <a href="https://www.notion.so/"
+      target="_blank">
+      Notion</a>.</h3>
+  <div>
+    For how to use this tool, see demo at <a href="https://github.com/sonph/notion-drum-sheet"
+      target="_blank">https://github.com/sonph/notion-drum-sheet</a>
+  </div>
+  <br>
+  <br>
   <div>
     <form>
       <label for="url">URL:</label>
@@ -26,6 +40,7 @@
     </form>
   </div>
   <div></div>
+  <br>
   <div>
     <span id="status"></span>
   </div>
@@ -86,7 +101,7 @@
 
     // Convert and copy on "Enter". Also select on click.
     document.getElementById("url").addEventListener("keypress", convertAndCopyOnEnter);
-    document.getElementById("url").addEventListener("click", function() {
+    document.getElementById("url").addEventListener("click", function () {
       const url = document.getElementById("url").select();
     });
     document.getElementById("showTempo").addEventListener("keypress", convertAndCopyOnEnter);

diff --git a/demo.gif b/demo.gif