Retourner une valeur pour afficher un texte

**ia.jenny** · 26/10/2020, 17h52

Bonjour,
Je voudrais remplacer alert(images[i].textContent); par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
ctx.font = "30px Arial";
ctx.fillText(images[Message].textContent,200,200);

Le problème, le return i; ne fonctionne pas dans la fonction Click, ou bien une erreur sur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
Message=canvas.addEventListener("click", Click, false);
 
ctx.font = "30px Arial";
ctx.fillText(images[Message].textContent,200,200);

Dois-je faire une fonctionne d'affichage.
Je ne comprend pas pourquoi, je peux pas afficher un message quand je clique sur une image

voici le programme et merci encore
http://ia.jenny.free.fr/Img/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
var NbrImg;
var images;
var Message;
// --------------------------------------------------------------------------------------
window.onload = function()
{
	getXML("text2.xml", drawImages);
}
// --------------------------------------------------------------------------------------
function getXML(url, callback) 
{
  const oXhr = new XMLHttpRequest();
  oXhr.onreadystatechange = function() 
  {
    if (this.readyState === 4 && this.status === 200) 
	{
      callback(this.responseXML);
    }
  };
  oXhr.open("GET", url, true);
  oXhr.send()
}
// --------------------------------------------------------------------------------------
function drawImages(docXML) 
{
	const canvas = document.getElementById("canvas");
	const ctx = canvas.getContext("2d");
	canvas.width =  1400;
	canvas.height = 600;
	images = docXML.querySelectorAll("Img");
 
	for (let i=0; i<images.length; i++) 
	{
		const oImage = new Image();
		oImage.onload = function()
		{
			ctx.drawImage(oImage,i*105,0,100,100);
		};
		oImage.src = "Img/"+ images[i].textContent+".jpg";
	}
 
	NbrImg=images.length;
	Message=canvas.addEventListener("click", Click, false); // <---------- Err ?????
 
	ctx.font = "30px Arial"; 
	ctx.fillText(images[Message].textContent,200,200);
}
// --------------------------------------------------------------------------------------
function Click(e) 
{
	var x = e.clientX;
	var y = e.clientY;
 
	for (let i=0; i<NbrImg; i++) 
	{
		if(x>i*105 && x<i*105+100 && y>1*105 && y<1*100+100 ) 
		{
			//alert(images[i].textContent);
			//return i;  // <---------- Err ?????
		}
	  }
}
// --------------------------------------------------------------------------------------

**Archimède** · 27/10/2020, 10h34

Salut,
je me pose la question, si ta condition sur x et y n'est pas vérifiée alors i n'est pas défini et Message ne renvoie rien donc images[Message] génère une erreur.
Il faudrait sans doute ajouter une condition sur l'affichage du fillText().

**ia.jenny** · 27/10/2020, 17h45

Bonjour,
Tu as raison Archimède. J'ai modifié le code. ça donne ceci
http://ia.jenny.free.fr/Img/

ce n'est pas terrible, et les Messages se superpose. Et je n'arrive pas avec return;
Si on pouvait m'aider à arranger le code pour qu'il soit plus propre, je serai très heureux

Déjà, la fonction function Click(e) ne me plait pas avec ctx qui est décalé comme var ctx;.
merci mille fois
Img.zip

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
var NbrImg;
var images;
var Message;
var ctx;
// --------------------------------------------------------------------------------------
window.onload = function()
{
	getXML("text2.xml", drawImages);
}
// --------------------------------------------------------------------------------------
function getXML(url, callback) 
{
  const oXhr = new XMLHttpRequest();
  oXhr.onreadystatechange = function() 
  {
    if (this.readyState === 4 && this.status === 200) 
	{
      callback(this.responseXML);
    }
  };
  oXhr.open("GET", url, true);
  oXhr.send()
}
// --------------------------------------------------------------------------------------
function drawImages(docXML) 
{
	const canvas = document.getElementById("canvas");
	 ctx = canvas.getContext("2d");
	canvas.width =  1400;
	canvas.height = 600;
	images = docXML.querySelectorAll("Img");
 
	for (let i=0; i<images.length; i++) 
	{
		const oImage = new Image();
		oImage.onload = function()
		{
			ctx.drawImage(oImage,i*105,0,100,100);
		};
		oImage.src = "Img/"+ images[i].textContent+".jpg";
	}
 
	NbrImg=images.length;
	canvas.addEventListener("click", Click, false);
 
}
// --------------------------------------------------------------------------------------
function Click(e) 
{
	var tmp=0;
	var x = e.clientX;
	var y = e.clientY;
 
	for (let i=0; i<NbrImg; i++) 
	{
		if(x>i*105 && x<i*105+100 && y>0*105 && y<0*100+100 ) 
		{
			tmp=i;
		}
	  }
	 //e.returnValue =tmp;
	// return tmp;
	ctx.font = "30px Arial"; 
	ctx.fillText(images[tmp].textContent,200,200);
}
// --------------------------------------------------------------------------------------

