Android Example fuel gauge

Thanks to the excellent work of Klaus and Rotating Needle exemple, I needed a gas gauge

Screenshot_1540675869.png


B4X:
#Region  Project Attributes
    #ApplicationLabel: fuel gauge
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    Public AngleStep = 6 As Float
    Public Angle = -AngleStep As Float
End Sub

Sub Globals
    Private cvsCompass, cvsNeedle As Canvas
    Private bmpCompass, bmpNeedle As Bitmap
    Private imvCompass, imvNeedle As ImageView
    Private SRectCompass, DRectCompass, SRectNeedle, DRectNeedle As Rect
    
    Private Button1 As Button
    Private Button2 As Button
    Private Angle1 As Float
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Private x, y, wc, hc, wn, hn As Float
    
    Activity.LoadLayout("rotatingneedle")

    bmpCompass.Initialize(File.DirAssets,"compass.png")
    bmpNeedle.Initialize(File.DirAssets,"needle.png")
    
    imvCompass.Initialize("")
    imvCompass.Bitmap = bmpCompass
    imvNeedle.Initialize("")
    imvNeedle.Color=Colors.Transparent
    
    wc = bmpCompass.Width * 100dip / 100
    hc = bmpCompass.Height * 100dip / 100
    wn = bmpNeedle.Width * 100dip / 100
    hn = bmpNeedle.Height * 100dip / 100
    x = (100%x - wc) / 2
    y = (100%y - hc) / 2

    Activity.AddView(imvCompass, x, y, wc, hc)
    Activity.AddView(imvNeedle, x, y, wc, hc)
    cvsCompass.Initialize(imvCompass)
    SRectCompass.Initialize(0, 0, bmpCompass.Width, bmpCompass.Height)
    DRectCompass.Initialize(0, 0, wc, hc)

    cvsNeedle.Initialize(imvNeedle)
    x = (wc - wn)/2
    y = (hc - hn)/2
    SRectNeedle.Initialize(0, 0, bmpNeedle.Width, bmpNeedle.Height)
    DRectNeedle.Initialize(x, y, x + wn, y + hn)
    fuel_full
End Sub

Sub fuel_full
    Angle1 = Angle
    Angle = (Angle+54) Mod 360
    rotate(Angle)
End Sub

Sub Button1_Click
    Angle1 = Angle
    Angle = (Angle+6) Mod 360
    
    If Angle < 54 Then
        rotate(Angle)
        Else
        Angle = 54 Mod 360
    End If
End Sub

Sub Button2_Click
    Angle1 = Angle
    Angle = (Angle-AngleStep) Mod 360
    
    If Angle > -54 Then
        rotate(Angle)
    Else
        Angle = -54 Mod 360
    End If
    
End Sub

Sub rotate (level As Float)
    cvsNeedle.DrawRectRotated(DRectNeedle,Colors.Transparent,True,1,Angle1)
    cvsNeedle.DrawBitmapRotated(bmpNeedle,SRectNeedle,DRectNeedle,level)
    imvNeedle.Invalidate2(DRectCompass)
End Sub
 

Attachments

  • fuel gauge.zip
    425.6 KB · Views: 629

Star-Dust

Expert
Licensed User
Longtime User
Nice pier good. Sa suggest you create a custom view is easier to reuse and does not clutter much in the main code
 
Top