B4J Library [B4X] [XUI] xGauges and xGaugesRect Classes and Libraries

klaus · Nov 2, 2018

The xGauges and xGaugesRect Class do also exist as a B4X libary.
The xGauges.b4xlib, xGaugesRect.b4xlib, xGauges.xml and the xGaugesRect.xml files are attached.
You need to copy the xGauges.b4xlib and / or the xGaugesRect.b4xlib files to the AdditionlLibraries\B4X folder!
Don’t copy the xGauges.xml nor the xGaugesRect.xml file to the AdditionalLibraries folder, copy them in another folder for all b4xlib xml files.
Example: AdditionlLibraries\B4XlibXMLFiles
The xGauges.xml and the xGaugesRect.xml file are for help purposes and are useful with the B4X Help Viewer or the B4XObjectBrowser.
The xGauges.xml and the xGaugesRect.xml file were generated with this tool: b4xlib - XML generation

Current versions:
xGauges.b4xlib Version 2.1
xGaugesRect.b4xlib Version 1.3

Having seen this thread fuel gauge, it challenged me and I wrote this CustomView xGauges Class.
It works on all three products: B4A, B4i and B4J.
The xGauges.bas and xGaugesRect files are located in the B4J project and shared, relative link, in B4A and B4i.
The code is exactly the same, one class file, for all three platforms.

Demo programs for all three platforms and for both libraries are added.
Tested on PC, Android Samsung S6 and iPhone 6.
The shadows in the rectangular gauges look better on the devices than on the animated gif.

EDIT: 2025.08.25 Version 2.1 / version 1.3
Amended height error reported HERE.
Only the xGauges.b4xlib and the xGauges.xml files have been changed

EDIT: 2025.06.09 Version 2.0 / version 1.3
Only the xGaugesRect customview has changed.
Added CursorValueChanged event
Added a third cursor
Added the CursorStep property

EDIT: 2024.07.04 Version 2.0 / version 1.2
Added Parent property
Amended problem with ReInitialize

EDIT: 2022.07.22 Version 1.9 / version 1.1
'Set the corner radius bigger than the border width when corner radius > 0. bug report HERE.

EDIT: 2021.08.22 Version 1.8
Added BorderWidth, BorderColor and CorenerRadius properties.
Added ScaleMidLimit2StartPerCent, ScaleMidLimit2SweepPerCent, ScaleMidLimit2Color properties.
Added gradient colors for the limit zones.
Changed setValueMin and setValueMax from Int to Double.
Added new xGaugesRect library

EDIT: 2020.06.25 Version 1.7
Updated the Tag property according to Erels recommendation:
https://www.b4x.com/android/forum/t...lv-or-any-other-container.117992/#post-738358
Version 1.6
Added Click and LongClick events
Added BringToFront, SendToBack and asView methods

EDIT: 2019.03.12 Version 1.5
Amended cScaleMidLimitColor initialize value from 526 to 255
Amended setScaleColor missing reinitialize call routine
Amended Rotate Needle equation correction
Improved scale custom angles management
Added cCustomScaleMinAngle and cCustomScaleMaxAngle variables
Added NeedleON property shows or hides the needle

Version 1.4
Amended NeedleBitmapFileName designation in custom properties
Amended NeedleBitmapFileName set in the code for a Gaige added in the Designer
Amended custom angles problems.
Added RemoveView and ReInitialize methods

EDIT: 2018.12.20 Version 1.3
Amended problem reported in post#11.

EDIT: 2018.12.14 Version 1.2
Amended problem with GaugeTitle and GaugeUnit not updated in code.

xGauges

Author: Klaus CHRISTL
Version: 2.1

xGauges
- Functions:
  - AddToParent (Parent As Object, Left As Int, Top As Int, Width As Int) As String
    adds the xGauge to the Parent view.
    the parent object can be a B4XView or
    an Activity or a Panel in B4A, a Panel in B4i or a Pane in B4J
    there is no Height property, because the Height = Width
  - AsView As B4XView
    Returns the base panel of the gauge as B4XView
  - BringToFront
  - Initialize (Callback As Object, EventName As String) As String
    Initializes a xGauge
    Callback is the calling module
    EventNam3 is the generic event name, not used
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - ReInitialize
    Reinitializes the gauge
  - RemoveView
    Removes the xGauge from its parent view
  - SendToBack