Merci pour l'aide apporté

**Archimède** · 27/10/2020, 20h50

Bonsoir, pour le problème de superposition des fillText(), il suffit de faire un ctx.clearRect(....) avant le ctx.fillText(...)
ctx.measureText() peut te servir pour la largeur du texte à effacer...
Après, je n'ai pas regardé de manière approfondi ton code pour la méthode de détection des images...

**Archimède** · 27/10/2020, 21h56

Tu effaces :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
ctx.fillText(images[tmp].textContent,200,200);
tmp=i;

tu mets à la place du tmp=i:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
ctx.fillText(images[i].textContent,200,200);

dans la condition.

Sinon ton tmp est égal à 0 (->var tmp=0;...) quelque soit la position du clic de souris sur canvas en dehors de la position des images. (et chat est indiqué dans ces cas là...)

**Archimède** · 28/10/2020, 09h13

Après, c'est quoi l'intérêt d'afficher tes images par un draw dans un canvas ? Tu choisis le moyen le plus compliqué pour un simple clic sur celles-ci et en plus tu affiches avec un fillText toujours dans ce canvas alors qu'il serait 10 fois plus simple de l'afficher dans une div...

**ia.jenny** · 28/10/2020, 17h06

ctx.clearRect(....) , n'y a-t-il pas moyen de réactualiser la page.

Pourquoi des images par un draw dans un canvas ?
Le nombre d'image va varier selon le fichier XML. et l'utilisateur pourra en rajouter.
les images seront triés par genre. Donc pour moi, c'est plus simple.

Si la canvas, on pouvait carment la supprimer. je suis preneur, mais je ne sais pas faire sans.

J'ai réalisé un chatboot en php5 :http://ia.jenny.free.fr/ et voudrais le faire une IA avec seulement des Images.
Par exemple une image : "palette couleur" + "Soleil" + "?" qui donnait une image "Jaune" (un langage universelle)

Je voudrais voir ce que ça donne, une Ia avec des Images. Plus tard, IA pourrai constituer des phrases avec les Images.
Il me reste toujours le problème du Return, je vais continuer à chercher.
bref, Voila.

**Archimède** · 30/10/2020, 18h34

Bonsoir, désolé, j'étais sur la route...

Pourquoi des images par un draw dans un canvas ?
Le nombre d'image va varier selon le fichier XML. et l'utilisateur pourra en rajouter.
les images seront triés par genre. Donc pour moi, c'est plus simple.

Si la canvas, on pouvait carment la supprimer. je suis preneur, mais je ne sais pas faire sans.

Tu peux poser une balise div qui va contenir tes images, ensuite tu crées dynamiquement des images en affectant en src tes photos et tu gères les clics sur le conteneur. Remarque, en css, tu précises un margin-right de 5px pour l'écartement entre tes photos. (remarque: j'ai mis un display flex sur la div, mais je pense que ce n'est pas utile puisque img est un élément en ligne par défaut...mais si tu rajoutes autre chose...)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<!DOCTYPE html>
 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page Title</title>
    <style>
        #conteneur{
            display:flex;
        }
        .image{
          margin-right:5px;
          width:100px;
          height:100px;
          cursor:pointer;
        }
        p{
            position: absolute;
            top:120px;
            font:20pt sans-serif;
        }
    </style>
</head>
 
<body>
    <div id="conteneur"></div>
    <p>nom de l'image</p>
    <script> 
        function myClick(e){
          if (e.target.name!==undefined) document.getElementsByTagName('p')[0].innerHTML= e.target.name;
        }
        
        var tabimages=[];
        
        function onload(){
            for (let i=0; i<=12;i++){
                tabimages.push( document.createElement('img') );
                tabimages[i].src='img'+i+'.jpg';
                tabimages[i].name='image n°'+(i+1).toString();
                tabimages[i].className='image';
                document.getElementById('conteneur').appendChild(tabimages[i]);
            }
        }
    window.addEventListener('load',onload);
    document.getElementById('conteneur').addEventListener('click',myClick,true);
    </script>
</body>
</html>

