Salut,

Je suis prof de physique et je donne souvent mes TP sous forme de page
HTML.
Dans un TP, <http://urlalacon.com/B2eh1o> j'ai besoin que mes élèves
analysent des jpeg extraits d'une vidéo. J'aurais besoin que s'affiche
dans le navigateur la position de la souris (en pixels).

Est-ce que seul un langage de script comme javascript permettrait de
faire ça, ou est-ce que je peux m'en tirer avec de la css pure. Parce
que javascript, j'y connais rien :/

Tant qu'à faire, si javascript est requis, il faudrait qu'ils puissent
cliquer deux points particuliers de la photo pour que les pixels soit
convertis en millimètre. (parce que je connais la distance entre ces
deux points qui se déplacent sur les photos).

Si vous pouviez me fournir le nom des fonctions javascript qui
permettent de faire ça, je gagnerais un peu de temps dans mes
recherches.

D'ailleurs puisque je ne connais rien à javascript, est-ce qu'il n'y
aurait pas maintenant un langage coté client plus évolué/facile/puissant
que javascript, ou est-ce devenu un standard incontournable ?


Merci de vos avis


--
Il a fallu des millions d'années pour développer la capacité à raisonner
des hommes. Mais il suffit de quelques instants de logique féminine
pour l'abattre.
Hugo (né il y a 1 388 582 249 secondes)

Bonjour,

Vous allez être infiniment heureux d'apprendre que Hugolino vient d'écrire
:

> J'aurais besoin que s'affiche
> dans le navigateur la position de la souris (en pixels).

Dans google, je viens de taper "position de la souris dans une page" et
j'obtiens ceci :

http://www.google.com/search?q=posit...e=utf8&oe=utf8

Yapuka ... ... faire le tri

--
Cordialement

guy.siaurg@free.invalid (inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/

Hugolino a écrit :

> Dans un TP, <http://urlalacon.com/B2eh1o> j'ai besoin que mes élèves
> analysent des jpeg extraits d'une vidéo. J'aurais besoin que s'affiche
> dans le navigateur la position de la souris (en pixels).

On pourrait penser que c'est trivial, mais non. Pour avoir la position
dans l'image, il faut déjà savoir où est l'image, car les coordonnées de
clique données par l'événement est relative à la zone d'affichage ou
l'origine du document. Avec l'interface normale DOM :
<http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-eventgroupings-mouseevents>

Il faut donc connaître la position de l'image (pour faire un
changement de coordonnées). Mais.. rien de normalisé (qu'on me corrige
si je me trompe) ne permet de récupérer la position d'un élément.
offsetTop et offsetLeft sont les attributs javascript d'un élément HTML
assez répendus.

Ensuite, attraper les événements de la souris est assez simple, que ce
soit via les attributs HTML
<http://www.w3.org/TR/html4/struct/objects.html#edef-IMG>, l'API DOM
Event
<http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-eventgroupings-mouseevents>,
ou l'objet javascript
<http://developer.mozilla.org/en/docs/DOM:element#Introduction>.

> Est-ce que seul un langage de script comme javascript permettrait de
> faire ça, ou est-ce que je peux m'en tirer avec de la css pure. Parce
> que javascript, j'y connais rien :/

Les CSS sont destinées pour la présentation, pas pour l'interactivité.

> Tant qu'à faire, si javascript est requis, il faudrait qu'ils puissent
> cliquer deux points particuliers de la photo pour que les pixels soit
> convertis en millimètre. (parce que je connais la distance entre ces
> deux points qui se déplacent sur les photos).

Pas de problème, il suffira de le coder.

> D'ailleurs puisque je ne connais rien à javascript, est-ce qu'il n'y
> aurait pas maintenant un langage coté client plus évolué/facile/puissant
> que javascript, ou est-ce devenu un standard incontournable ?

Je me disais bien que c'était un troll
Tu peux utiliser le langage que tu souhaites, il faut que le
navigateur puisse l'interpréter. Ce qu'il y a de plus répandu, ce sont
des dialectes d'ecmascript, abusivement nommés javascript. Il y a entre
autre javascript(mozilla) et jscript(microsoft), sans compter les
implémentations des autres navigateurs qui tentent d'avoir le
comportement le plus proche possible de la norme ou du standard (MS).

Mais javascript est un langage assez simple, je vois difficilement
comment faire plus simple tout en conservant sa puissance. Et en quoi
javascript n'est pas un langage évolué, à défaut d'être évalué (oui,
c'est facile) ?

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org

Hugolino a écrit :
> Salut,
>
> Je suis prof de physique et je donne souvent mes TP sous forme de page
> HTML.
> Dans un TP, <http://urlalacon.com/B2eh1o> j'ai besoin que mes élèves
> analysent des jpeg extraits d'une vidéo. J'aurais besoin que s'affiche
> dans le navigateur la position de la souris (en pixels).
>
> Est-ce que seul un langage de script comme javascript permettrait de
> faire ça,

oui

> ou est-ce que je peux m'en tirer avec de la css pure.

non

> Parce que javascript, j'y connais rien :/

Il n'est pas trop tard pour s'y mettre :-)

à mettre dans le head du fichier :
(pas certain que mes axes x et y soient les bons ...!)

<script type="text/javascript">
var posx, posy, k;
function MouseCatch(e, px2mm) {
// px2mm est le facteur de conversion pixels --> mm
// relatif à l'image cliquée
posx = e.offsetX ? e.offsetX : e.clientX-e.target.x;
posy = e.offsetY ? e.offsetY : e.clientY-e.target.y;
posx = Math.round(posx * px2mm);
posy = Math.round(posy * px2mm);
window.status='X: '+posx+'mm - Y: '+posy+'mm';
return true;
}
function key(evt) { k = (evt && evt.shiftKey); }
function coords(exo) {
exo = exo.id;
exo += k? '_point_2_' : '_point_1_';
document.monForm[exo+'x'].value = posx;
document.monForm[exo+'y'].value = posy;
}
</script>

