Android Question Only rectangle area of a bitmap

[Midimaster]

I need for displaying track volume 9 different states of a bitmap from "silent" to loud". You can see here different states on the right side of the screeshot

Normaly I would paint one Image, Save it as PNG
In the App I load it into a BITMAP and then copy only a rectangle part of it to the view of a PANEL, f.e. (0 , 0 , 5*Width/9, Height)

But I cannot find a function to do that in B4A. How would you suggest to do it?

Screnshot from PC-Version:

I want to keep this "image style" of displaying. So "Seek"-Views are not what I'm searching

 

[Erel]

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.RootPane.LoadLayout("1") 'Load the layout file.
    MainForm.Show
    Dim parent As B4XView = MainForm.RootPane
    Dim bars As List = CreateBars(200dip, 50dip, 10)
    For i = 1 To 10
        Dim iv As ImageView
        iv.Initialize("")
        Dim xiv As B4XView = iv
        parent.AddView(xiv, 20dip, 55dip * i, 200dip, 50dip)
        xiv.SetBitmap(bars.Get(i))
    Next
End Sub

Sub CreateBars (Width As Int, Height As Int, MaxBars As Int) As List
    Dim res As List
    res.Initialize
    Dim pnl As B4XView = xui.CreatePanel("")
    pnl.SetLayoutAnimated(0, 0, 0, Width, Height)
    Dim cvs As B4XCanvas
    cvs.Initialize(pnl)
    Dim gap As Int = 2dip
    Dim BarWidth As Int = Width / MaxBars - gap
    Dim BarHeightInterval As Int = Height / MaxBars - gap
    For i = 0 To MaxBars
        cvs.ClearRect(cvs.TargetRect)
        For b = 1 To i
            Dim r As B4XRect
            r.Initialize((b - 1) * (BarWidth + gap), cvs.TargetRect.Height - gap - b * BarHeightInterval, 0, cvs.TargetRect.Height - gap)
            r.Width = BarWidth
            cvs.DrawRect(r, xui.Color_Red, True, 0)
        Next
        res.Add(cvs.CreateBitmap)
    Next
    cvs.Release
    Return res
End Sub

 

[Midimaster]

As I understand... you paint the 10 BITMAPs by code instead of copying them from one source bitmap. So all bitmaps have the same size. This also solves the problem, that the bitmaps (with less bars) are always streched to the views size.

But if using a Canvas is the best solution, I could also create 9 images, load them into a list and asign them at runtime to the views. My screenshot with only simple colored bars is not, what I will use in the app. Painting this future 9 images by code will make necessaRe a lot more code...

thank you

Nevertheless I will save your code sniplett for my future programming, because it shows already how to use a canvas.

 

[Erel]

I can only know what you posted. I can't guess what you really want to draw.

It is trivial to copy parts of images with B4XCanvas.DrawBitmap and B4XBitmap.Crop.

 

[emexes]

My screenshot with only simple colored bars is not, what I will use in the app.

Test like you fly, fly what you tested.

Nevertheless I will save your code sniplett for my future programming, because it shows already how to use a canvas.

 

[Midimaster]

no no.. thank you all very much. I did not want, that my answer sounds harsch or like critics. This is only causes by my bad english...

Erel, you are doing a great job. Without your help on the forum, I would not be able to code this project.

Here is a first screenshot, of what I'm doing:

At the moment it is running very good.

 

[emexes]

Another approach, albeit slightly radical and mind-bending, would be to use a single image containing all 8 blue bars, and then obscure the bars you don't want by overlaying with a black panel. Probably don't even need to do any blitting; just move the left-hand edge of the black panel.