3 questions renvoient une image

Version imprimable

10/05/2016, 09h38
leloup84

3 questions renvoient une image

Bonjour,

Je débute dans le html, java, xml...
Je souhaite pour débuter créer un petit programme qui permettent à partir de 3 questions obtenir une image.
Un genre de petit configurateur d'ambiance. On choisi une couleur, une taille et un type et cela affiche la bonne photo.
J'ai vu que la base pouvait se gérer en xml.
Mais une fois la base déterminer je ne sais pas comment poser les 3 questions et comment faire le lien pour qu'au final il ailler chercher la bonne photo.

Merci de votre retour.
10/05/2016, 16h07
joel.drigo
Salut,

Pour la base, si pour chaque triplet (couleur, taille, type), il n'y a qu'une photo, je ne m'embetterais pas avec du xml ou autre : je ferais un fichier dont le nom est une combinaison de ces informations, séparées par un underscore, et par concaténation je reconstitue le nom du fichier. Même s'il y a plusieurs images, on peut avoir un dossier dont le nom correspond au triplet, avec autant d'images dedans qu'on veut, et on fait une sélection aléatoire de l'un d'entre eux.

Ensuite, il semble que tu veuille faire une une application web, puisque tu parles d'html. Tu cherches bien à afficher l'image dans le navigateur ?
1. On peut faire ça purement en html + javascript, sans serveur. Cela obligerait en revanche à avoir tous les fichiers à côté du fichier html, sur tous les postes. On peut également héberger le html et les fichiers images dans un serveur web, comme un serveur Apache par exemple. En utilisant des chemins relatifs, c'est le même html pour les deux versions.
2. Pour une version accessible à distance, on peut aussi faire ça avec une jsp très simple. Il te faut un conteneur de servlet pour l'exécuter (un Tomcat par exemple).
Dans les 2 cas, il faut un form pour saisir les paramètres. Dans le premier cas, on utiliserait un javascript déclenché sur le submit pour créer le chemin de l'image, et un on pourrait par exemple simplement faire un window.open() sur le chemin de l'image. Dans le second, le form appellerait la JSP elle-même, qui testerait dès le début la présence des trois paramètres (dans la requête) et retournerait dans le flux l'image.
10/05/2016, 16h15
leloup84

Les utilisateurs n'auront pas forcément Internet en permanence.
Du coup l'idée c'est qu'il est le catalogue photo dans un dossier.
Après 3 listes déroulantes on clique et on obtient le visuel
10/05/2016, 16h40
joel.drigo

Dans ce cas un simple html + javascript est suffisant. Ou un programme desktop pur Java.
10/05/2016, 17h52
leloup84

Vous n'avez pas d'exemple tout simple sur lequel je peux m'appuyer ?

Un exemple en pur html/javaascript, avec un seul champ (la couleur) :

Code:

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
<html>
<body>
<form action="">
  Couleur : 
  <select id="couleur">
     <option value="rouge" selected>Rouge</option>
     <option value="vert">Vert</option>
     <option value="bleu">Bleu</option>
     <option value="jaune">Jaune</option>
  </select><br><br>
  <input type="button" onclick="javascript:showImage();" value="Afficher">
</form>
 
<script>
function showImage() {
 
    // on récupère la valeur sélectionnée    
    var couleurField = document.getElementById("couleur");
    var couleurChoisie = couleurField.options[couleurField.selectedIndex].value;
 
    // on créé le nom du fichier par concaténation
    var file = "image_"+couleurChoisie+".jpg";
 
    // on ouvre le fichier correspondant dans la même fenêtre
    window.open(file,"_self");
}
</script>
</body>
</html>

Il suffit d'avoir juste à côté du fichier html les fichiers image_rouge.jpg, image_bleu.jpg, image_vert.jpg et image_jaune.jpg, et double-clique le fichier html.

Un exemple équivalent en Java, qui affiche l'image dans une application externe (browser) :

Code:

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import java.awt.Desktop;
import java.awt.FlowLayout;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
 
import javax.swing.BoxLayout;
import javax.swing.JButton;
import javax.swing.JComboBox;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
 
public class Exemple extends JPanel {
 
	private static final String FIELD_COULEUR = "couleur";
 
	private final Map<String, JComboBox<Value>> params = new HashMap<>();
 