et pour le truc bazar, dans le body :

<form action="rapport.php" method="post">
<input type="hidden" value="TP_001">
<h3><u>Clic</u> pour repérer le 1er point et
<u>Majuscule + clic</u> pour le 2ième point :</h3>
<p><img src="exo_001.jpg" id="exo_001"
onmousemove="MouseCatch(event, 0.256);"
onclick="key(event); coords(this);"><br>
Point 1 :
x = <input size=6 name="exo_001_point_1_x">
y = <input size=6 name="exo_001_point_1_y"><br>
Point 2 -
x = <input size=6 name="exo_001_point_2_x">
y = <input size=6 name="exo_001_point_2_y">
</p>
<p><img src="exo_002.jpg" id="exo_002"
onmousemove="MouseCatch(event, 0.647);"
onclick="key(event); coords(this);"><br>
Point 1 :
x = <input size=6 name="exo_002_point_1_x">
y = <input size=6 name="exo_002_point_1_y"><br>
Point 2 -
x = <input size=6 name="exo_002_point_2_x">
y = <input size=6 name="exo_002_point_2_y">
</p>
.... etc ...
<p><input type=submit>
</form>

> Tant qu'à faire, si javascript est requis, il faudrait qu'ils puissent
> cliquer deux points particuliers de la photo pour que les pixels soit
> convertis en millimètre. (parce que je connais la distance entre ces
> deux points qui se déplacent sur les photos).

mieux vaudrait connaitre le rapport width en px / width en mm de l'image

> D'ailleurs puisque je ne connais rien à javascript, est-ce qu'il n'y
> aurait pas maintenant un langage coté client plus évolué/facile/puissant
> que javascript, ou est-ce devenu un standard incontournable ?

côté client il n'y a que le JS

éventuellement un applet en JAVA ?
(voir si google n'a pas ça en stock ?)


--
sm

Mickaël Wolff a écrit :
>
> Il faut donc connaître la position de l'image

Ha bon ?

Je n'ai pas ce problème dans mes brouteurs
(même avec IE Mac)
<http://cjoint.com/?eAn6mLCD3z>
en supposant que j'aie compris le but recherché ?!

> Ensuite, attraper les événements de la souris est assez simple, que ce
> soit via les attributs HTML

assez simple ... assez simple ... c'est quand même un peu vite dit :
<http://www.quirksmode.org/js/findpos.html>
<http://www.quirksmode.org/dom/w3c_cssom.html#mousepos>

--
sm

SAM a écrit :
> Je n'ai pas ce problème dans mes brouteurs
> (même avec IE Mac)
> <http://cjoint.com/?eAn6mLCD3z>
> en supposant que j'aie compris le but recherché ?!

Arf, ben au temps pour moi, j'étais persuadé que offsetWidth et
compagnie étaient absolus et non relatifs, ce qui change tout. Du coup,
c'est trivial.

> assez simple ... assez simple ... c'est quand même un peu vite dit :

Quelque chose d'assez simple n'est pas quelque chose de trivial :p

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org

Le Sat, 26 Apr 2008 11:56:50 +0200, Guy Gruais a écrit:
> Bonjour,
>
> Vous allez être infiniment heureux d'apprendre que Hugolino vient d'écrire
> :
>
> > J'aurais besoin que s'affiche dans le navigateur la position de la
> > souris (en pixels).
>
> Dans google, je viens de taper "position de la souris dans une page" et
> j'obtiens ceci :
>
> http://www.google.com/search?q=posit...e=utf8&oe=utf8
>
> Yapuka ... ... faire le tri

Oops!
<plates excuses>
Marrant comment je peux oublier de googliser alors que je suis sue le
web au moins 4 heures par jour...
</plates excuses>


--
> la plupart des automobilistes n'ont aucune idée de comment fonctionne
> une moto
Si : trop vite, et en faisant trop de bruit.
Hugo (né il y a 1 388 759 135 secondes)

Le Sat, 26 Apr 2008 12:39:00 +0200, Mickaël Wolff a écrit:
> Hugolino a écrit :
>
> > Dans un TP, <http://urlalacon.com/B2eh1o> j'ai besoin que mes élèves
> > analysent des jpeg extraits d'une vidéo. J'aurais besoin que s'affiche
> > dans le navigateur la position de la souris (en pixels).
>
> On pourrait penser que c'est trivial, mais non. Pour avoir la position
> dans l'image, il faut déjà savoir où est l'image, car les coordonnées de
> clique données par l'événement est relative à la zone d'affichage ou
> l'origine du document.

Attention, je veux d'une part que:
* la position de la souris (x et y) soit constamment affichée dans deux
champs (champ_x_px et champ_y_px) et mise à jour en temps réel, pas
que le user soit obligé de cliquer.
* que lors d'un clic, la position de la souris soient affichées dans
deux autres champs, appelons-les champA_x et champA_y
* que lors d'un MAJ-clic (merci à SAM pour l'idée) la position de la
souris soit affichée dans champB_x et champB_y, et puisque je connais
la dimension de la pièce en plastique, qu'un facteur de conversion
entre pixel et mm soit calculé et que finalement, en dessous de
champ_x_px et champ_y_px, soit troujours en temps réel, affiché les
coordonnée de la souris en mm à partir du coin supérieur gauche de la
photo.

> Avec l'interface normale DOM :
Tout ce que je sais de DOM, c'est que ça signifie "Document Object
Model", mais je ne sais pas vraiment à quoi ça sert, si c'est
indispensable pour faire ce que je veux et si ça va être facile à
comprendre.
J'ai jeté un oeil sur sa définition sur wikipedia, ça a l'air quand même
d'un marteau pour écraser une mouche quand on le rapporte à mon petit
problème

