Android Question Only rectangle area of a bitmap

Midimaster

Active Member
Licensed User
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
 
Sort by date Sort by votes

Erel

B4X founder
Staff member
Licensed User
Longtime User


B4X: 
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
 
Upvote 0

Midimaster

Active Member
Licensed User
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.
 
Upvote 0

Midimaster

Active Member
Licensed User
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.
 
Upvote 0
E

emexes

Expert
Licensed User
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. ?
 
Upvote 0
You must log in or register to reply here.
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…