Diagrammes pour piano

Bonjour à toutes et tous,
je n'arrive pas à concevoir la copie de cette image en svg/png

en javascript comme les diagrammes guitare de mon précédent post https://forum.alsacreations.com/topic-9-87579-1.html

J'ai une page d'exemple de mon outil en flash ici
http://zik.adonf.free.fr/

Grace à votre forum j'ai pu mettre en place une solution pour guitare 6, 5, 4 cordes et cet outil devient encore plus puissant puisqu'il est aussi accessible sur smartphone!

Voilà, je ne sais pas du tout par où commencer pour reproduire cet outil.
Merci d'avance pour l’intérêt que vous porterez à mon message.
Musicalement,
Franck

https://www.zikadonf.fr/diagrammes-guitare/
https://www.zikadonf.fr/diagrammes-basse-4/
https://www.zikadonf.fr/diagrammes-basse-5/
Modifié par zikaman (20 Oct 2020 - 09:56)

Bonjour,

https://jsfiddle.net/parsimonhi/210csmvn/

J'ai fait au minimum. Le dessin du clavier peut être amélioré.

J'ai un bug (sur ma version actuelle de chrome uniquement) : quand on va tout à droite du clavier avec une série de >> puis qu'on clique sur C1, le clavier n'est pas toujours re-dessiné (il faut déplacer la souris en dehors du bouton pour que le clavier soit re-dessiné). Ça le faisait aussi pour la guitare en fait. Pour l'instant, je n'ai pas encore trouvé pourquoi.

EDIT: finalement, j'ai changé la manière de faire se déplacer le clavier. Le bug a disparu semble-t-il. J'en ai profité pour améliorer aussi les images png (enfin, je crois ). Dans le code, ça a consisté à ajouter un facteur r=2 dans les fonctions svgToDataURL() et doPng(). Le même genre de modifications peut être fait pour les versions guitare.

J'ai aussi trouvé quelques maladresses dans la version guitare concernant l'état "disabled" (en particulier, le cursor reste toujours le "pointer" au lieu d'être le "default"). J'ai amélioré ça dans la version piano. C'est secondaire.

Amicalement,
Modifié par parsimonhi (19 Oct 2020 - 22:08)

Bonjour et merci déjà pour cette première version
Je vais comparer les codes guitare/piano pour comprendre les modification à apporter dans un sens et dans l'autre.

Concernant le piano, j'ai trouvé une astuce pour modifier le bouton "<<" de façon à ce qu'il se déplace d'une seule note à la fois mais je ne trouve pas l'autre bouton ">>" qui déplacerait d'une seule à la fois. (ligne 365)

btn = zkfp.querySelector(".zkfpNavigation button:nth-of-type(1)");
  btn.addEventListener("click", function() {
    moveKeyboard(1); // (7 -> 7 notes, 1 -> 1 note)
  });

EDIT :
trouvé

  btn = zkfp.querySelector(".zkfpNavigation button:nth-of-type(7)");
  btn.addEventListener("click", function() {
    moveKeyboard(-1); // (-7 -> 7 notes, -1 -> 1 note)
  });

Merci beaucoup
Modifié par zikaman (20 Oct 2020 - 09:58)

parsimonhi a écrit :
Dans le code, ça a consisté à ajouter un facteur r=2 dans les fonctions svgToDataURL() et doPng(). Le même genre de modifications peut être fait pour les versions guitare.

Bonjour,
c'est ok, j'ai ajouté le fond blanc à l'image png en pompant le diagramme guitare et j'en ai profité pour améliorer avec le facteur r = 2
par contre je ne comprend pas la subtilité de

parsimonhi a écrit :
J'ai aussi trouvé quelques maladresses dans la version guitare concernant l'état "disabled" (en particulier, le cursor reste toujours le "pointer" au lieu d'être le "default"). J'ai amélioré ça dans la version piano. C'est secondaire.

Dans quelle fonction je trouve cette amélioration?
En tout cas ça fonctionne déjà très bien et la page est à jour sur notre site
dans le menu "Diagrammes Alsacréation" guitares 4 5 6 cordes et claviers
Merci beaucoup pour cette aide précieuse, maintenant flash peut planter, j'espère que tout le monde aura ma chance.
Très cordialement,
https://www.zikadonf.fr/

Bonjour,

zikaman a écrit :

Dans quelle fonction je trouve cette amélioration?

Il s'agit, dans la version guitare, des lignes suivantes qui sont dans les fonctions doSvg() et doPng().

svg.disabled = true;
zkfg.disabled = true;

L'idée était, après génération d'une image, de désactiver ces éléments (car si j'ai bien compris, c'est ce que faisait la version en flash). Or, si les éléments sont bien désactivés (mais pas grâce à ça), ça ne marche pas comme attendu. En particulier le curseur conserve l'aspect qu'il a quand on peut cliquer sur ces éléments (sur mon ordi : une main avec un doigt qui pointe, alors qu'on voudrait, quand ils sont désactivés, que ce soit juste le curseur par défaut qui est une simple flèche qui soit affiché). Certes, c'est un détail

Dans la version piano, j'ai supprimé ces lignes et j'ai mis à jour le css en conséquence (ce qui est ajouté via la fonction addCss()). Les lignes concernées sont toutes celles qui ont "cursor" (il y en a que j'ai ajoutées et d'autres que j'ai retirées).

Attention, dans la version guitare, ces lignes commencent par zkfg (avec un "g" comme guitare à la fin donc), alors que dans la version piano, c'est zkfp (avec un "p" comme piano à la fin). J'ai fait cette distinction pour le cas où tous les scripts auraient dû cohabité dans une même page, de manière à ce que les styles pour la guitare ne s'appliquent pas pour le piano et réciproquement (puisque ce ne sont pas tout à fait les mêmes styles).

Amicalement,

Bonjour,

Il faudrait aussi, dans la version guitare, remplacer dans la fonction toggleMarque() la ligne :

if(svg.disabled) return;

par

if(zkfg.getAttribute("data-not-done")=="0") return;

Amicalement,
Modifié par parsimonhi (20 Oct 2020 - 17:25)