- Properties:
  - BackgroundColor As Int
    sets or gets the BackgroundColor
    it must be an xui.Color
    Example: xGauge1.BackgroundColor = xui.Color_White
  - BorderColor As Int
    sets or gets the BorderColor property
    it must be an xui.Color
    Example: xGauge1.BorderColor = xui.Color_Gray
  - BorderWidth As Int
    sets or gets the BorderWidth
    Example: xGauge1.BorderWidth = 5
  - CornerRadius As Int
    sets or gets the CornerRadius property
    Example: xGauge1.CornerRadius = 5
  - CustomScaleEndAngle As Int
    sets or gets the CustomScaleEndAngle
    Start angle for Custom scale angle gazge type.
    trigonometric angles 0 at 3 o'clock
    positive counter clockwise
  - CustomScaleStartAngle As Int
    sets or gets the CustomScaleStartAngle
    Start angle for Custom scale angle gazge type.
    trigonometric angles 0 at 3 o'clock
    positive counter clockwise
  - GaugeTitle As String
    sets or gets GaugeTitle property
  - GaugeType As String
    sets or gets GaugeType property
    possible values 90° Top, 180°, 270°, 90° Left, Custom scale angles
    for Custom scale angles you can set the start and the end angle
  - GaugeUnit As String
    sets or gets GaugeUnit property
  - HalfTicks As Boolean
    gets or sets if half (intermedaite) tick are required
    one tick between two main ticks
  - Left As Double
    sets or gets the Left property
  - MainTickNumber As Int
    gets or sets the number of main ticks
    for a scale from 0 to 10 then number must be 11
  - NeedleBitmapFileName As String
    sets or gets the NeedleBitmapFileName
    enter 'no file' without the quotes to use the default needle
  - NeedleColor As Int
    sets or gets the NeedleColor
    it must be an xui.Color
    Example: xGauge1.NeedleColor = xui.Color_Gray
  - NeedleON As Boolean
    sets or gets the NeedleON property
    shows or hides the needle
    default value True
  - Parent As B4XView
    gets the Parent view
    read only
  - ScaleColor As Int
    sets or gets the ScaleColor
    it must be an xui.Color
    Example: xGauge1.ScaleColor = xui.Color_Black
  - ScaleHighLimitColor As Int
    sets or gets the ScaleHighLimitColor
    it must be an xui.Color
    Example: xGauge1.ScaleHighLimitColor = xui.Color_Red
  - ScaleHighLimitPerCent As Double
    sets or gets the ScaleHighLimitPerCent property
    it is drawn from the given percent to the scale end
    given in pecent of the scale
  - ScaleLowLimitColor As Int
    sets or gets the ScaleLowLimitColor
    it must be an xui.Color
    Example: xGauge1.NeedleColor = xui.Color_RGB(526, 165, 0)
  - ScaleLowLimitPerCent As Double
    sets or gets the ScaleLowLimitPerCent property
    given in pecent of the scale
    it drawn from the scale start to the given percent
  - ScaleMidLimit2Color As Int
    sets or gets the ScaleMidLimit2Color
    it must be an xui.Color
    Example: xGauge1.ScaleMidLimitColor = xui.Color_RGB(526, 165, 0)
  - ScaleMidLimit2Colors As Int()
    sets or gets the ScaleMidLimit2Color
    it must be an Array of xui.Color
    Example: xGauge1.ScaleMidLimit2Color = Array As Int (xui.Color_RGB(255, 165, 0), xui.Color_Red)
  - ScaleMidLimit2StartPerCent As Double
    sets or gets the ScaleMidLimit2StartPerCent property
    it is drawn from the given start percent over the sweep percent
    given in pecent of the scale
  - ScaleMidLimit2SweepPerCent As Double
    sets or gets the ScaleMidLimit2SweepPerCent property
    it is drawn from the given start percent over the sweep percent
    given in pecent of the scale
  - ScaleMidLimitColor As Int
    sets or gets the ScaleMidLimitColor
    it must be an xui.Color
    Example: xGauge1.ScaleMidLimitColor = xui.Color_RGB(526, 165, 0)
  - ScaleMidLimitColors As Int
    sets or gets the ScaleMidLimitColors
    it must be an Array xui.Color
    Example: xGauge1.ScaleMidLimitColors = Array As Int (xui.Color_RGB(255, 165, 0), xui.Color_Red)
  - ScaleMidLimitStartPerCent As Double
    sets or gets the ScaleMidLimitStartPerCent property
    it is drawn from the given start percent over the sweep percent
    given in pecent of the scale
  - ScaleMidLimitSweepPerCent As Double
    sets or gets the ScaleMidLimitSweepPerCent property
    it is drawn from the given start percent over the sweep percent
    given in pecent of the scale
  - SmallTicksNumber As Int
    gets or sets the SmallTickNumber property
    SmallTicksNumber small ticks will drawn between two main ticks
    for a decimal scale SmallTickNumber = 10, eventhough only 9 ticks are seen, the 10th is hidden by the main tick
  - Tag As Object
  - TickText As String
    gets or sets the texts for the ticks
    the values between two || are displayed equally spaced on the scale
    Example: 0|20|40|60|80|100 or E|1/2|F
  - Top As Double
    sets or gets the Top property
  - Value As Double
    sets the value of the gauge
    the value must be between ValueMin and ValueMax
  - ValueMax As Double
    gets or sets the max value of the gauge
  - ValueMin As Double
    gets or sets the min value of the gauge
  - Width As Double
    sets or gets the width of the gauge
    there is no height property because the height is equal to the width

