Affichage et calcul en background multiple

Version imprimable

18/09/2015, 11h28
Kendaya

Affichage et calcul en background multiple

Bonjour,

Je rencontre un problème de "compréhension" qui m'empêche d'avancer dans le développement de mon programme.
Le but étant à terme de pouvoir afficher une image et d'effectuer en background le calcul de l'image suivante pendant que celle qui est affichée s'anime.
Donc il s'agit en gros de :
image1 calculée > image1 s'affiche > lancement du calcul de l'image 2 (pas moins de 10 secondes de calcul) > pendant ce temps on peut se déplacer sur l'image1 en attendant que l'image2 soit calculée > calcul fini > affichage image2 > lancement du calcul de l'image3 > etc. jusqu’à la fermeture de la fenêtre par l'user.

J'ai élaboré tous les éléments nécessaires à l'affichage et au calcul d'une image, mais je ne sais pas comment réaliser cet enchaînement et suis donc coincée depuis plusieurs jours.
J'ai vu qu'il existe la classe SwingWorker mais j'ai aussi lu qu'elle ne peut être utilisée qu'une unique fois puis fermée (?).

Y aurait-il un moyen d'utiliser SwingWorker en boucle ? Ou peut-être une autre alternative avec mes propres threads ?
Si chaque image calculée est considérée comme un élément en plus dans la progression "infinie", est-il possible de passer tout un tableau 2D de la méthode doInBackground à celle qui affiche ?

J'espère que j'ai décrit assez clairement mon soucis :oops: et vous remercie d'avance pour vos réponses !
18/09/2015, 11h53
joel.drigo

Salut,

On peut effectivement utiliser le SwingWorker en boucle (et publier un tableau 2D sans problème), avec une interruption lorsque la fenêtre se ferme, mais tu aura plus vite fait et aussi simple d'utiliser un ExecutorService (voir Executors.newSingleThreadExecutor()) en faisant simplement la mise à jour de l'UI avec un invokeLater en fin de tâche. Il faudra simple faire un shutdown du service à la fermeture de la fenêtre.

Merci pour cette réponse rapide !

Mon apprentissage des threads est tout récent, j'ai tout de meme essayé d'implémenter la solution proposée avec Executors.newSingleThreadExecutor()).
Les calculs tournent bien en fond et j'ai une méthode d'update mais dans mon JFrame seule la première image calculée s'affiche, les autres images qui suivent ne s'affichent jamais.

Voici la classe principale

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
 
public class Test {
	private MaFenetre mf;
	ExecutorService pool = Executors.newSingleThreadExecutor();
 
	public Test() {
 
		mf = new MaFenetre();
		pool.submit(new Thread(new Runnable() {
			@Override
			public void run() {
				runTest();
			}
		}));
	}
 
	public void runTest() {
		MonImage mi;
		for (int i = 1; i < 5; i++) {
			int[][] image = calculImage();
			System.out.println("Image " + i + " calculée");
			updateProgress(image);
		}
	}
 
	public void updateProgress(int[][] image) {
		SwingUtilities.invokeLater(new Runnable() {
			public void run() {
				mf.afficherImage(image);
			}
		});
	}
}

La classe du JFrame :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public class MaFenetre extends JFrame implements Observer {
	MyPanel monPanel;
 
	public MaFenetre() {
		this.setSize(800, 800);
		this.setLayout(new GridLayout());
		this.setLocationRelativeTo(null);
		this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
		this.setVisible(true);
	}
 
	public void afficherImage(int[][] image) {
		MyPanel monPanel = new MyPanel(image);
		getContentPane().removeAll();
		this.add(monPanel);
		SwingUtilities.updateComponentTreeUI(this);
	}
 
	@Override
	public void update(Observable o, Object arg) {
	}
}

La classe du JPanel :

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
public class MyPanel extends JPanel {
	private Image img;
 
	public MyPanel(int[][] array) {
		this.img = toImage(array);
	}
 
	public Image toImage(int[][] array) {
		BufferedImage img = new BufferedImage(array[0].length, array.length,
				BufferedImage.TYPE_INT_RGB);
		for (int i = 0; i < array.length; i++) {
			for (int j = 0; j < array[0].length; j++) {
				img.setRGB(j, i, array[i][j]);
			}
		}
		return img;
	}
 
	@Override
	public void paintComponent(Graphics g) {
		super.paintComponents(g);
		g.drawImage(this.img, 0, 0, null);
	}
 
}

Il y a peut être quelques bizarreries car j'ai retiré les gros pavés de calculs pour que le code soit lisible, mais le tout se lance sans problème.
Y'a-t-il quelque chose que j'ai fait qui empêche l'update du Jframe ? Est-ce que j'utilise correctement la méthode invokeLater ?

