From 1b2d6c6b4769a6c48d8e476fe54a6c9f8a7161bb Mon Sep 17 00:00:00 2001 From: Kenny Carlile Date: Thu, 30 May 2024 18:53:37 -0700 Subject: [PATCH] Updating documentation for more thorough explanations as to why --- README.md | 31 ++++++++++++++++++++++++++----- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index bc109f0..66a9755 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Guitar Diagrams JS [![GitHub Release](https://img.shields.io/github/v/release/KCarlile/guitar-diagrams-js?include_prereleases&logo=github&label=Latest%20version)](https://github.com/KCarlile/guitar-diagrams-js/releases) -[![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/KCarlile/guitar-diagrams-js/release-package.yml?logo=github&label=NPM%20build)](https://github.com/KCarlile/guitar-diagrams-js/actions/workflows/release-package.yml) +[![GitHub Actions Workflow Status](https://github.com/KCarlile/guitar-diagrams-js/actions/workflows/release-package.yml/badge.svg)](https://github.com/KCarlile/guitar-diagrams-js/actions/workflows/release-package.yml) [![Super-Linter](https://github.com/KCarlile/guitar-diagrams-js/actions/workflows/linting.yml/badge.svg)](https://github.com/marketplace/actions/super-linter) [![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)](https://ecma-international.org/publications-and-standards/standards/ecma-262/) @@ -19,6 +19,21 @@ _Guitar Diagrams JS_ is an open source JavaScript library for drawing guitar cho Project: \ Version: 0.9.2 +### Why should you use Guitar Diagrams JS? + +Guitar Diagrams JS is intended for instructional content developers publishing their own sites with musical instruction related to scales and chords for stringed instruments. It's a called Guitar Diagrams JS because the primary use is for guitarists, but it can also be used for bass, banjo, mandolin, dobro, violin (or fiddle), viola, cello, ukulele, and more! + +The benefit of Guitar Diagrams JS is that it provides a visual representation of the instrument without requiring the content creator to design images graphically, download them, and embed them in HTML. The Guitar Diagrams JS library empowers you to create consistent scale and chord diagrams without ever needing to open a graphics program. + +Here are some other comparisons to Guitar Diagrams JS: + +| Name | Description | Visual | Graphical | Instrument Representation | No Sheet Music | Cost | +| ---- | ----------- | ------ | --------- | ------------------------- | -------------- | ---- | +| Guitar Diagrams JS | Create diagrams with minimal code and no graphics | ✅ | ✅ | ✅ | ✅ | $0 | +| Tablature (tabs) | Create diagrams manually with text | ✅ | ✅ | ⚠️ | ✅ | $0 | +| Graphic Design Software | Create diagrams manually with a graphic design program | ✅ | ✅ | ⚠️ | ✅ | [\$22.99/month](https://www.adobe.com/products/photoshop/plans.html) | +| Sheet Music | Create sheet music | ✅ | ❌ | ❌ | ❌ | [\$99](https://www.finalemusic.com/products/finale/special-pricing/) or [\$27.99/month](https://www.avid.com/sibelius/sibelius-ultimate-subscriptions?usertype=individual) | + ## Project Lead/Owner and Contributors ### Project Lead/Owner @@ -85,15 +100,21 @@ If you want to use a CDN-hosted package (e.g., Guitar Diagrams JS on JSDelivr at ``` +Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `diagram-1` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing: + + ```html +
+ ``` + #### Option 3: Manual Installation via Local Copies You can also install this package manually by downloading it, placing the files in the correct location, and modifying your site's code to reference the library. The following steps outline this process: 1. Download the repository files from the [GitHub repository for Guitar Diagrams JS](https://github.com/KCarlile/guitar-diagrams-js). 1. The only files about which you should be concerned are the following: - 1. `guitar-diagrams.js`: main functionality - 1. `guitar-diagrams-config.js`: config object - 1. `guitar-diagrams-marker.js`: marker object + - `guitar-diagrams.js`: main functionality + - `guitar-diagrams-config.js`: config object + - `guitar-diagrams-marker.js`: marker object 1. Place those files in your application at `wherever/you/put/your/js/files/guitar-diagram-js/`. 1. In the JS file with your primary entrypoint, add an import statement: @@ -110,7 +131,7 @@ You can also install this package manually by downloading it, placing the files gdj1.drawNeck(); // draw the fretboard ``` -1. Be sure to add some target element with the matching ID in your JS code so Guitar Diagrams JS knows where to add your drawing: +1. Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `diagram-1` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing: ```html