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: 1,814
Last edited:

DonManfred

Expert
Licensed User
Longtime User
hi erel i have some problem when i debug in my phone. im tested in B4A
1. You should always start a new thread for your questions.
2. You should post errors as TEXT. Rightclick to copy it
 

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
 

klaus

Expert
Licensed User
Longtime User
Copy the Gauges.bas file to your project.
Menu Project/AddExistingModules.
Then, you can add the Gauges in the Designer.
 
Status
Not open for further replies.
Top