	public Exemple() {
		setLayout(new BoxLayout(this, BoxLayout.PAGE_AXIS));
		ajouteCombo(FIELD_COULEUR,"Couleur :", new Value("rouge","Rouge"), new Value("bleu","Bleu"), new Value("jaune","Jaune"));
		JButton button = new JButton("Afficher");
		button.addActionListener(e->showImage());
		JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT));
		buttonPanel.add(button);
		add(buttonPanel);
	}
 
	private void showImage() {
		StringBuilder fichier = new StringBuilder("image");
		fichier.append('_');
		fichier.append(getSelectedValue(FIELD_COULEUR));
		fichier.append(".jpg");
		showImage(new File(fichier.toString()));
	}
 
	private void showImage(File file) {
		if ( file.exists() ) {
			try {
				Desktop.getDesktop().browse(file.getAbsoluteFile().toURI());
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}
 
	private String getSelectedValue(String field) {
		JComboBox<Value> combo = params.get(field);
		return ((Value)combo.getSelectedItem()).getValue();
	}
 
	private void ajouteCombo(String id, String label, Value...values) {
		JComboBox<Value> combo = new JComboBox<>(values);
		combo.setEditable(false);
		params.put(id, combo);
		JPanel panel = new JPanel();
		panel.add(new JLabel(label, JLabel.RIGHT));
		panel.add(combo);
		add(panel);
	}
 
	public static void main(String[] args) {
 
		JFrame frame = new JFrame("Exemple");
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
		frame.getContentPane().add(new Exemple());
 
		frame.pack();
		frame.setLocationRelativeTo(null);
		frame.setVisible(true);
 
	}
 
	private static class Value {
		private final String value;
		private final String label;
		public Value(String value, String label) {
			this.value=value;
			this.label=label;
		}
		public String getValue() {
			return value;
		}
		public String getLabel() {
			return label;
		}
		@Override
		public String toString() {
			return label;
		}
	}
 
}

17/05/2016, 14h14
leloup84

Sur la partie html, comment tu déclines si la photo s'affiche à partir de 2 choix ?

Par copier/coller, et un minimum de lecture du code, c'est vraiment le béaba !

Le select représente un champ :
Code:

1 2 3 4 5 6 7 Couleur : <select id="couleur"> <option value="rouge" selected>Rouge</option> <option value="vert">Vert</option> <option value="bleu">Bleu</option> <option value="jaune">Jaune</option> </select><br><br>
Plusieurs champs = plusieurs fois cette même structure avec les bonnes valeurs. Ce qui est indispensable c'est que l'id soit différent (pour différencier les champs).

La récupération de la saisie d'un champ se fait par
Code:

1 2 3 4 // on récupère la valeur sélectionnée var couleurField = document.getElementById("couleur"); var couleurChoisie = couleurField.options[couleurField.selectedIndex].value;
Pareil, dupliquer cette séquence avec les bons noms.

Puis prendre en compte les différentes saisies dans la concaténation : var file = "image_"+couleurChoisie+".jpg";

17/05/2016, 15h33
leloup84

Ok merci j'ai compris le principe.

Bonjour,
joel.drigo, j'avais réussi à intégrer plusieurs liste déroulante pour l'affichage d'une photo.

La demande a légèrement évolué.
Sur la page d'accueil où j'ai mes listes déroulantes en bas de code j'ai une image par défaut.
Ma demande est que c'est cette photo qui change au moment du clic sur le bouton "Afficher" et non que cela s'affiche dans une nouvelle fenêtre.
Dans l'a photo nommé "Fond écran"

Comment faire ?

Code:

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
<html>
<body>
 
<form action="">
<p align="center"><font size="2" face="Calibri (Corps)">Rideau :</font>
  <select id="rideau" >
     <option value="rideau1">rideau1</option>
     <option value="rideau2">rideau2</option>
     <option value="rideau3">rideau3</option>
     <option value="rideau4">rideau4</option>
  </select></p>
 
<p align="center"><font size="2" face="Calibri (Corps)">Porte haute :</font> 
  <select id="porte">
     <option value="porte1">porte1</option>
     <option value="porte2">porte2</option>
     <option value="porte3">porte3</option>
     <option value="porte4">porte4</option>
  </select></p>
 
 
<p align="center"><input type="button" onclick="javascript:showImage();" value="Afficher"></p>
</form>
 
 
<p align="center"><img src="fond_ecran_accueil.jpg" style="width: 750px;" alt="Fond écran"></p>
 
 
<script>
function showImage() {
 
    // on récupère la valeur sélectionnée    
    var rideauField = document.getElementById("rideau");
    var rideauChoisie = rideauField.options[rideauField.selectedIndex].value;
 
    var porteField = document.getElementById("porte");
    var porteChoisie = porteField.options[porteField.selectedIndex].value;
 
    // on créé le nom du fichier par concaténation
    var file = rideauChoisie+"_"+porteChoisie+".jpg";
 
    // on ouvre le fichier correspondant dans la même fenêtre
    window.open(file,"_self");
}
</script>
 
 
</body>
</html>

31/05/2016, 14h43
joel.drigo

Tu devrais aller poser ta question sur le forum javascript. D'après ce que je comprends tu as une image dans ta page (en arrière plan ?) et tu voudrais modifier cette image : il faut faire des manipulations en javascript d'attribut css, et ce n'est pas mon domaine. En l'occurance, ici c'est le forum Java, pas JavaScript.
31/05/2016, 15h00
leloup84

Non elle n'est pas arrière plan.
Elle est en bas de page.

Et cette photo je souhaite la faire évolué en fonction du choix des listes déroulantes et du clique sur le bouton "Afficher"

L'autre jour la formule que tu m'avais transmis permettait d'afficher la bonne photo mais dans une nouvelle fenêtre.
Là je veux qu'elle s'affiche dans le même fenêtre mais à la place d'une photo déjà là avant le choix des listes déroulantes.
31/05/2016, 15h02
joel.drigo

Il faut dans ce cas manipuler l'attribut src de la balise img, en Javascript toujours. Donc, je répète : pose la question dans le forum JavaScript !