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

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.xmland file is for help purposes and is useful with the B4X Help Viewer or the B4XObjectBrowser.
The xGauges.xml and the xGaugesRect.xmland file were generated with this tool: b4xlib - XML generation

Current versions:
xGauges.b4xlib version 1.9
xGaugesRect.b4xlib cversion 1.1


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.

1629631132350.png


xGauges.gif


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: 1.9
  • 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
      • 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.1
  • xGaugesRect
    • Functions:
      • 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
 

Attachments

  • xGauges.gif
    xGauges.gif
    481.5 KB · Views: 680
  • 1629631106166.png
    1629631106166.png
    14.8 KB · Views: 388
  • xGaugesDemo_V1_9.zip
    214.7 KB · Views: 287
  • xGauges.b4xlib
    7.9 KB · Views: 269
  • xGaugesRect.b4xlib
    8.1 KB · Views: 260
  • xGauges.xml
    18.1 KB · Views: 245
  • xGaugesRect.xml
    19.1 KB · Views: 238
Last edited:

Scantech

Well-Known Member
Licensed User
Longtime User
xGauge1.NeedleBitmapFileName = "needlename" in runtime will not work with gauge being added in designer. It probably works by using .iniGauge at runtime? I have not tried it.

Is there a way to delete the gauges?

Thanks for your hard work.
 
Last edited:

Scantech

Well-Known Member
Licensed User
Longtime User
Klaus, there seems to be a glitch with CustomStartAngle and CustomEndAngle. I can't figure it out right now. See attached file. Play around with the Custom Angle Sliders.
 

Attachments

  • xgauges.zip
    28.1 KB · Views: 379

klaus

Expert
Licensed User
Longtime User
xGauge1.NeedleBitmapFileName = "needlename" in runtime will not work with gauge being added in designer.
I see it too.
Amended for the next update.

To remove the view add this routine in the class:
B4X:
Public Sub RemoveView
    pnlGauge.RemoveViewFromParent
End Sub
Added for the next update.

there seems to be a glitch with CustomStartAngle and CustomEndAngle.
Yes, depending on the angles there is a problem.
Will look at it.
 
Last edited:

Scantech

Well-Known Member
Licensed User
Longtime User
Maybe you can implement an example attached with 270 degree scale with Bevel. Changing the color of bevel is not added at this time. You need Dialogs library to run this app.
 

Attachments

  • xGauges.zip
    30.6 KB · Views: 310

klaus

Expert
Licensed User
Longtime User
Can you test the attached version 1.4.
Ammended the problems you mentioned.
Added two methods: RemoeView and ReInitialize.
I have not added the Bevel, have to think about it if I will add it.
 

Attachments

  • xGauges.bas
    31.3 KB · Views: 355

Scantech

Well-Known Member
Licensed User
Longtime User
Can you test the attached version 1.4.
Ammended the problems you mentioned.
Added two methods: RemoeView and ReInitialize.
I have not added the Bevel, have to think about it if I will add it.

Some of it are fixed.

CustomScaleStartAngle (-240 To 360) and CustomScaleEndAngle (-360 To 0) are not drawn correctly.

I spotted another glitch with Gauge.ValueMin and Gauge.ValueMax. It only works correctly with 0 to 100.

Use attached file for futher corrections. 4 ammended (see comments)

I think i fixed the customangles. All that was needed for all angles is these codes. But -180 to -136 Start Angles has missing bottom 30% images. I think its related to cHeight or an object in front of the image problem. Weird?

Update: it is related to cHeight. I disabled some of the codes that are not needed. See attached for full details.
B4X:
Else If cStartAngle < -240 Or cEndAngle > 60 Then
                ScaleStroke = cWidth / ScaleStrokeDivider
                RadiusInner = 0.41 * cWidth
                RadiusHalfTick = 0.45 * cWidth
                RadiusSmallTick = 0.435 * cWidth
                RadiusTick = 0.48 * cWidth
                RadiusScale = 0.35 * cWidth
 
                NeedleCenterX = cWidth / 2
                NeedleCenterY = cWidth / 2
                NeedleHeight = 2 * RadiusInner
                NeedleWidth = NeedleHeight / 340 * 27
 
                GaugeTextX = cWidth / 2
                GaugeTextY = 0.7 * cWidth
                DeltaTextBottom = 0.6 * ScaleTextHeight
                cNeedleIndex = 0

My impression for CustomAngles is all properties above are the same at any angles. It works on all possible angles. Maybe you had a different vision.
 

Attachments

  • xGauges.bas
    31.7 KB · Views: 334
Last edited:

Scantech

Well-Known Member
Licensed User
Longtime User
"90° Left" and "270°" has an issue as well. It is not drawn correctly. I think it was ok previous version because i was calling this code for every changes
B4X:
xGauge1.RemoveView
xGauge1.AddToParent(pnlGauge, 0, 0, pnlGauge.Height)

To duplicate the issue do this code below

B4X:
xGauge1.GaugeType = "90° Left"
xGauge1.reInitialize

If i don't call reInitialize then "90° Left" draws correctly.

Also, you can duplicate "270°" issue by selecting "90° Left" and "270°" without calling reInitialize.

Im sticking with this code to work properly. reInitialize method is probably the issue.
B4X:
xGauge1.RemoveView
xGauge1.AddToParent(pnlGauge, 0, 0, pnlGauge.Height)

Update: I think it is fixed by disabling codes that are irrelavent (cHeight problem)
 
