B4A Library [B4X] [XUI] Gauge View

Status
Not open for further replies.
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:

SS-2017-12-21_17.37.32.png


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

SS-2017-12-24_17.45.46.png
 

Attachments

  • Gauges.zip
    19.4 KB · Views: 2,191
Last edited:

Erel

B4X founder
Staff member
Licensed User
Longtime User
Custom views classes are not views by themselves.

Make those changes in the class:
1. Make mBase a public variable - line 21.
2. Add this line to DesignerCreateView after mBase is set:
B4X:
mBase.Tag = Me

Now you can get reference to the gauge class like this:
B4X:
Dim objGague As Gauge = p.GetView(0).Tag
 

Alberto Iglesias

Well-Known Member
Licensed User
Longtime User
Custom views classes are not views by themselves.

Make those changes in the class:
1. Make mBase a public variable - line 21.
2. Add this line to DesignerCreateView after mBase is set:
B4X:
mBase.Tag = Me

Now you can get reference to the gauge class like this:
B4X:
Dim objGague As Gauge = p.GetView(0).Tag
Works like a charm! thanks @Erel
 

foretek

Member
Licensed User
Some gauges require the warning(orange) and alarm (red) at low end area . e.g. fuel tank.. can this indication be customizable?
 

swChef

Active Member
Licensed User
Longtime User
I combined this with (an offsetted) radial gradient to get a highlighted edge effect.
Incomplete project, so a few details left to adjust.
1586204469792.png
 
Last edited:

stephans

Member
Licensed User
Hello,

the gauge view looks very interesting for me and I would like to use it in my Android app.
The sample file works, but how can I implement the class in my app
Can everybody help me?

Thanks in advance

Stephan
 
Status
Not open for further replies.
Top