Rendre les diagrammes d'accords avec les chants

[Luthaf]

Il faudrait s'occuper de rendre les diagrammes d'accords avec les chants. En gros générer et mettre en cache les images correspondant aux accords du morceau (cd #95).

[oliverpool]

Sinon ça peut être un bel exercice de le rendre en CSS ;-)

Edit:
ou avec JS : https://github.com/shkuznetsov/chord-diagram
ou avec un Web Component : http://martinivanov.net/2014/08/28/guitar-chord-diagrams-as-html5-web-components-this-rocks/

[Luthaf]

Oui, j'aime bien la version JS =)

[oliverpool]

J'ai craqué : https://github.com/oliverpool/chord-diagram ...

Demo : https://oliverpool.github.io/chord-diagram/

[oliverpool]

J'ai modifié la lib pour pouvoir simplement écrire:

<div class="chord-diagram" data-shift="0" data-frets="133211" data-fingers="1342111"></div>

cf la démo (mise à jour) : https://oliverpool.github.io/chord-diagram/

[oliverpool]

Si ça convient, je l'intègre sous peu à Patanet

[Luthaf]

👍

Comment on présente ça ? Sous forme de liste d'accords dans un coin, ou en mettant les diagramme au dessus des paroles ? Ou en affichant un diagramme au survol ?

[oliverpool]

Dans un premier temps, je propose de suivre le pdf : simplement en haut de la page.
Après, si effectivement on veut s'amuser, on peut rajouter des options pour afficher les accords au survol ou autre...

[Luthaf]

Ok. Au cas où tu n'ai pas suivi, le rendu en HTML est tout cassé (#100) depuis le passage à Python 3. Donc en attendant le nouveau format (patacrep/patacrep#70), le rendu via JS sera remis en place.

[paternal]

Cette issue est liée à patacrep/patacrep#74.

Une question que je me pose là dessus (et les info me manquent pour continuer le rendu chordpro) est la syntaxe de ces diagrammes d'accords. Je ne suis pas musicien ; je ne sais pas lire ces diagrammes, et encore moins les écrire. Pour la partie du travail qui me concerne, il faudrait :

• trouver les spécifications de la syntaxe des accords utilisée par chordpro
• parser ces accord (je peux m'en charger)
• les rendre en HTML.

Pour cette dernière étape, je vois deux solutions :

• le code python ne fait rien que recopier bêtement les accords entrés par l'utilisateur (après tout de même avoir vérifié que leur syntaxe est correcte), et c'est votre javascript/CSS qui le rend ;
• le code python génère un nouveau format, plus simplement analysable par votre javascript/CSS.

À vous !

[Luthaf]

Avec la micro lib d'@oliverpool, on peut parser facilement les données de diagrammes présents dans les fichiers LaTeX actuellement. Et la spcécification chordpro est assez proche. Tout ça pour dire que je ne pense pas qu'il y ait besoin d'effectuer de parsing avancé du coté patacrep.

Donc la première solution devrait être largement suffisante.

[oliverpool]

D'après http://tenbyten.com/software/songsgen/help/HtmlHelp/files_reference.htm, section Chord Grids, il y a deux syntaxes principales pour ChordPro:

{define: E5 base-fret 7 frets 0 1 3 3 x x}

Avec le doigté

{define: E5 base-fret 7 frets 0 1 3 3 x x fingers - 1 2 3 - -}

Avec mon fork oliverpool/chord-diagram, le markup HTML à fournir est le suivant :

<div class="chord-diagram" data-shift="7" data-frets="0133xx"></div>

Avec le doigté

<div class="chord-diagram" data-shift="7" data-frets="0133xx" data-fingers="012300"></div>

La conversion me semble assez direct (je pourrai en profiter pour renommer data-shift en data-base-fret)

Du coup il faudrait réfléchir pour rajouter le nom de l'accord quelque part...

[paternal]

D'après http://tenbyten.com/software/songsgen/help/HtmlHelp/files_reference.htm, section Chord Grids

Super ! C'est ce qu'il me manquait pour analyser les accords et diagrammes d'accords. Petites questions :

• Accords : [A-G]{#|b}{m|dim|maj|sus}{digit}{/[A-G]{#|b}} Si je comprends bien, m, dim, maj, sus correspondent à ces chaînes en toutes lettres, alors que digit représente un chiffre ?
• Diagramme : {define: <chord> base-fret <base> frets <Low-E> <A> <D> <G> <B> <E>}
  • chord correspond à l'accord décrit plus haut, avec toutes les fioritures possibles (par exemple A#m7/Cb) ?
  • base correspond à un nombre ? Un chiffre ?
  • Low-E correspond à un chiffre ?
  • A à E correspondent chacun à un chiffre ?
  • KEY (dans la version « étendue » {define: <chord> base-fret <base> frets <Low-E> <A> <D> <G> <B> <E> fingers <Low-E> <A> <D> <G> <B> <E> key <KEY>}) correspond à une lettre A D G B E ?

Questions additionnelles pour le rendu LaTeX par ici : patacrep/patacrep#74.

[Luthaf]

Accords : [A-G]{#|b}{m|dim|maj|sus}{digit}{/[A-G]{#|b}} Si je comprends bien, m, dim, maj, sus correspondent à ces chaînes en toutes lettres, alors que digit représente un chiffre ?

chord correspond à l'accord décrit plus haut, avec toutes les fioritures possibles (par exemple A#m7/Cb) ?

Tout à fait.

base correspond à un nombre ? Un chiffre ?

Un chiffre de 2 à 9, on peut autoriser de 1 à 9 sans problème.

Low-E correspond à un chiffre ?
A à E correspondent chacun à un chiffre ?

C'est ça.

KEY (dans la version « étendue » {define: base-fret frets fingers key }) correspond à une lettre A D G B E ?

Plus les variantes # et b : A#, Bb, C#, ...

[Luthaf]

Plus généralement, on est pas obligé de suivre cette syntaxe, c'est une extension non standard. On peut donc prendre un truc plus facile à parser si ça nous facilite la vie. Quelque chose comme

{define: <chord> base-fret [1-9] frets [1-9xX]{6} fingers [1-9\-]{6} }

Où les parties base-fret et fingers sont optionelles.

[oliverpool]

c'est assez intéressant de parcourir la doc de ce logiciel similaire à patacrep : http://tenbyten.com/software/songsgen/help/HtmlHelp/frames.htm

[oliverpool]

Désormais intégré à #137