> <http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-eventgroupings-mouseevents>

Malheureusement en anglais, que j'arrive à lire une fois que j'ai
apréhendé les notions de bases à partir d'un document en français.

> Il faut donc connaître la position de l'image (pour faire un
> changement de coordonnées). Mais.. rien de normalisé (qu'on me corrige
> si je me trompe) ne permet de récupérer la position d'un élément.
> offsetTop et offsetLeft sont les attributs javascript d'un élément HTML
> assez répendus.

Si ça pose un problème, je mets toutes les marges à zéro et je coince
l'image en haut à gauche.

> Ensuite, attraper les événements de la souris est assez simple, que ce
> soit via les attributs HTML
> <http://www.w3.org/TR/html4/struct/objects.html#edef-IMG>, l'API DOM
> Event
> <http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-eventgroupings-mouseevents>,
> ou l'objet javascript
> <http://developer.mozilla.org/en/docs/DOM:element#Introduction>.


> > Est-ce que seul un langage de script comme javascript permettrait de
> > faire ça, ou est-ce que je peux m'en tirer avec de la css pure. Parce
> > que javascript, j'y connais rien :/
>
> Les CSS sont destinées pour la présentation, pas pour l'interactivité.

C'est juste, mais j'ai été surpris par certains sites qui ne fonctionne
qu'avec les CSS alors que j'étais à première vue persuadé qu'il y a
avait des scripts derrière...

> > Tant qu'à faire, si javascript est requis, il faudrait qu'ils puissent
> > cliquer deux points particuliers de la photo pour que les pixels soit
> > convertis en millimètre. (parce que je connais la distance entre ces
> > deux points qui se déplacent sur les photos).
>
> Pas de problème, il suffira de le coder.

Il s'agira d'une bête mise à l'échelle.

> > D'ailleurs puisque je ne connais rien à javascript, est-ce qu'il n'y
> > aurait pas maintenant un langage coté client plus évolué/facile/puissant
> > que javascript, ou est-ce devenu un standard incontournable ?
>
> Je me disais bien que c'était un troll

J'avoue ne pas comprendre en quoi mon poste peut passer pour un troll.

> Tu peux utiliser le langage que tu souhaites, il faut que le
> navigateur puisse l'interpréter. Ce qu'il y a de plus répandu, ce sont
> des dialectes d'ecmascript, abusivement nommés javascript. Il y a entre
> autre javascript(mozilla) et jscript(microsoft), sans compter les
> implémentations des autres navigateurs qui tentent d'avoir le
> comportement le plus proche possible de la norme ou du standard (MS).
>
> Mais javascript est un langage assez simple, je vois difficilement
> comment faire plus simple tout en conservant sa puissance. Et en quoi
> javascript n'est pas un langage évolué, à défaut d'être évalué (oui,
> c'est facile) ?

Bon, bin va falloir s'y mettre



--
C'est l'histoire d'un gars qui veut la machine la plus puissante du
monde sous Windows 95 en emulation sous Wine qui tourne sur une station
FreeBSD avec bibliotheque de compatibilite Linux.
Hugo (né il y a 1 388 766 415 secondes)

Le Sat, 26 Apr 2008 14:09:16 +0200, SAM a écrit:
> Mickaël Wolff a écrit :
> >
> > Il faut donc connaître la position de l'image
>
> Ha bon ?
>
> Je n'ai pas ce problème dans mes brouteurs
> (même avec IE Mac)
> <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.
Mais je n'ai pas réussi à voir le code javascript en ouvrant le code
source de cette page.
Est-ce le même que celui que tu donnes dans ton autre post ? (qui semble
ne pas marcher chez moi: cf ma réponse à ton autre post)

> en supposant que j'aie compris le but recherché ?!

Si, si c'est ça que je veux.

> > Ensuite, attraper les événements de la souris est assez simple, que ce
> > soit via les attributs HTML
>
> assez simple ... assez simple ... c'est quand même un peu vite dit :
> <http://www.quirksmode.org/js/findpos.html>
> <http://www.quirksmode.org/dom/w3c_cssom.html#mousepos>

Euh... )



--
Concours de bit entre linuxiens : hcgvzr
Hugo (né il y a 1 388 766 783 secondes)

Le Sat, 26 Apr 2008 13:48:29 +0200, SAM a écrit:
> Hugolino a écrit :
> > Dans un TP, <http://urlalacon.com/B2eh1o> j'ai besoin que mes élèves
> > analysent des jpeg extraits d'une vidéo. J'aurais besoin que s'affiche
> > dans le navigateur la position de la souris (en pixels).
> >
> > Est-ce que seul un langage de script comme javascript permettrait de
> > faire ça,
>
> oui
>
> > Parce que javascript, j'y connais rien :/
>
> Il n'est pas trop tard pour s'y mettre :-)

Je ne demande qu'à apprendre (pour un prof, le contraire serait pour le
moins incohérent , mais il va falloir me guider un peu.
>
> à mettre dans le head du fichier :
> (pas certain que mes axes x et y soient les bons ...!)
>
> <script type="text/javascript">
> var posx, posy, k;
> function MouseCatch(e, px2mm) {
> // px2mm est le facteur de conversion pixels --> mm
> // relatif à l'image cliquée
> posx = e.offsetX ? e.offsetX : e.clientX-e.target.x;
> posy = e.offsetY ? e.offsetY : e.clientY-e.target.y;
> posx = Math.round(posx * px2mm);
> posy = Math.round(posy * px2mm);
> window.status='X: '+posx+'mm - Y: '+posy+'mm';
> return true;
> }
> function key(evt) { k = (evt && evt.shiftKey); }
> function coords(exo) {
> exo = exo.id;
> exo += k? '_point_2_' : '_point_1_';
> document.monForm[exo+'x'].value = posx;
> document.monForm[exo+'y'].value = posy;
> }
> </script>

