B4A Library [B4X] [XUI] Gauge View

Erel · Dec 19, 2017

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:

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:

Erel · Mar 12, 2019

Works fine here. Tested with B4A. Can you upload a project that demonstrates this issue?

loonet · Mar 12, 2019

Erel said:
Works fine here. Tested with B4A. Can you upload a project that demonstrates this issue?

Thanks Erel for your rapid answer, I forgotten to set the Alpha to zero... Gauge works fine !!

dimasarfin · Jun 29, 2019

hi erel i have some problem when i debug in my phone. im tested in B4A

DonManfred · Jun 29, 2019

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

Alberto Iglesias · Nov 16, 2019

Is possible to put this gauge in a Customlistview and attribute the value for each one, like this?

B4X:

Dim objGauge As Gauge = p.GetView(0)
 objGauge.CurrentValue=dTemperture

because on the first line says: TYPES DO NOT MATCH

DonManfred · Nov 16, 2019

Alberto Iglesias said:
because on the first line says: TYPES DO NOT MATCH

do you have another Variable or Class/Activity/Service named objGauge which is not of type Gauge?

Alberto Iglesias · Nov 16, 2019

nope! is a simple project with customlistview with gauge in each row of CLV. and then try to change the value of each gauge. you will see this TYPE DO NOT MATCH

Erel · Nov 17, 2019

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 · Nov 17, 2019

@Erel, thank you! I will make the changes right now!

Alberto Iglesias · Nov 17, 2019

Erel said:
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 · Dec 27, 2019

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

Mahares · Dec 27, 2019

foretek said:
can this indication be customizable?

B4X:

Gauge1.SetRanges(Array(Gauge1.CreateRange(70, 80, xui.Color_yellow), _
        Gauge1.CreateRange(80, 100, xui.Color_green)))

swChef · Apr 5, 2020

I combined this with (an offsetted) radial gradient to get a highlighted edge effect.
Incomplete project, so a few details left to adjust.

Aidan Ruff · Sep 27, 2020

Any idea how would I use this with b4i?

Thanks

Erel · Sep 29, 2020

Exactly the same as you use it in B4J or B4A.

Aidan Ruff · Sep 29, 2020

Erel said:
Exactly the same as you use it in B4J or B4A.

Sorry, I'm having mental problems here!

Is it an additional library? I can see the example but not how to incorporate it into a program

Erel · Sep 29, 2020

It is a class (it was written before the simple b4xlib format was available). Project - Add Existing Modules.

klaus · Sep 29, 2020

Have you seen the xGauges class and b4xlib?
It is another chart library.

stephans · Nov 21, 2020

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 · Nov 21, 2020

Copy the Gauges.bas file to your project.
Menu Project/AddExistingModules.
Then, you can add the Gauges in the Designer.

B4A Library [B4X] [XUI] Gauge View

Attachments

B4X founder

Member

New Member

Expert

Well-Known Member

Expert

Well-Known Member

B4X founder

Well-Known Member

Well-Known Member

Member

Expert

Active Member

Member

B4X founder

Member

B4X founder

Expert

Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency