B4J Library [B4X] [XUI] xGauges and xGaugesRect Classes and Libraries

klaus · Nov 2, 2018

The xGauges and xGaugesRect Class do also exist as a B4X libary.
The xGauges.b4xlib, xGaugesRect.b4xlib, xGauges.xml and the xGaugesRect.xml files are attached.
You need to copy the xGauges.b4xlib and / or the xGaugesRect.b4xlib files to the AdditionlLibraries\B4X folder!
Don’t copy the xGauges.xml nor the xGaugesRect.xml file to the AdditionalLibraries folder, copy them in another folder for all b4xlib xml files.
Example: AdditionlLibraries\B4XlibXMLFiles
The xGauges.xml and the xGaugesRect.xmland file is for help purposes and is useful with the B4X Help Viewer or the B4XObjectBrowser.
The xGauges.xml and the xGaugesRect.xmland file were generated with this tool: b4xlib - XML generation

Current versions:
xGauges.b4xlib version 1.9
xGaugesRect.b4xlib cversion 1.1

Having seen this thread fuel gauge, it challenged me and I wrote this CustomView xGauges Class.
It works on all three products: B4A, B4i and B4J.
The xGauges.bas and xGaugesRect files are located in the B4J project and shared, relative link, in B4A and B4i.
The code is exactly the same, one class file, for all three platforms.

Demo programs for all three platforms and for both libraries are added.
Tested on PC, Android Samsung S6 and iPhone 6.
The shadows in the rectangular gauges look better on the devices than on the animated gif.

EDIT: 2022.07.22 Version 1.9 / version 1.1
'Set the corner radius bigger than the border width when corner radius > 0. bug report HERE.

EDIT: 2021.08.22 Version 1.8
Added BorderWidth, BorderColor and CorenerRadius properties.
Added ScaleMidLimit2StartPerCent, ScaleMidLimit2SweepPerCent, ScaleMidLimit2Color properties.
Added gradient colors for the limit zones.
Changed setValueMin and setValueMax from Int to Double.
Added new xGaugesRect library

EDIT: 2020.06.25 Version 1.7
Updated the Tag property according to Erels recommendation:
https://www.b4x.com/android/forum/t...lv-or-any-other-container.117992/#post-738358
Version 1.6
Added Click and LongClick events
Added BringToFront, SendToBack and asView methods

EDIT: 2019.03.12 Version 1.5
Amended cScaleMidLimitColor initialize value from 526 to 255
Amended setScaleColor missing reinitialize call routine
Amended Rotate Needle equation correction
Improved scale custom angles management
Added cCustomScaleMinAngle and cCustomScaleMaxAngle variables
Added NeedleON property shows or hides the needle

Version 1.4
Amended NeedleBitmapFileName designation in custom properties
Amended NeedleBitmapFileName set in the code for a Gaige added in the Designer
Amended custom angles problems.
Added RemoveView and ReInitialize methods

EDIT: 2018.12.20 Version 1.3
Amended problem reported in post#11.

EDIT: 2018.12.14 Version 1.2
Amended problem with GaugeTitle and GaugeUnit not updated in code.

xGauges

Author: Klaus CHRISTL
Version: 1.9

xGauges
- Functions:
  - AddToParent (Parent As Object, Left As Int, Top As Int, Width As Int) As String
    adds the xGauge to the Parent view.
    the parent object can be a B4XView or
    an Activity or a Panel in B4A, a Panel in B4i or a Pane in B4J
    there is no Height property, because the Height = Width
  - AsView As B4XView
    Returns the base panel of the gauge as B4XView
  - BringToFront
  - Initialize (Callback As Object, EventName As String) As String
    Initializes a xGauge
    Callback is the calling module
    EventNam3 is the generic event name, not used
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - ReInitialize
    Reinitializes the gauge
  - RemoveView
    Removes the xGauge from its parent view
  - SendToBack
- Properties:
  - BackgroundColor As Int
    sets or gets the BackgroundColor
    it must be an xui.Color
    Example: xGauge1.BackgroundColor = xui.Color_White
  - BorderColor As Int
    sets or gets the BorderColor property
    it must be an xui.Color
    Example: xGauge1.BorderColor = xui.Color_Gray
  - BorderWidth As Int
    sets or gets the BorderWidth
    Example: xGauge1.BorderWidth = 5
  - CornerRadius As Int
    sets or gets the CornerRadius property
    Example: xGauge1.CornerRadius = 5
  - CustomScaleEndAngle As Int
    sets or gets the CustomScaleEndAngle
    Start angle for Custom scale angle gazge type.
    trigonometric angles 0 at 3 o'clock
    positive counter clockwise
  - CustomScaleStartAngle As Int
    sets or gets the CustomScaleStartAngle
    Start angle for Custom scale angle gazge type.
    trigonometric angles 0 at 3 o'clock
    positive counter clockwise
  - GaugeTitle As String
    sets or gets GaugeTitle property
  - GaugeType As String
    sets or gets GaugeType property
    possible values 90° Top, 180°, 270°, 90° Left, Custom scale angles
    for Custom scale angles you can set the start and the end angle
  - GaugeUnit As String
    sets or gets GaugeUnit property
  - HalfTicks As Boolean
    gets or sets if half (intermedaite) tick are required
    one tick between two main ticks
  - Left As Double
    sets or gets the Left property
  - MainTickNumber As Int
    gets or sets the number of main ticks
    for a scale from 0 to 10 then number must be 11
  - NeedleBitmapFileName As String
    sets or gets the NeedleBitmapFileName
    enter 'no file' without the quotes to use the default needle
  - NeedleColor As Int
    sets or gets the NeedleColor
    it must be an xui.Color
    Example: xGauge1.NeedleColor = xui.Color_Gray
  - NeedleON As Boolean
    sets or gets the NeedleON property
    shows or hides the needle
    default value True
  - ScaleColor As Int
    sets or gets the ScaleColor
    it must be an xui.Color
    Example: xGauge1.ScaleColor = xui.Color_Black
  - ScaleHighLimitColor As Int
    sets or gets the ScaleHighLimitColor
    it must be an xui.Color
    Example: xGauge1.ScaleHighLimitColor = xui.Color_Red
  - ScaleHighLimitPerCent As Double
    sets or gets the ScaleHighLimitPerCent property
    it is drawn from the given percent to the scale end
    given in pecent of the scale
  - ScaleLowLimitColor As Int
    sets or gets the ScaleLowLimitColor
    it must be an xui.Color
    Example: xGauge1.NeedleColor = xui.Color_RGB(526, 165, 0)
  - ScaleLowLimitPerCent As Double
    sets or gets the ScaleLowLimitPerCent property
    given in pecent of the scale
    it drawn from the scale start to the given percent
  - ScaleMidLimit2Color As Int
    sets or gets the ScaleMidLimit2Color
    it must be an xui.Color
    Example: xGauge1.ScaleMidLimitColor = xui.Color_RGB(526, 165, 0)
  - ScaleMidLimit2Colors As Int()
    sets or gets the ScaleMidLimit2Color
    it must be an Array of xui.Color
    Example: xGauge1.ScaleMidLimit2Color = Array As Int (xui.Color_RGB(255, 165, 0), xui.Color_Red)
  - ScaleMidLimit2StartPerCent As Double
    sets or gets the ScaleMidLimit2StartPerCent property
    it is drawn from the given start percent over the sweep percent
    given in pecent of the scale
  - ScaleMidLimit2SweepPerCent As Double
    sets or gets the ScaleMidLimit2SweepPerCent property
    it is drawn from the given start percent over the sweep percent
    given in pecent of the scale
  - ScaleMidLimitColor As Int
    sets or gets the ScaleMidLimitColor
    it must be an xui.Color
    Example: xGauge1.ScaleMidLimitColor = xui.Color_RGB(526, 165, 0)
  - ScaleMidLimitColors As Int
    sets or gets the ScaleMidLimitColors
    it must be an Array xui.Color
    Example: xGauge1.ScaleMidLimitColors = Array As Int (xui.Color_RGB(255, 165, 0), xui.Color_Red)
  - ScaleMidLimitStartPerCent As Double
    sets or gets the ScaleMidLimitStartPerCent property
    it is drawn from the given start percent over the sweep percent
    given in pecent of the scale
  - ScaleMidLimitSweepPerCent As Double
    sets or gets the ScaleMidLimitSweepPerCent property
    it is drawn from the given start percent over the sweep percent
    given in pecent of the scale
  - SmallTicksNumber As Int
    gets or sets the SmallTickNumber property
    SmallTicksNumber small ticks will drawn between two main ticks
    for a decimal scale SmallTickNumber = 10, eventhough only 9 ticks are seen, the 10th is hidden by the main tick
  - Tag As Object
  - TickText As String
    gets or sets the texts for the ticks
    the values between two || are displayed equally spaced on the scale
    Example: 0|20|40|60|80|100 or E|1/2|F
  - Top As Double
    sets or gets the Top property
  - Value As Double
    sets the value of the gauge
    the value must be between ValueMin and ValueMax
  - ValueMax As Double
    gets or sets the max value of the gauge
  - ValueMin As Double
    gets or sets the min value of the gauge
  - Width As Double
    sets or gets the width of the gauge
    there is no height property because the height is equal to the width

xGaugesRect only the specific Functions and Properties are shown below.

Author: Klaus CHRISTL
Version: 1.1

xGaugesRect
- Functions:
  - Cursor2Color As Int
    sets or gets the Cursor2Color property
    it must be an Array of xui.Color
  - Cursor2ON As Boolean
    sets or gets the Cursor2ON property
  - Cursor2Value As Double
    sets or gets the Corner2Value
    the value must be between ValueMin and ValueMax
  - CursorColor As Int
    sets or gets the Cursor2Color property
    it must be an Array of xui.Color
  - CursorON As Boolean
    sets or gets the CursorON property
  - CursorValue As Double
    sets or gets the CornerValue
    the value must be between ValueMin and ValueMax

emexes · Jul 30, 2020

klaus said:

When you put them side-by-side like that, I can see now that linear gauges are just circular gauges straightened-out, ie zero curvature (or infinite radius?) That is some freaky coherence you've got going there. Next trick: the Theory of Everything

klaus · Jul 30, 2020

Diceman said:
The only other thing I can think of is an optional sliding set pointer like on a thermostat.

Interesting, will also look at that.

klaus · Jul 30, 2020

emexes said:
(or infinite radius?)

Well, sorry, but I had to shorten the needle length from infinite to a finite value.

emexes · Jul 30, 2020

klaus said:
I had to shorten the needle length from infinite to a finite value.

Or use IEEE754 floats, that math often works eg 1 / infinity = 0.

Diceman · Jul 30, 2020

emexes said:
Or use IEEE754 floats, that math often works eg 1 / infinity = 0.

But what is 0 * Infinity?

emexes · Jul 30, 2020

Diceman said:
But what is 0 * Infinity?

Well, if 1 / infinity = 0, and we multiply both sides by infinity, then 1 = 0 * infinity = 1

Diceman · Jul 30, 2020

emexes said:
Well, if 1 / infinity = 0, and we multiply both sides by infinity, then 1 = 0 * infinity = 1

Nice try, but no.

klaus · Aug 3, 2020

Here is version 0.9 of a new class xGaugesRect.
Instead of adding the rectangular gauges to the current circular ones I made a new class.
It is easier for users because of the new specific properties which would overcrowd the current class.
For the moment, it works only with B4J and B4A, I have problems with B4i and BitmapCreator.

B4J B4A

I would be pleased to have some beta testers.

Attached the class module and a demo project.

Erel · Aug 3, 2020

klaus said:
For the moment, it works only with B4J and B4A, I have problems with B4i and BitmapCreator.

You can send me a project that demonstrates the problem and I'll try to fix it.

klaus · Aug 3, 2020

Hi Erel, I already had in mind to write a small project (the class has more than 1000 lines )showing the problem, try to understand what happens and submit it to you.

Diceman · Aug 4, 2020

Klaus, the gauges look really good. The silver gradient makes it look real.
Suggestions: It would be nice to be able to have NeedleShadowColor & CursorShadowColor (or at least some sort of outline) so it gives some depth to these 2 important indicators. This will give the needle and cursor some relief from the background so they appear to be separate from the background as if floating above the background.

Problem. I haven't found anything wrong with your code, but the sample B4J form is acting kind of weird (release mode and debug mode). I loaded xGuagesRect.B4j into B4J v8.50 and ran it. A blank form appeared with no controls on it. No errors were reported. I ran the designer and saw the 3 xGaugesRect views. I resaved the form and reran it. Same thing; blank form appears. I went back into Designer and moved the gauges around and resaved it, thinking it would update the form. When I reran the sample app it still displayed a blank form. I solved the problem by going back into the Designer and dropping a label somewhere on the form. Recompiling it and running it showed the gauges working just fine. It appears to me that a regular view has to be on the form otherwise B4J won't display the gauges at all. I went back into Designer and deleted the Label view and when I ran the app the form was blank again. Adding the Label back on the form got the form to display the gauges again. I told you it was weird.

In B4A you have Layout.bal in the Files manager and its not needed. B4A complains when the app is loaded that Layout.bal is missing. I removed Layout.bal in the Files Manager and the app ran just fine. No problem like I had with B4J. Looks good in Android.

That's it from me, at least for now. The gauges look really professional and will save a lot of screen space.
Rect gauges are slim and trim (conserves space). If you have more than 1 round gauge they are fat and need a lot of screen space to display properly.
Once you've gone Rect, you'll never go back (to Round).

klaus · Aug 5, 2020

Your blank screen sounds very strange.
I develop with B4J version 8.50 like you.
I added shadows, but not yet convinced.
Can you please check the attached version, I post only the B4J demo program.

Diceman · Aug 6, 2020

klaus said:
Your blank screen sounds very strange.
I develop with B4J version 8.50 like you.
I added shadows, but not yet convinced.
Can you please check the attached version, I post only the B4J demo program.

Klaus,

I tried your example and the shadows do appear, but like you implied they look flat without any dimension to them.
I looked around for a solution and found JordiCP's suggestion #13 for creating shadows at this link Neumorphism UI - how would you do this

Would this work?

rodmcm · Nov 19, 2020

Is it possible to redraw a guage with a change of Max and Min value in code
I would like to use guage.click to change the range.. An option is of course to have a another hidden quage appear I suppose

rodmcm · Nov 19, 2020

Found it! I realise you have to change the Tick Text to Brilliant!

MikeCLX · Aug 13, 2021

Great work
is it possible to have a second mid range color? Like ScaleMidLimitColor2 etc?
I have a value that should be in the middle, if it goes low or high then it should be in an orange warning zone either way, if it goes further then it should be red either way.
i.e.
0 to 20 =red
20 to 40 = orange
40 to 60 = normal no color
60 to 80 = orange
80 to 100 = red

another idea although not so important for me is a gradient color so in the above case the further from the set point it is outside the normal zone the redder the colour becomes I.e. 60 = orange 100 = red, gradient in between 60 and 100 .
this could be done with startcolor and endcolor properties on the limits

thanks for sharing these great guages

klaus · Aug 14, 2021

1. Added a second ScaleMidLimit, this was easy to do.
2. Gradient colors are a bit more difficult to add. I will have a look at it.
The update will come soon point 1 already done, point 2 not sure if I will add it.

MikeCLX · Aug 15, 2021

Thanks Klaus, I ended up implementing the second ScaleMidLimit before i saw your message, I also made a few other changes to the Lib to allow it to take decimal numbers in the Min and Max and added a value, although i have not tested it on the other variants.
I can share my changes if you think they are worth adding to the base Lib

klaus · Aug 15, 2021

I have changed the setValueMin and setValueMax properties to Double.
I am not sure if I will add the value display.

klaus · Aug 17, 2021

MikeCLX said:
another idea although not so important for me is a gradient color

Is this what you expect to see ?

The four limit zones can be set with mono or gradient colors.
There are three colors in the left gauge: green > yellow > red.
These can be set with one of the four limit zones: LowLimit, HighLimit, MidLimit or MidLimit2.
In the right gauge the four limit zones are set:
LowLimit: 0 - 30 green mono
MidLimit: 30 - 60 green > yellow gradient
MidLimit2: 140 - 170 yellow > red gradient
HighLimit: 170 - 200 red mono

The gradient colors must be set in the code:

B4X:

xGauge4.ScaleMidLimitColors2 = Array As Int(xui.Color_Green, xui.Color_Yellow, xui.Color_Red)

This allows to set more than 2 colors.

Attached the class for testing.
It is still a work in progress.

B4J Library [B4X] [XUI] xGauges and xGaugesRect Classes and Libraries

Attachments

Expert

Expert

Expert

Expert

Active Member

Expert

Active Member

Expert

Attachments

B4X founder

Expert

Active Member

Expert

Attachments

Active Member

Active Member

Active Member

Member

Expert

Member

Expert

Expert

Attachments

Similar Threads

Privacy & Transparency

Privacy & Transparency