Discussion :

[Souri84]

Bonjour à tous,

Est-il possible pour un "débutant avancé" de créer une jauge comme celle-ci ?

ici

En fait, au niveau du design, ce doit sans doute être une picturebox. Mais par contre, je ne vois pas comment faire bouger l'aiguille... auriez vous des tutoriaux sympas pour apprendre à créer ceci ?

D'avance merci pour votre réponse,

Thibaut

[Pol63]

ca doit etre faisable, il faut créer un controle spécial

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
 
Public Class Jauge
    Inherits Control
 
 
    Private _MinValue As Decimal = 0 ' définition de la valeur par défaut
    Public Property MinValue() As Decimal
        Get
            Return _MinValue
        End Get
        Set(ByVal value As Decimal)
            _MinValue = value
            CalcAngle()
        End Set
    End Property
 
    Private _MaxValue As Decimal = 100 ' définition de la valeur par défaut
    Public Property MaxValue() As Decimal
        Get
            Return _MaxValue
        End Get
        Set(ByVal value As Decimal)
            _MaxValue = value
            CalcAngle()
        End Set
    End Property
 
    Private _CurrentValue As Decimal
    Public Property CurrentValue() As Decimal
        Get
            Return _CurrentValue
        End Get
        Set(ByVal value As Decimal)
            _CurrentValue = value
            CalcAngle()
        End Set
    End Property
 
 
    Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
        ' peut etre mettre un try catch ici, vu qu'il va y avoir des calculs, on est jamais à l'abri d'un bug
        ' déssiner le fond sans l'aiguille (contenu dans une image par exemple)
        ' déssiner l'aiguille en partant du centre vers un point donné par l'angle
    End Sub
 
    Private _Angle As Decimal
 
    Private Sub CalcAngle()
        Try
            _Angle = ' calculer l'angle par rapport à l'angle mini, l'angle maxi, et le pourcentage entre currentvalue et le minvalue
            Me.Invalidate() ' déclenche la demande de paint
        Catch ex As Exception
            ' enregistrer l'erreur
        End Try
    End Sub 
 
End class

les propriétés min et max on met la fourchette de valeur (par défaut ici 0 et 100)
ensuite en modifiant currentvaleur ca recalcule l'angle de l'aiguille et ca demande le redessin du controle
le dessin du controle dessine le fond avec la jauge et l'aiguille

je te laisse écrire les formules mathématiques pour calculer l'angle et trouver les points nécessaires à l'aiguille
dans un premier temps, fait un aiguille avec e.graphics.Drawline
ensuite une fois que ca marche tu pourras écrire le code pour une aiguille plus jolies (à base de drawpolygon et de fillcircle pour le milieu par exemple)

pour l'image de fond, tu peux la mettre en ressources dans ton projet, et il faut ensuite faire e.Graphics.drawimage
ou alors la déssiner aussi avec des draw
il faut aussi calculer la taille de l'image, car en théorie le controle est redimensionnable
il serait peut etre aussi pas mal d'avoir un affichage d'erreur, genre si ca plante pendant le calcul et/ou qu'on te donne des valeurs étranges dans les propriétés et dans ce cas ne pas afficher l'aiguille mais un message par exemple (e.graphics.drawstring("Erreur",coordonnées))


une fois la classe écrite, dans un fichier à part, tu compiles et normalement le controle apparait dans la boite à outils
il ne reste plus qu'à le poser et tester


après le meme controle en encore plus avancé, c'est d'avoir plusieurs types de jauges graphiquement, de pouvoir définir des plages de couleurs (car là le rouge et le vert sont figés) etc...
ca reste simple, il suffit de rajouter des propriétés et de faire le dessin des jauge par code plutot que de poser une image

[Souri84]

Merci pour la réponse,

Je vais étudier tout ça !

[Souri84]

Bon, j'ai réussi à faire l'aiguille. Il y a encore des choses qui ne vont pas mais dans l'ensemble ça colle.

Par contre mon souci maintenant, c'est que mon image de fond (qui représente le compteur masque l'aiguille que je créé avec DrawLine...) alors que normalement, comme c'est un background, l'aiguille devrait bien être au-dessus

Voici mon petit bout de code (débutant) :

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
 
        AngleDecalage = 0
 
        'centre de la picture box
        centreX = PictureBox1.ClientRectangle.Width / 2
        centreY = PictureBox1.ClientRectangle.Height / 2
 
        'calcul de l'ange
        Angle = (360 / Vmax) * VActuelle
        Angle = Angle + 90 + AngleDecalage
        Angle = 3.1415926 / 180 * Angle
 
 
        'Si ValeurActuelle > ValeurMax alors Angle = (3,14 / 180) * 360 / Vmax * Vmax + 90 + AngleDecalage 
        If VActuelle > Vmax Then
            Angle = ((3.14 / 180) * (360 + 90 + AngleDecalage))
        End If
 
        'points X et Y
        AngleX = centreX + System.Math.Cos(Angle) * TailleAiguille '
        AngleY = centreY + System.Math.Sin(Angle) * TailleAiguille
 
 
        'Je dessine le trait
        Dim Crayon As Pen = New Pen(Color.Red, 1)
        Crayon.DashStyle = Style
        Dim g As Graphics = PictureBox1.CreateGraphics
        g.Clear(PictureBox1.BackColor)
        Fond = New Bitmap(My.Computer.FileSystem.SpecialDirectories.Desktop & "\Test.PNG")
        PictureBox1.BackgroundImage = Fond
        g.DrawLine(Crayon, centreX, centreY, AngleX, AngleY)
        g.Flush()
        Crayon.Dispose()
        g.Dispose()

Quelqu'un peut-il m'aider ?

[Pol63]

Code :

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

1
2
Fond = New Bitmap(My.Computer.FileSystem.SpecialDirectories.Desktop & "\Test.PNG")
        PictureBox1.Image = Fond

ici tu vas créer un objet bitmap à chaque redessin donc c'est pas optimal, une seule fois suffirait

tu peux mettre l'image dans une variable shared de ta classe vu que ca sera toujours la meme

tu peux ensuite la dessiner avant de dessiner l'aiguille via e.Graphics.Drawimage
pour la stretcher à la taille du controle :

Code :

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

1
2
3
dim srcRect as new rectangle(0,0,monimage.width,monimage.height)
dim destRect as new rectangle(0,0,me.width,me.height)
e.graphics.Drawimage(monimage,srcrect,destrect)

si Drawimage te demande d'autres paramètre je te laisse improviser ^^

[Souri84]

Merci, je regarderai cela lundi après midi car là je suis en Weeeeeek -end !! Qui a dit qu'il était tôt ?

Encore merci,

Thibaut