Indiquer la position de la souris : javascript ?

Le Mon, 28 Apr 2008 03:47:16 +0200, SAM a écrit:

Hugolino a écrit :
> Le Sun, 27 Apr 2008 22:02:50 +0200, SAM a écrit:
>> Hugolino a écrit :
>>> Le Sat, 26 Apr 2008 14:09:16 +0200, SAM a écrit:
>>>>
>>>> <http://cjoint.com/?eAn6mLCD3z>
>>> C'est (presque) exactement ça que je veux. Je dis presque car je veux en
>>> plus la position en temps réel de la souris.
>> tu l'as : elle est dans la barre d'état (barre grise en bas de fenêtre)
>> et transcrite en mm
> Pas avec mon firefox qui vient d'être mis à jour en 2.0.0.14,

Et pourquoi ? le mien, à jour aussi, me montre bien la chose
(faut aller dans ses réglages, je n'sais plus si c'est par défaut ou pas)

Je viens de chercher, je n'ai pas vu de case à cocher ou autre qui se
rapporterait à l'affichage de la barre d'état. Peut-être est-elle
désactivée par une des extensions que j'utilise. Pourtant, elle affiche
bien l'adresse des liens sur lesquelles passe la souris. Nevermind, je
ne trouvais de toutes façons pas ça très lisible...

> Comment faire pour que ça s'affiche dans une paire de champ, voire à
> coté du pointeur comme sur <http://www.walterzorn.com/grapher/grapher_e.htm> ?
Bon, tu as trouvé depuis, non ?

Oui, excuse-moi de ne pas avoir réécrit mon message, mais il était un
poil tard (ou tôt :).

> Je comprends que this désigne l'objet sur lequel a lieu l'action,
> est-ce qu'il contient bien l'id de l'objet donc "exo_001" ? (je n'ai
> qu'une image par page, j'ai viré le "exo_002")
oui ici this désigne toute la balise de l'image
et y compris son attribut 'id'
(je me servais de cette id comme base de nomage des inputs associés)

OK, donc appeler coords(this) depuis la balise img envoie une espèce de
tableau dans la variable "exo" de la fonction coords. Et on récupère
l'id de l'exo en lisant la variable exo.id. Si on en avait eu l'usage,
on aurait pu récupérer la largeur de l'image en lisant exo.width, et
ainsi de suite. J'ai bon ?

> function key(evt) { k = (evt && evt.shiftKey); } est une fonction qui
> change la valeur de k suivant le résultat d'un test entre les variables
> "evt" et "evt.shiftKey", mais comment marche ce test ?
du mieux qu'il peut :-)

:))

si l'élément cliqué (ou la fenêtre pour IE) renvoie l'évènement et que
cet évènement (onKeyDown) est assorti de la touche Majuscule alors ...
c'est true
sinon
c'est false
et k suit le mouvement

La valeur de "evt" n'est-elle pas forcément "true" ? puisque la fonction
a été appelée par onclick, j'imagine bien que oui, dans ce cas pourquoi
tester sa valeur ?

> Et que contient la variable "event" lors de l'appel de la fonction
> "key(event);"
event renvoie *TOUT* ce qu'il se passe (touche, position pointeur,
etc) au moment de l'évènement (clic, mousemachin, etc) yapuka choisir

OK, reste à confirmer la déduction que j'ai faite plus haut, sur la
manière de lire le tableau event, et trouver la liste des élément du
tableau.

> (edit juste avant d'envoyer ce post): le nom du champ doit être une
> string encadrée de "'".
> Ayé, ça marche !!
ou simplement :
document.Form1.exo_001_MousePos_px_x

Je ferais des tests pour voir quelle syntaxe est interprétée le plus
rapidement par le navigateur.

> (et déjà une demi-heure de déboggage pour commencer à faire rentrer le
> métier :))
:-)

Je crois que le js va me plaire, je voulais justement écrire un
diaporama de mes albums photos.


--

dev/hda10: Invalid argument passed to ext2 library while setting
GRRR, me faire ca a moi a cette heure la juste avant le grog du soir