xGaugesRect only the specific Functions and Properties are shown below.

Author: Klaus CHRISTL
Version: 1.3

xGaugesRect
- Functions:
  - Cursor1Color As Int
    sets or gets the Cursor1Color property
    it must be an Array of xui.Color
  - Cursor1ON As Boolean
    sets or gets the Cursor1ON property
  - Cursor1Value As Double
    sets or gets the Corner1Value
    the value must be between ValueMin and ValueMax
  - Cursor2Color As Int
    sets or gets the Cursor2Color property
    it must be an Array of xui.Color
  - Cursor2ON As Boolean
    sets or gets the Cursor2ON property
  - Cursor2Value As Double
    sets or gets the Corner2Value
    the value must be between ValueMin and ValueMax
  - CursorColor As Int
    sets or gets the Cursor2Color property
    it must be an Array of xui.Color
  - CursorON As Boolean
    sets or gets the CursorON property
  - CursorValue As Double
    sets or gets the CornerValue
    the value must be between ValueMin and ValueMax
  - CursorStep As Double
    sets or gets the CursorStep property
    0 = no step

klaus · May 24, 2025

Je t'ai envoyé mon adresse e-mail privée par message personnel.

sultan87 · May 25, 2025

sultan87 said:
Bonsoir Klaus
mon fichier .zip semble trop gros
comment faire pour que vous puissiez le voir
Pierre

Bonsoir Klaus
j'ai éliminé les fichiers inutiles
ci-joint mon projet
Pierre

sultan87 · May 25, 2025

sultan87 said:
Bonsoir Klaus
j'ai éliminé les fichiers inutiles
ci-joint mon projet
Pierre

je n'ai pas reçu votre adresse email personnelle sur sultan87@free.fr ou p.m.chevalier@free.fr
bonne soirée

klaus · May 26, 2025

sultan87 said:
je n'ai pas reçu votre adresse email personnelle sur sultan87@free.fr ou p.m.chevalier@free.fr

Je l'ai envoyée par mail privé dans le forum, tu dois le trouver ici:

J'ai regardé ton programme, mais il manque un module Sous_Prog et un module Attente !?
Il y a aussi un object WhorlView, je ne connais pas.

En ouvrant le Designer, je reçois un message que les fichiers layout sont manquants.
Je ne peux donc rien tester.

sultan87 · May 26, 2025

Merci Klaus
j'installe le .zip sur mon ordinateur
je corrige et je t'envoie un nouveau .zip sans anomalie
Pierre

sultan87 · May 29, 2025

Bonjour Klaus
je pense avoir trouver le pourquoi l'aiguille reste positionnée sur 0
je change la couleur de l'aiguille en fonction de la température

B4X:

Sub Color_Needle(Temp As Double)
    If Temp <= 18 Then
        lbltemp.TextColor = Colors.blue
        Thermometre_Rond.NeedleColor = Colors.Blue
    End If
    If Temp > 18 And Temp <= 25 Then
        lbltemp.TextColor = Colors.Green
        Thermometre_Rond.NeedleColor = Colors.Green
    End If
    If Temp > 25 Then
        lbltemp.TextColor = Colors.Red
        Thermometre_Rond.NeedleColor = Colors.Red
    End If
End Sub

l'instruction

B4X:

Thermometre_Rond.NeedleColor = Colors.Blue

active le sous programme

B4X:

Public Sub setNeedleColor(NeedleColor As Int)
    cNeedleColor = NeedleColor
    ReInitialize
End Sub

avant la ligne de code 'ReInitialize' la flèche est bien postionnée
à l'exécution de 'ReInitialize' la flèche se repositionne sur 0

j'ai mis en commentaire cette ligne de code et cela fonctionne

est ce la solution

je regarde sur les gauges H et V

Pierre

sultan87 · May 29, 2025

Bonjour Klaus
je pense avoir trouver le pourquoi l'aiguille reste positionnée sur 0
je change la couleur de l'aiguille en fonction de la température

B4X:

Sub Color_Needle(Temp As Double)
    If Temp <= 18 Then
        lbltemp.TextColor = Colors.blue
        Thermometre_Rond.NeedleColor = Colors.Blue
    End If
    If Temp > 18 And Temp <= 25 Then
        lbltemp.TextColor = Colors.Green
        Thermometre_Rond.NeedleColor = Colors.Green
    End If
    If Temp > 25 Then
        lbltemp.TextColor = Colors.Red
        Thermometre_Rond.NeedleColor = Colors.Red
    End If
End Sub

l'instruction

B4X:

Thermometre_Rond.NeedleColor = Colors.Blue

active le sous programme

B4X:

Public Sub setNeedleColor(NeedleColor As Int)
    cNeedleColor = NeedleColor
    ReInitialize
End Sub

avant la ligne de code 'ReInitialize' la flèche est bien postionnée
à l'exécution de 'ReInitialize' la flèche se repositionne sur 0

j'ai mis en commentaire cette ligne de code et cela fonctionne la flèche est bien positionnée mais la couleur ne change pas

sur les gauges H et V le signet est bien positionné et la couleur est correcte

Pierre

klaus · May 29, 2025

Quel est le code lorsque tu changes la valeur avec Thermometre_Rond.Value = Temp ?
J'ai essayé avec ce code, et ça fonctionne.

B4X:

    If Value < 80 Then
        xGaugeRectV.NeedleColor = xui.Color_Green
        xGauge2.NeedleColor = xui.Color_Green
    Else
        xGaugeRectV.NeedleColor = xui.Color_Red
        xGauge2.NeedleColor = xui.Color_Red
    End If
    xGauge2.Value = Value
    xGaugeRectV.Value = Value

If faut changer la couleur avant de changer la valeur.

sultan87 · May 29, 2025

le code utilisé est dans le sub Sub Color_Needle(Temp As Double) vue plus haut
effectivement je change la valeur avant de changer la couleur
je suis tes conseils et j'essaye
Pierre

sultan87 · May 29, 2025

sultan87 said:
le code utilisé est dans le sub Sub Color_Needle(Temp As Double) vue plus haut
effectivement je change la valeur avant de changer la couleur
je suis tes conseils et j'essaye
Pierre

Merci Klaus
j'ai appliqué tes conseils et cela fonctionne correctement avec xgauge3
sur xgaugerecth et xgaugerectv il est possible de déplacer les 2 curseurs
je voudrais récupérer la valeur de ces curseurs lorsque je les déplace
pourrait on également déplacer le curseur de température manuellement
encor merci de ton aide précieuse
Pierre

klaus · May 30, 2025

sultan87 said:
je voudrais récupérer la valeur de ces curseurs lorsque je les déplace

Ce sera fait.

sultan87 said:
pourrait on également déplacer le curseur de température manuellement

De quel curseur parles-tu ?
De l'aiguille qui indique la valeur ?
Si c'est ça, je ne vois pas quelle en serait l'utilité.

sultan87 · May 30, 2025

Merci Klaus
oui c'est le curseur qui indique la valeur
tout simplement pouvoir modifier ces 3 curseurs de la mème façon et ne plus avoir les bouton + et -
Pierre

klaus · May 31, 2025

Désolé, mais je ne comprends pas pourquoi tu veux déplacer l'aiguille avec les doigts ?
Je fais une différence entre les deux curseurs indiquant des limites ou valeurs de référence et l'aiguille indiquant la valeur actuelle d'une mesure.
C'est comme sur un appareil électromécanique, où on peut déplacer manuellement des curseurs mais pas l'aiguille.
Pour ajouter des fonctions dans une bibliothèque, je dois être convaincu de leur utilité.
Pour les curseurs c'est bon, j'ai déjà ajouté un évènement qui est généré lors du déplacement d'un curseur.

sultan87 · May 31, 2025

Bonjour Klaus
ce n'est pas déplacer l'aiguille mais le curseur sur gauge H ou V
merci pour la gestion des évènements générés lors du déplacement d'un curseur
comment faire pour les utiliser
je gère à distance le chauffage avec un module commercialisé par les italiens
ce module intercepte des sms qui permet de dire quelle température on veut dans la maison
si la température de la maison est inférieure à la température le module Comelec met en route la chaudière
jusqu'à présent dans mon appli B4A j'avais 3 modules
1 - modification de la température demandée
2 - modification de la température mini
3 - modification de la température maxi

