B4A Library [B4X] [XUI] Gauge View

This custom view class is compatible with B4A, B4J and B4i.

A nice and simple gauge.
You can easily customize it as needed.
It uses the Crystal font: http://www.fontspace.com/allen-r-walden/crystal
There are two types of gauges: half circle and full circle.

Usage instructions:
- Add the class and the font file to your project.
- Add it with the designer and configure it:

- Set the colored ranges:

Gauge1.SetRanges(Array(Gauge1.CreateRange(0, 40, xui.Color_Green), _
   Gauge1.CreateRange(40, 80, xui.Color_Yellow), _
   Gauge1.CreateRange(80, 100, xui.Color_Red)))

- In B4i the font file should be copied to Files\Special and the following line should be added to the main module:

#AppFont: Crysta.ttf

- Animations can be a bit jumpy in debug mode. Should be smooth in release mode.

A B4A project is attached.

See post #10 for adding numbers to the ticks:

 

[Mashiane]

Wow...

 

[MarcoRome]

Very nice and very usefull for B4X

 

[Blueforcer]

Is it possible to change min/max via code?

 

[Erel]

Yes.

Add this sub to the class:

Public Sub SetMinAndMax(NewMinValue As Float, NewMaxValue As Float)
   MinValue = NewMinValue
   MaxValue = NewMaxValue
   DrawBackground
End Sub

 

[inakigarm]

B4J example (with default font) - so simple:

 

[Peter Simpson]

B4J example (with default font) - so simple:

So simple it is

 

[Erel]

V2.00 was released. It adds a full circle gauge, ticks and other improvements.

The updated class is available inside the B4A project.

 

[zak]

Is it possible to add numbers on the ticks, for example at 0, 10, 20 etc...

 

[Erel]

Change DrawTicks to:

Private Sub DrawTicks
   Dim r1 As Int = Radius - 2dip
   Dim LongTick As Int = r1 - 7dip
   Dim ShortTick As Int = r1 - 5dip
   Dim NumberOfTicks As Int
   If GaugeType = HALF_CIRCLE Then NumberOfTicks = 10 Else NumberOfTicks = 20
   For i = 0 To NumberOfTicks
       Dim thickness, r As Int
       Dim angle As Float = i * AngleRange / NumberOfTicks + AngleOffset
       If i Mod 5 = 0 Then
           thickness = 3dip
           r = LongTick
           Dim tr As Float = r - 12dip
           cvsGauge.DrawTextRotated(NumberFormat(MinValue + i / NumberOfTicks * (MaxValue - MinValue), 1, 0), _
               x + tr * CosD(angle), y + tr * SinD(angle), xui.CreateDefaultFont(10), xui.Color_Black, "CENTER", angle + 90)
       Else
           thickness = 1dip
           r = ShortTick
       End If
       cvsGauge.DrawLine(x + r * CosD(angle), y + r * SinD(angle), x + r1 * CosD(angle), y + r1 * SinD(angle), xui.Color_Black, thickness)
   Next
End Sub

 

[freedom2000]

very nice

 

[abarnett]

Is there any way to set the title text of a half circle gauge in code

 

[DonManfred]

Is there any way to set the title text of a half circle gauge in code

You should always create a new Thread in the questionsforum for each question you have.

Check the Class code. If the property does not have getter and setter then create them to make the property public.

 

[zak]

I am trying to use it in B4i, but I get the following error:

Application_Start
Error occurred on line: 189 (Gauge)
Method not found: DrawLine::::::, target: <B4XCanvas: 0x600000015370>

When I comment out the line: cvsGauge.DrawLine(x + r * etc....
it runs smoothly but the gauge looks poor without the ticks...

any help is appreciated

 

[Erel]

Make sure to use the latest version of iXUI: https://www.b4x.com/android/forum/threads/b4x-xui-cross-platform-native-ui-library.84359/#content

 

[zak]

I m already using b4i(4.4) and iXUI(1.5) downloaded from the link specified and still getting the error.

 

[Erel]

The method is there. You can see it in the XML file. Try to download it again and copy it to the internal libraries folder. Then clean the project (Ctrl + P).

 

[SumanR]

The number 0 and 100 in Gauge 1 dont't show fully. How to show it fully.

 

[Erel]

The don't show fully because they are partly outside of the drawing area. You need to go over DrawTicks code and see how it draws the text. You can then push these two values so they will fit.

 

[loonet]

The Gauge background remains white also changing it to transparent into the designer.
Please anyone knows How can I solve ?
Thanks too much