patacrep/patanet

Rendre les diagrammes d'accords avec les chants

Luthaf opened this issue · 16 comments

Luthaf commented

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 commented

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 commented

Oui, j'aime bien la version JS =)

oliverpool commented

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 commented

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

Luthaf commented

👍

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 commented

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 commented

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 commented

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 commented

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 commented

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 commented

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 commented

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 commented

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 commented

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

oliverpool commented

Désormais intégré à #137