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) ?
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) ?
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) ?
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
A quoi cela est-il du ? comment corriger ?
<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 ?
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.
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
A quoi cela est-il du ? comment corriger ?
<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 ?
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.
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
A quoi cela est-il du ? comment corriger ?
<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 ?
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.
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.
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)
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.
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)
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.
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)
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
, si c'est
indispensable pour faire ce que je veux et si ça va être facile à
comprendre.
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...
Bon, bin va falloir s'y mettre :)
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
, si c'est
indispensable pour faire ce que je veux et si ça va être facile à
comprendre.
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...
Bon, bin va falloir s'y mettre :)
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
, si c'est
indispensable pour faire ce que je veux et si ça va être facile à
comprendre.
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...
Bon, bin va falloir s'y mettre :)
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>
les débilos qui ont décrété qu'il fallait tout éteindre pendant le w.e.!!
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>
les débilos qui ont décrété qu'il fallait tout éteindre pendant le w.e.!!
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>
les débilos qui ont décrété qu'il fallait tout éteindre pendant le w.e.!!
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.
<cut>
>> 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>
En plus, question "self esteem", Linux, c'est autre chose ("yeah, j'ai
réussi à compiler un noyau !"
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.
<cut>
>> 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>
En plus, question "self esteem", Linux, c'est autre chose ("yeah, j'ai
réussi à compiler un noyau !"
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.
<cut>
>> 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>
En plus, question "self esteem", Linux, c'est autre chose ("yeah, j'ai
réussi à compiler un noyau !"
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;">
>> <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)
> 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.......;-)
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;">
>> <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)
> 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.......;-)
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;">
>> <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)
> 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.......;-)
Le Sun, 27 Apr 2008 22:25:29 +0200, SAM a écrit: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...
Le Sun, 27 Apr 2008 22:25:29 +0200, SAM a écrit:
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...
Le Sun, 27 Apr 2008 22:25:29 +0200, SAM a écrit: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...
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,
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> ?
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);"
/ _ ___ _ __ ___ | | |
| | | |/ _ | '_ / __| | | |
| |_| | (_) | |_) __ |_|_|
___/ ___/| .__/|___/ (_|_)
|_|
(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 :))
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,
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> ?
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);"
/ _ ___ _ __ ___ | | |
| | | |/ _ | '_ / __| | | |
| |_| | (_) | |_) __ |_|_|
___/ ___/| .__/|___/ (_|_)
|_|
(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 :))
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,
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> ?
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);"
/ _ ___ _ __ ___ | | |
| | | |/ _ | '_ / __| | | |
| |_| | (_) | |_) __ |_|_|
___/ ___/| .__/|___/ (_|_)
|_|
(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 :))
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 ?
<input type="hidden" value="TP_001">
A quoi sert cet imput caché ?
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.
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 ?
<input type="hidden" value="TP_001">
A quoi sert cet imput caché ?
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.
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 ?
<input type="hidden" value="TP_001">
A quoi sert cet imput caché ?
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.