B4A Library [B4X] [XUI] Gauge View

Erel

Administrator
Staff member
Licensed User
This custom view class is compatible with B4A, B4J and B4i.

gauge.gif

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:
B4X:
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:
B4X:
#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:

 

Attachments

Last edited:

zak

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

Erel

Administrator
Staff member
Licensed User


Change DrawTicks to:
B4X:
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
 

DonManfred

Expert
Licensed User
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

Member
Licensed User
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
 

zak

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

Erel

Administrator
Staff member
Licensed User
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).
 

Erel

Administrator
Staff member
Licensed User
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

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