Bug graphique sur mon player

**shadowolf** · 12/03/2010, 15h19

Hello,

Je vais essayer d'être le plus concis dans mon problème, mais à expliquer c'est pas évident, donc n'hésitez pas à me demander des précisions si besoin.

Actuellement, je fais une interface graphique pour mon player audio et un bug graphique apparait lorsque je passe sur mes boutons.

Voici le visuel lorsque je lance mon programme :

Et voici le visuel lorsque je passe mon curseur sur mes boutons

On peut voir qu'un bout de bouton apparait ainsi que le slider du bas apparait en fond de mes boutons.

A noter que si je laisse avancer la slidebar, que je repasse sur mon bouton, ca "met à jour" la position de la slidebar en arrière plan de mon bouton ^^ Léger bug en somme.

Toutes les images que j'utilise sont des png-24 avec transparence.

Afin de gérer mon affichage, j'ai créé une classe ImagePanel comme ci-après :

ImagePanel.java

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
public class ImagePanel extends JPanel 
{
	private static final long serialVersionUID = -9117032525398524031L;
 
	private Image img;
 
	  /**
           * Constructeur par paramètre : String
           * @param img chemin d'accès vers l'image
           */
	  public ImagePanel(String img) 
	  {
		  this(new ImageIcon(img).getImage());
	  }
 
	  /**
           * Constructeur par paramètre : Image
           * @param img
           */
	  public ImagePanel(Image img) 
	  {
		  this.img = img;
		  Dimension size = new Dimension(img.getWidth(null), img.getHeight(null));
		  this.setPreferredSize(size);
		  this.setMinimumSize(size);
		  this.setMaximumSize(size);
		  this.setSize(size);
		  this.setLayout(null);
	  }
 
	  /**
           * Modification de l'image
           * @param img image à modifier
           */
	  public void setImg(String img)
	  {
		  this.img = new ImageIcon(img).getImage() ;
		  this.repaint() ;
	  }
 
	  /**
           * Redéfinition de la fonction paintComponent
           * @param g objet graphics
           */
	  public void paintComponent(Graphics g) 
	  {
		  g.drawImage(img, 0, 0, null);
	  }
}

De cette manière, je peux faire des Panels avec des images.

De là, j'ai ma classe MyPlayer qui gère l'affichage de mon player

MyPlayer.java

N.B : Pour plus de clareté, j'ai retiré le code n'ayant aucun lien avec le visuel et effectuant uniquement du traitement vis à vis du streaming. Ne soyez donc pas surpris s'il "manque quelques fonctions"

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
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
public class MyPlayer extends JFrame implements MouseListener, ChangeListener
{
	private static final long serialVersionUID = -530567101282086549L;
 
	//Définiction des "boutons" du player
	protected ImagePanel previous = null ;
	protected ImagePanel play = null ;
	protected ImagePanel pause = null ;
	protected ImagePanel next = null ;
	protected JPanel myPlayer = null ;
	protected GridBagConstraints myConstraints = null ;
	protected GainControl volumControl = null ;
	protected Container content = null ;
	protected Player player = null ;
	protected ReceiveStream stream = null ;
	protected AVReceive2 current = null ;
	protected JSlider volume = null ;
	protected JSlider progress = null ;
	protected AudioFileFormat baseFileFormat = null;
	protected long duration = 0 ;
 
	/**
         * Constructeur par défaut
         * @param p
         * @param str
         */
	public MyPlayer(Player p, ReceiveStream str, AVReceive2 recepteur)
	{	
	    current = recepteur;	    
 
		//Initialisation de la fenêtre
		this.initView() ;
 
		//Initialisation des boutons
		this.initButtons() ;
 
		//Création du player
		this.initPlayer(p, str) ;
 
		//Creation du layout
		this.initLayout() ;
 
		//Affichage de la fenêtre
		this.setVisible(true) ;
	}
 
	/**
         * Initialisation de l'affichage du player
         */
	public void initLayout()
	{
		myPlayer = new JPanel() ;
		myPlayer.setLayout(new GridBagLayout()) ;
		myConstraints = new GridBagConstraints() ;
 
		//Bouton previous
		myConstraints.fill = GridBagConstraints.HORIZONTAL;
		myConstraints.gridx = 0;
		myConstraints.gridy = 0;
		myPlayer.add(previous, myConstraints);
 
		//Bouton play
		play.setVisible(false);
		myConstraints.fill = GridBagConstraints.HORIZONTAL;
		myConstraints.gridx = 2;
		myConstraints.gridy = 0;
		myPlayer.add(play, myConstraints);
 
		//Bouton pause
		myConstraints.fill = GridBagConstraints.HORIZONTAL;
		myConstraints.gridx = 2;
		myConstraints.gridy = 0;
		myPlayer.add(pause, myConstraints);
 
		//Bouton next
		myConstraints.fill = GridBagConstraints.HORIZONTAL;
		myConstraints.gridx = 3;
		myConstraints.gridy = 0;
		myPlayer.add(next, myConstraints);
 
		//Slider volume initialisé à entre les bornes 0 et 10 (on divisera par 10 pour matcher avec les fonctions nécessitant des floats)
		volume = new JSlider(JSlider.VERTICAL, 0, 10, 3);
		volume.addChangeListener(this);
		myConstraints.fill = GridBagConstraints.VERTICAL;
		myConstraints.gridx = 4;
		myConstraints.gridy = 0;
		myPlayer.add(volume, myConstraints);
 
		//Slider progress bar (time in milliseconds)
		progress = new JSlider(JSlider.HORIZONTAL, 0, (int)(current.getPlayOnDemandClient().getDuration()*1000), 0);
		progress.addChangeListener(this) ;
		myConstraints.fill = GridBagConstraints.HORIZONTAL;
		myConstraints.gridx = 0;
		myConstraints.gridy = 1;
		myConstraints.gridwidth = 4 ;
		myPlayer.add(progress, myConstraints);
 
 
		content.add(myPlayer) ;
	}
 