Merci d'avance !

Sans ordre préférentiel particulier

Inutile de passer (submit) un thread à l'executor : un Runnable suffit (un newSingleThreadExecutor utilise son propre pool de threads, n'en contenant qu'un et un seul, pour exécuter les Runnable les uns après les autres, dans l'ordre. Il faudra penser juste à ce que chaque tâche lance la suivante lorsqu'elle est terminée (ou signale à un composant en attente qu'il peut la générer, celui-là pouvant s'exécuter dans son propre thread) : il ne faut pas faire de boucle dans runTest() (ou alors tu fais un simple thread avec cette boucle.

Le code

Code:

1
2
3
4
5
6
7
8
BufferedImage img = new BufferedImage(array[0].length, array.length,
				BufferedImage.TYPE_INT_RGB);
		for (int i = 0; i < array.length; i++) {
			for (int j = 0; j < array[0].length; j++) {
				img.setRGB(j, i, array[i][j]);
			}
		}
		return img;

devrait s'exécuter dans la tâche (dans lethread du ExecutorService et pas le thread Swing. Accessoirement, il y a moyen de construire le tableau de manière à aller plus vite pour construire l'image (mais ce ne sera pas aussi simple qu'une boucle sur une matrice 2d de couleurs)

Accessoirement, la méthode au point 2 ne modifie pas la variable img de MyPanel, donc ne devrait pas être public (n'a pas d’intérêt à l'être en tout cas), mais ça ne pose pas de problème en l'état de ton code.

SwingUtilities.updateComponentTreeUI(this); est non seulement inutile dans ce contexte (non UI) mais ne fait pas ce que tu penses (rafraîchir l'affichage). Fais plutôt:

Code:

1
2
this.revalidate(); // revalide l'arbre afin que l'agencement se refasse correctement (pas forcément nécessaire selon les layouts et les dimensions avant et après)
this.repaint();// redessine

Plutôt que de modifier l'arborescence de composants (le removeAll() suivi d'un new xxpanel() et d'un add()), tu peux aussi changer l'image dans un panel et repaindre éventuellement (tu parlais dans ton premier message d'une image animée et j'imaginais que tu avais un Timer pour animer l'image, donc pour moi pas besoin de repeindre).

Voici un exemple :

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
public class Demo {
 
	public static void main(String[] args) {
		MaFenetre mf = new MaFenetre();
		final Demo test = new Demo(mf);
		mf.addWindowListener(new WindowAdapter() {
			@Override
			public void windowClosed(WindowEvent e) {
				test.stop();
			}
		});
		test.createNewImage(); // première
		mf.setVisible(true);
		test.start();
	}
 
	private MaFenetre fenetre;
	private ExecutorService executor;
 
	public Demo(MaFenetre fenetre) {
 
		this.fenetre = fenetre;
 
	}
 
	public void start() {
		if ( executor==null ) {
			executor = Executors.newSingleThreadExecutor();  
			submitTask();
		}
	}
 
	private void submitTask() {
		if ( executor!=null ) {
			executor.execute(()-> {
				/*try {*/
					//Thread.sleep(1000); // simule tâche longue
					createNewImage();
					submitTask();
				/*} catch (InterruptedException e) {
				} */
			});
		}
	}
 
	public void stop() {
		if ( executor!=null ) {
			executor.shutdownNow();
			executor=null;
		}
	}
 
	public void createNewImage() { 
		fenetre.updateImage(ImageFactory.INSTANCE.createNoiseImage(300, 200));
	}
 
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class MaFenetre extends JFrame {
 
	private final ImagePanel imagePanel;
 
	public MaFenetre() {
		this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
		this.setSize(800, 800); 
		this.setLocationRelativeTo(null);
		imagePanel = new ImagePanel();
		add(imagePanel);
	}
 
	public void updateImage(BufferedImage image) {
		SwingUtilities.invokeLater(()-> imagePanel.setImage(image));
	}
 
}

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
public class ImagePanel extends JPanel {
 
	private BufferedImage image = null;
 
	public ImagePanel() {
	}
 
	public void setImage(BufferedImage image) { 
		this.image=image;
		repaint();
	}
 
	@Override
	protected void paintComponent(Graphics g) {
		super.paintComponent(g);
		if ( image!=null ) {
			g.setColor(Color.BLUE);
			final int x = (getWidth()-image.getWidth())/2;
			final int y = (getHeight()-image.getHeight())/2;
			g.fillRoundRect(x-10, y-10, image.getWidth()+20, image.getHeight()+20, 5, 5);
			g.setColor(Color.BLUE.darker());
			g.drawRoundRect(x-10, y-10, image.getWidth()+20, image.getHeight()+20, 5, 5);
			g.drawImage(image, x, y, this);
			g.drawRect(x, y, image.getWidth(), image.getHeight());
		}
	}
 
}

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
/**
 * 
 * @author jdrigo
 *
 */
public enum ImageFactory {
 
	INSTANCE;
 
	public BufferedImage readImage(String path) throws IOException {
		return ImageIO.read(new File(path));
	}
 
	public BufferedImage readImage(URL url) throws IOException {
		return ImageIO.read(url);
	}
 
	public BufferedImage createNoiseImage(int width, int height) {
		BufferedImage image = new BufferedImage(width, height,
				BufferedImage.TYPE_INT_RGB);
 
		double[][] noise = createNoise(width, height);
 
		for (int x = 0; x < width; x++) {
			for (int y = 0; y < height; y++) { 
 
				int g = (int) (256 * noise[x][y]);
				Color color = new Color(g, g, g);
 
				image.setRGB(x, y, color.getRGB());
 
			}
		}
 
		return image;
	}
 
	public BufferedImage createClouds(int width, int height, int blue) {
		if ( width<=0 || height<=0 ) throw new IllegalArgumentException("Size is out of range: " + width + " × " + height);
		if ( blue<169 || blue>240 ) throw new IllegalArgumentException("Blue color is out of range: " + blue);
		BufferedImage image = new BufferedImage(width, height,
				BufferedImage.TYPE_INT_RGB);
 
		double[][] noise = createNoise(width, height);
 
		for (int x = 0; x < width; x++) {
			for (int y = 0; y < height; y++) {
 
				int l = 192 + (int)(turbulence(x, y, 64, noise)) / 3;
				if ( l>255 ) {
					l=255;
				}
				Color color = HSLToRGB(blue, 255, l);
 
				image.setRGB(x, y, color.getRGB());
 
			}
		} 
		return image;
	}
 
	public Color HSLToRGB(int h, int s, int l) {
		return HSLToRGB(h, 100*s/255f, 100*(l/255f), 1f);
	}
 
	public Color HSLToRGB(float h, float s, float l) {
		return HSLToRGB(h, s, l, 1f);
	}
 
	public Color HSLToRGB(float h, float s, float l, float alpha) {
		if (s <0.0f || s > 100.0f) {
			throw new IllegalArgumentException( "Color parameter outside of expected range - Saturation: " + s);
		}
 
		if (l <0.0f || l > 100.0f) { 
			throw new IllegalArgumentException( "Color parameter outside of expected range - Luminance: " + l );
		}
 
		if (alpha <0.0f || alpha > 1.0f) {
			throw new IllegalArgumentException( "Color parameter outside of expected range - Alpha: " + alpha );
		}
 
		h = h % 360.0f;
		h /= 360f;
		s /= 100f;
		l /= 100f;
 
		float q = 0;
 
		if (l < 0.5)
			q = l * (1 + s);
		else
			q = (l + s) - (s * l);
 
		float p = 2 * l - q;
 
		float r = Math.max(0, HueToRGB(p, q, h + (1.0f / 3.0f)));
		float g = Math.max(0, HueToRGB(p, q, h));
		float b = Math.max(0, HueToRGB(p, q, h - (1.0f / 3.0f)));
 
		r = Math.min(r, 1.0f);
		g = Math.min(g, 1.0f);
		b = Math.min(b, 1.0f);
 
		return new Color(r, g, b, alpha);
	}
 
	private float HueToRGB(float p, float q, float h) {
		if (h < 0) h += 1;
 
		if (h > 1 ) h -= 1;
 
		if (6 * h < 1)
		{
			return p + ((q - p) * 6 * h);
		}
 
		if (2 * h < 1 )
		{
			return  q;
		}
 
		if (3 * h < 2)
		{
			return p + ( (q - p) * 6 * ((2.0f / 3.0f) - h) );
		}
 
   		return p;
	}
 
	private double[][] createNoise(int width, int height) {
 
		Random random = new Random();
 
		double[][] noise = new double[width][height];
		for (int x = 0; x < width; x++) {
			for (int y = 0; y < height; y++) {
				noise[x][y] = random.nextDouble();
			}
		}
		return noise;
 
	}
 
	// zoom
	private double smoothNoise(double x, double y, double[][] noise) {
		int noiseWidth = noise.length;
		int noiseHeight = noise[0].length;
 
		// partie fractionnel
		double fractX = x - (int) x;
		double fractY = y - (int) y;
 
		// bouclage
		int x1 = ((int) x + noiseWidth) % noiseWidth;
		int y1 = ((int) y + noiseHeight) % noiseHeight;
 
		// valeurs voisines
		int x2 = (x1 + noiseWidth - 1) % noiseWidth;
		int y2 = (y1 + noiseHeight - 1) % noiseHeight;
 
		// interpolation bilineaire
		double value = 0.0;
		value += fractX * fractY * noise[x1][y1];
		value += fractX * (1 - fractY) * noise[x1][y2];
		value += (1 - fractX) * fractY * noise[x2][y1];
		value += (1 - fractX) * (1 - fractY) * noise[x2][y2];
 
		return value;
	}
 
	private double turbulence(double x, double y, double size, double[][] noise) {
		double value = 0.0, initialSize = size;
 
		while (size >= 1) {
			value += smoothNoise(x / size, y / size, noise) * size;
			size /= 2.0;
		}
 
		return (128.0 * value / initialSize);
	}
 
}

Alors:
> J'ai mis la conversion du tableau 2D en image dans le thread
> J'ai remplacé

Code:

SwingUtilities.updateComponentTreeUI(this);

par
Code:

1 2 3 this.revalidate(); this.repaint();
>J'ai corrigé le passage du runnable à mon pool
>J'ai essayé de set l'image du panel au lieu de le recréer à chaque fois, mais du coup plus rien ne s'affiche
>Si je laisse la création d'un panel pour chaque image, il y a que l'image 1 qui est affichée

J'ai bien vérifié que les images calculées sont différentes, le set de l'image dans le panel se fait bel et bien et le hashcode de l'image contenue change donc a chaque fois.
J'ai tenté un revalidate() repaint() aussi dans le Jpanel, mais rien ne change.

J'ai aussi tenté de bidouiller la méthode d'affichage
Code:

1 2 3 4 5 6 7 8 9 public void afficherImage(Image image) { this.monPanel.setImg(image); Container p = getContentPane(); p.removeAll(); p.setLayout(new GridLayout()); p.add(monPanel); setContentPane(p); monPanel.repaint(); }
J'ai vraiment l'impression que je m'y prend mal pour afficher l'image, ou que j'oublie de mettre un élément.

18/09/2015, 15h40
joel.drigo

Citation:

Envoyé par Kendaya

J'ai vraiment l'impression que je m'y prend mal pour afficher l'image, ou que j'oublie de mettre un élément.

Je t'ai mis un exemple complet depuis tout à l'heure.
18/09/2015, 16h28
Kendaya

Merci beaucoup pour cet exemple.
J'ai remplacé mon code par ce dernier (j'ai du adapter 2-3 trucs pour mes calculs) et j'obtiens maintenant la 1ère image encadrée de bleu.. et c'est tout, les suivantes ne s'affichent pas :?
18/09/2015, 16h33
Kendaya

Je retire ce que j'ai dis, j'avais oublié un élément pour l'update !!
Du coup j'ai bien mes images qui s'affichent à tour de rôle.
Merci infiniment !

(merci aussi car je n'avais jamais vu l'utilisation de -> et j'ai pu apprendre une nouvelle chose :D)

Pour ne pas le cadre bleu, tu as vu ce qu'il fallait faire (supprimer la partie qui dessine ça) ?:
Code:

1 2 3 4 5 6 7 8 9 10 11 if ( image!=null ) { /*g.setColor(Color.BLUE); final int x = (getWidth()-image.getWidth())/2; final int y = (getHeight()-image.getHeight())/2; g.fillRoundRect(x-10, y-10, image.getWidth()+20, image.getHeight()+20, 5, 5); g.setColor(Color.BLUE.darker()); g.drawRoundRect(x-10, y-10, image.getWidth()+20, image.getHeight()+20, 5, 5);*/ g.drawImage(image, x, y, this); /*g.drawRect(x, y, image.getWidth(), image.getHeight());*/ }
Ensuite, je ne sais pas quelles modifications tu as faites, mais si seule la première image s'affiche, c'est que :

soit tu as supprimé quelque chose qui ne fallait pas
soit que la deuxème image met tellement longtemps à se générer (des traces,, ou passer en mode debug te permetttra de voir si on passe par ton code;,
soit que les autres images sont identiques à la première et on ne voit ainsi rien (la traces ou le mode debug, pareil que ci-avant)
soit l'image est complètement transparente, donc visible
autre auquel je ne pense pas.

Tu peux remettre ton dernier code ?

18/09/2015, 16h52
Kendaya

J'ai retiré le cadre bleu, merci.
Donc votre code fonctionne parfaitement, c'était dû a une étourderie de ma part sur l'une des méthodes.