Partage

Charger automatiquement des images d'un répertoire

5 avril 2020 à 20:23:28

Bonjour à tous,

J'ai un problème que je pense vous pourrez m'aider facilement à résoudre :
Je précise déjà que ma page HTML sera exécutée en local (donc PHP compliqué).

Le but est de charger 2 images côte à côte, l'une nommée "Daily" et l'autre "Weekly".
Le nom de ces images est au format aaaa-mm-jj.JPG soit par exemple 2010-01-20.JPG
Je ne peux pas renommer ces images parce qu'elles sont également utilisées par d'autres personnes et cette nomenclature permet à tout le monde se s'y retrouver.
J'ai quelques 2 617 images "Daily" et donc 530 "Weekly" (je précise que les dossiers "Daily" et "Weekly" ne contiennent que des images dont j'ai besoin.
Vous imaginez bien que je ne me vois pas pas taper plus de 2 000 lignes pour afficher ces images.

Ma première étape consiste donc à faire afficher automatiquement une image sans charger chacun des noms.
Pour cela, j'essaye d’utiliser le code ci-dessous :

<html>
<head>
 
<script language="JavaScript">
i = 1;
 
function affiche(numero) {
  i = numero;
  img.src = 'Daily/'+i+'.jpg';
  text.value = i;
}
</script>
 
</head>
<body>
 
<img name="img" src="Daily/1.jpg""><br>
<input type="button" value="<" OnClick="affiche(i-1)">
<input type="texte" name="text" value="1" OnChange="affiche(text.value)">
<input type="button" value=">" OnClick="affiche(i+1)">
 
</body>
</html>

Mon premier soucis est que ce code fonctionne bien si mes images sont nommées 1.JPG ; 2.JPG ; 3.JPG ; etc mais pas avec ma nomenclature.
Comment faire pour que javascript prenne chacune des images dans l'ordre de leur nom ?
Deuxième soucis, mon input text ne change pas de valeur. A quel endroit j'ai oublié quelque chose ?
Troisième question : serait-il possible d'avoir une liste déroulante contenant le nom de toutes mes images et qui affiche l'image correspondant au nom sélectionné ?
Quatrième question : Comment faire pour que la deuxième image (pas encore indiquée dans le code ci-dessus) se coordonne avec la première :
Je m'explique par un exemple :
L'image weekly "2010-01-08" sera affichée pour les images daily suivantes :
"2010-01-08"
"2010-01-11"
"2010-01-12"
"2010-01-13"
"2010-01-14"

L'image weekly "2010-01-15" sera affichée pour les images daily suivantes :
"2010-01-15"
"2010-01-18"
"2010-01-19"
"2010-01-20"
"2010-01-21"

En gros, tant qu'une autre image weekly n'est pas égal à une autre image daily

Je vous remercie par avance pour votre aide précieuse.

Bonne fin de week-end,
et prennez soin de vous en ces temps troublés

BenBgln

6 avril 2020 à 15:39:49

Bonjour,

J'ai adapté un peu un code que j'avais déjà écrit, je crois que ça correspond à votre problème :

<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  
  <img name="img" id="imgDaily" src="Daily/2020-01-20.jpg"><br>
  <img name="img" id="imgWeekly" src="Daily/2020-01-20.jpg"><br>
  
  <select id="selectBox" onchange="setImgVal(1)"></select>
  <input type="button" value="<"  onclick="changeImg(-1)">
  <input type="text" name="text"  id="imgVal" onchange="setImgVal(0)">
  <input type="button" value=">" onclick="changeImg(1)">
  
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script> 

  let changeSrc = (src)=>{	// Change les 2 images, met à jour l'input et le select
  	$("#imgWeekly").attr("src", `Weekly/${datesWeekly[src]}.jpg`)
  	$("#imgDaily").attr("src", `Daily/${src}.jpg`)
    $("#imgVal").val(src) // Change la valeur de input
    $(`#selectBox option[value="${src}"]`).prop('selected', true)
  }
 
  let changeImg = (i)=>{
    let date = new Date($(".cadreImg").attr("src").substr(6,10)) // Sélectionne la date actuelle
    date.setDate(date.getDate() + i) // Incrémente/Décrémente la date 
    changeSrc(`${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`)
  }

  let setImgVal = (b)=>{
    switch(b) { // Choisit si l'appel vient du <input> ou du <select>
      case 0:
      	changeSrc($("#imgVal").val())
        break
       case 1:
       	changeSrc($("#selectBox").val())
        break
    }
  }

 let nbImgDaily = 2617
 let datesWeekly = {}
 let dateWeekly0 = new Date('2020-01-20')
 let date0 = new Date('2020-01-19')
  for (let i = 0; i < nbImgDaily; i++) {
  	// Creer la liste déroulante <select> 
    date0.setDate(date0.getDate() + 1)
    let str = `${date0.getFullYear()}-${date0.getMonth()+1}-${date0.getDate()}`
    $('#selectBox').append(`<option value="${str}">${str}</option>`)
    
    // Crééer l'objet datesWeekly qui met en relation images Daily et image Weekly
    if (i%5===0) dateWeekly0.setDate(dateWeekly0.getDate() + Math.floor(i/5)*5)
    datesWeekly[`${date0.getFullYear()}-${date0.getMonth()+1}-${date0.getDate()}`] = `${dateWeekly0.getFullYear()}-${dateWeekly0.getMonth()+1}-${dateWeekly0.getDate()}`
  }
  </script>