OK, ça j'ai fait, mais quand je clique sur l'image, il provoque une
erreur (j'ai installé FireBug), ça dit:
8<-----------8<---------8<----------8<----------8<----------8<----------8<
document.monForm has no properties
[Break on this error] document.monForm[exo+'x'].value = posx;
8<-----------8<---------8<----------8<----------8<----------8<----------8<
à la ligne 109 de mon pit-show.php, soit la ligne "function coords(exo) {"
de ton code javascript
A quoi cela est-il du ? comment corriger ?

> et pour le truc bazar, dans le body :
>
> <form action="rapport.php" method="post">

Je ne souhaite pas que mon serveur récupère les données du formulaire
(il faut bien que les élèves travaillent un peu
> <input type="hidden" value="TP_001">
> <h3><u>Clic</u> pour repérer le 1er point et
> <u>Majuscule + clic</u> pour le 2ième point :</h3>
> <p><img src="exo_001.jpg" id="exo_001"
> onmousemove="MouseCatch(event, 0.256);"
> onclick="key(event); coords(this);"><br>

Est-il indispensable que l'image soit dans le formulaire ?

> Point 1 :
> x = <input size=6 name="exo_001_point_1_x">
> y = <input size=6 name="exo_001_point_1_y"><br>
> Point 2 -
> x = <input size=6 name="exo_001_point_2_x">
> y = <input size=6 name="exo_001_point_2_y">
> </p>

Mon index de vignette appelle pict-show.php en lui passant le nom de
l'image à affcher en argument. Il n'y a qu'une seule image à analyser à
chaque fois, je n'ai donc inclus dans mon code que ce qui est ci-dessus.

> > Tant qu'à faire, si javascript est requis, il faudrait qu'ils puissent
> > cliquer deux points particuliers de la photo pour que les pixels soit
> > convertis en millimètre. (parce que je connais la distance entre ces
> > deux points qui se déplacent sur les photos).
>
> mieux vaudrait connaitre le rapport width en px / width en mm de l'image

La pièce en plastique fait 20mm par 30mm, donc 36mm de diagonale, je
souhaiterais que mon javascript calcule donc le rapport pixel/mm puis
un fois que c'est fait, qu'il affiche aussi les coordonnées de la souris
en mm par rapport au coin supérieur gauche de la photo, afin que l'élève
connaisse la position de la pièce.
Je ne peux pas donner l'échelle de la photo, car la webcam était situé à
50 cm du plan de travail, maias il y a 10 cm d'eau dans le
cristallisaoir et je dois compter avec la parallaxe.

> > D'ailleurs puisque je ne connais rien à javascript, est-ce qu'il n'y
> > aurait pas maintenant un langage coté client plus évolué/facile/puissant
> > que javascript, ou est-ce devenu un standard incontournable ?
>
> côté client il n'y a que le JS

OK, il va donc falloir s'y mettre.

> éventuellement un applet en JAVA ?

Quelle horreur !!

> (voir si google n'a pas ça en stock ?)

Avec toutes les horreurs qu'on peut y trouver, certainement.


Merci (à toi et aux autres contributeurs)

--
Passe que moi, au départ, j'avais fait informatique comme études, pas
NT, et je voudrais revenir à mon métier premier.
Hugo (né il y a 1 388 768 445 secondes)

Le Sat, 26 Apr 2008 11:56:50 +0200, Guy Gruais a écrit:
> Bonjour,
>
> Vous allez être infiniment heureux d'apprendre que Hugolino vient d'écrire
> :
>
> > J'aurais besoin que s'affiche dans le navigateur la position de la
> > souris (en pixels).
>
> Dans google, je viens de taper "position de la souris dans une page" et
> j'obtiens ceci :
>
> http://www.google.com/search?q=posit...e=utf8&oe=utf8
>
> Yapuka ... ... faire le tri

Oops!
<plates excuses>
Marrant comment je peux oublier de googliser alors que je suis sur le
web au moins 4 heures par jour...
</plates excuses>


--
> la plupart des automobilistes n'ont aucune idée de comment fonctionne
> une moto
Si : trop vite, et en faisant trop de bruit.
Hugo (né il y a 1 388 759 135 secondes)

Le Sat, 26 Apr 2008 12:39:00 +0200, Mickaël Wolff a écrit:
> Hugolino a écrit :
>
> > Dans un TP, <http://urlalacon.com/B2eh1o> j'ai besoin que mes élèves
> > analysent des jpeg extraits d'une vidéo. J'aurais besoin que s'affiche
> > dans le navigateur la position de la souris (en pixels).
>
> On pourrait penser que c'est trivial, mais non. Pour avoir la position
> dans l'image, il faut déjà savoir où est l'image, car les coordonnées de
> clique données par l'événement est relative à la zone d'affichage ou
> l'origine du document.

Attention, je veux d'une part que:
* la position de la souris (x et y) soit constamment affichée dans deux
champs (champ_x_px et champ_y_px) et mise à jour en temps réel, pas
que le user soit obligé de cliquer.
* que lors d'un clic, la position de la souris soient affichée dans
deux autres champs, appelons-les champA_x et champA_y.
* que lors d'un MAJ-clic (merci à SAM pour l'idée) la position de la
souris soit affichée dans champB_x et champB_y, et puisque je connais
la dimension de la pièce en plastique, qu'un facteur de conversion
entre pixel et mm soit calculé et que finalement, en dessous de
champ_x_px et champ_y_px, soit toujours en temps réel, affichées les
coordonnées de la souris en mm à partir du coin supérieur gauche de la
photo.

> Avec l'interface normale DOM :
Tout ce que je sais de DOM, c'est que ça signifie "Document Object
Model", mais je ne sais pas vraiment à quoi ça sert, si c'est
indispensable pour faire ce que je veux et si ça va être facile à
comprendre.
J'ai jeté un oeil sur sa définition sur wikipedia, ça ressemble un peu à
un marteau pour écraser une mouche quand on le rapporte à mon petit
problème.

> <http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-eventgroupings-mouseevents>

Malheureusement en anglais, que j'arrive à lire une fois que j'ai
appréhendé les notions de bases à partir d'un document en français.

> Il faut donc connaître la position de l'image (pour faire un
> changement de coordonnées). Mais.. rien de normalisé (qu'on me corrige
> si je me trompe) ne permet de récupérer la position d'un élément.
> offsetTop et offsetLeft sont les attributs javascript d'un élément HTML
> assez répendus.

Si ça pose un problème, je mets toutes les marges à zéro et je coince
l'image en haut à gauche.

> Ensuite, attraper les événements de la souris est assez simple, que ce
> soit via les attributs HTML
> <http://www.w3.org/TR/html4/struct/objects.html#edef-IMG>, l'API DOM
> Event
> <http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-eventgroupings-mouseevents>,
> ou l'objet javascript
> <http://developer.mozilla.org/en/docs/DOM:element#Introduction>.


> > Est-ce que seul un langage de script comme javascript permettrait de
> > faire ça, ou est-ce que je peux m'en tirer avec de la css pure. Parce
> > que javascript, j'y connais rien :/
>
> Les CSS sont destinées pour la présentation, pas pour l'interactivité.

C'est juste, mais j'ai été surpris par certains sites qui ne fonctionne
qu'avec les CSS alors que j'étais à première vue persuadé qu'il y a
avait des scripts derrière...

> > Tant qu'à faire, si javascript est requis, il faudrait qu'ils puissent
> > cliquer deux points particuliers de la photo pour que les pixels soit
> > convertis en millimètre. (parce que je connais la distance entre ces
> > deux points qui se déplacent sur les photos).
>
> Pas de problème, il suffira de le coder.

Il s'agira d'une bête mise à l'échelle.

> > D'ailleurs puisque je ne connais rien à javascript, est-ce qu'il n'y
> > aurait pas maintenant un langage coté client plus évolué/facile/puissant
> > que javascript, ou est-ce devenu un standard incontournable ?
>
> Je me disais bien que c'était un troll

J'avoue ne pas comprendre en quoi mon poste peut passer pour un troll.

> Tu peux utiliser le langage que tu souhaites, il faut que le
> navigateur puisse l'interpréter. Ce qu'il y a de plus répandu, ce sont
> des dialectes d'ecmascript, abusivement nommés javascript. Il y a entre
> autre javascript(mozilla) et jscript(microsoft), sans compter les
> implémentations des autres navigateurs qui tentent d'avoir le
> comportement le plus proche possible de la norme ou du standard (MS).
>
> Mais javascript est un langage assez simple, je vois difficilement
> comment faire plus simple tout en conservant sa puissance. Et en quoi
> javascript n'est pas un langage évolué, à défaut d'être évalué (oui,
> c'est facile) ?

Bon, bin va falloir s'y mettre



--
C'est l'histoire d'un gars qui veut la machine la plus puissante du
monde sous Windows 95 en emulation sous Wine qui tourne sur une station
FreeBSD avec bibliotheque de compatibilite Linux.
Hugo (né il y a 1 388 766 415 secondes)

Hugolino a écrit :
>
> OK, ça j'ai fait, mais quand je clique sur l'image, il provoque une
> erreur (j'ai installé FireBug), ça dit:

Pas besoin, la console d'erreur intégrée de Fx t'en aurait dit autant :-)

> 8<-----------8<---------8<----------8<----------8<----------8<----------8<
> document.monForm has no properties

> A quoi cela est-il du ? comment corriger ?

en donnant un nom (et le bon !) au form

<form name="monForm" blabla

document.monForm
peut aussi s'écrire :
document.forms['monForm']
ou à l'aide de l'index des formulaires présents sur la page :
document.forms[0]

>> <form action="rapport.php" method="post">
>
> Je ne souhaite pas que mon serveur récupère les données du formulaire

alors

<form name="monForm" action="#" onsubmit="return false;">


> (il faut bien que les élèves travaillent un peu
>> <input type="hidden" value="TP_001">
>> <h3><u>Clic</u> pour repérer le 1er point et
>> <u>Majuscule + clic</u> pour le 2ième point :</h3>
>> <p><img src="exo_001.jpg" id="exo_001"
>> onmousemove="MouseCatch(event, 0.256);"
>> onclick="key(event); coords(this);"><br>
>
> Est-il indispensable que l'image soit dans le formulaire ?

absolument pas
seuls les <input> doivent y être
(de les avoir à proximité de l'image me semblait mieux)

>> mieux vaudrait connaitre le rapport width en px / width en mm de l'image
>
> La pièce en plastique fait 20mm par 30mm, donc 36mm de diagonale, je
> souhaiterais que mon javascript calcule donc le rapport pixel/mm puis

Ha! !!! ???
en plus tu veux que ce rapport se fasse automatiquement ?

Je ne vois vraiment pas comment : il n'y a pas de reconnaissance de
formes prévue en JS (pour reconnaitre où commence et finit la pièce dans
la photo)

<form>
<p>Entrez les valeurs relevées pour les deux angles opposés de la pièce :
<p>- haut-gauche :
x = <input name="HG_x">
y = <input name="HG_y">
<p>- bas-droite :
x = <input name="BD_x">
y = <input name="BD_y">
<p>Et <input type=button onclick="var L = +BD_y.value-HG_y.value;
var H = +BD_x.value-HG_x.value;
L = Math.sqrt(L*L+H*H);
rapport.value = Math.round((36/L)*100)/100;" value="calculer">
<input name="rapport">
</form>

Le rapport va être approximatif car la diagonale, pour le JS, fait :
36.05551275463989 mm
Et c'est sans compter avec les erreurs de perspective.

à la limite, peut-être le prof peut faire ce calcul ?

à la limite, c'est aux élèves à faire ce calcul ?
et, éventuellement, au JS à vérifier qu'ils ont à peu près bon.


> un fois que c'est fait, qu'il affiche aussi les coordonnées de la souris
> en mm par rapport au coin supérieur gauche de la photo, afin que l'élève
> connaisse la position de la pièce.

c'est tout à fait ce que çe code fait
(le point 0-0 est le coin haut-gauche)

Une fois le rapport calculé, on a les coordonnées (en px) des 2 angles
opposés, la position est donc acquise. Ne reste qu'à convertir en mm.

function validerRapport() {
var f = document.monForm;
px2mm = f.rapport.value*1;
O_x = f.HG_x.value = f.HG_x.value*px2mm;
O_y = f.HG_y.value = f.HG_y.value*px2mm;
f.BD_x.value = f.BD_x.value*px2mm;
f.BD_y.value = f.BD_y.value*px2mm;
}

Par contre ça devient un peu + compliqué de calculer à partir du coin
haut-gauche de la pièce (qques soustractions à réaliser en temps réel à
partir des BD-y BD-x HG_y HG_x en pixels puis conversions en mm)

// px2mm est le facteur de conversion pixels --> mm
// relatif à l'image cliquée
var posx,
posy,
k,
px2mm = 1,
O_x = 0,
O_y = 0;
function MouseCatch(e) {
posx = e.offsetX ? e.offsetX : e.clientX-e.target.x;
posy = e.offsetY ? e.offsetY : e.clientY-e.target.y;
posx = Math.round((posx - O_x)* px2mm);
posy = Math.round((posy - O_y)* px2mm);
window.status='X: '+posx+'mm - Y: '+posy+'mm';
return true;
}

> Je ne peux pas donner l'échelle de la photo, car la webcam était situé à
> 50 cm du plan de travail, maias il y a 10 cm d'eau dans le
> cristallisaoir et je dois compter avec la parallaxe.

Heu ... je ne suis pas réalisateur de cinéma (et encore moins en fonds
marins)

--
sm

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

> Mais je n'ai pas réussi à voir le code javascript en ouvrant le code
> source de cette page.

la page est ici :
<http://cjoint.com/data/eAn6mLCD3z_coord_points.htm>

> Est-ce le même que celui que tu donnes dans ton autre post ? (qui semble
> ne pas marcher chez moi: cf ma réponse à ton autre post)

Grosso modo : oui c'est la même (si elle n'est pas copiée-collée)

--
sm

Hugolino a écrit :
> Le Sat, 26 Apr 2008 12:39:00 +0200, Mickaël Wolff a écrit:
>
>> Avec l'interface normale DOM :
> Tout ce que je sais de DOM, c'est que ça signifie "Document Object
> Model", mais je ne sais pas vraiment à quoi ça sert

Ça sert souvent à faire joli dans le code ...
On oublie que le JS existait avant que le DOM n'ait rajouté d'autres
fonctions (qui sont propres au DOM) à la disposition du JS


>, si c'est
> indispensable pour faire ce que je veux et si ça va être facile à
> comprendre.

Absolument inutile pour ton dessein.
Absolument indispensable pour aller un peu plus loin.

Si tu veux te cultiver en JS pour faire des calculs étoussa :
- le site d'un de tes collègues :
<http://pagesperso-orange.fr/chatinais/coursjs/somrjs.htm>
(ne pas y chercher de DOM ... ! )
- selfHtml :
<http://fr.selfhtml.org/javascript/objets/math.htm>
les bases :
<http://fr.selfhtml.org/javascript/objets/index.htm>
formulaires :
<http://fr.selfhtml.org/javascript/objets/forms.htm>
éléments de formulaires :
<http://fr.selfhtml.org/javascript/objets/elements.htm>
gestions d'évènements (event) :
<http://fr.selfhtml.org/html/attributs/gestevenements.htm>

>> Les CSS sont destinées pour la présentation, pas pour l'interactivité.
>
> C'est juste, mais j'ai été surpris par certains sites qui ne fonctionne
> qu'avec les CSS alors que j'étais à première vue persuadé qu'il y a
> avait des scripts derrière...

Le grand esspécialiste :
<http://www.cssplay.co.uk/menus/index.html>
<http://www.cssplay.co.uk/>


> Bon, bin va falloir s'y mettre

tu as maintenant qques pistes (en français !)

Ha! un truc en JS qui va certainement te plaire :
<http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm>
<http://www.walterzorn.com/grapher/grapher_e.htm>

--
sm

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, je viens
de tester avec konqueror, ça marche.
Je crois donc que ça doit dépendre d'un réglage de Firefox, et c'est à
tout prix ce que je veux éviter car ça m'obligerait à régler le firefox
de chacun des élèves qui aurait le même problème que le mien.

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> ?


> > Mais je n'ai pas réussi à voir le code javascript en ouvrant le code
> > source de cette page.
>
> la page est ici :
> <http://cjoint.com/data/eAn6mLCD3z_coord_points.htm>

OK, je viens de voir que l'affichage dans la barre d'état est commandé
par la variable window.status de ta fonction MouseCatch que je vais
réécrire pour quelle remplisse une paire de champ au lieu de causer à la
barre d'état.

Problème, j'ai énormément de mal à analyser ton code (et ça n'est bien
sûr pas une critique de sa qualité, mais bien à cause de mon ignaritude)

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")

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 ?
Et que contient la variable "event" lors de l'appel de la fonction
"key(event);"

A l'intérieur de la balise "img", j'ai remplacé la fonction
onmousemove="MouseCatch(event, 0.647);"
par:
onmousemove="MouseShowPosition_px(event);"

et MonShowPosition_px(e) est ainsi écrite:
8<-----------8<---------8<----------8<----------8<----------8<----------8<
function MouseShowPosition_px(e) {
posx = e.offsetX ? e.offsetX : e.clientX-e.target.x;
posy = e.offsetY ? e.offsetY : e.clientY-e.target.y;
posx = Math.round(posx);
posy = Math.round(posy);
document.Form1[exo_001_MousePos_px_x].value = posx;
document.Form1[exo_001_MousePos_px_y].value = posy;
window.status='X: '+posx+'px - Y: '+posy+'px';
return true;
}
8<-----------8<---------8<----------8<----------8<----------8<----------8<

Problème rien ne s'affiche dans les deux champs "exo_001_MousePos_px_x"
et "exo_001_MousePos_px_y" que j'ai ajouté au formulaire.
Alors que les champs "exo_001_point_1_x" et "exo_001_point_1_y" sont
bien maintenant remplis par ta fonction.

J'ai ajouté
document.Form1[exo_001_MousePos_px_x].value = posx;
document.Form1[exo_001_MousePos_px_y].value = posy;
à ta fonction "coords(exo)", et non seulement mes deux champs
"exo_001_MousePos_px_x" et "exo_001_point_1_y" ne sont toujours pas
remplis, mais ta fonction ne remplit plus tes champs.



___ _ _
/ _ \ ___ _ __ ___ | | |
| | | |/ _ \| '_ \/ __| | | |
| |_| | (_) | |_) \__ \ |_|_|
\___/ \___/| .__/|___/ (_|_)
|_|

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

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

Merci pour ton aide


--
> les débilos qui ont décrété qu'il fallait tout éteindre pendant le w.e.!!
define(`Y2K_Auto_Purge_Queue',`True')dnl
define(`Y2K_Auto_Murge_Admin',`True')dnl
Hugo (né il y a 1 388 770 509 secondes)

Le Sun, 27 Apr 2008 22:25:29 +0200, SAM a écrit:
> Hugolino a écrit :
> > Tout ce que je sais de DOM, c'est que ça signifie "Document Object
> > Model", mais je ne sais pas vraiment à quoi ça sert
> Ça sert souvent à faire joli dans le code ...
> On oublie que le JS existait avant que le DOM n'ait rajouté d'autres
> fonctions (qui sont propres au DOM) à la disposition du JS
> >, si c'est indispensable pour faire ce que je veux et si ça va être
> >facile à comprendre.
> Absolument inutile pour ton dessein.
> Absolument indispensable pour aller un peu plus loin.

OK, on verra donc ça plus tard, quand je toucherais les limites du
javascript.

> <cut>

Merci pour les liens.

> >> Les CSS sont destinées pour la présentation, pas pour l'interactivité.
> > C'est juste, mais j'ai été surpris par certains sites qui ne fonctionne
> > qu'avec les CSS alors que j'étais à première vue persuadé qu'il y a
> > avait des scripts derrière...
>
> Le grand esspécialiste :
> <http://www.cssplay.co.uk/menus/index.html>
> <http://www.cssplay.co.uk/>

Stu Nicholls, c'est à ça que je pensais, mais j'avais perdu l'adresse.
J'y avais vu un exemple de présentation d'album photo absolument
fabuleux.

> > Bon, bin va falloir s'y mettre
> tu as maintenant qques pistes (en français !)

Oui, merci à toi.

> Ha! un truc en JS qui va certainement te plaire :
> <http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm>
> <http://www.walterzorn.com/grapher/grapher_e.htm>

Rhâ lovely ! Ça ouvre des perspectives, mais je me demande dans quelle
mesure le javascript dépend de l'évolution des navigateurs et de leurs bugs...


--
> En plus, question "self esteem", Linux, c'est autre chose ("yeah, j'ai
> réussi à compiler un noyau !"
Moi je le fais faire par gcc
Hugo (né il y a 1 388 789 999 secondes)

Le Sun, 27 Apr 2008 21:58:46 +0200, SAM a écrit:
> Hugolino a écrit :
> > OK, ça j'ai fait, mais quand je clique sur l'image, il provoque une
> > erreur (j'ai installé FireBug), ça dit:
> Pas besoin, la console d'erreur intégrée de Fx t'en aurait dit autant :-)

Oui, mais ça fait *encore* une fenêtre sur mon bureau déjà bien
encombré.

> > 8<-----------8<---------8<----------8<----------8<----------8<----------8<
> > document.monForm has no properties
> > A quoi cela est-il du ? comment corriger ?
> en donnant un nom (et le bon !) au form

OK, mais je ne connaissais pas la syntaxe de js, alors...

> <form name="monForm" blabla
> document.monForm
> peut aussi s'écrire :
> document.forms['monForm']
> ou à l'aide de l'index des formulaires présents sur la page :
> document.forms[0]

OK, noté.

> >> <form action="rapport.php" method="post">
> > Je ne souhaite pas que mon serveur récupère les données du formulaire
> alors
> <form name="monForm" action="#" onsubmit="return false;">

Quelle est la différence entre name et id pour js ?

> >> <input type="hidden" value="TP_001">

A quoi sert cet imput caché ?

> >> <h3><u>Clic</u> pour repérer le 1er point et
> >> <u>Majuscule + clic</u> pour le 2ième point :</h3>
> >> <p><img src="exo_001.jpg" id="exo_001"
> >> onmousemove="MouseCatch(event, 0.256);"
> >> onclick="key(event); coords(this);"><br>
> >
> > Est-il indispensable que l'image soit dans le formulaire ?
>
> absolument pas
> seuls les <input> doivent y être
> (de les avoir à proximité de l'image me semblait mieux)

OK,

> >> mieux vaudrait connaitre le rapport width en px / width en mm de l'image
> > La pièce en plastique fait 20mm par 30mm, donc 36mm de diagonale, je
> > souhaiterais que mon javascript calcule donc le rapport pixel/mm puis
> Ha! !!! ???
> en plus tu veux que ce rapport se fasse automatiquement ?

Bin oui.

> Je ne vois vraiment pas comment : il n'y a pas de reconnaissance de
> formes prévue en JS (pour reconnaitre où commence et finit la pièce dans
> la photo)

Une fois que l'élève a cliqué sur deux coins opposés de la pièce, je
connais la valeur en pixels de la diagonale de la pièce et puisque je
sais qu'elle vaut 36,05 mm...

> <form>
> <p>Entrez les valeurs relevées pour les deux angles opposés de la pièce :
> <p>- haut-gauche :
> x = <input name="HG_x">
> y = <input name="HG_y">
> <p>- bas-droite :
> x = <input name="BD_x">
> y = <input name="BD_y">
> <p>Et <input type=button onclick="var L = +BD_y.value-HG_y.value;
> var H = +BD_x.value-HG_x.value;
> L = Math.sqrt(L*L+H*H);
> rapport.value = Math.round((36/L)*100)/100;" value="calculer">
> <input name="rapport">
> </form>
>
> Le rapport va être approximatif car la diagonale, pour le JS, fait :
> 36.05551275463989 mm
> Et c'est sans compter avec les erreurs de perspective.

Oui, il y a la parallaxe, mais aussi la perspective, il va falloir que
je fasse des tests pour voir si la valeur en pixel de la diagonale est
la même pour toutes les images, et si ça n'est pas le cas, que j'aille
solliciter les lumières d'un prof de maths (et je connais un gros boulet
qui n'a pas penser à noter la hauteur à laquelle se trouvait la webcam

> à la limite, peut-être le prof peut faire ce calcul ?

Non, le prof programme le calcul en js pendant la nuit et il dort
pendant la séance de TP )

> à la limite, c'est aux élèves à faire ce calcul ?
> et, éventuellement, au JS à vérifier qu'ils ont à peu près bon.
>
>
> > un fois que c'est fait, qu'il affiche aussi les coordonnées de la souris
> > en mm par rapport au coin supérieur gauche de la photo, afin que l'élève
> > connaisse la position de la pièce.
>
> c'est tout à fait ce que çe code fait
> (le point 0-0 est le coin haut-gauche)
>
> Une fois le rapport calculé, on a les coordonnées (en px) des 2 angles
> opposés, la position est donc acquise. Ne reste qu'à convertir en mm.
>
> function validerRapport() {
> var f = document.monForm;
> px2mm = f.rapport.value*1;
> O_x = f.HG_x.value = f.HG_x.value*px2mm;
> O_y = f.HG_y.value = f.HG_y.value*px2mm;
> f.BD_x.value = f.BD_x.value*px2mm;
> f.BD_y.value = f.BD_y.value*px2mm;
> }
>
> Par contre ça devient un peu + compliqué de calculer à partir du coin
> haut-gauche de la pièce (qques soustractions à réaliser en temps réel à
> partir des BD-y BD-x HG_y HG_x en pixels puis conversions en mm)
>
> // px2mm est le facteur de conversion pixels --> mm
> // relatif à l'image cliquée
> var posx,
> posy,
> k,
> px2mm = 1,
> O_x = 0,
> O_y = 0;
> function MouseCatch(e) {
> posx = e.offsetX ? e.offsetX : e.clientX-e.target.x;
> posy = e.offsetY ? e.offsetY : e.clientY-e.target.y;
> posx = Math.round((posx - O_x)* px2mm);
> posy = Math.round((posy - O_y)* px2mm);
> window.status='X: '+posx+'mm - Y: '+posy+'mm';
> return true;
> }

Je garde tous ces exemples de calculs, car je viens de me rendre compte
qu'une fois que l'élève a cliqué deux coins opposés de la pièce, alors
non seulement je connais le facteur d'échelle mm/pixel, mais je connais
aussi la position du centre de la pièce à la fois en pixel et en mm.

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.

Si les champs du deuxième point sont vides mais pas ceux du premier,
j'affiche les coordonnées de la souris dans les deuxièmes champs et
j'affiche les coordonnées du deuxème point, calcule et affiche le
facteur d'échelle px/mm, la position du centre de la pièce en mm.

Si les champs des premier et deuxième points ne sont pas vides, alors je
recopie les champs du deuxième point dans ceux du premier, rempli ceux
du deuxième point avec les coordonnées du clic, recalcule facteur
d'échelle et position du centre.

Comme ça pas la peine de touche majuscule.

Je crois que je vais bien m'amuser (et perdre un temps fou à debugger
ça ))

> > Je ne peux pas donner l'échelle de la photo, car la webcam était situé à
> > 50 cm du plan de travail, maias il y a 10 cm d'eau dans le
> > cristallisaoir et je dois compter avec la parallaxe.
>
> Heu ... je ne suis pas réalisateur de cinéma (et encore moins en fonds
> marins)

Mais moi non plus )

Allez hop dodo, j'ai bien 4 ou 5 heures de sommeil devant moi.


--
> > Et, parti comme ça, tu ferais mieux de toucher à ton cul plutôt
> > qu'à ta brèle.
> Je crois que je vais pas trop suivre tes conseils.......;-)
Trés bien, je suis motard de toute façon, pas assistante sociale.