Après, avec canvas, la modification du callback que je t'ai donné devrait fonctionner...

**ia.jenny** · 31/10/2020, 13h20

Merci Archimède,
du coup, je retourne avec le PHP

Je vais tester ça
@+

**ia.jenny** · 31/10/2020, 18h47

Bonjour,
j'ai un problème avec le i, je devrais avoir, $i. sur "<?php echo"Img/".$z[i].".jpg"; ?> "
je ne trouve vraiment aucune solution

j'ai essayé se genre de code, mais ça ne fonctionne pas

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

tabimages[i].src="<?php  echo"Img/".$z[$c].".jpg"; $c++; ?> ";

ça ne veut pas incrémenter. j'ai bien déclarer var $c=0;
comprend pas

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
            for (let i=0; i<=10;i++)
			{
                tabimages.push( document.createElement('img') );
	            tabimages[i].src="<?php  echo"Img/".$z[i].".jpg"; ?> "; // Err avec le i!!!!!!
                tabimages[i].name='image n�'+(i+1).toString();
                tabimages[i].className='image';
                document.getElementById('conteneur').appendChild(tabimages[i]);
            }

le code complet :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
$z="";
$j=0;
 
Find_img();
function Find_img()
{
 
        global $z;
        $dom0=new DOMDocument();$dom0->load("text1.xml");
        $node=$dom0->getElementsByTagName('contacts')->item(0);
        foreach($node->childNodes as $n) 
        {
                if($n->nodeType==XML_ELEMENT_NODE)  $z=$z." ".$n->getAttribute("In");
        }
        $z=explode(" ",$z);
 }
?>
<!DOCTYPE html>
 
<html>
<body>
    <div id="conteneur"></div>
    <p>nom de l'image</p>
    <script> 
        function myClick(e)
                {
          if (e.target.name!==undefined) document.getElementsByTagName('p')[0].innerHTML= e.target.name;
        }
        
        var tabimages=[];
        
        function onload()
                {
            for (let i=0; i<=10;i++)
                        {
                tabimages.push( document.createElement('img') );
                    tabimages[i].src="<?php  echo"Img/".$z[i].".jpg"; ?> "; // Err avec le i!!!!!!
                tabimages[i].name='image n�'+(i+1).toString();
                tabimages[i].className='image';
                document.getElementById('conteneur').appendChild(tabimages[i]);
            }
        }
    window.addEventListener('load',onload);
    document.getElementById('conteneur').addEventListener('click',myClick,true);
    </script>
</body>

**Archimède** · 01/11/2020, 15h23

Salut,

désolé sur php, je ne peux pas t'aider...
J'ai trouvé ce lien qui peut t'intéresser éventuellement bien qu'il n'a pas la même approche que toi :

http://www.codeproject.com/Questions...in-image-tag-i

**NoSmoking** · 01/11/2020, 17h31

Bonjour,

Envoyé par ia.jenny

du coup, je retourne avec le PHP

je t'avais donné une solution, par insertion dans le DOM, dans ton autre discussion : « Lire XML pour afficher et clique » ce qui t'a été aussi proposé par Archimède.

Pourquoi ne pas t'en tenir, la récupération au clic, et la gestion des événements n'en serait que plus simple.

Envoyé par ia.jenny

je ne trouve vraiment aucune solution

Attention dans ton PHP tu mélanges tout ce qui n'est jamais une bonne chose !

**ia.jenny** · 02/11/2020, 17h36

bonjour,
je voulais essayer la solution Archimède mais j'ai un problème d'Incrémentation pour charger les images du xml.
Sinon, oui ta solution fonctionne très bien. et je te remercie.
https://www.developpez.net/forums/d2.../#post11634414

la solution Archimède

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<?php
$z="";
$j=0;
 
Find_img();
function Find_img()
{
	global $j;	global $z;
	$dom0=new DOMDocument();$dom0->load("text1.xml");
	$node=$dom0->getElementsByTagName('contacts')->item(0);
	foreach($node->childNodes as $n) 
	{
		if($n->nodeType==XML_ELEMENT_NODE)  $z=$z." ".$n->getAttribute("In");
	}
	$z=explode(" ",$z);
 
 
 
 }
?>
<!DOCTYPE html>
 