</body>
</html>

Il est possible qu'il y ait quelques ajustements à faire, je vous laisse voir et me demander si besoin.

JeromeB6

6 avril 2020 à 17:51:29

Bonjour BenBgln et merci de vous pencher sur mes questions.

D'après ce que je vois le code est donc du JQUERY

J'ai légèrement adapté le code, au niveau des dates de début.

<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
   
  <img name="img" id="imgDaily" src="Daily/2010-01-08.jpg"><br> <!-- date 1er enregistrement valable-->
  <img name="img" id="imgWeekly" src="Weekly/2010-01-08.jpg"><br> <!-- idem -->
   
  <select id="selectBox" onchange="setImgVal(1)"></select>
  <input type="button" value="<"  onclick="changeImg(-1)">
  <input type="text" name="text"  id="imgVal" onchange="setImgVal(0)">
  <input type="button" value=">" onclick="changeImg(1)">
   
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script>
 
  let changeSrc = (src)=>{   // Change les 2 images, met à jour l'input et le select
    $("#imgWeekly").attr("src", `Weekly/${datesWeekly[src]}.jpg`)
    $("#imgDaily").attr("src", `Daily/${src}.jpg`)
    $("#imgVal").val(src) // Change la valeur de input
    $(`#selectBox option[value="${src}"]`).prop('selected', true)
  }
  
  let changeImg = (i)=>{
    let date = new Date($(".cadreImg").attr("src").substr(6,10)) // Sélectionne la date actuelle
    date.setDate(date.getDate() + i) // Incrémente/Décrémente la date
    changeSrc(`${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`)
  }
 
  let setImgVal = (b)=>{
    switch(b) { // Choisit si l'appel vient du <input> ou du <select>
      case 0:
        changeSrc($("#imgVal").val())
        break
       case 1:
        changeSrc($("#selectBox").val())
        break
    }
  }
 
 let nbImgDaily = 2613
 let datesWeekly = {}
 let dateWeekly0 = new Date('2010-01-08')
 let date0 = new Date('2010-01-08')
  for (let i = 0; i < nbImgDaily; i++) {
    // Creer la liste déroulante <select>
    date0.setDate(date0.getDate() + 1)
    let str = `${date0.getFullYear()}-${date0.getMonth()+1}-${date0.getDate()}`
    $('#selectBox').append(`<option value="${str}">${str}</option>`)
     
   <!-- // Crééer l'objet datesWeekly qui met en relation images Daily et image Weekly -->
    if (i%5===0) dateWeekly0.setDate(dateWeekly0.getDate() + Math.floor(i/5)*5)
    datesWeekly[`${date0.getFullYear()}-${date0.getMonth()+1}-${date0.getDate()}`] = `${dateWeekly0.getFullYear()}-${dateWeekly0.getMonth()+1}-${dateWeekly0.getDate()}`
  
  }
  </script>
</body>
</html>

Par contre j'ai plusieurs soucis :

1- Les dates proposées dans la liste déroulantes ne correspondent pas aux dates des fichiers : En règle général les fichiers Daily sont tous les jours du lundi au vendredi, sauf certains fériés.

Voici un extrait pour exemple :

