B4J Question How to add image/logo at center of a Qr code

microbox

Active 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 qr As QRGenerator
    qr.Initialize(ImageView1.Width)
    BmpQR = qr.Create("B4X QR Generator!!!")
    logo = xui.LoadBitmapResize(File.DirAssets,"c2.png",250,250,False)
                  
    ImageView1.SetBitmap(BmpQR)
    ImageView2.SetBitmap(CreateRoundBitmap(logo,200))
End Sub
The code above simply generates the qrcode( left) and displays an image/logo(right).
AAResizeImage.PNG

I would like to resize the image so that the qrcode will be still readable and place at center.
And is it possible to change the color in the part of the generated qrcode like below?
AAResizeImage2.PNG
 

mcqueccu

Well-Known Member
Licensed User
Longtime User
Check the QRGenerator page post #10

 
Upvote 0

microbox

Active Member
Licensed User
Longtime User
@mcqueccu thank you for your reply. I tried it but I can not resize the image and I noticed (I may be wrong) I can only adjust the transparency level.
B4X:
Sub AddSomeColors(QRBmp1 As B4XBitmap, logo1 As B4XBitmap) As B4XBitmap
    Dim bc As BitmapCreator
    bc.Initialize(QRBmp1.Width, QRBmp1.Height)
    bc.CopyPixelsFromBitmap(QRBmp1)
    Dim LogoBC As BitmapCreator
    LogoBC.Initialize(QRBmp1.Width, QRBmp1.Height)
    LogoBC.CopyPixelsFromBitmap(logo1)
    Dim argb, largb As ARGBColor
    For x = 0 To bc.mWidth -1
        For y = 0 To bc.mHeight - 1
            bc.GetARGB(x, y, argb)
            LogoBC.GetARGB(x, y, largb)
            If largb.a > 0 Then
                largb.a =200
                LogoBC.SetARGB(x, y, largb)
                bc.BlendPixel(LogoBC, x, y, x, y)
            End If
        Next
    Next
    Return bc.Bitmap
End Sub

Capture200.PNG

I would to have like this
Capture2001.png
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
You can improve the code if you want.

B4X:
Type vec2(left As Float, top As Float, width As Float, height As Float)

B4X:
    QR.Initialize(ImageView1.Width)
    Dim QRbmp As B4XBitmap = AddSomeColors(QR.Create("https://www.google.com"))
    Dim logo As B4XBitmap = xui.LoadBitmap(File.DirAssets,"102342.jpg")

    Dim v As vec2
    v.Initialize
    v.left = (ImageView1.Width/2)-(logo.Width/2)
    v.top = (ImageView1.Height/2)-(logo.Height/2)
    v.width = ImageView1.Width*0.3
    v.height = ImageView1.Height*0.3

    Dim rect As B4XRect
    rect.Initialize(v.left, v.top, v.left + v.width, v.top + v.height)
    ImageView1.SetBitmap(combine2bitmaps(QRbmp,logo,rect))

B4X:
Sub combine2bitmaps(firstBmp As B4XBitmap, secondBmp As B4XBitmap, SecondImageRect As B4XRect) As B4XBitmap
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0,0,0,firstBmp.Width,firstBmp.Height)
    Dim c As B4XCanvas
    c.Initialize(p)
    c.DrawBitmap(firstBmp, c.TargetRect)
    c.DrawBitmap(secondBmp, SecondImageRect )
    Dim res As B4XBitmap = c.CreateBitmap
    c.Release
    Return  res
End Sub

Result:

1616060416959.png
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
color image alfa:

B4X:
Dim logo As B4XBitmap = AlfaImage(xui.LoadBitmap(File.DirAssets,"102342.jpg"), 200)

B4X:
Private Sub AlfaImage(xlogo As B4XBitmap, Alpha As Int) As B4XBitmap
    Dim bc As BitmapCreator
    bc.Initialize(xlogo.Width, xlogo.Height)
    Dim LogoBC As BitmapCreator
    LogoBC.Initialize(xlogo.Width, xlogo.Height)
    LogoBC.CopyPixelsFromBitmap(xlogo)
    Dim argb, largb As ARGBColor
    For x = 0 To bc.mWidth - 1
        For y = 0 To bc.mHeight - 1
            bc.GetARGB(x, y, argb)
            LogoBC.GetARGB(x, y, largb)
            If largb.a > 0 Then
                largb.a = Alpha
                LogoBC.SetARGB(x, y, largb)
                bc.BlendPixel(LogoBC, x, y, x, y)
            End If
        Next
    Next
    Return bc.Bitmap
End Sub

Result:

1616061814437.png
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
the end:

B4X:
    QR.Initialize(ImageView1.Width)
    Dim QRbmp As B4XBitmap = AddSomeColors(QR.Create("https://www.google.com"))
    Dim logo As B4XBitmap = AlfaImage(xui.LoadBitmapResize(File.DirAssets,"aa.png",250,250,False), 200)

    Dim v As vec2
    v.Initialize
    v.left = (QRbmp.Width/2)-(QRbmp.Width*0.5/2)
    v.top = (QRbmp.Height/2)-(QRbmp.Height*0.5/2)
    v.width = QRbmp.Width*0.5
    v.height = QRbmp.Height*0.5

    Dim rect As B4XRect
    rect.Initialize(v.left, v.top, v.left + v.width, v.top + v.height)
    ImageView1.SetBitmap(combine2bitmaps(QRbmp,logo,rect))