<html>
<body>
    <div id="conteneur"></div>
    <p>nom de l'image</p>
    <script> 
	function myClick(e)
	{
		if (e.target.name!==undefined) document.getElementsByTagName('p')[0].innerHTML= e.target.name;
	}
 
	var tabimages=[];
	function onload()
	{
		for (let i = 0; i < 10; i++)
		{
			tabimages.push( document.createElement('img') );
			tabimages[i].src='<?php  echo "Img/".$z[$j].".jpg"; $j++;  ?>'; // $j n'incrémente pas
			tabimages[i].name='image n�'+(i+1).toString();
			tabimages[i].className='image';
			document.getElementById('conteneur').appendChild(tabimages[i]);
		}
	}
	window.addEventListener('load',onload);
	document.getElementById('conteneur').addEventListener('click',myClick,true);
    </script>
</body>
 
 
 
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page Title</title>
    <style>
        #conteneur{
            display:flex;
        }
        .image{
          margin-right:5px;
          width:100px;
          height:100px;
          cursor:pointer;
        }
        p{
            position: absolute;
            top:120px;
            font:20pt sans-serif;
        }
    </style>
 
</head>

**NoSmoking** · 03/11/2020, 09h36

Ne prend pas mal ce que je vais dire mais je pense que tant en PHP qu'en JavaScript, tes bases sont trop légères et donc à peaufiner.

Sinon, oui ta solution fonctionne très bien. et je te remercie.

alors pourquoi ne pas l'utiliser !?!

Il ne faut pas mélanger/confondre ce qui se passe côté serveur, en l'occurrence PHP, et ce qui se passe côté client avec le JavaScript.

Pour en revenir à ton soucis, voilà ce que tu pourrais faire simplement.

Lecture et initialisation des données

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<?php
// définition des variables de lecture
$fileName = "nom_fichier.xml";
$nodeName = "Img";
// récup. contenu XML et le convertit en objet
$xml = simplexml_load_file($fileName);
// récup. le contenu des tags et encodage sous forme d'un array
$dataImages = json_encode((array)$xml->$nodeName, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT);
?>

Insertion des données dans le HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Lecture fichier XML côté serveur</title>
</head>
<body>
<div id="div-images"></div>
<div id="info-image"></div>
<script>
// récup. élément de destination des images
const oDest = document.getElementById("div-images");
// ajout traitement du clic
oDest.addEventListener("click", (e) => {
  const elemClicked = e.target;
  if ("IMG" === elemClicked.tagName) {
    // récup. le nom du fichier et l'affiche
    const nomImage = elemClicked.src.split("/").pop();
    document.getElementById("info-image").textContent = nomImage;
  }
});
 
function addImages() {
  const datas = <?php echo $dataImages; ?>;
  // on boucle sur les datas
  datas.forEach((data, ind) => {
    // création d'un élément <img>
    const oImage = document.createElement("IMG");
    // ajout à l'élément destination
    oDest.appendChild(oImage);
    // affectation de l'url à l'image
    oImage.src = data;
  });
}
addImages();
</script>
</body>
</html>

On a séparé le PHP du HTML et comme tu peux le voir à la ligne 24, on a intégré les données : const datas = <?php echo $dataImages; ?>;.

Tout ceci est à mettre dans un fichier PHP et donnerait en substance :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
// définition des variables de lecture
$fileName = "nom_fichier.xml";
$nodeName = "Img";
// récup. contenu XML et le convertit en objet
$xml = simplexml_load_file($fileName);
// récup. le contenu des tags et encodage sous forme d'un array
$dataImages = json_encode((array)$xml->$nodeName, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT);
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Lecture fichier XML côté serveur</title>
</head>
<body>
<div id="div-images"></div>
<div id="info-image"></div>
<script>
// récup. élément de destination des images
const oDest = document.getElementById("div-images");
// ajout traitement du clic
oDest.addEventListener("click", (e) => {
  const elemClicked = e.target;
  if ("IMG" === elemClicked.tagName) {
    // récup. le nom du fichier et l'affiche
    const nomImage = elemClicked.src.split("/").pop();
    document.getElementById("info-image").textContent = nomImage;
  }
});
 
function addImages() {
  const datas = <?php echo $dataImages; ?>;
  // on boucle sur les datas
  datas.forEach((data, ind) => {
    // création d'un élément <img>
    const oImage = document.createElement("IMG");
    // ajout à l'élément destination
    oDest.appendChild(oImage);
    // affectation de l'url à l'image
    oImage.src = data;
  });
}
addImages();
</script>
</body>
</html>

Voilà qui devrait te permettre de continuer.

N'hésite pas à lire la documentation si tu as des incompréhensions.

**ia.jenny** · 03/11/2020, 18h44

coucou
Merci, j'ai réussi à le faire fonctionner

Retourner une valeur pour afficher un texte

JavaScript

Discussions similaires

Partager

Partager