	/**
         * Initialisation des boutons du player
         */
	public void initButtons()
	{
		//TODO Ajouter la fonction nécessaire pour lire les image a partir d'un executable
		previous = new ImagePanel("skin2/previous_off.png") ;
		previous.addMouseListener(this);
 
		play = new ImagePanel("skin2/play_off.png") ;
		play.addMouseListener(this);
 
		pause = new ImagePanel("skin2/pause_off.png") ;
		pause.addMouseListener(this);
 
		next = new ImagePanel("skin2/next_off.png") ;
		next.addMouseListener(this);
	}
 
	/**
         * Initialisation de la fenêtre
         */
	public void initView()
	{
        this.setTitle("Mon Player"); 
        //TODO Mettre une condition sur le JPanel pour que sa taille s'adapte aux boutons :)
        this.setSize(250, 110);
        this.setLocationRelativeTo(null);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
        content = this.getContentPane() ;
	}
 
	public void mouseEntered(MouseEvent event)
	{
		if(player != null)
		{
			if(event.getSource() == previous)
			{
				previous.setImg("skin2/previous_on.png") ;
			}
			else if(event.getSource() == play)
			{
				play.setImg("skin2/play_on.png") ;
			}
			else if(event.getSource() == pause)
			{
				pause.setImg("skin2/pause_on.png") ;
			}
			else if(event.getSource() == next)
			{
				next.setImg("skin2/next_on.png") ;
			}
		}
	}
	public void mouseExited(MouseEvent event)
	{
		if(player != null)
		{
			if(event.getSource() == previous)
			{
				previous.setImg("skin2/previous_off.png") ;
			}
			else if(event.getSource() == play)
			{
				play.setImg("skin2/play_off.png") ;
			}
			else if(event.getSource() == pause)
			{
				pause.setImg("skin2/pause_off.png") ;
			}
			else if(event.getSource() == next)
			{
				next.setImg("skin2/next_off.png") ;
			}
		}
	}
	public void mousePressed(MouseEvent arg0){}
	public void mouseReleased(MouseEvent arg0){}	 
}

Etant bloqué, j'ai commencé par tester quelques trucs :
- Insérer un valide sur le Jpanel myPlayer
- Chercher d'où provient l'erreur.

J'ai pensé que l'erreur provenait de ma fonction paintComponent, cependant quand j'aggrandis/réduit ma fenêtre pour volontairement appeler la fonction paintComponent, tous mes boutons sont "propres", la transparence marche bien, etc.

Je soupçonne donc l'appel de la fonction repaint() d'être à l'origine de mon problème car elle est invoqué lors de mon passage avec la souris par le biais de la fonction setImg().

Deuxième chose, lors de mes passages sur les boutons (allers/retour), petit à petit, le fond du bouton "blanchit". J'en conclue que le repaint repaint par dessus sans retirer l'affichage d'avant sur mon visuel. Ainsi à force de passer le leger efet d'ombre fait complètement blanchir le fond jusqu'à perdre le transparence...

Des idées pour m'aider ?

Cordialement,

Shad.

**shadowolf** · 12/03/2010, 16h58

Problème résolu par un internaute

Essaye juste de faire un super.paintComponent(g) au début de ta méthode paintComponent.

**dinobogan** · 12/03/2010, 17h13

Il ne faut absolument pas faire ainsi pour les images.
Première chose, tu dois précharger les images. Tu peux augmenter ta classe d'affichage d'image en lui donnant deux chemins d'images. Ensuite, pour changer l'image, ce sera un simple appel de méthode de ImagePanel, par exemple "setImageToOff" et "setImageToOn". Ca va éviter de perdre du temps dans le Thread de gestion de souris, et tu vas gagner en réactivité.
Ensuite pour transformer un chemin en Image, il ne faut pas utiliser de JLabel. Ce n'est pas son rôle. Tu dois faire utiliser une technique faite pour ça, comme par exemple la classe ImageIO.

Fait ces changement et dit nous si ça fonctionne mieux.

Bug graphique sur mon player

Agents de placement/Fenêtres Java

Discussions similaires

Partager

Partager