B4A Library AnotherGaugeView

Discussion in 'Additional libraries, classes and official updates' started by Johan Schoeman, Aug 1, 2015.

  1. Johan Schoeman

    Johan Schoeman Expert Licensed User

    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
     

    Attached Files:

  2. ArminKH

    ArminKH Well-Known Member

    Woooooooow this is better than my car's speedometer :D
    So beautiful
     
    Harris, Johan Schoeman and DonManfred like this.
  3. monki

    monki Active Member Licensed User

    Good Work

    How can I change the Needle Color?

    monki
     
  4. Johan Schoeman

    Johan Schoeman Expert Licensed User

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

    2.png

    Sample Code:

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

    Attached Files:

    Last edited: Aug 3, 2015
    Volga, freedom2000 and monki like this.
  5. monki

    monki Active Member Licensed User

    Wow, That was Fast

    Many Thank´s



    Greating momki
     
  6. freedom2000

    freedom2000 Well-Known Member Licensed 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...
    Code:
    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:)

    Code:
    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: Aug 18, 2015
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice