Discussion :

[LeonCosnyd]

Bonjour,

La mode étant aux jauges circulaires :


Est-il possible de reproduire une jauge avec un graphique similaire dans Windev ? J'ai testé le champ "jauge LCD" mais rien n'y fait je n'arrive pas à l'utiliser pour obtenir une jauge avec des tracés net et jolis !

Savez-vous comment faire ?

[b_reda31]

Bonjour,
En attendant de meilleures réponses, je vous propose la mienne :
Dans une de mes applications où je devais représenter graphiquement le niveau de consommation de plusieurs fioles,
j'ai crée 11 images de fioles représentant les différents taux de consommation (0% , 10% , 20%, ... , 100%)
Selon le taux de consommation réel (que j'arrondis à la dizaine), je charge l'image correspondante dans un champ image.
Ce n'est peut être pas la meilleure solution car il y a du code à mettre en place, surtout si vous souhaitez avoir plusieurs modèles de jauges
mais dans mon cas, cela ne m'a pas posé de problème.

[LeonCosnyd]

Bonjour et merci de ta réponse !

C'est effectivement ma solution de secours !
Mais ma curiosité m'a fait créer ce post afin de savoir s'il est possible ou non de le faire avec windev.

[fffttt]

Bonjour

C'est également ce que j'ai fait sur un projet avec justement les mêmes jauges que toi.
(je ne l'ai pas sous la main sinon je t'aurais filé les images)

[michel.souris]

Vous devez certainement pouvoir bricoler quelque chose via les fonctions de dessin.... si vous avez du temps !

[gabcouts]

Bonjour,

En utilisant les fonction jQuery, tu pourrais peut-être pouvoir en afficher. Les jauges sur le web sont pratiquement tout en JS. Avec un code trouvé sur le net tu pourrais tester et nous donnez des Feedback?

@+

[LeonCosnyd]

Programmer avec les fonctions de dessin me semble bien compliqué. Je ne vois pas comment faire à part tracé des cercles de différents diamètres pour avoir la largeur souhaité. Et encore après ne vois même pas comment gérer le défilement de la jauge (je ne vois vraiment pas à vrai dire... ).

Pour ce qui est des images je me vois mal devoir en créer 100 pour avoir une jauge fluide...

[frenchsting]

Logiquement, en fonctions de dessin, tu utilises la trigonométrie : 100% = 2 Pi radians. Pas le temps de me replonger dans mes cours de 3ème... Ni de vérifier qu'il n'y aura pas d'aliasing...

Bon courage pour le maux de tête...

[tbc92]

Pour dessiner ton premier dessin, tu dois pouvoir le faire avec ces 4 instructions

dcercle ( .. grand rayon , couleur grise)
dportion ( avec les bons angles, grand rayon, couleur bleue, angles qui évoluent avec la valeur de la jauge )
dcercle ( petit_rayon, couleur blanche) pour mettre à blanc tout le centre de la jauge.
dtexte ( la valeur au milieu du cercle )

[LeonCosnyd]

Pour dessiner ton premier dessin, tu dois pouvoir le faire avec ces 4 instructions

dcercle ( .. grand rayon , couleur grise)
dportion ( avec les bons angles, grand rayon, couleur bleue, angles qui évoluent avec la valeur de la jauge )
dcercle ( petit_rayon, couleur blanche) pour mettre à blanc tout le centre de la jauge.
dtexte ( la valeur au milieu du cercle )

HOURRA ! En fait mon gros problème était que je ne connaissais pas la fonction dPortion !
Pour ce qui est des maths ça devrait aller ce n'est que de la trigo de base.

Mais après cela signifie que je ne suis pas le seul à ne pas réussir à utiliser correctement la jauge circulaire de windev (qui est censé être prévue pour cela). J'ai vu que dans la prochaine version 59j (qui est en validation phase 2) il y a une amélioration sur ce champ : "Optimisation du dessin de la jauge"..... Tiens tiens tiens ! On dirait bien que cela va simplifier pas mal de chose !

[michel.souris]

Re-bonjour,

Je viens de regarder vite fait les jauges circulaires dispos en v20... ben y a quand même moyen de se rapprocher grandement des jauges sauce jQuery !

Perso j'ai élargi le trait, enlevé ce vilain dégradé green2red, enlevé la graduation, enlevé les libellés de graduation, modifier le point de départ et le point d'arrivée (pour obtenir un vrai cercle...) et franchement, sans être magnifique, c'est pas vilain... manquerait plus qu'un libellé au milieu pour afficher la valeur...

[LeonCosnyd]

Je trouve quand même qu'à l'heure actuelle l'aliasing de la jauge est trop important pour avoir un beau rendu. J'espère beaucoup de la 59j. Je ne l'ai pas encore installé. J'attends qu'elle passe la phase 2 des tests.

[Patrice Terrier]

Si on a pas peur de mettre les mains dans le cambouis ...
Voici quelques exemples de ce qu'on peut faire avec une librairie graphique spécialisée qui fonctionne avec toutes les versions de WinDev.

http://forum.pcsoft.fr/fr-FR/pcsoft....idget/read.awp

http://forum.pcsoft.fr/fr-FR/pcsoft....-5-00/read.awp

[aubutus]

Bonjour,

Voici le code que j'utilise, si cela peut servir à quelqu'un ...

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
 
PROCÉDURE Progresse(LOCAL moProgresse est un monétaire)
moX1 est un monétaire
moY1 est un monétaire
moX2 est un monétaire
moY2 est un monétaire
moX3 est un monétaire
moY3 est un monétaire
moX4 est un monétaire
moY4 est un monétaire
 
moXC est un monétaire
moYC est un monétaire
 
moXT est un monétaire
moYT est un monétaire
 
nCouleurFond est un entier
nCouleurTexte est un entier
 
moAngle est un monétaire
moMargeExt est un monétaire
moEpaisseur est un monétaire
 
moMargeExt = 1
moEpaisseur = 10
 
moX1 = moMargeExt
moY1 = moMargeExt
 
moX2 = IMG_Jauge..Largeur - (2 * moMargeExt)
moY2 = IMG_Jauge..Hauteur - (2 * moMargeExt)
 
moXC = ((moX2 - moX1) / 2)
moYC = ((moY2 - moY1) / 2)
 
moXT = moXC - (moProgresse = 100 ? 60 SINON (moProgresse < 10 ? 40 SINON 50))
moYT = moYC - 15
 
moX4 = moXC
moY4 = moY2
 
nCouleurTexte = BleuFoncé
 
SELON moProgresse
	CAS < 0
		moX3 = -1
		moY3 = -1
		nCouleurTexte = OrangeFoncé
 
	CAS = 0
		moX3 = -1
		moY3 = -1
 
	CAS <= 25
		moAngle = (moProgresse * 90 ) / 25		
		moX3 = moXC - ((moXC - moX1) * Sinus(moAngle))
		moY3 = moYC + ((moYC - moY1) * Cosinus(moAngle))
 
	CAS <= 50
		moAngle = ((moProgresse - 25) * 90 ) / 25		
		moX3 = moXC - ((moXC - moX1) * Cosinus(moAngle))
		moY3 = moYC - ((moYC - moY1) * Sinus(moAngle))
 
	CAS <= 75
		moAngle = ((moProgresse - 50) * 90 ) / 25		
		moX3 = moXC + ((moXC - moX1) * Sinus(moAngle))
		moY3 = moYC - ((moYC - moY1) * Cosinus(moAngle))
 
	CAS < 100
		moAngle = ((moProgresse - 75) * 90 ) / 25		
		moX3 = moXC + ((moXC - moX1) * Cosinus(moAngle))
		moY3 = moYC + ((moYC - moY1) * Sinus(moAngle))
 
	CAS = 100		
		moX3 = moX4
		moY3 = moY4
 
	CAS > 100
		moX3 = moX4
		moY3 = moY4
		nCouleurTexte = RougeClair
 
	AUTRE CAS
		moX3 = -1
		moY3 = -1
FIN
 
nCouleurFond = RGB(RGBRed(MaFenêtre..CouleurFond) - 10, RGBGreen(MaFenêtre..CouleurFond) - 10, RGBBlue(MaFenêtre..CouleurFond) - 10)
 
dDébutDessin(IMG_Jauge,dEffacer)
dChangeMode(IMG_Jauge,dessinAntiAliasing)
dCercle(IMG_Jauge,moX1-moMargeExt,moY1-moMargeExt,moX2+moMargeExt,moY2+moMargeExt, nCouleurFond, nCouleurFond)
SI moX3 >= 0 ALORS dPortion(IMG_Jauge,moX1,moY1,moX2,moY2,moX3,moY3,moX4,moY4,BleuClair, BleuClair)
dCercle(IMG_Jauge,moX1+moEpaisseur,moY1+moEpaisseur,moX2-moEpaisseur,moY2-moEpaisseur, MaFenêtre..CouleurFond, MaFenêtre..CouleurFond)
 
dPolice(IMG_Jauge,"Tahoma", 22, iGras)
dTexte(IMG_Jauge, moXT, moYT, NumériqueVersChaîne(moProgresse, "3,1F") + " %", nCouleurTexte)
 
 
IMG_Jauge..Note = moProgresse