Guitar Chord Diagrams

Feature requests
1

Being able to see the guitar chord diagrams used by strummachine would be quite a useful feature, especially for more swing style chords. Thanks

2

That sounds like a nice feature. The main problem I see is that a chord diagram would take up a lot of space, more than there currently is in the text-based chord chart. But perhaps it would be possible to just show above the graph what the main guitar chords that are being used in the graph. Maybe something like how ultimate-guitar.com does:

Chords
Chords930×1074 46.4 KB

However, this starts getting complicated when you use the capo feature, what do you show the user? And then this would only be useful to some guitarists, those who don’t yet know all their chords, but for experienced guitar players and not for people playing other instruments that use StrumMachine. Hey @LukeAbbott, what’s your take?

3

Using a capo doesn’t seem to be an issue. Show the same chord diagram currently shown by strummachine ( A tune, capo 2nd fret, show a G chord diagram).

4

Yeah, the chart would mirror the capo setting.

My vision for this feature (which has been on my big list for awhile now) was not to have the chord diagrams inline with the chart, but to have them as an overlay as needed. (iReal Pro does this.)

The Ultimate Guitar approach of listing a reference of all the chords on the page seems like a good idea too. I’d probably put them on the bottom of the page, though.

Regardless, this would be an opt-in setting, so nothing would change for folks who don’t choose to enable it.

This feature isn’t a high priority for me, although I inadvertently made a lot of progress toward implementing it as a result of working on the voicings settings panel, and the chord diagrams therein, so it’s a lot closer to being a reality than it was a few months ago. :slightly_smiling_face:

5

So how are you going to implement the chord images? SVG?

6

Dynamically-generated SVG, yeah. :slightly_smiling_face:

Nerdy behind-the-scenes details: it turns out that since an SVG’s XML code can be embedded right inside HTML, I can render SVGs using my usual front-end templating tool (namely, Svelte). For example, the fingerings can be dynamically rendered with something like this:

{#each chordShape as fret, string}
  {#if fret > 0}
    <circle
      cx={xPositionFor(string, capoPosition + fret)}
      cy={yPositionFor(capoPosition + fret)}
      r={fingerRadius}
      class="finger"
    />
  {/if}
{/each}

Fun fact: all of the little guitar strumming pattern visualizations are also generated dynamically in Svelte.

1 Like
7

Cool. I used Ractivejs, the ancestor of Svelte, back in 2013. I used Svelte a bit when it was brand new and nobody was using it. And Rich Harris was a bit of a funny guy in online debates about React, Angular, View, etc.