How to replace chord names with custom symbols?

[abalter]

I would like to be able to use small chord charts instead of names (e.g. "Em"). There are some javascript packages for generating them. Where would be the hook in the code to capture chord names and replace them with custom SVG?

I realize this would definitely be hacking the ABC system. I think my approach would be to define chord shapes in the header, capture those and generate the charts as SVG, then capture the chord names before they are printed and replace them with the SVG for the chart.

For example (in dropped D):

U: DI(ii) 05032x
U: GI(i) 5x5033
"DI(ii)" d d e f | "GI(i)" g a b2|

Incidentally, my current hack is to simply define the chord fingerings using the "R" field in the header, and optionally as well in a lyrics "w" row.

X: 1
T: The Red-Haired Lass
R: reel
M: 4/4
L: 1/8
K: Gmaj
R: Chord Shapes:
R: G: 5x0033
R: D: 0x023x
R: C: x43020
   "G"DGGF G2 BG|G2 BG "D"AGEG|"G"DGGF GABd|egdB "C"c2 BA|
w: 5x0033       | ~ ~ ~ 0x023x|5x0033      | ~ ~ ~ ~ x43020 | 
   "G"DGGF G2 BG|G2 BG "D"AGEG|DGGF GABd|gedB "C"c2 Bc||
w: 5x0033    | ~ ~ ~ 0x023x|5x0033      | ~ ~ ~ ~ x43020 | 
   "G"d2 gd edgd|d2 gd "C"BABc|"G"d2 gd edef|gedB "C"c2 Bc|
w: 5x0033       |~ ~ ~ x43020 |5x0033       |~ ~ ~ ~ x43020  |
   "G"d2 gd edgd|d2 gd BABd|"C"c3A "G"B3A|GABd "D"egdB|| 
w: 5x0033       |          |x43020 5x0033|~ ~ ~ ~ 0x0320 ||

[paulrosen]

I wish I supported this directly but I don't yet.

I think what I would do is leave the chord symbols like they are (that is "G" "D", etc.) but make the font large enough to leave space for your diagram. So maybe add this to the header:

%%gchordfont "arial" 30

Then, after the renderAbc call, replace those with your pictures. Something like this:

renderAbc("paper", abcString, {add_classes:true})
var chords = document.querySelectorAll("#paper .abcjs-chord")
for (var i = 0; i < chords.length; i++) {
  var chordEl = chords[i];
  var chordName = chordEl.textContent
  var dim = chordEl.getBBox()
  chordEl.setAttribute("style", "display:none")
  // You can draw whatever you want in the area defined by dim.
  // That contains x, y, width, and height
  // The chord to place there is in the variable "chordName".
}

If you implement this, I'd love to include it in one of the examples.

[abalter]

Hey, I'll get back to this at some point. In the meantime, I've been playing with some lower-hanging-fruit ways to get chord fingering into abc. But I really want to work on this as well.

This is one method:

T: Dan Breen's
R: reel
M: 4/4
L: 1/8
Q: 1/2=90
K: Edor
R: Tuning: D,A,DGBe
R: Chord Shapes:
R: Am: x02210
R: D/F#: 400320
R: G: 5x0033
|:"Am""^x02210"e2dB ABAG|EAAG A2Bd|e2dB "D/F#""^400320"ABAG|"G""^5x0033"EGGF G2Bd:|
|:"Am""^x02210"e3g edBd|eA (3AAA edBd|e2eg "D/F#""^400320"edBc|"G""^5x0033"d2ef g2fg:| 

This is another:

T: The Wise Maid
R: reel
M: 4/4
L: 1/8
K: Dmaj
Q: 1/2=90
R: Tuning: D,A,DGBe
R: Chord Shapes
R: D: 05423x
R: A7sus: 002030
R: G: 550000
R: A1: x0222x
R: Em2: 2x2000
R: Bm1: 7x7555
R: A4: 007650
%A.1
|: DE | F2FG FEDE | FAAB AFED| d2 e/f/g fdec | dBAF BE E/F/E |
w: D  | D __A7sus  | D        | G _____A1      | D  ___A1    |
w:    | D          | F#m      | Em2            | Em2 ___A4   |
%A.2
F2FG FEDE | FAAB AFED | d2 e/f/g fdec | dBAG FD   :|
w: D      | D ___G    | D             | G ___A     |
w: D      | D/F#      | Em2           | Asus ___A4 |
%B.1
|: FA | d2 AG FDFA | dfaf gfeg  | fAdf eAce   | dfed cA A/B/A |
w: D  | D          | D ___A7sus | D  ___A7sus | A7sus  ___D   |
w: D  | Bm1        | Bm1 ___A4  | Bm1 ___A4   | A4            |
%B.2
BDGB ADFA   | dfaf gfed | B/c/d ce dBAG | FAEA D2  :| 
w: G        | G         | A1            | A1 ___D   |
w: G ___F3m | Em2       | A4            | A4 ___D   |