Last edited:

klaus

Expert
Licensed User
Longtime User
Attached you find an updated version.
Amended the bugs you reported.
I improved the custom scale angle management, cHeight problem and others.
I made some minor changes in your test program.

Thank you for testing the program deeply!
 

Attachments

  • xGauges.zip
    30.7 KB · Views: 344

Scantech

Well-Known Member
Licensed User
Longtime User
I am little confused with the New Angle Management. It appears you have blended all of the Gaugetype Design into the Custom Angle Management. I was playing with the sliders and the value of the opposite slider is not retained while adjusting. I am looking into this.

So, the CustomStartAngle have ranges from -360 to 0 and CustomEndAngle -180 to 180?
 
Last edited:

klaus

Expert
Licensed User
Longtime User
I am little confused with the New Angle Management. It appears you have blended all of the Gaugetype Design into the Custom Angle Management.
No, the predefined gauge types are still active and the most useful for me.
For the custom angles, depending on the angle values the gauge size is changed, similar to the predefined gauge types.
So, the CustomStartAngle have ranges from -360 to 0 and CustomEndAngle -180 to 180?
Yes, I find this sufficient.
 

Scantech

Well-Known Member
Licensed User
Longtime User
Klaus, you think you can add a Gauge Container that will display eg..On/Off without the needle? Thanks for your hard work.
 

klaus

Expert
Licensed User
Longtime User
The xGauges CustomView and b4xlib has been updated in the first post:
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
 

Scantech

Well-Known Member
Licensed User
Longtime User
Just FYI. I did some performance testing and i came to conclusion that Reinitialize should be called after configuration has been completed and not by changing the configuration parameters. With the current Reinitialize routine, i loaded 75 gauges in 14 seconds. It takes long time because it is redrawing the gauge multiple times from changing configurations. Then, i disabled the Reinitialize Event and added the Reinitialize2 with all the current codes from Reinitialize event. Then, i make the Reinitialize2 call every time after all the configuration parameters are set. 75 gauges loaded up in 3 seconds with this procedure.

I think reinitialize should be removed from configuration calls and just allow us to determine the call. Just my opinion.

Update: nevermind. it works ok the way it is. I was changing configuration after adding the gauge.
 
Last edited:

Scantech

Well-Known Member
Licensed User
Longtime User
Good idea to add these

B4X:
public Sub BringToFront
    pnlGauge.BringToFront
End Sub

public Sub SendToBack
    pnlGauge.SendToBack
End Sub

Private Sub pnlGauge_Click
    If SubExists(mCallBack, mEventName & "_Click") Then
        CallSub(mCallBack, mEventName & "_Click")
    End If
End Sub

Private Sub pnlGauge_LongClick
    If SubExists(mCallBack, mEventName & "_LongClick") Then
        CallSub(mCallBack, mEventName & "_LongClick")
    End If
End Sub

'Good for Drag and Move
public Sub asView As B4XView
        Return pnlGauge
End Sub
 

klaus

Expert
Licensed User
Longtime User
I think reinitialize should be removed from configuration calls and just allow us to determine the call. Just my opinion.
I had this also in mind. But finaly I prefered to add it to the configuration calls, because:
- Normally, the gauges should be added in the Designer, therefore almost no need to change any property.
- If gauges are added in the code the properties should be set set before AddToParent, as you finaly do.
- Therefore there are only a few cases where properties might be changed in the code after the gauges has been displayed.

Your suggestions have been added for the next update.
 

Scantech

Well-Known Member
Licensed User
Longtime User
Is it possible to set Fill type to false in ScaleSweepPercent. That way the background can be used as gradient without interference.

For eg. This

B4X:
        pthScale.InitializeArc(NeedleCenterX, NeedleCenterY, RadiusHalfTick, cStartAngle, LowLimitAngle)
        cvsGauge.DrawPath(pthScale, cScaleLowLimitColor, True, ScaleStroke)
        pthScale.InitializeArc(NeedleCenterX, NeedleCenterY, RadiusInner, cStartAngle - 2, LowLimitAngle + 5)
        cvsGauge.DrawPath(pthScale, cBackgroundColor, True, ScaleStroke)

To
B4X:
        pthScale.InitializeArc(NeedleCenterX, NeedleCenterY, RadiusHalfTick, cStartAngle, LowLimitAngle)
        cvsGauge.DrawPath(pthScale, cScaleLowLimitColor, False, ScaleStroke)

ScaleStroke needs adjustment and it draws a unwanted trace of radius line at the beginning of the arc drawing (a bug? with pthScale?). I can't figure this out. This example will allow the background to have gradient type without interference because it is eliminating the second pthScale(background) drawing.
 
Last edited:

Scantech

Well-Known Member
Licensed User
Longtime User
here is an example setting it to false on fill and removing the second pthScale. Don't know why those lines are there. Might be a bug with xui

Sorry Erel i should of post this in a new thread
 

Attachments

  • gaugedemo.jpg
    gaugedemo.jpg
    46.7 KB · Views: 340
Last edited:

klaus

Expert
Licensed User
Longtime User
ScaleStroke needs adjustment and it draws a unwanted trace of radius line at the beginning of the arc drawing
If I remember well, this was the reason of my code.

Sorry, but I don't understand what exactly you want to do.
 

Scantech

Well-Known Member
Licensed User
Longtime User
I am just waiting patiently for Erel to verify if its an issue with XUI library.
 
Top