Comments (7)
This was simply a port of someone's .NET code. They've also done a JS version https://github.com/einaregilsson/chord.js . I was able to get by with things as they are, but please improve as you see fit.
from chordjs.
I have forked ChordJS and made a couple of changes to it: https://github.com/T-vK/ChordJS/commits/master
Are you interested in a pull request?
What I changed is basically:
- [change] show the finger positions in the black dots instead of below
- [fix] correctly re-draw chord diagrams when .replace() is called multiple times
- [fix] prevent crashing when a position/fingering with more than 6 characters is used
- [new] I called the variable ChordJS instead of chords (but chords is also kept for backwards compatibility)
- [new] I split
ReplaceChordElements
into two functions, the new one is calledGenerateChordHtml
- [new]
GenerateChordHtml
is exposed as.generate()
and can be used to generate a canvas without having to use markup html. - [new]
ReplaceChordElements
has an optional parameter now to specify an element on which all child chord elements should be replaced.
It looks different now: https://github.com/T-vK/Chord-Draw
from chordjs.
Lovely. Would it be possible to keep the numbers below the strings as an option for small chord charts? And it looks like the numbers could get nudged down a little lower in the dot. I would happily accept a pull request.
from chordjs.
Great.
I agree the numbers should be positioned a little lower. But if I just move it down by 3px it wouldn't scale very well. Any ideas on how to center them in a more elegant way?
I think we should add another option so that the user can always decide which layout he wants, instead of making it dependent on the size. I should also add an option to let the user specify the string names, in case a different tuning is used.
Edit:
I added an option to specify which layout to use and another option set the string names.
from chordjs.
Need better browser support for font metrics. https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics Perhaps there's some common work around out there.
from chordjs.
Comment about the original heading:
I personally doubt that anybody needs a two digit finger number :))
But... to use the position format "8-8-10-11-12-8" (for example) you have to modify the "if" statement in the "GenerateChordHtml" function (line 471) to allow position strings with more than 6 characters. After that barre-chords on the higher frets work fine...
from chordjs.
Interesting, now that you say that, I totally missed line 201. I always thought the only supported format was a 6 characters string.
If this actually worked for you, I think you should make a pull request.
Reading through my old posts I see that I must have tried to fix a bug that caused crashes ([fix] prevent crashing when a position/fingering with more than 6 characters is used
).
I would suspect those crashes only happened when you would pass a string longer than 6 digits which doesn't contains any dashes. For example I think 1122334
would cause a crash. So the way to go imo is to change
if (positions.length != 6 || fingering.length != 6) {
to something like
if ((positions.length != 6 && !positions.includes('-')) || fingering.length != 6) {
I personally doubt that anybody needs a two digit finger number :))
You would be surprised.
from chordjs.
Related Issues (3)
- Blank chords issue HOT 2
- how to show chord over 10 fret? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chordjs.