les gauges H ou V permettent de modifier les températures Mini et Maxi
faire la mème chose pour la température me permettrait de n'avoir qu'un seul module au lieu de trois
j'espère m’être fait comprendre
je te joins le tuto du Comelec

merci de ton aide

sultan87 · Jun 3, 2025

Bonjour Klaus
tu me disais
Pour les curseurs c'est bon, j'ai déjà ajouté un évènement qui est généré lors du déplacement d'un curseur.
comment faire pour l'utiliser
je vois dans tes messages précédents sultan87 said. comment faire la mème chose pour reprendre ce que tu as dit précédemment
Pierre

klaus · Jun 3, 2025

Désolé, mais j'ai raté ton message de samedi.

Pour les curseurs j'ai ajouté des évènements, mais pas encore publié.
Ci-joint, la bibliothèque version 1.3 avec les évènements.

Le code pour l'évènement lorsqu'un des curseurs est déplacé :

B4X:

Private Sub xGaugeRectV_CursorValueChanged(CursorIndex As Int, CursorValue As Double)
    Log("Cursor : " & CursorIndex & " value = " & CursorValue)
End Sub

Sinon tu peux accéder aux valeurs des curseurs avec ces propriétés :

B4X:

    ValeurCurseur1 = xGaugeRectV.CursorValue
    ValeurCurseur2 = xGaugeRectV.Cursor2Value

sultan87 said:
faire la mème chose pour la température me permettrait de n'avoir qu'un seul module au lieu de trois

Je n'ai toujours pas bien compris ton problème, avec trois modules.
C'est quoi ces trois modules ?
Les GaugeV et GaugeH ne sont que des afficheurs et ne régulent rien.
Les deux curseurs ne sont que des indicateurs visuel pour des limites.
Si tu veux une 3ème valeur ça veut dire que tu aimerais un troisième curseur.
Et ça ne fait, en principe, pas partie d'un appareil d'affichage.

Si j'ai bien compris, sur le module Comelec tu peux définir 3 températures.
1. Température désirée
2. Température min.
3. Température max.

Est-ce que ça veut dire que tu définis la température désirée et s'il y a un problème avec le chauffage tu reçois une alarme si la température effective est en dessous ou en dessus d'une des limites ?

sultan87 · Jun 3, 2025

merci Klaus
Le code pour l'évènement lorsqu'un des curseurs est déplacé fonctionne bien
je n'avais pas optimisé mon projet et j'avais donc créé 3 modules chacun modifiant les températures demandée, maxi, mini
je modifie le projet pour n'avoir qu'un module
sur xgaugesRectV ou xgaugesRectH je récupère les valeurs des curseurs pour les températures mini et maxi
je voudrais donc faire la mème chose avec le curseur qui me permettrai de modifier la température demandée(défini avec la propriété Needle)
Pierre

sultan87 · Jun 3, 2025

lorsqu'on déplace les curseurs les valeurs changent donc une multitude de log ou de récupération de valeur
serait il possible de récupérer la valeur seulement lorsqu'on lâche le curseur et peut être lui donner un pas de déplacement ???

klaus · Jun 3, 2025

sultan87 said:
lorsqu'on déplace les curseurs les valeurs changent donc une multitude de log ou de récupération de valeur
serait il possible de récupérer la valeur seulement lorsqu'on lâche le curseur

Oui, bonne idée.
Fait pour la prochaine mise à jour.
J'ai finalement ajouté un 3ème curseur qui satisfait tes besoins.
Modifier l'aiguille n'a pas de sens pour moi.
Je trouve aussi intéressant d'ajouter un pas pour le déplacement des curseurs.
Mais ça demande un peu plus de réflexion sur comment l'implémenter de manière 'universelle' pour toutes les configurations possibles.
Laisse moi un peu de temps.
Actuellement je suis assez occupé, mon épouse est à l’hôpital, fémur cassé, don je m'occupe de tout.

sultan87 · Jun 3, 2025

ok merci
ce n'est pas urgent
comment faire l'encart sultan87 said: qui reprend une partie des messages précédents
bon rétablissement pour ton épouse
Pierre

B4J Library [B4X] [XUI] xGauges and xGaugesRect Classes and Libraries

Attachments

Expert

Active Member

Attachments

Active Member

Expert

Active Member

Active Member

Active Member

Expert

Active Member

Active Member

Expert

Active Member

Expert

Active Member

Attachments

Active Member

Expert

Attachments

Active Member

Active Member

Expert

Active Member

Privacy & Transparency

Privacy & Transparency