pianosnake / uke-chord

Web Component/HTML element for tab chord diagrams using SVG

<uke-chord>

A Web Component element for a tab chord diagrams using SVG graphics with no framework dependencies. Can be used for guitar, ukulele, 7 string guitar, 5 string charango, 3 string mountain dulcimer, etc...

Usage

Include the following script tag in the head section of your page:

<script src="//pianosnake.github.io/uke-chord/uke-chord.js"></script>

Then start using the custom element. See more examples and a live demo here.

  <uke-chord frets="2001"></uke-chord>

Develop

Download this repo and submit pull requests.

License

MIT License

uke-chord's Issues

Added a sub2 level

Hi,
Just needed to add another row of text below to have degree and notes (random values here). I added a sub2 version for the attribute and the parse function, and added it to the render function. Works fine 👍

Thanks a lot.

Cheers

Multiple fingers by string

Hi,

Added a possibility for multiple fingers

Demo: https://fxpar.github.io/uke-chord/

Your code is so clean, I am very ashamed to add messy functionalities.
Code: https://github.com/fxpar/uke-chord/blob/master/uke-chord.js

Thanks again for your awesome work.

How to x a string?

Florin,

Loving <uke-chord>! Thank you for creating it! Have you ever considered adding way to x out a string that shouldn't be played? Example:

Which would be triggered with something like:

<uke-chord frets="022x"></uke-chord>

I created a codepen with your awesome JS if you want to check it out (or fork it) and hope you don't mind:

https://codepen.io/pubwriter/pen/abNNMbZ

Thanks,
Brian

Request: Scales

Florin,

I am super grateful to you and your uke-chord JS gift - as it's been a huge teaching aid for me.

Q. Do you think there's any way to expand on it so we can use it for scales?

Example:

Keep up the good work.

Cheers,
Brian

PS: Let me know how I can send you a $ contribution.

Support for position (request)

The nut parameter is a good indicator of whether we are in the first position or not, but it would be good to also have a position indicator, like vexchord does, for example:

Outstanding work, thank you very much!

Nut never showing for position 0 or "0"

Hi, thanks a lot for this app.

The nut is never showing for me. Probably because the it is nullified for zero values on line 68.
I got it running by creating another variable, and use it in showPosition.

Hope this helps.

How to use it with webpack & Reactjs

Hi,
I am trying to add the this uke-chord to my react project but can't figure out a way to render it. I use webpack to do the packing and attached is my webpack.config.js, but on the webpage it seems like is being treated as a XML tag. Could you help me figure this out?

Add stroke attribute to avoid fingering becoming invisible in text editing software with another color

Problem:
Text becomes invisible when svg is included in a text editing document and the color of the image is changed.
Explanation:
In Powerpoint or Word, it is easy to change the color of the svg with the image > color tool.. Unfortunately this tool applies the color to all the "fill" attributes. Therefore the color of the text receives the same color as the background of the bubble or the diamond.

Solution:
Specification of svg provide a secondary attribute for colore: stroke.
If we add this argument, the color of the text remains the same even if the fill color is changed in a text editing software.

Example
Original: bubble fill black; text fill white; and for some text, added stroke="FFFF00" (yellow)
When the image color is changed in powerpoint to purple, the text becomes purple on purple except where the stroke attribute was set to yellow.

Of course, the text color won't be able to change in a text editing software, same as before. But at least we can modify some background colors as long as the chosen color is still readable on that background.

Cheers.