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

microbox · Mar 18, 2021

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).

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?

mcqueccu · Mar 18, 2021

Check the QRGenerator page post #10

[B4X] QRGenerator - Cross platform QR code generator

QRGenerator is a class that generates QR codes. It is written in B4X and it is compatible with B4A, B4i and B4J. iPhone default camera app recognizing the QR code displayed in a B4A app: Can create codes made of up to 2953 bytes. It depends on XUI library and B4XCollections v1.50+. It uses...

www.b4x.com

microbox · Mar 18, 2021

@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

I would to have like this

TILogistic · Mar 18, 2021

see:

return Bitmap from 2 Bitmaps [b4x]

hi, its more a b4x question then a b4j question. i just post it here because the code i write is in b4j because its much simpler but i need it for b4i. anyway, i want to return a bitmap from 2 bitmaps drawn one of each other. what would be the best way to do it? (as much b4x as possible) i do...

www.b4x.com

TILogistic · Mar 18, 2021

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:

TILogistic · Mar 18, 2021

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:

TILogistic · Mar 18, 2021

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))

microbox · Mar 18, 2021

@oparra.. I will try this out as soon as I can. Thank you for your kind feedback. ?

TILogistic · Mar 18, 2021

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

microbox · Mar 18, 2021

@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)

TILogistic · Mar 18, 2021

Do you want to change the color of the position indicator?

or

Position and alignment indicator?

File:QR Code Structure Example 3.svg - Wikipedia

en.wikipedia.org

TILogistic · Mar 18, 2021

microbox said:

@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

TILogistic · Mar 18, 2021

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

???

TILogistic · Mar 18, 2021

When I finish I will post the class.

Regards.

microbox · Mar 19, 2021

@oparra thank you for the time and helping out. ?

Maddy_1 · May 19, 2023

Awesome.. Is it normal that my camera prioritizes the one without the object in the middle? Does that mean anything?

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

microbox

Active Member

mcqueccu

Well-Known Member

[B4X] QRGenerator - Cross platform QR code generator

microbox

Active Member

TILogistic

Expert

return Bitmap from 2 Bitmaps [b4x]

TILogistic

Expert

TILogistic

Expert

TILogistic

Expert

microbox

Active Member

TILogistic

Expert

microbox

Active Member

TILogistic

Expert

File:QR Code Structure Example 3.svg - Wikipedia

TILogistic

Expert

Attachments

TILogistic

Expert

TILogistic

Expert

microbox

Active Member

Maddy_1

New Member

Similar Threads