Daily\2010-01-20.jpg
Daily\2010-01-21.jpg
Daily\2010-01-22.jpg
Daily\2010-01-25.jpg
Daily\2010-01-26.jpg
Daily\2010-01-27.jpg
Daily\2010-01-28.jpg
Daily\2010-01-29.jpg
Daily\2010-02-01.jpg
Daily\2010-02-02.jpg
Daily\2010-02-03.jpg
Daily\2010-02-04.jpg
Daily\2010-02-05.jpg
Daily\2010-02-08.jpg
Daily\2010-02-09.jpg
Daily\2010-02-10.jpg
Daily\2010-02-11.jpg
Daily\2010-02-12.jpg
Daily\2010-02-15.jpg
Daily\2010-02-16.jpg
Daily\2010-02-17.jpg

Weekly\2010-01-22.jpg
Weekly\2010-01-29.jpg
Weekly\2010-02-05.jpg
Weekly\2010-02-12.jpg

2- Quand je sélectionne une date dans la liste déroulante, l'image correspondante ne s'affiche pas (ni en daily ni en weekly).

3- Quand je clique sur les boutons "Suivant" et "Précédent", ça ne fonctionne pas non plus : la date affichée dans le champs n'est pas modifiée et l'image non plus

4- Sauf erreur de ma part, le nombre d'image est écrit en dur (ligne 42). Cependant une nouvelle image Daily est créée chaque soir (du lundi au vendredi) et un nouvelle image Weekly chaque vendredi soir. Serait-il possible de mettre à jour automatiquement le nombre d'enregistrement ?

BenBgln

7 avril 2020 à 1:26:56

Oui le code que je t'ai donné est vraiment moyen, le mieux c'est d'intégrer du PHP, cela fait des merveilles. Re-voici un exemple plus performant et plus propre que le précédent en PHP :

