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.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.

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

Scantech · Mar 2, 2019

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.

Scantech · Mar 4, 2019

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.

klaus · Mar 4, 2019

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.

Scantech · Mar 5, 2019

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.

klaus · Mar 6, 2019

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.

Scantech · Mar 6, 2019

klaus said:
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.

Scantech · Mar 6, 2019

"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)

klaus · Mar 7, 2019

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!

Scantech · Mar 7, 2019

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?

klaus · Mar 7, 2019

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 · Mar 11, 2019

Klaus, you think you can add a Gauge Container that will display eg..On/Off without the needle? Thanks for your hard work.

klaus · Mar 11, 2019

Not sure what exactly you expect.
I can easily add a NeedleOn property.
You can then put any View above the gauge.

klaus · Mar 12, 2019

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 · Mar 12, 2019

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.

Scantech · Mar 13, 2019

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 · Mar 15, 2019

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 · Mar 29, 2019

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.

Scantech · Mar 30, 2019

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

klaus · Mar 30, 2019

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 · Mar 30, 2019

I am just waiting patiently for Erel to verify if its an issue with XUI library.

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

Attachments

Well-Known Member

Well-Known Member

Attachments

Expert

Well-Known Member

Attachments

Expert

Attachments

Well-Known Member

Attachments

Well-Known Member

Expert

Attachments

Well-Known Member

Expert

Well-Known Member

Expert

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Attachments

Expert

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency