B4A Library AnotherGaugeView

It partly wraps this Github project. The library files (including JavaObject.jar and JavaObject.xml) are in the /files folder of the attached B4A project. Copy the project lib files to your additional libraries folder and the JavaObject files to your default library folder - in case you don't have the latest version of the JavaObject library files (the project uses inline Java code to access the current battery level in order to display it in the view on the left - you need the JavaObject lib files for this. The view on the right displays random values).

Posting the B4A project
The Java source code - amend it to your liking.
The zipped drawable folder of the B4A project - unzip it and copy the files into the /Objects/res/drawable folder of the B4A project.

1.png



anothergaugeview
Author:
Johan Schoeman
Version: 1
  • AnotherGaugeView
    Fields:
    • ba As BA
    Methods:
    • AddToParent (Parent As ViewGroup, left As Int, top As Int, width As Int, height As Int)
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    Properties:
    • Background As Drawable
    • Color As Int [write only]
    • Enabled As Boolean
    • Height As Int
    • InnerCircleColor As Int [write only]
    • Left As Int
    • NeedleHeight As Float [write only]
    • NeedleWidth As Float [write only]
    • OuterCircleColor As Int [write only]
    • ShowNeedle As Boolean [write only]
    • ShowRanges As Boolean [write only]
    • ShowText As Boolean [write only]
    • Tag As Object
    • TargetValue As Float [write only]
    • TextShadowColor As Int [write only]
    • TextUnit As String [write only]
    • TextUnitColor As Int [write only]
    • TextUnitSize As Float [write only]
    • TextValue As String [write only]
    • TextValueColor As Int [write only]
    • TextValueSize As Float [write only]
    • Top As Int
    • Visible As Boolean
    • Width As Int
 

Attachments

  • drawable.zip
    290.1 KB · Views: 422
  • b4aAnotherGaugeView.zip
    42.4 KB · Views: 427
  • src.zip
    298.4 KB · Views: 341

Johan Schoeman

Expert
Licensed User
Longtime User
Good Work

How can I change the Needle Color?

monki
Like this:
Copy/replace the attached lib files to/in your additional library folder

2.png


Sample Code:

B4X:
Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
    t.Initialize("t",1000)

    nativeMe.InitializeContext

    gv1.ShowNeedle = True
    gv1.ShowRanges = True
    gv1.ShowText = False
    gv1.NeedleHeight = 0.4
    gv1.NeedleWidth = 0.025
    gv1.OuterCircleColor = Colors.ARGB(100,255,0,0)
    gv1.InnerCircleColor = Colors.Red
    gv1.TextUnit = "%"
    gv1.TextValue = "Battery"
    gv1.TextValueSize = 0.07
    gv1.TextUnitSize = 0.09
    gv1.TextValueColor = Colors.Blue
    gv1.TextUnitColor = Colors.Green
    gv1.TextShadowColor = Colors.Red
    gv1.NeedleLeftColor = Colors.DarkGray
    gv1.NeedleRightColor = Colors.LightGray
    gv1.NeedleScrewColor = Colors.Cyan


    gv2.ShowNeedle = True
    gv2.ShowRanges = True
    gv2.ShowText = False
    gv2.NeedleHeight = 0.5
    gv2.NeedleWidth = 0.03
    gv2.OuterCircleColor = Colors.ARGB(100,0,0,255)
    gv2.InnerCircleColor = Colors.Blue
    gv2.TextUnit = ""
    gv2.TextValue = ""
    gv2.TextValueSize = 0.1
    gv2.TextUnitSize = 0.07
    gv2.TextValueColor = Colors.Red
    gv2.TextUnitColor = Colors.Magenta
    gv2.TextShadowColor = Colors.Blue
    gv2.NeedleLeftColor = Colors.Green
    gv2.NeedleRightColor = Colors.Yellow
    gv2.NeedleScrewColor = Colors.Black


End Sub

anothergaugeview
Author:
Johan Schoeman
Version: 1
  • AnotherGaugeView
    Fields:
    • ba As BA
    Methods:
    • AddToParent (Parent As ViewGroup, left As Int, top As Int, width As Int, height As Int)
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    Properties:
    • Background As Drawable
    • Color As Int [write only]
    • Enabled As Boolean
    • Height As Int
    • InnerCircleColor As Int [write only]
    • Left As Int
    • NeedleHeight As Float [write only]
    • NeedleLeftColor As Int [write only]
    • NeedleRightColor As Int [write only]
    • NeedleScrewColor As Int [write only]
    • NeedleWidth As Float [write only]
    • OuterCircleColor As Int [write only]
    • ShowNeedle As Boolean [write only]
    • ShowRanges As Boolean [write only]
    • ShowText As Boolean [write only]
    • Tag As Object
    • TargetValue As Float [write only]
    • TextShadowColor As Int [write only]
    • TextUnit As String [write only]
    • TextUnitColor As Int [write only]
    • TextUnitSize As Float [write only]
    • TextValue As String [write only]
    • TextValueColor As Int [write only]
    • TextValueSize As Float [write only]
    • Top As Int
    • Visible As Boolean
    • Width As Int
 

Attachments

  • anothergaugeview.zip
    16.2 KB · Views: 307
  • src (2).zip
    298.5 KB · Views: 277
Last edited:

freedom2000

Well-Known Member
Licensed User
Longtime User
Before all I would like to thank you for this great library. :)

You won't trust me but this is your lib :

Screenshot_gauge1.png


Really !
Almost no trick :
  • suppress everything but the needle
  • add a background image of a photo of a real gauge (or find it on internet)
  • calibrate the gauge...
B4X:
    gv1.ShowNeedle = True
    gv1.ShowRanges = False
    gv1.ShowText = False
    gv1.NeedleHeight = 0.4
    gv1.NeedleWidth = 0.015
    gv1.OuterCircleColor = Colors.Transparent
    gv1.InnerCircleColor = Colors.Transparent
    gv1.NeedleLeftColor= Colors.Red
    gv1.NeedleRightColor = Colors.Red
    gv1.NeedleScrewColor = Colors.Red
    gv1.SetBackgroundImage(LoadBitmap(File.DirAssets,"background4.png"))


Calibration was done "manually" :
  • try to find the correct values to display 0, 10, ..., 80 (on your background image)
  • Then open excel and try to match the values by a polynomial function
  • copy paste the equation in your code
  • that's it
calib.png


on this example if you want to display "10" you have to enter 6.6
the equation does the conversion for you :rolleyes: and you work with your own "XX" units... (beer numbers :cool:)

B4X:
gv1.TargetValue  = (-5/100000)*XX*XX*XX + 0.0063*XX*XX + 1.222*XX - 6

So you can have pretty much the gauge you need... MANY THANKS
 
Last edited:
Top