Joining 2 images.

barx · Feb 5, 2012

How easy is it to join 2 images together?

I am creating a listview and will be using .Addtwolinesandbitmap. The image I want to show will consist of 2 numbers (using images so they can be surrounded by circles). So that I'm not creating dozens of images for all the combinations, I want to create images 1-9 then stitch the 2 required digits together to make one bitmap that can be added as the listview bitmap.

If this is hard work then I will use a scollview and add 2 imageviews and 2 labels / item.

Thanks......again

klaus · Feb 5, 2012

You could use an ImageView and with a Canvas draw the two bitmaps on the ImageView and add the ImageView.Bitmap to the ListView.

Best regards.

barx · Feb 5, 2012

Sounds like a plan. Time to see how a canvas works. Not used one yet. Thanks klaus

Sent from my HTC Vision using Tapatalk

barx · Feb 8, 2012

Alright, I have been reading plenty and not sure if I have the concept of canvas. Here is what I have come up with, could you possibly look over it to see if I'm right/wrong.

It basically should take a 2 digit number and load 2 image representations of the digits (files are named '0.png', '1.png', '2.png', etc) onto a given imageview.

Thank You

B4X:

Sub NumberImage(Number1 As String, ImageView1 As ImageView)
   Dim bitmap1, bitmap2 As Bitmap
   Dim canvas1 As Canvas
   Dim num1, num2 As String
   Dim rect1, rect2 As Rect
   
   'Initialize canvas to ImageView
   canvas1.Initialize(ImageView1)
   
   If Number1.Length <> 2 Then
      'Exit sub
   End If
   
   'Split 2 digit number to 2 single strings to be used to load files
   num1 = Number1.CharAt(0)
   num2 - Number1.CharAt(1)
   
   'Load image representation on digits into bitmaps to be drawn by canvas
   bitmap1.Initialize(File.DirAssets, num1 & ".png")
   Log("Loaded " & num1 & ".png")
   bitmap2.Initialize(File.DirAssets, num2 & ".png")
   Log("Loaded " & num2 & ".png")
   
   'Set ImageView size (images are 40 x 40 px)
   ImageView1.Width = 80
   ImageView1.Height = 40
   
   'Create rect areas for the 2 different bitmaps
   rect1.Initialize(0, 0, 40, 40)
   rect2.Initialize(40, 0, 80, 40)
   
   'Draw Bitmaps onto ImageView
   canvas1.DrawBitmap(bitmap1, Null, rect1)
   canvas1.DrawBitmap(bitmap2, Null, rect2)
   
End Sub

klaus · Feb 8, 2012

You are on the right way .

I'd suggest you the code below, I haven't tested it.

B4X:

Sub NumberImage(Number1 As String) As Bitmap
    Dim bitmap0, bitmap1, bitmap2 As Bitmap
    Dim canvas1 As Canvas
    Dim num1, num2 As String
    Dim rect1, rect2 As Rect
    
    'Initialize canvas to ImageView
    bitmap0.InitializeMutable(80dip, 40dip)
    canvas1.Initialize(bitmap0)
    
    If Number1.Length <> 2 Then
        'Exit sub
    End If
    
    'Split 2 digit number to 2 single strings to be used to load files
    num1 = Number1.CharAt(0)
    num2 - Number1.CharAt(1)
    
    'Load image representation on digits into bitmaps to be drawn by canvas
    bitmap1.Initialize(File.DirAssets, num1 & ".png")
    Log("Loaded " & num1 & ".png")
    bitmap2.Initialize(File.DirAssets, num2 & ".png")
    Log("Loaded " & num2 & ".png")
    
    'Set ImageView size (images are 40 x 40 px)
    
    'Create rect areas for the 2 different bitmaps
    rect1.Initialize(0, 0, 40dip, 40dip)
    rect2.Initialize(40dip, 0, 80dip, 40dip)
    
    'Draw Bitmaps onto ImageView
    canvas1.DrawBitmap(bitmap1, Null, rect1)
    canvas1.DrawBitmap(bitmap2, Null, rect2)
   
    Return bitmap0
End Sub

'
'  and somewhere
    ListView1.AddTwoLinesAndBitmap(Text1, Text2, NumberImage("23"))

Best regards.

barx · Feb 8, 2012

Wow. By your reconning I wasn't too far off then. Very surprised. I can see the advantage of your tweaks. Will add them and test. Cheers

Sent from my HTC Vision using Tapatalk

jransom2 · Feb 9, 2012

