Discussion :

[pobos]

Bonjour à tous,
Je développe présentement une application de gestion de station service et je dois représenter le stock de carburant dans une cuve. J’aimerais créer une fonction qui prend en paramètres :
capacite_cuve : volume max de la cuve ;
volume_min : volume mini à partir de laquelle une alerte est générée ;
volume_restant : niveau du produit ;
nom_cuve : le nom de la cuve ;
couleur_produit : couleur du produit
puis affiche le stock. La figure ci-jointe représente exactement ce que je dois réaliser.
A noter que : volume_min < volume_restant < capacite_cuve

J'ai regardé du côté de l'api 2D, notamment avec la fonction Arc2D.CHORD mais rien n'y fait. Restant disponible pour toute information complémentaire.

Merci d’avance.

[sinok]

Si tu n'es pas bloqué sur l'apparence à obtenir, tu peux toujours te diriger sur ce projet: SteelSeries qui propose des jauges vachement bien foutues et qui plus est fort jolies à voir.

Je subodore de plus qu'il doit être possible d'en customiser une ronde pour qu'elle affiche un niveau vertical

Le blog du développeur de cette lib: http://harmoniccode.blogspot.com/

[bouye]

Qu'est ce qui te pose problème dans le rendu de ton niveau ?

Il s'agit juste de la hauteur du rectangle vert, ce qui est plutot facile à caculer compte tenu des paramètre fournis, avec une simple règle de 3.

Code :

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

1
2
3
 
largeur = diamètre;
hauteur = diamètre * (volume actuel - volume min) / (volume max - volume min);

Ensuite ce même rectangle est clippé par un disque, et on dessine un cercle noir par dessus et voilà ! (après pour faire joli, on peut utiliser des gradients et des formes suplémentaires ).

Après bien sur la couleur varie en fonction du volume actuel.

Pour le rendu et le positionnement du label il y a toutes les méthodes qu'il faut pour calculer la position correct en fonction du texte dans la classe Font (getLineMetrics() et getStringBounds()). Après il faut se sounir que le point de référence lors de l'écriture d'un texte n'est pas le coin en haut à gauche mais la base ligne à gauche (dans le cas d'une écriture occidentale) avec l'ascent = la hauteur de caractère audessus de la base line et le descent = la hauteur de charactère sous la baseline pour les quelques lettres qui vont endessous (fgjpqyz).

[pobos]

Bonjour,

merci pour vos réponses.
sinok:

j'ai suivi les liens ci-dessus mais j'avoue vraiment que je ne m'y retrouve pas dedans. J'ai pas un niveau expert en graphisme java.

bouye:

Au fait, ce qui m'embête le plus c'est comment faire en sorte que les parties clippées comme le montre ton graphique ne soient pas du tout visibles.

merci encore.

[bouye]

Euh..... c'est le principe du clip justement...
le genre de truc qu'on peut faire avec graphics.setClip(Shape) par exemple !
Bon après c'est pas forcément la meilleure méthode : les formes clippées ne sont pas anti-aliasées mais pour ce que tu cherches à faire c'est largement suffisant je pense.

Donc :

• sauvegarder le clip initial,
• clipper le Graphics avec le cercle,
• peindre le rectangle en vert,
• restaurer le clip initial,
• dessiner le cercle en noir.

[pobos]

Merci bouye, je vais essayer ça et te tiendrais au courant de mon avancement.

A+

[slim_java]

Salut,

je pense aussi que tu peux travailler avec des objets Area et appliquer une Intersection entre le cercle et le rectangle .

[bouye]

En fait, il y a 3 solutions qui apparaissent rapidement (quand on connait Java2D) :

• clip direct du Graphics (pas d'anti-aliasing). C'est la solution la plus rapide à mettre en place
• utiliser Area (supporte l'anti-aliasing). Peut poser des problèmes de performance en cas de beaucoup d'opération (ce n'est pas le cas ici car on a que 2 formes).
• utiliser AlphaComposite.SrcIn pour faire un rendu clippé soft (supporte l'anti-aliasing). Mais c'est plus facile à mettre en place sur des images offscreen que sur le Graphics de l'écran.

[pobos]

Bonjour à tous en merci pour vos réponses.
Comme convenu voici ou j'en suis avec le code ci-dessous:

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
 
class MaCuve extends Component {
 
	/**
         * 
         */
	private static final long serialVersionUID = 1L;
	public void paint(Graphics g) {
	    Graphics g1 = (Graphics)g;
	    Shape cercle= new Ellipse2D.Float(80.0f, 80.0f, 499.0f, 500.0f);//g1.getClip();
	    g1.setClip(cercle);
	    g1.setColor(Color.GREEN);
	    g1.fillRect(80, 80, 500, 400);
	    g1.setColor(Color.BLACK);
	    g1.drawOval(80, 80, 499, 499);
	  }
 
}

Le problème maintenant est que l'origine de mon rectangle se situe au coin supérieur gauche. J'ai essayé de faire une rotation de mon rectangle sans succès.
Ci-joint ce que j'ai obtenu.
A+

[pobos]

Salut!

Je crois que le problème est entièrement résolu. La solution est la suivante :
le bord inférieur de mon rectangle doit coïncider avec celui de mon ellipse. Cette translation d'origine est obtenue en ajoutant tout simplement à y la valeur de la différence entre la hauteur maximale et le niveau actuel du produit (à vérifier après) . Donc l'astuce était de commencer à partir du niveau même du produit:

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
 
lass MaCuve extends Component {
 
	/**
         * 
         */
	private static final long serialVersionUID = 1L;
	public void paint(Graphics g) {
	    Graphics g1 = (Graphics)g;
	    Shape cercle= new Ellipse2D.Float(80.0f, 80.0f, 499.0f, 500.0f);//g1.getClip();
	    g1.setClip(cercle);
	    g1.setColor(Color.GREEN);
	    g1.fillRect(80, 80+(499-400), 500, 400);
	    g1.setColor(Color.BLACK);
	    g1.drawOval(80, 80, 499, 499);
	  }
 
}

Voici la figure finale.
En tout cas merci infiniment à tout le monde.

A bientôt.

[bouye]

Tu devrais (comme indiqué plus haut) sauvegarder le clip initial et le restaurer avant de dessiner le cercle. Cela permettrait à la bordure noire de s'afficher correctement entre autre quand tu active l'antialiasing dans le rendu (car le stroke dans Java2D est positionné au milieu du trait et s'affiche donc de part et d'autre de la limite définie par le disque).

Ensuite, je pense qu'au lieu de faire :

Code :

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

Graphics g1 = (Graphics)g;

Tu voulais plutot faire :

Code :

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

Graphics2D g1 = (Graphics2D)g;

Ce qui permet de faire :

Code :

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

g1.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

Ce qui te permet aussi de dessiner directement avec des formes Rectangle2D et Ellipse2D plutot que de coder des valeurs en dur comme ça.