trooooonçoonneuuuuse
-+- Ol in Guide du linuxien pervers - "Monsieur connait ses classiques."

Le Mon, 28 Apr 2008 03:49:38 +0200, SAM a écrit:

Hugolino a écrit :
> Le Sun, 27 Apr 2008 21:58:46 +0200, SAM a écrit:
>> <form name="monForm" action="#" onsubmit="return false;">
> Quelle est la différence entre name et id pour js ?
L'id c'est pour le DOM.
on s'en sert comme çà :
var truc = document.getElementById('monForm');

Pour IE : aucune différence ... il confond allègrement les deux
enfin ...
si le form a pour nom 'monForm' et pas d'Id, truc sera OK pour IE
tandis que Fx ne trouvera pas ce form puisqu'il cherche un ID

Le name n'est autorisé que pour les éléments de formulaires
(pour les traitements via serveur) on en profite pour continuer à
utiliser le vieux JS :-)

OK

Le name n'est plus autorisé pour les images
(mais les navigateurs ne le savent pas ... alors ... on en profite
encore si on veut : document.monImage où 'monImage' est le nom de l'image)

Dangeureux.. Ça posera des problèmes quand les navigateurs ne le
supporteront plus, alors autant écrire proprement dès maintenant.

>>>> <input type="hidden" value="TP_001">
> A quoi sert cet imput caché ?
c'est pour si on t'envoie le formulaire : savoir quel exo c'est :-)

Ah oui, ça m'était sorti de l'idée puisque je ne voulais pas envoyer le
formulaire.

> Reste à s'affranchir de l'appui sur la touche MAJ.
>
> Si les champs du premier point sont vides alors c'est que l'élève vient
> de cliquer ppour la première fois sur l'image, et je remplis ces champs
> de premier point.

Mais non malheureux !
L'élève a quand même le droit de s'y reprendre à plusieurs fois pour
cliquer, non ?

Bien sûr.

Tu préfères qu'à chaque erreur il recommence depuis le début ?

Mais non !
Si tu relis ce que je disais, tu verras que le premier clic remplit les
champs de Point1, que le deuxième remplit les champs de Point2 (et
calcule tout ce dont j'ai besoin) puis que chaque clic suivant recopie
les champs de Point2 dans ceux de Point1 (dont je n'ai plus besoin) et
remplit ensuite ceux de Point2 avec les coordonnées de ce troisième
clic, et ainsi de suite pour le 4ème, 5ème, etc.
Au contraire, ça permet à l'élève qui psychote un peu de ne pas avoir à
se poser la question de la touche MAJ. Et le calcul est effectué en ne
teant compte que des deux derniers clics.

Reste à savoir comment lire la valeur d'un champ. Je vais potasser les
liens que tu m'as donné et bidouiller ça.

Si la touche Maj est trop compliquée pour tes élèves (fous de la manette
de jeu à 25 boutons) tu peux passer par un système genre bouton-radio
( o pt 1 o pt 2 o pt 3 ...) ou un select

C'est pas vraiment ça. Il y en a sans doute qui sont fous de la manette
à 25 boutons, mais il y en a beaucoup qui ne savent tout simplement pas
se servir d'une interface, j'en ai vu saisir des chiffres et s'étonner
que le logiciel ne calcule pas: ils ne savaient tout simplement pas
qu'il fallait taper la touche <enterre> :)
Et tu en as d'autres qui ne lisent tout simplement pas les instructions
quand bien même le MAJ serait dans un blink; font-size:96pt;
font-color:red; buzzer-volume:100%; chair-vibrations:earthquake; :)

voir :
<http://cjoint.com/data/eCdsy4hObU_coord_points_.htm>

Ah bin le voilà mon exemple pour apprendre à lire la valeur d'un input !!

Encore merci pour tes explications (et ta patience)

Je fais ça ce soir.


--
Unix, c'est comme la science: plus on le connaît, plus on en trouve à
apprendre. C'est une assez bonne école de l'humilité, et on a plutôt
tendance à être dominé par ce qu'on ignore qu'à pavaner du peu qu'on sait.
Hugo (né il y a 1 388 825 288 secondes)

Hugolino a écrit :

Je viens de chercher, je n'ai pas vu de case à cocher ou autre

en fait c'est dans le menu 'Afficher'
cocher : 'Barre d'état'

OK, donc appeler coords(this) depuis la balise img envoie une espèce de
tableau dans la variable "exo" de la fonction coords. Et on récupère
l'id de l'exo en lisant la variable exo.id. Si on en avait eu l'usage,
on aurait pu récupérer la largeur de l'image en lisant exo.width, et
ainsi de suite. J'ai bon ?

toutafé

La valeur de "evt" n'est-elle pas forcément "true" ? puisque la fonction
a été appelée par onclick, j'imagine bien que oui, dans ce cas pourquoi
tester sa valeur ?

pask'on n'est jamais trop prudent ?

Je ferais des tests pour voir quelle syntaxe est interprétée le plus
rapidement par le navigateur.

aujourd'hui on utilise plus volontier le DOM

en vieux JS, IE Win serait plus à l'aise avec document.all
parait-il.

--
sm

Hugolino a écrit :

Si tu relis ce que je disais, tu verras que le premier clic remplit les
champs de Point1, que le deuxième remplit les champs de Point2 (et
calcule tout ce dont j'ai besoin)

et on recharge si on a mal clicoté ?

puis que chaque clic suivant recopie
les champs de Point2 dans ceux de Point1 (dont je n'ai plus besoin) et
remplit ensuite ceux de Point2 avec les coordonnées de ce troisième
clic, et ainsi de suite pour le 4ème, 5ème, etc.

et ... si on se gourationne au nième clic ?

Reste à savoir comment lire la valeur d'un champ. Je vais potasser les
liens que tu m'as donné et bidouiller ça.

mettre qque chose dans un champ :
document.monForm.monChamp.value = 120;
récupérer le contenu d'un champ :
alert(document.monForm.monChamp.value);

Attention !
le value d'un champ est toujours une chaine (ce n'est jamais un nombre)

donc :
var nbre1 = document.monForm.monChamp1.value;
var nbre2 = document.monForm.monChamp1.value;
document.monForm.resulat.value = +nbre1 + nbre2;
ou :
document.monForm.resulat.value = nbre1*1 + nbre2*1;

--
sm

Le Mon, 28 Apr 2008 11:24:05 +0200, SAM a écrit:

Hugolino a écrit :
> Si tu relis ce que je disais, tu verras que le premier clic remplit les
> champs de Point1, que le deuxième remplit les champs de Point2 (et
> calcule tout ce dont j'ai besoin)

et on recharge si on a mal clicoté ?

Non, car seuls les deux derniers clics sont pris en compte. Là où on
peut critiquer l'ergonomie, c'est que les calculs sont effectués même si
la valeur de la diagonale en pixel est aberrante. Mais tu ne peux de
toutes façons pas empêcher un élève de faire n'importe quoi (sauf que je
le verrais puisque ces mesures seront fausses).

Bref, si on se trompe, il suffit de continuer à cliquer, et si les deux
derniers clics ont bien eu lieu sur les coins opposés de la pièce, la
longueur de la diagonale en pixel est correcte et tous les autres
calculs aussi.

> puis que chaque clic suivant recopie
> les champs de Point2 dans ceux de Point1 (dont je n'ai plus besoin) et
> remplit ensuite ceux de Point2 avec les coordonnées de ce troisième
> clic, et ainsi de suite pour le 4ème, 5ème, etc.

et ... si on se gourationne au nième clic ?

Alors on clique une n+1ième fois et une n+2ième fois et les mesures sont
correctes si on a bien visé.
Je ferais une démo avec le vidéo projecteur et je dirais que la
diagonale fait environ 75 pixels.
Je pourrais aussi ajouter une alerte si la valeur de la diagonale est
farfelue.

Pour bien faire, il faudrait que je dessine sur l'image la position des
deux derniers points cliqués, je verais ça demain.

Bref, ça roxe des ours, je mets pas le code ici, mais c'est visible sur
mon site : <http://cjoint.com/?eCvXPU3ngv>


Merci encore mille fois, ça faisait un petit moment que j'attendais
d'avoir une bonne occasion de faire du js et tu m'as parfaitement mis le
pied à l'étrier.


--

PS: Arrete de dire "sous Linux", ca enerve... Mme Torvalds

Hugo (né il y a 1 388 825 341 secondes)

Le Mon, 28 Apr 2008 11:24:05 +0200, SAM a écrit:

Hugolino a écrit :
> Si tu relis ce que je disais, tu verras que le premier clic remplit les
> champs de Point1, que le deuxième remplit les champs de Point2 (et
> calcule tout ce dont j'ai besoin)

et on recharge si on a mal clicoté ?

Non, car seuls les deux derniers clics sont pris en compte. Là où on
peut critiquer l'ergonomie, c'est que les calculs sont effectués même si
la valeur de la diagonale en pixel est aberrante. Mais tu ne peux de
toutes façons pas empêcher un élève de faire n'importe quoi (sauf que je
le verrais puisque ces mesures seront fausses).

Bref, si on se trompe, il suffit de continuer à cliquer, et si les deux
derniers clics ont bien eu lieu sur les coins opposés de la pièce, la
longueur de la diagonale en pixel est correcte et tous les autres
calculs aussi.

> puis que chaque clic suivant recopie
> les champs de Point2 dans ceux de Point1 (dont je n'ai plus besoin) et
> remplit ensuite ceux de Point2 avec les coordonnées de ce troisième
> clic, et ainsi de suite pour le 4ème, 5ème, etc.

et ... si on se gourationne au nième clic ?

Alors on clique une n+1ième fois et une n+2ième fois et les mesures sont
correctes si on a bien visé.
Je ferais une démo avec le vidéo projecteur et je dirais que la
diagonale fait environ 75 pixels.
Je pourrais aussi ajouter une alerte si la valeur de la diagonale est
farfelue.

Pour bien faire, il faudrait que je dessine sur l'image la position des
deux derniers points cliqués, je verrais ça demain (dans un quart
d'heure donc :))

Bref, ça roxe des ours, je mets pas le code ici, mais c'est visible sur
mon site : <http://cjoint.com/?eCvXPU3ngv>


Merci encore mille fois, ça faisait un petit moment que j'attendais
d'avoir une bonne occasion de faire du js et tu m'as parfaitement mis le
pied à l'étrier.


--

PS: Arrete de dire "sous Linux", ca enerve... Mme Torvalds

Hugo (né il y a 1 388 825 341 secondes)

Bonjour,

Le 29/04/2008 00:01, Hugolino répondait à SAM :

Merci encore mille fois, ça faisait un petit moment que j'attendais
d'avoir une bonne occasion de faire du js et tu m'as parfaitement mis le
pied à l'étrier.

Je n'ai pas osé intervenir dans cette discussion, surtout parce que
je n'avais de réponse à aucune de tes questions, mais je te signale
à tout hasard -- pour la prochaine fois -- l'existence du groupe
fr.comp.lang.javascript qui sera plus approprié.

Note que notre gourou JavaScript Stéphane Moriaux alias SAM y intervient
très régulièrement, ainsi que quelques autres, et tu n'y perdras donc
rien au change.

Cordialement,

--
Olivier Miakinen

Hugolino a écrit :

Bref, ça roxe des ours, je mets pas le code ici, mais c'est visible sur
mon site : <http://cjoint.com/?eCvXPU3ngv>

Et la loupe ?
Où est la loupe ?

Paske là ... je trouve 77px ou 79px et des croutchnes
et ... ha ? ça fait quasi 36mm de toutes façons ? !

c'est t'absolument fabulous :-)


Petit bémol :
le html ne respecte pas le code propre au xhtml (doctype) ...
(26 avertissements de la part de mon Tidy - Fx)


--
sm

Le Tue, 29 Apr 2008 19:45:02 +0200, SAM a écrit:

Hugolino a écrit :
>
> Bref, ça roxe des ours, je mets pas le code ici, mais c'est visible sur
> mon site : <http://cjoint.com/?eCvXPU3ngv>

Et la loupe ?
Où est la loupe ?

C'est quoi ça ?

Paske là ... je trouve 77px ou 79px et des croutchnes
et ... ha ? ça fait quasi 36mm de toutes façons ? !

J'ai analyser toutes les images cet après midi en me mettant dans la
peau d'un élève et en trçant la trajectoire de la pièce d'après les
coordonnées relevées, et c'est vrai qu'elle est pour le moins cahotique
car il est vraiment difficile de pointer correctement.
Pour mon TP, je mutualiserais les résultats de toute la classe pour
lisser la trajectoire.
Je referais une vidéo en plus haute résolution pour que l'image soit
plus grande.
(Sinon, c'est vraiment que l'affichage du 36,055 n'apporte rien... si ce
n'est que le script n'a pas de bug)

c'est t'absolument fabulous :-)

Grâce à toi en très grande partie.

Petit bémol :
le html ne respecte pas le code propre au xhtml (doctype) ...
(26 avertissements de la part de mon Tidy - Fx)

Le W3C Validator annonçait 117 erreurs, je suis tombé à 4 après un peu
de nettoyage, mais il y a des trucs que je ne comprends pas, comme le
problème du <div class="change-cursor2crosshair">></div> qui encadre
l'image, div lui même dans un <p></p>, ça dit :
8<-----------8<---------8<----------8<----------8<----------8<----------8<
document type does not allow element "div" here; missing one of
"object", "ins", "del", "map", "button" start-tag .
8<-----------8<---------8<----------8<----------8<----------8<----------8<
Or je n'ai jamais utilisé ces tags, je n'en ai jamais eu besoin dans mes
autres pages qui valident et je ne sais même pas à quoi ils servent.


Il y aussi <form name="Form1" action="#" onsubmit="return false;"> qui
raconte :
8<-----------8<---------8<----------8<----------8<----------8<----------8<
there is no attribute "name"
You have used the attribute named above in your document, but the
document type you are using does not support that attribute for this
element. This error is often caused by incorrect use of the "Strict"
document type with a document that uses frames (e.g. you must use the
"Transitional" document type to get the "target" attribute), or by using
vendor proprietary extensions such as "marginheight" (this is usually
fixed by using CSS to achieve the desired effect instead).
8<-----------8<---------8<----------8<----------8<----------8<----------8<

Et deux autres erreurs du même tonneau que je ne comprends pas.

--
You try to tell customers of the other airlines about the great trip, but all
they can say is, "You had to do what with the seat?" -+- LG #45 -+-
Hugo (né il y a 1 388 962 642 secondes)

Le Tue, 29 Apr 2008 15:36:13 +0200, Olivier Miakinen a écrit:

Bonjour,

Le 29/04/2008 00:01, Hugolino répondait à SAM :
>
> Merci encore mille fois, ça faisait un petit moment que j'attendais
> d'avoir une bonne occasion de faire du js et tu m'as parfaitement mis le
> pied à l'étrier.

Je n'ai pas osé intervenir dans cette discussion, surtout parce que
je n'avais de réponse à aucune de tes questions, mais je te signale
à tout hasard -- pour la prochaine fois -- l'existence du groupe
fr.comp.lang.javascript qui sera plus approprié.

Oui, j'ay poserais dorénavenat mes questions sur js, maintenant que je
commence à y comprendre quelque chose, grâce à Stéphane.

Note que notre gourou JavaScript Stéphane Moriaux alias SAM y intervient
très régulièrement, ainsi que quelques autres, et tu n'y perdras donc
rien au change.

OK

Cordialement,

Tout pareil.


--
Un vibromasseur ne vous téléphone pas pour votre anniversaire.
Un vibromasseur ne vous envoie pas de fleurs.
Et vous ne pouvez pas le présenter à votre mère.
Hugo (né il y a 1 388 965 558 secondes)