SoccerPitchTeamEdition
Description
lien sourceForge:
https://sourceforge.net/projects/soccerpitchteamedition/?source=navbar
Conseil Pour Telecharger:
Avec le bouton "télécharger le projet" du haut ou même du bas par moment, le zip que l'on télécharge pointe
vers la première version:
Pour la dernière version à jour cliquer sur les boutons: "télécharger"
sur chaque fichier (fichier par fichier)
(rubrique codes sources)
Description commerciale :)
Depuis l'annonce par DD de la liste des 23, voici un petit outil javascript pour
generer des compositions d'equipes sur un canvas.
Comme j'en suis satisfait au niveau du fonctionnement, je le partage:
Ce code permet d'avoir une interface simple d'utilisation et userfriendly
pour creer ,visualiser ses compos et même illustrer des comptes rendus de match.
cette dernière fonctionnalité a été ajoutée avec la maj du 23/05. (cf historique
des maj)
IMPORTANT: depuis la Maj du 29/05, ce code utilise maintenant la bibliothéque jscolor
(opensource) donc je l'ai intégrée sans problème à ce code (pour permettre une
modification agréable des couleurs en attendant que l'input type='color' soit géré par
tous les navigateurs): le le site de l'editeur est là (merci à eux):
http://jscolor.com/
Principe:
Tout le canvas est généré par du code JS : le terrain, les joueurs,
les inscriptions associées (nom des joueurs).
Avec ça vous pourrez vous la raconter sur les forums de foot, :-) (comme tout le monde
veut refaire les équipes à sa façon).
Il y a la possibilité de paramétrer les dimensions de terrains, les equipes(couleurs),
les icones utilisées: à condition qu'elle soient de petite taille( taille max 12px
sinon risques de bugs d'affichages),etc..
Je poste pour l'utilité du code, sachez que je developpe rarement en JS, donc je
suis conscient de mes lacunes en bonnes pratiques:
Notamment en mélangeant l'objet et l'evenementiel dans la classe ,
j'ai été obligé de redéclarer bcp de variables à portées globales car ,
elles n'étaient plus accessibles dans le corp des fonctions si j'utilisais this,
et ça, ça me plait moyen. (c'est réglé)
Je pense que je reposterai un code plus epuré par la suite(c'est fait).
Je suis également preneur des bons conseils.
Bon bref, j'ai testé ce code en html5 via chrome, IE, et Edge cela fonctionne.
HISTO
Maj 17/05:
Modification de variables globales inutiles, ajout d'eléments
customisables (la taille des joueurs et leurs ombres sont desormais
parametrables )+ nettoyage du code.
Maj 18/05:
Grosse Maj:
Ajout de nombreuses options:
1) possibilité de 2 types de configuration de terrain :
-halfPitch ==> 1 demi terrain
-fullPitch ==> 1 terrain entier
2) possibilté d'editer 2 equipes sur le même terrain
3) Gestion de l'orientation des equipes sur le terrain (bas/haut).
4) bug corrigé : possibilté d'instancier plusieurs
terrains en parralele sur la meme page sans générer de conflits de canvas
ni conflits d'objets:
La fonction getObjEventCoord permet de gerer cela
5) Encapsulation des proprietes liées aux équipes dans un nouvel objet (team)
==> notamment la couleur de maillot, la direction et les joueurs.
6) Ajout de plusieurs exemples d'utilisation dans la page index.html
Maj 20/05:
Detail de la Maj :Ajout du drag and drop pour deplacer les joueurs.
A utiliser avec parcimonie:j'ai choisi d' activer désactiver le mode à l'aide
d'un bouton input qui joue le role du switch. Dans ce code le dragNDrop n'est
utilisé que sur un seul exemple dans index.html.
Voilà je pense que ce code est de plus en plus proche de son but final,
mais comme les idées viennent au fure et à mesure, je verrai si d'autres maj
seront faites (j'ai possiblement de nouvelles fonctionnalités à ajouter,
mais on verra). En attendant, bon amusement avec cet outil
Maj 23/05:
-Mise en place des icones, pour que l'outil puisse également faire office
de compte rendu de match avec les buteurs et les cartons.
-Correction du bug de replacement des joueurs après redimensionnement du terrain.
-correction du bug avec le setInterval(les ressources s'epuisaient avec
l'ajout des icones):ajout de clearInterval à la place du delete.
Maj 29/05:
-Integration de la librairie opensource jscolor
le site de l'editeur http://jscolor.com/
-integration du menu de configuration géré entierement par l'objet,
du coup le code utilisateur est maintenant de plus en plus allégé.
Maj 31/05:
-Implementation de la gestion des rayures de couleurs sur les maillots.
Anecdote: J'ai un peu galéré pour pondre l'algo qui génére à la volée ces rayures
selon l'axe voulu.
Maj 01/06:
-Correction d'un gros bug de debutant: l'inverse du test logique a & b (
cela ne fait pas !a & !b) Cette erreur s'était glissée dans la gestion des
coordonnees en metres du drag'n drop . Du coup l'effet de bord avait
pour consequence de decaler les joueurs de quelques pixel(20) car j'utilise un
changement de coordonnées(pixels - metres) pour gerer, entre autres,
les redimensionnements du terrain.
Maj 03/06:
-Ajout des bandes obliques sur les maillots (rien que pour Monaco)
-Bug de changement de coordonnées corrigé pour le refresh (les coordonnées en m
étaient arrondies à tort) ce qui pouvait provoquer un léger decalage de qq pixels
en fonction de l'agrandissement voulu.
Maj 05/06:
-Correction de la generation des stries comme prévu.
Maj 06/06:
-Derniere Maj des stries, j'ai choisi finalement de faire un algo faisant intervenir
la fonction arccosinus qui me semble après reflexion etre la methode la plus
rigoureuse pour former des stries regulieres dans un cercle selon un axe voulu et
non en decoupant le cercle representant le corp du joueur en autant d'angles egaux
qu'il y a de stries comme l'algo procedait auparavant.
Même si ça ne choquait pas trop niveau rendu les stries ne pouvaient pas etre
d'epaisseur egales:
la raison est que les cosinus ne sont pas proportionnels à leur angles: Donc voilà
c'était je pense la dernière maj avant probablement un moment.
https://sourceforge.net/projects/soccerpitchteamedition/?source=navbar
Conseil Pour Telecharger:
Avec le bouton "télécharger le projet" du haut ou même du bas par moment, le zip que l'on télécharge pointe
vers la première version:
Pour la dernière version à jour cliquer sur les boutons: "télécharger"
sur chaque fichier (fichier par fichier)
(rubrique codes sources)
Description commerciale :)
Depuis l'annonce par DD de la liste des 23, voici un petit outil javascript pour
generer des compositions d'equipes sur un canvas.
Comme j'en suis satisfait au niveau du fonctionnement, je le partage:
Ce code permet d'avoir une interface simple d'utilisation et userfriendly
pour creer ,visualiser ses compos et même illustrer des comptes rendus de match.
cette dernière fonctionnalité a été ajoutée avec la maj du 23/05. (cf historique
des maj)
IMPORTANT: depuis la Maj du 29/05, ce code utilise maintenant la bibliothéque jscolor
(opensource) donc je l'ai intégrée sans problème à ce code (pour permettre une
modification agréable des couleurs en attendant que l'input type='color' soit géré par
tous les navigateurs): le le site de l'editeur est là (merci à eux):
http://jscolor.com/
Principe:
Tout le canvas est généré par du code JS : le terrain, les joueurs,
les inscriptions associées (nom des joueurs).
Avec ça vous pourrez vous la raconter sur les forums de foot, :-) (comme tout le monde
veut refaire les équipes à sa façon).
Il y a la possibilité de paramétrer les dimensions de terrains, les equipes(couleurs),
les icones utilisées: à condition qu'elle soient de petite taille( taille max 12px
sinon risques de bugs d'affichages),etc..
Je poste pour l'utilité du code, sachez que je developpe rarement en JS, donc je
suis conscient de mes lacunes en bonnes pratiques:
Notamment en mélangeant l'objet et l'evenementiel dans la classe ,
j'ai été obligé de redéclarer bcp de variables à portées globales car ,
elles n'étaient plus accessibles dans le corp des fonctions si j'utilisais this,
et ça, ça me plait moyen. (c'est réglé)
Je pense que je reposterai un code plus epuré par la suite(c'est fait).
Je suis également preneur des bons conseils.
Bon bref, j'ai testé ce code en html5 via chrome, IE, et Edge cela fonctionne.
HISTO
Maj 17/05:
Modification de variables globales inutiles, ajout d'eléments
customisables (la taille des joueurs et leurs ombres sont desormais
parametrables )+ nettoyage du code.
Maj 18/05:
Grosse Maj:
Ajout de nombreuses options:
1) possibilité de 2 types de configuration de terrain :
-halfPitch ==> 1 demi terrain
-fullPitch ==> 1 terrain entier
2) possibilté d'editer 2 equipes sur le même terrain
3) Gestion de l'orientation des equipes sur le terrain (bas/haut).
4) bug corrigé : possibilté d'instancier plusieurs
terrains en parralele sur la meme page sans générer de conflits de canvas
ni conflits d'objets:
La fonction getObjEventCoord permet de gerer cela
5) Encapsulation des proprietes liées aux équipes dans un nouvel objet (team)
==> notamment la couleur de maillot, la direction et les joueurs.
6) Ajout de plusieurs exemples d'utilisation dans la page index.html
Maj 20/05:
Detail de la Maj :Ajout du drag and drop pour deplacer les joueurs.
A utiliser avec parcimonie:j'ai choisi d' activer désactiver le mode à l'aide
d'un bouton input qui joue le role du switch. Dans ce code le dragNDrop n'est
utilisé que sur un seul exemple dans index.html.
Voilà je pense que ce code est de plus en plus proche de son but final,
mais comme les idées viennent au fure et à mesure, je verrai si d'autres maj
seront faites (j'ai possiblement de nouvelles fonctionnalités à ajouter,
mais on verra). En attendant, bon amusement avec cet outil
Maj 23/05:
-Mise en place des icones, pour que l'outil puisse également faire office
de compte rendu de match avec les buteurs et les cartons.
-Correction du bug de replacement des joueurs après redimensionnement du terrain.
-correction du bug avec le setInterval(les ressources s'epuisaient avec
l'ajout des icones):ajout de clearInterval à la place du delete.
Maj 29/05:
-Integration de la librairie opensource jscolor
le site de l'editeur http://jscolor.com/
-integration du menu de configuration géré entierement par l'objet,
du coup le code utilisateur est maintenant de plus en plus allégé.
Maj 31/05:
-Implementation de la gestion des rayures de couleurs sur les maillots.
Anecdote: J'ai un peu galéré pour pondre l'algo qui génére à la volée ces rayures
selon l'axe voulu.
Maj 01/06:
-Correction d'un gros bug de debutant: l'inverse du test logique a & b (
cela ne fait pas !a & !b) Cette erreur s'était glissée dans la gestion des
coordonnees en metres du drag'n drop . Du coup l'effet de bord avait
pour consequence de decaler les joueurs de quelques pixel(20) car j'utilise un
changement de coordonnées(pixels - metres) pour gerer, entre autres,
les redimensionnements du terrain.
Maj 03/06:
-Ajout des bandes obliques sur les maillots (rien que pour Monaco)
-Bug de changement de coordonnées corrigé pour le refresh (les coordonnées en m
étaient arrondies à tort) ce qui pouvait provoquer un léger decalage de qq pixels
en fonction de l'agrandissement voulu.
Maj 05/06:
-Correction de la generation des stries comme prévu.
Maj 06/06:
-Derniere Maj des stries, j'ai choisi finalement de faire un algo faisant intervenir
la fonction arccosinus qui me semble après reflexion etre la methode la plus
rigoureuse pour former des stries regulieres dans un cercle selon un axe voulu et
non en decoupant le cercle representant le corp du joueur en autant d'angles egaux
qu'il y a de stries comme l'algo procedait auparavant.
Même si ça ne choquait pas trop niveau rendu les stries ne pouvaient pas etre
d'epaisseur egales:
la raison est que les cosinus ne sont pas proportionnels à leur angles: Donc voilà
c'était je pense la dernière maj avant probablement un moment.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.