5139 sujets

Le Bar du forum

[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.
Modérateur
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,
Modérateur
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.
Modérateur
Bonjour,
niuxe a écrit :
@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 suis très nul en flash (en fait je n'en ai même jamais fait une seule ligne), et je n'ai essayé de convertir un flash en javascript qu'une seule fois (avec le défunt swiffy), mais le résultat était très correct (voir https://www.jeudego.org/_php/dede.php). Peut-être un coup de bol.
niuxe a écrit :
Je pense qu'il va falloir tout reprendre.
C'est mieux en effet. D'ailleurs, c'est fait ! Smiley lol
https://jsfiddle.net/parsimonhi/3gow6rtx/

Il y a encore des détails à régler, mais en gros, ça marche comme sur la page http://zik.adonf.free.fr/ (je n'ai pas essayé "d'améliorer" le rendu Smiley biggrin ).

@zikaman: pour intégrer le script dans ta page, tu peux :
1) créer un fichier javascript nommé par exemple zikadonf-test.js et tu mets dedans le code javascript qui est dans le jsfiddle que je viens d'indiquer ci-dessus.
2) dans ta page elle-même, il suffit d'inclure ce fichier javascript autant de fois que tu veux de test. Par exemple, pour 8 tests :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-around;
	margin:1em auto;
	max-width:74em;
}
</style>
</head>
<body>
<script src="zikadonf-test.js"></script>
<script src="zikadonf-test.js"></script>
<script src="zikadonf-test.js"></script>
<script src="zikadonf-test.js"></script>
<script src="zikadonf-test.js"></script>
<script src="zikadonf-test.js"></script>
<script src="zikadonf-test.js"></script>
<script src="zikadonf-test.js"></script>
</body>
</html>

Amicalement,
Modifié par parsimonhi (11 Oct 2020 - 09:31)
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é.
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
Encore merci pour votre aide
Modérateur
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.
Modérateur
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 Smiley biggrin 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 ! Smiley cligne

Amicalement,
parsimonhi a écrit :
Bonjour,

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

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

Amicalement,


Bonjour,
j'ai mis à jour avec ton code, ça marche nikel. Je clique droit dans la popup et j enregistre sous.

Effectivement, les diagrammes sont aussi pour claviéristes, cela nous permet de travailler avec des débutants "sans solfège" et c'est cool même si le solfège est important mais pas nécessaire au début.
Ensuite, nous avons les diagrammes pour basse "4 cordes" et "5 cordes", et guitare "7 cordes".

Je vais regarder le code, je peux peut-être trouver comment supprimer des cordes.

Merci beaucoup, y a pas de smiley "chapeau bas" Smiley cligne

Edit: j'utilise l'envoie des diagrammes via forum ou activité "buddypress". Même pour Alsacréation, le fichier svg n'est pas vu comme une image.
Modifié par zikaman (11 Oct 2020 - 13:54)
Modérateur
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 Smiley biggrin ). Mais si tu connais un peu le css, tu peux modifier assez facilement le look de tout ça.

Amicalement,
parsimonhi a écrit :


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


Bonjour,
effectivement! J'ai mis à jour la page
https://www.zikadonf.fr/diagrammes-guitare/
Pour le diagramme à 4 cordes, j'arrive à supprimer en remplaçant les 6 par des 4! mode bourrin mais ça marche, par contre il reste les 2 cordes et notes cliquables, je n ai pas encore compris comment ça fonctionne mais ça m’intéresse.
Je vais tenter de déplacer les repères aussi...
Merci beaucoup beaucoup pour le gros coup de main.
Bien 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 Smiley cligne
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)
Modérateur
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,
merci pour ces conseils.
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.
Je joins une mise en situation. Nikel sur un document de ce type, 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?
Encore merci pour tout.
upload/1602686689-81300-diagrammesfigures.jpg
Modérateur
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 ! Smiley smile

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 ! Smiley smile

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 Smiley cligne
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)
Sujet clos
Aller à