Barx - did you get this working? I understand what you are doing and I need the same thing in a list view but somehow I am not getting it to work.

Thanks

barx · Feb 9, 2012

Not as yet, currently getting the following error using klaus' code.
Attempting to sort it out

B4X:

Compiling code.                         0.46
Generating R file.                      0.00
Compiling generated Java code.          Error
B4A line: 62
canvas1.Initialize(bitmap0)
javac 1.6.0_24
src\com\barkernetdesign\texecomveritas\commandmenu.java:376: inconvertible types
found   : android.graphics.Bitmap
required: android.view.View
_canvas1.Initialize((android.view.View)(_bitmap0.getObject()));
                                       ^
1 error

barx · Feb 9, 2012

Got it working,

Had to replace canvas1.initialize() with canvas1.initialize2(). There was also a typo on my behalf. Final sub below. Should give you a good start.

B4X:

Sub NumberImage(Number1 As String) As Bitmap
   Dim bitmap0, bitmap1, bitmap2 As Bitmap
   Dim canvas1 As Canvas
   Dim num1, num2 As String
   Dim rect1, rect2 As Rect
   
   'Initialize canvas to ImageView
   bitmap0.InitializeMutable(80dip, 40dip)
   canvas1.Initialize2(bitmap0)
   
   If Number1.Length <> 2 Then
      Return
   End If
   
   'Split 2 digit number to 2 single strings to be used to load files
   num1 = Number1.CharAt(0)
   num2 = Number1.CharAt(1)
   
   'Load image representation on digits into bitmaps to be drawn by canvas
   bitmap1.Initialize(File.DirAssets, num1 & ".png")
   Log("Loaded " & num1 & ".png")
   bitmap2.Initialize(File.DirAssets, num2 & ".png")
   Log("Loaded " & num2 & ".png")
   
   'Create rect areas for the 2 different bitmaps
   rect1.Initialize(0, 0, 40dip, 40dip)
   rect2.Initialize(40, 0, 80dip, 40dip)
   
   'Draw Bitmaps onto ImageView
   canvas1.DrawBitmap(bitmap1, Null, rect1)
   canvas1.DrawBitmap(bitmap2, Null, rect2)
   
   Return bitmap0
End Sub

barx · Feb 9, 2012

p.s.

Thank klaus

barx · Feb 9, 2012

Well, I've managed (with help) to get the 2 images to join and show in a list view. One little niggle is that the images are distorted / stretched. The actual image files are square (40 x 40px) yet when they are loaded with the above code they stretch height wise. Screen shot attached below. Any ideas how to square them back up.

I have since realised that I need to up the size of image files to get a nice clean look, but one problem at a time

I have tried messing with the various values but just cant seem to get it right.

klaus · Feb 9, 2012

By default, the ListView.ImageView dimensions are 50dip / 50dip.
Your final images are 80dip / 40dip.
You need to set the ImageView and Label properties.

B4X:

  ListView1.TwoLinesAndBitmap.ImageView.Width = 80dip
  ListView1.TwoLinesAndBitmap.ImageView.Height = 40dip
    
  ListView1.TwoLinesAndBitmap.Label.Left = 80dip
  ListView1.TwoLinesAndBitmap.Label.Width = ListView1.Width - ListView1.TwoLinesAndBitmap.Label.Left
    
  ListView1.TwoLinesAndBitmap.SecondLabel.Left = 80dip
  ListView1.TwoLinesAndBitmap.SecondLabel.Width = ListView1.Width - ListView1.TwoLinesAndBitmap.SecondLabel.Left

Best regards.

barx · Feb 9, 2012

Something tells me you knew that was coming. Very fast reply.

Well done

I seriously wonder where you get your knowledge. There must be some secret knowlegde base we keep missing.

Sent from my HTC Vision using Tapatalk

klaus · Feb 10, 2012

I seriously wonder where you get your knowledge. There must be some secret knowlegde base we keep missing.

Trying lots of things in helping others and a good memory. Stumbling myself on problems. I'v been programming with different Basics for some decades now.

Best regards.

Joining 2 images.

barx

Well-Known Member

klaus

Expert

barx

Well-Known Member

barx

Well-Known Member

klaus

Expert

barx

Well-Known Member

jransom2

Member

barx

Well-Known Member

barx

Well-Known Member

barx

Well-Known Member

barx

Well-Known Member

Attachments

klaus

Expert

barx

Well-Known Member

klaus

Expert

Joining 2 images.

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Attachments

Expert

Well-Known Member

Expert

Privacy & Transparency

Privacy & Transparency