[Résolu] Présentation Zikaman

Bonjour à toutes et tous,
je suis prof de musique dans une petite école que j'ai créé avec mon épouse.
Il y a 10 ans, j'ai créé avec flash un outil qui me permet d'éditer des diagrammes d'accords et de gammes pour guitare basse et piano. Bientôt cet outil ne fonctionnera plus, en tout cas c'est ce qu'on me dit. Donc je dois me remettre au travail mais j'avoue avoir largement lâché le code. Je crée vite fait des petits plugin pour mon école via wordpress mais à part ça je suis une tanche!
Pourquoi Alsacréation?
Parce qu'à chaque fois que j'ai eu cherché des infos, le top était ici donc me voilà dans cette nouvelle aventure à vos côtés.
voilà une page ou des diagrammes sont disponible
http://zik.adonf.free.fr/
Je créerai un sujet pour une demande de conseil mais pour le moment c'est juste une présentation donc par avance, merci pour l'accueil.
Bons codes à toutes et tous.
Zikaman (Franck, mais c'était déjà pris!)

Bonjour,
mes deux navigateurs, Firefox et Chromnium ne veulent pas ouvrir ton site (plugin non compatible). Je ne peux pas me faire une idée de ton projet.

Bonjour,

Ça devrait pouvoir se faire en html + javascript sans trop de difficultés.

Sinon, il existe des outils de conversion de flash en javascript.

Amicalement,

Et l'eau,

Bienvenue sur le forum. De mon côté, ton lien me renvoie vers une page blanche.

@parsimonhi: il me semble que les outils dont tu parles ne sont pas top top. S'il y a du AS, il se peut que ça ne fonctionne pas. Je pense qu'il va falloir tout reprendre.

Bonjour à tous et merci beaucoup pour votre accueil et déjà de l'aide!
Merci @parsimonhi pour ce premier jet en si peu de temps.
Pour le moment je n'arrive pas à "enregistrer/sauvegarder" le diagramme généré.


Comme joint dans l'exemple, la partie avant la double barre est aussi une partie cliquable, les "cordes à vide". Enfin, chaque bouton possède 6 états/couleurs
1 - rouge - note
2 - vert - fondamentale
3 - orange - tierce
4 - bleue - quinte
5 - gris - septième
6 - X - note à ne pas jouer
Encore merci pour votre aide

zikaman a écrit :
Pour le moment je n'arrive pas à "enregistrer/sauvegarder" le diagramme généré.

C'est à dire ? Tu ne vois pas du tout de fenêtre apparaitre avec une image dedans ? Si c'est ça, il faut peut-être dire au navigateur d'autoriser les pops-up ou un truc du genre pour ta page.

Note : l'image est au format svg

Note 2 : ça ne marche sans doute pas avec internet explorer (je n'ai même pas essayé de tester).

zikaman a écrit :

upload/1602403021-81300-domaj7.jpg
upload/1602403099-81300-cmaj7.jpg
Comme joint dans l'exemple, la partie avant la double barre est aussi une partie cliquable, les "cordes à vide". Enfin, chaque bouton possède 6 états/couleurs
1 - rouge - note
2 - vert - fondamentale
3 - orange - tierce
4 - bleue - quinte
5 - gris - septième
6 - X - note à ne pas jouer

Je vois ! Si j'arrive à comprendre le truc, je le rajouterai dans la journée à l'exemple fiddle que j'ai donné.

Amicalement,
Modifié par parsimonhi (11 Oct 2020 - 10:09)

parsimonhi a écrit :

Note : l'image est au format svg
Note 2 : ça ne marche sans doute pas avec internet explorer (je n'ai même pas essayé de tester).

Je vois ! Si j'arrive à comprendre le truc, je le rajouterai dans la journée à l'exemple fiddle que j'ai donné.

Amicalement,

Effectivement, j'ai compris le "svg" en faisant la page suivante
https://www.zikadonf.fr/diagrammes-guitare/
En plaçant l'image de votre forum dans cette page, il faut rendre à César!
Merci beaucoup, je mettrais à jour la page.

Bonjour,

J'ai mis à jour https://jsfiddle.net/parsimonhi/3gow6rtx/

On a maintenant les "cordes à vide" et les 6 états.

J'ai aussi modifié le nom des classes des éléments en ajoutant un "g" (comme guitare) après "zkf", puisque je vois qu'il y a un risque qu'il faille faire le piano aussi. D'ailleurs ça m'a fait un peu peur quand j'ai vu l'image du piano parce que je me suis dit que s'il fallait faire la même chose pour tous les instruments de la Terre entière, on n'était pas rendu !

Amicalement,

Bonjour,

C'est effectivement parfois "pas si simple" d'utiliser un svg (même si ça s'améliore pas mal depuis quelques temps, et c'est pourquoi d'ailleurs j'utilise ce format de fichier beaucoup plus qu'avant).

C'est possible de générer des images en png aussi.

Ça demande un peu de code supplémentaire.

Voici donc une autre version avec deux boutons pour générer les images, un qui produit du svg et l'autre du png. C'est facile d'en retirer un si tu ne veux pas conserver les deux (soit en modifiant le js, soit via css).
https://jsfiddle.net/parsimonhi/je041ynr/

Au passage, j'ai modifié l'action derrière le bouton "Init" pour qu'il fasse comme pour ton ancienne version (je n'avais pas bien compris ce qu'il faisait en fait, et celui de ma version initiale effaçait les marques sur le manche de la guitare au lieu de revenir vers la gauche au début du manche).

J'ai aussi modifié un peu le look (parce que le rose saumon, j'ai un peu de mal ). Mais si tu connais un peu le css, tu peux modifier assez facilement le look de tout ça.

Amicalement,

Bonjour à tous,
grâce à l'aide de @parsimonhi, j'ai pu avancer et surtout arrêter le mode bourrin!
Comme j'ai 6 cordes et 6 actions sur mon bouton, ça a limité le switch aussi!
J'ai trouvé comment réduire le nombre de cordes et la hauteur des frettes en conséquence.

  function addLines() {
    var i, j, e;
    e = document.createElementNS("http://www.w3.org/2000/svg", "line");
    e.setAttributeNS(null, 'x1', 15);
    e.setAttributeNS(null, 'y1', 10);
    e.setAttributeNS(null, 'x2', 15);
    e.setAttributeNS(null, 'y2', 40); // hauteur des frettes
    e.setAttributeNS(null, 'stroke', '#000');
    svg.appendChild(e);
    for (i = 0; i < 24; i++) {
      e = document.createElementNS("http://www.w3.org/2000/svg", "line");
      e.setAttributeNS(null, 'x1', 20 + 20 * i);
      e.setAttributeNS(null, 'y1', 10);
      e.setAttributeNS(null, 'x2', 20 + 20 * i);
      e.setAttributeNS(null, 'y2', 40); // hauteur des frettes 
      e.setAttributeNS(null, 'stroke', '#000');
      svg.appendChild(e);
    }
    for (j = 0; j < 4; j++) { // nbr total de corde attention a y2
      e = document.createElementNS("http://www.w3.org/2000/svg", "line");
      e.setAttributeNS(null, 'x1', 15);
      e.setAttributeNS(null, 'y1', 10 + 10 * j);
      e.setAttributeNS(null, 'x2', 500);
      e.setAttributeNS(null, 'y2', 10 + 10 * j);
      e.setAttributeNS(null, 'stroke', '#000');
      svg.appendChild(e);
    }
  }

J'ai trouvé comment modifier la position des repères.

  function toggleReperes() {
    var list, k, km;
    list = svg.querySelectorAll("circle");
    if (list && list.length) {
      km = list.length;
      for (k = 0; k < km; k++) {
        svg.removeChild(list[k]);
      }
    } else {
      addRepere(3, 2);
      addRepere(5, 2);
      addRepere(7, 2);
      addRepere(9, 2);
      addRepere(12, 1);
      addRepere(12, 3);
      addRepere(15, 2);
      addRepere(17, 2);
      addRepere(19, 2);
      addRepere(21, 2);
      addRepere(24, 1);
      addRepere(24, 3);
    }
  }

J'ai trouvé comment limiter le nombre de marqueur pour les cordes supprimées. Ça a été le plus difficile à trouver.

  function initA() {
    var i, j;
    for (i = 0; i < 25; i++) {
      a[i] = [];
      for (j = 0; j < 5; j++) a[i][j] = false; //J < nbr cordes + 1 réduit le nombre de marqueur!
    }
  }

Je n'arrive pas à déplacer vers le haut la position de la numérotation des frettes.
J'ai créé une page pour que vous constatiez ma modeste avancée
https://www.zikadonf.fr/diagrammes-basse-4/
Si je dois créer un nouveau sujet, n'hésitez pas à me le notifier.
Bien cordialement,
F.
Modifié par zikaman (13 Oct 2020 - 11:58)

Bonjour,

Tu as bien avancé, bravo.

Il reste 3 points à corriger.

1) Dans la fonction addFrette(), il faut changer la valeur de "y" (c'est la coordonnée verticale en unité svg des numéros des frettes). Il faut y remplacer 70 par 50.

  function addFrette(s, n) {
    var e;
    e = document.createElementNS("http://www.w3.org/2000/svg", "text");
    e.innerHTML = s;
    e.setAttributeNS(null, 'x', 10 + 20 * n);
    e.setAttributeNS(null, 'y', 50 + 2.5);
    svg.appendChild(e);
  }

2) Il faut aussi réduire la hauteur du svg. C'est dans la ligne où on spécifie la "viewbox" du svg. Elle était de '0 0 500 80'. Il faut mettre '0 0 500 60'. La raison c'est que la hauteur du svg est divisée en 6 "intervalles" de 10 unités svg (1 intervalle en haut, 3 intervalles de 10 unités pour les cordes, et l'équivalent de 2 intervalles de 10 unités en bas pour les numéros des frettes. La hauteur totale du svg est donc de 60 unités contre 80 précédemment.

  s += "<svg  xmlns='http://www.w3.org/2000/svg'";
  s += " viewBox='0 0 500 60'";

3) Il faut aussi changer du coup la fonction doClick() car du fait qu'on a réduit le svg, on ne calcule plus de la même manière l'endroit où sont les clics. Il faut remplacer c.y = Math.round(c.y * 8); par c.y = Math.round(c.y * 6); et remplacer c.y < 7 par c.y < 5.

La raison, c'est que la fonction getClick() renvoie en % divisé par 100 l'endroit où on a cliqué. Comme il n'y a plus que 4 cordes (donc 3 intervalles), + l'espace en haut (1 intervalle) + l'espace en bas (2 intervalles), ça fait 6 intervalles en tout au lieu de 8 précédemment. Il faut donc multiplié par 6 (et non plus 8) la valeur de y renvoyée par getClick(). Et ensuite, on limite à 4 (i.e. <5) la valeur de y puisqu'il n'y a que 4 cordes (et non plus 6).

  function doClick(ev) {
    var c = getClick(ev);
    c.x = Math.floor(c.x * 25);
    c.y = Math.round(c.y * 6);
    if (c.x >= 0 && c.x <= 24 && c.y > 0 && c.y < 5) toggleMarque(c.x, c.y);
  }

Je pense n'avoir rien oublier. Il ne reste plus qu'à tester.

Amicalement,
Modifié par parsimonhi (13 Oct 2020 - 19:32)

Bonjour,

zikaman a écrit :

J'ai trouvé aussi

e2.setAttributeNS(null, "viewBox", -xpos * 20 + " 0 " + (11 / 25 * 500) + " " + 60); // 80 pour 6 cordes, 60 pour 4 cordes

ça fonctionne parfaitement.

Bien vu ! C'est rassurant pour la maintenance future de te voir corriger les bugs tout seul !

zikaman a écrit :
Par contre pour internet, c'est un png transparent, comment je peux ajouter un fond blanc à l'image pendant la création de celle-ci?

Là, on a beaucoup de possibilités selon ce qu'on veut faire. Si c'est juste pour les png, le plus simple est sans doute de dessiner un rectangle blanc (ou de tout autre couleur d'ailleurs) comme fond du png avant d'y coller l'image issue du svg.

Ça peut se faire dans la fonction doPng() en remplaçant :

      canvas.getContext('2d').drawImage(img, 0, 0);

par

      canvas.getContext('2d').fillStyle = "white";
      canvas.getContext('2d').fillRect(0, 0, w, h);
      canvas.getContext('2d').drawImage(img, 0, 0);

Amicalement,

Bonjour,

parsimonhi a écrit :
Bien vu ! C'est rassurant pour la maintenance future de te voir corriger les bugs tout seul !

merci et c'est bien pour ça que je suis venu ici, comme on dit
"Mieux vaut m'apprendre à pêcher plutôt que m'apporter du poisson tous les jours".
Bien-sur je suis loin d'avoir tout compris mais j'ai pu créer le diagramme basse 5 cordes en modifiant les bonnes lignes.
Le code étant visible par tous, j'ai ajouté une ligne de remerciement en commentaire, c'est le minimum que nous pouvons faire.
Merci beaucoup pour se soutient qui nous enlève une grosse épine du pied, maintenant je vais m'atteler au gros dossier qu'est le clavier mais je créerai un sujet support quand je pourrais travailler dessus mais je vais d'abord chercher de mon côté!
Merci merci merci
https://www.zikadonf.fr/diagrammes-guitare/
https://www.zikadonf.fr/diagrammes-basse-4/
https://www.zikadonf.fr/diagrammes-basse-5/
Modifié par zikaman (15 Oct 2020 - 10:57)

Très intéressant ce sujet !

quel grand sujet!
Modifié par Ivonne2 (24 Jul 2021 - 17:06)