B4A Library [B4X] [XUI] Gauge View

Discussion in 'Additional libraries, classes and official updates' started by Erel, Dec 19, 2017.

  1. Erel

    Erel Administrator Staff Member Licensed User

    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:

    [​IMG]

    - Set the colored ranges:
    Code:
    Gauge1.SetRanges(Array(Gauge1.CreateRange(040, xui.Color_Green), _
       Gauge1.CreateRange(
    4080, xui.Color_Yellow), _
       Gauge1.CreateRange(
    80100, 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:
    Code:
    #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:

    [​IMG]
     

    Attached Files:

    Last edited: Dec 24, 2017
  2. Mashiane

    Mashiane Expert Licensed User

    Wow...
     
  3. MarcoRome

    MarcoRome Expert Licensed User

    Very nice and very usefull for B4X
     
  4. Blueforcer

    Blueforcer Active Member Licensed User

    Is it possible to change min/max via code?
     
  5. Erel

    Erel Administrator Staff Member Licensed User

    Yes.

    Add this sub to the class:
    Code:
    Public Sub SetMinAndMax(NewMinValue As Float, NewMaxValue As Float)
       MinValue = NewMinValue
       MaxValue = NewMaxValue
       DrawBackground
    End Sub
     
  6. inakigarm

    inakigarm Well-Known Member Licensed User

    B4J example (with default font) - so simple:
     

    Attached Files:

    rboeck, XorAndOr and Peter Simpson like this.
  7. Peter Simpson

    Peter Simpson Expert Licensed User

    So simple it is ;)
     
  8. Erel

    Erel Administrator Staff Member Licensed User

    V2.00 was released. It adds a full circle gauge, ticks and other improvements.

    The updated class is available inside the B4A project.
     
  9. zak

    zak Member Licensed User

    Is it possible to add numbers on the ticks, for example at 0, 10, 20 etc...
     
  10. Erel

    Erel Administrator Staff Member Licensed User

    [​IMG]

    Change DrawTicks to:
    Code:
    Private Sub DrawTicks
       
    Dim r1 As Int = Radius - 2dip
       
    Dim LongTick As Int = r1 - 7dip
       
    Dim ShortTick As Int = r1 - 5dip
       
    Dim NumberOfTicks As Int
       
    If GaugeType = HALF_CIRCLE Then NumberOfTicks = 10 Else NumberOfTicks = 20
       
    For i = 0 To NumberOfTicks
           
    Dim thickness, r As Int
           
    Dim angle As Float = i * AngleRange / NumberOfTicks + AngleOffset
           
    If i Mod 5 = 0 Then
               thickness = 
    3dip
               r = LongTick
               
    Dim tr As Float = r - 12dip
               cvsGauge.DrawTextRotated(
    NumberFormat(MinValue + i / NumberOfTicks * (MaxValue - MinValue), 10), _
                   x + tr * 
    CosD(angle), y + tr * SinD(angle), xui.CreateDefaultFont(10), xui.Color_Black, "CENTER", angle + 90)
           
    Else
               thickness = 
    1dip
               r = ShortTick
           
    End If
           cvsGauge.DrawLine(x + r * 
    CosD(angle), y + r * SinD(angle), x + r1 * CosD(angle), y + r1 * SinD(angle), xui.Color_Black, thickness)
       
    Next
    End Sub
     
  11. freedom2000

    freedom2000 Well-Known Member Licensed User

    very nice
     
  12. abarnett

    abarnett Member Licensed User

    Is there any way to set the title text of a half circle gauge in code
     
  13. DonManfred

    DonManfred Expert Licensed User

    You should always create a new Thread in the questionsforum for each question you have.

    Check the Class code. If the property does not have getter and setter then create them to make the property public.
     
  14. zak

    zak Member Licensed User

    I am trying to use it in B4i, but I get the following error:

    Application_Start
    Error occurred on line: 189 (Gauge)
    Method not found: DrawLine::::::, target: <B4XCanvas: 0x600000015370>

    When I comment out the line: cvsGauge.DrawLine(x + r * etc....
    it runs smoothly but the gauge looks poor without the ticks...

    any help is appreciated
     
  15. Erel

    Erel Administrator Staff Member Licensed User

  16. zak

    zak Member Licensed User

    I m already using b4i(4.4) and iXUI(1.5) downloaded from the link specified and still getting the error.
     
  17. Erel

    Erel Administrator Staff Member Licensed User

    The method is there. You can see it in the XML file. Try to download it again and copy it to the internal libraries folder. Then clean the project (Ctrl + P).
     
  18. SumanR

    SumanR Member Licensed User

    [​IMG]
    The number 0 and 100 in Gauge 1 dont't show fully. How to show it fully.
     
  19. Erel

    Erel Administrator Staff Member Licensed User

    The don't show fully because they are partly outside of the drawing area. You need to go over DrawTicks code and see how it draws the text. You can then push these two values so they will fit.
     
  20. loonet

    loonet Member Licensed User

    The Gauge background remains white also changing it to transparent into the designer.
    Please anyone knows How can I solve ?
    Thanks too much
     
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