<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<div class="container-images">
		<figure><img class="container-images--image" id="imgDaily" src="" alt="" /></figure>
		<figure><img class="container-images--image" id="imgWeekly" src="" alt="" /></figure>
	</div>

	<div class="form">
		<select id="select-image" class="modifVal"></select>
		<div>
			<button type="button" class="imgPreced"><</button>
			<input type="text" value="" id="input-image" class="modifVal" />
			<button type="button" class="imgSuiv">></button>
		</div>
	</div>

	<style>
		.container-images {
			width: 80%;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.container-images--image {
			width: 100%;
		}

		.form {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.form > select,
		.form > div {
			margin: auto 5%;
		}
	</style>

	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<script>
		// Créer un tableau avec tous les noms d'images de chaque répertoire
		let listDaily = <?php echo json_encode(scandir("./Daily/")).".splice(2).reverse()" ?>; 
		let listWeekly = <?php echo json_encode(scandir("./Weekly/")).".splice(2).reverse()" ?>;

		// Applique toutes les modifications sur les images, mais aussi sur l'<input>, le <select>
		let changeImg = (imgName)=>{
			if (listDaily.indexOf(imgName+".jpg")!=-1) {
				$(`#select-image option[value="${imgName}"]`).prop('selected', true)
				$("#input-image").val(imgName)

				$("#imgDaily").attr("src", `Daily/${imgName}.jpg`)
				$("#imgWeekly").attr("src", `Weekly/${objDailWeek[imgName]}.jpg`)
			} else alert("Cette image n'existe pas !")
		}

		// Créer un objet liant images Daily et images Weekly
		let objDailWeek = {}
		for (let day of listDaily) {
			objDailWeek[day.substr(0,10)] = listWeekly[(listDaily.indexOf(day)-listDaily.indexOf(day)%5)/5].substr(0,10)

			$("#select-image").append(`<option value="${day.substr(0,10)}">${day.substr(0,10)}</option>`)
			$("#input-image").val(day.substr(0,10))
		}
		changeImg(listDaily[0].substr(0,10))

		// Fonction pour les boutons "suivant" et "précédent"
		let changeImgButton = (e)=>{
			let ope = e.data.ope
			if (listDaily[listDaily.indexOf($("#input-image").val()+".jpg")-ope]) {
				changeImg(listDaily[listDaily.indexOf($("#input-image").val()+".jpg")-ope].substr(0,10))
			} else alert("Cette image n'existe pas !")		
		}

		// Evenements pour les boutons "suivant" et "précédent"
		$(".imgPreced").click({ope:-1}, changeImgButton)
		$(".imgSuiv").click({ope:1}, changeImgButton)

		// Evenements pour les changements sur <input> et <select>
		$(".modifVal").change((e)=>{
			if (listDaily.indexOf($(e.target).val()+".jpg")!=-1) {
				changeImg($(e.target).val())
			} else {
				changeImg(listDaily[0].substr(0,10))
				alert("Cette image n'existe pas !")	
			}
		})


	</script>
</body>
</html>

JeromeB6

7 avril 2020 à 12:12:16

Malheureusement ce code ne fonctionne pas :'(

J'ai bien la liste déroulante (mais elle est vide), les boutons Suivant, Précédent et le champ qui s'affichent, mais pas d'image...

Aucun effet si je clique sur ces boutons.

Peut être est-ce du au fait que je travaille en local (donc PHP pas possible ?)

Dans la console, j'ai une erreur qui est indiquée ligne 48, caractère 24.

C'est à dire, juste après ça :

let listDaily =

Mais comme j'y connais rien en jquery et pas grand chose en PHP je ne comprends pas ce qui coince ...

Zatrof Palade

7 avril 2020 à 12:23:08

Bonjour,

Appeler chaque image individuellement par leur nom n'est très propre je trouve.

L'idéale serais d'utiliser NodeJs (cf. fs) pour récupérer les images présente dans le dossier puis de générer la liste avec, l'affichage peut ensuite se faire facilement par injection HTML avec Jquery.

Concernant PHP il te faut effectivement de quoi le faire tourner, tu peut regarder du coté de WAMP pour windows ou LAMP pour Linux et Mac, c'est en gros faire tourner un serveur Apache en local, tout dépend du besoin.

Peut-tu nous en dire plus sur ton projet afin de voir quelle possibilité est la plus adapté à ton besoin ?

Cordialement.

-
Edité par Zatrof Palade 7 avril 2020 à 12:39:53

JeromeB6

8 avril 2020 à 10:15:05

Effectivement avec Wamp ça fonctionne.

Merci

j'ai cependant un petit soucis : l'image weekly ne correspond pas à la daily.

Voici une capture de l'info sur les images :

Pour répondre à la question de Zatrof Palade, voici l'application de ma page web :

Je travaille pour une grosse compagnie industrielle, je suis en charge de développer la maintenance préventive : en gros on cherche à intervenir avant que les machines ne tombent en panne.

Les fichiers que nous utilisons (daily et weekly) sont des graphiques générées automatiquement par les machines des lignes de production (vous comprendrez que je n'ai pas le droit de vous les présenter). En gros on peut y voir la cadence de production des machines, des consommations électriques, diverses influances des opérateurs etc...

A la base ces fichiers étaient utilisées principalement par "les managers" pour vérifier que les opérateurs de production réalisaient bien leur quotas etc ...

En analysant plus finement ces graphiques on s'est aperçu qu'on pouvait détecter un prémisse de panne.

Voici un exemple simplifié : si pour un même opérateur et une même production, la consommation électrique d'une machine est en hausse de plus de 3%, pendant plus de 30min par rapport la la moyenne hebdomadaire, il y a potentiellement un problème (roulement à changer, graissage à accentuer etc ...) Lors du changement de poste, il serait alors pertinent que l'équipe de maintenance jette un oeil.

Cette méthode est très intéressante, cependant elle requiert que la personne qui va inspecter ces graphiques ait un oeil exercé pour détecter ce genre de divergence.

Ainsi, j'essaye de mettre en place des formations pour permettre à plus de personnes de s'exercer à ces détections. Et pour ce faire, il n'y a rien de mieux que d'utiliser ces graphiques historiques. De plus cela nous permet de vérifier (grâce aux historiques des interventions des équipes de maintenance) la véracité des divergences détectées.

-
Edité par JeromeB6 8 avril 2020 à 10:24:02

BenBgln

8 avril 2020 à 12:54:44

Bonjour,

Voici le même code avec quelques ajustements :

<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<div class="container-images">
		<figure><img class="container-images--image" id="imgDaily" src="" alt="" /></figure>
		<figure><img class="container-images--image" id="imgWeekly" src="" alt="" /></figure>
	</div>

	<div class="form">
		<select id="select-image" class="modifVal"></select>
		<div>
			<button type="button" class="imgPreced"><</button>
			<input type="text" value="" id="input-image" class="modifVal" />
			<button type="button" class="imgSuiv">></button>
		</div>
	</div>

	<style>
		.container-images {
			height: 350px;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.container-images--image {
			height: 100%;
		}

		.form {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.form > select,
		.form > div {
			margin: auto 5%;
		}
	</style>

	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<script>
		// Créer un tableau avec tous les noms d'images de chaque répertoire
		let listDaily = <?php echo json_encode(scandir("./Daily/")).".splice(2)" ?>; 
		let listWeekly = <?php echo json_encode(scandir("./Weekly/")).".splice(2)" ?>;

		// Applique toutes les modifications sur les images, mais aussi sur l'<input>, le <select>
		let changeImg = (imgName)=>{
			if (listDaily.indexOf(imgName+".jpg")!=-1) {
				$(`#select-image option[value="${imgName}"]`).prop('selected', true)
				$("#input-image").val(imgName)

				$("#imgDaily").attr("src", `Daily/${imgName}.jpg`)
				if (listWeekly.indexOf(`${objDailWeek[imgName]}.jpg`)!=-1) {
					$("#imgWeekly").attr("src", `Weekly/${objDailWeek[imgName]}.jpg`)
				} else {
					$("#imgWeekly").attr("src", ``)
					alert("Aucune image Weekly correspondante !")
				}
				
			} else alert("Cette image n'existe pas !")
		}

		// Créer un objet liant images Daily et images Weekly
		let objDailWeek = {}
		let temp = null
		for (let day of listDaily) {
			if (listWeekly.indexOf(day)!=-1) {
				temp = listWeekly.indexOf(day)
				objDailWeek[day.substr(0,10)] = listWeekly[listWeekly.indexOf(day)].substr(0,10)
			} else if(temp!=null) {
				objDailWeek[day.substr(0,10)] = listWeekly[temp].substr(0,10)
			} else {
				objDailWeek[day.substr(0,10)] = null
			}
			$("#select-image").append(`<option value="${day.substr(0,10)}">${day.substr(0,10)}</option>`)
		}
		listDaily.reverse()
		listWeekly.reverse()
		changeImg(listDaily[0].substr(0,10))


		// Fonction pour les boutons "suivant" et "précédent"
		let changeImgButton = (e)=>{
			let ope = e.data.ope
			if (listDaily[listDaily.indexOf($("#input-image").val()+".jpg")-ope]) {
				changeImg(listDaily[listDaily.indexOf($("#input-image").val()+".jpg")-ope].substr(0,10))
			} else alert("Cette image n'existe pas !")		
		}

		// Evenements pour les boutons "suivant" et "précédent"
		$(".imgPreced").click({ope:-1}, changeImgButton)
		$(".imgSuiv").click({ope:1}, changeImgButton)

		// Evenements pour les changements sur <input> et <select>
		$(".modifVal").change((e)=>{
			if (listDaily.indexOf($(e.target).val()+".jpg")!=-1) {
				changeImg($(e.target).val())
			} else {
				changeImg(listDaily[0].substr(0,10))
				alert("Cette image n'existe pas !")	
			}
		})


	</script>
</body>
</html>

Donne-moi des nouvelles !

-
Edité par BenBgln 8 avril 2020 à 12:55:35

JeromeB6

8 avril 2020 à 13:35:31

Merci beaucoup.

On n'est pas loin de réussir : ça marche super dans les premières dates, mais à partir des environs de 2015, ça se décale.

Par exemple voici la différence en mars dernier : il y a presque 1 mois d'écart.

J'ai essayé de regarder un peu dans le code, mais j'y comprends pas grand-chose :'( J'imagine qu'il y a un ajustement à faire dans les lignes 74 et/ou 76, mais je sais pas trop ce qu'il faudrait faire.

BenBgln

8 avril 2020 à 13:42:26

Y-a-t-il des semaines sans image Weekly ou inversement ?

-
Edité par BenBgln 8 avril 2020 à 13:42:39

JeromeB6

8 avril 2020 à 14:01:06

Au temps pour moi, j'avais du faire une erreur de copie des fichiers comme les images "d'origine" sont sur un serveur de fichiers et que mes essais sont sur mon disque C. J'ai adapté le chemin des fichiers dans le script et ça fonctionne correctement

Milles merci ça fonctionne comme il faut !

-
Edité par JeromeB6 8 avril 2020 à 14:17:34

BenBgln

8 avril 2020 à 14:36:02

Tant mieux dans ce cas !