1616064473851.png
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
or
B4X:
Dim logo As B4XBitmap = CreateRoundBitmap(AlfaImage(xui.LoadBitmapResize(File.DirAssets,"aa.png",250,250,False), 110),250)

B4X:
Sub CreateRoundBitmap (Input As B4XBitmap, Size As Int) As B4XBitmap
    If Input.Width <> Input.Height Then
        'if the image is not square then we crop it to be a square.
        Dim l As Int = Min(Input.Width, Input.Height)
        Input = Input.Crop(Input.Width / 2 - l / 2, Input.Height / 2 - l / 2, l, l)
    End If
    Dim c As B4XCanvas
    Dim xview As B4XView = xui.CreatePanel("")
    xview.SetLayoutAnimated(0, 0, 0, Size, Size)
    c.Initialize(xview)
    Dim path As B4XPath
    path.InitializeOval(c.TargetRect)
    c.ClipPath(path)
    c.DrawBitmap(Input.Resize(Size, Size, False), c.TargetRect)
    c.RemoveClip
    '------ c.DrawCircle(c.TargetRect.CenterX, c.TargetRect.CenterY, c.TargetRect.Width / 2 - 2dip, xui.Color_White, False, 5dip) 'comment this line to remove the border
    c.Invalidate
    Dim res As B4XBitmap = c.CreateBitmap
    c.Release
    Return res
End Sub

1616066479812.png
 
Last edited:
Upvote 0

microbox

Active Member
Licensed User
Longtime User
@oparra works great for me thanks! :) But I have another question. I tried to play with function below
B4X:
Sub AddSomeColors(bmp As B4XBitmap) As B4XBitmap
    Dim bc As BitmapCreator
    bc.Initialize(bmp.Width, bmp.Height+bmp.Width)
    bc.CopyPixelsFromBitmap(bmp)
    Dim FromColorDark As ARGBColor = CreateARGBColor(100, 149, 237)
    Dim ToColorDark As ARGBColor = CreateARGBColor(250, 250, 230)
    Dim FromColorLight As ARGBColor = CreateARGBColor(204, 204, 255)
    Dim ToColorLight As ARGBColor = CreateARGBColor(230,230, 230)
    
    Dim MaxValue As Int = bc.mWidth
    Dim FromColor, ToColor As ARGBColor
    Dim argb As ARGBColor
    For x = 0 To bc.mWidth - 1
        For y = 0 To bc.mHeight - 1
            bc.GetARGB(x, y, argb)
            If argb.r = 0 Then 'black
                FromColor = FromColorDark
                ToColor = ToColorDark
            Else
                FromColor = FromColorLight
                ToColor = ToColorLight
            End If
            argb.r = FromColor.r + (ToColor.r - FromColor.r) * (x + y) / MaxValue
            argb.g = FromColor.g + (ToColor.g - FromColor.g) * (x + y) / MaxValue
            argb.b = FromColor.b + (ToColor.b - FromColor.b) * (x + y) / MaxValue
            bc.SetARGB(x, y, argb)
        Next
    Next
    Return bc.Bitmap
End Sub
How can I change the color only with following region of interest in the qrcode?
ex.(color red on 3 major box)
AAResizeImage2.PNG
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
@oparra works great for me thanks! :) But I have another question. I tried to play with function below
B4X:
Sub AddSomeColors(bmp As B4XBitmap) As B4XBitmap
    Dim bc As BitmapCreator
    bc.Initialize(bmp.Width, bmp.Height+bmp.Width)
    bc.CopyPixelsFromBitmap(bmp)
    Dim FromColorDark As ARGBColor = CreateARGBColor(100, 149, 237)
    Dim ToColorDark As ARGBColor = CreateARGBColor(250, 250, 230)
    Dim FromColorLight As ARGBColor = CreateARGBColor(204, 204, 255)
    Dim ToColorLight As ARGBColor = CreateARGBColor(230,230, 230)
   
    Dim MaxValue As Int = bc.mWidth
    Dim FromColor, ToColor As ARGBColor
    Dim argb As ARGBColor
    For x = 0 To bc.mWidth - 1
        For y = 0 To bc.mHeight - 1
            bc.GetARGB(x, y, argb)
            If argb.r = 0 Then 'black
                FromColor = FromColorDark
                ToColor = ToColorDark
            Else
                FromColor = FromColorLight
                ToColor = ToColorLight
            End If
            argb.r = FromColor.r + (ToColor.r - FromColor.r) * (x + y) / MaxValue
            argb.g = FromColor.g + (ToColor.g - FromColor.g) * (x + y) / MaxValue
            argb.b = FromColor.b + (ToColor.b - FromColor.b) * (x + y) / MaxValue
            bc.SetARGB(x, y, argb)
        Next
    Next
    Return bc.Bitmap
End Sub
How can I change the color only with following region of interest in the qrcode?
ex.(color red on 3 major box)
View attachment 109955

See Class QRGenerator
Private Sub DrawMatrix

1616086078592.png
 

Attachments

  • TEST-QRCODE.zip
    114 KB · Views: 197
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
I am modifying the class, adding parameters for pattern color, background color, and pattern type.

I am also adding a title and image with levels of transparency and positioning within the QR image.

Since I am going to use it in my projects

😁😁😁



1616106593921.png
1616106624646.png


1616107181929.png
1616107350852.png
 
Upvote 0
Top