B4J Question (solved)[abmaterial]how to draw qrcode in webpage

[liulifeng77]

pdfjet seems must create a pdf file and save it to disk firstly.then use pdfviewer loading this file. how to draw qrcode directly in webpage.
regards

 

[jmon]

You could try this library:
https://www.b4x.com/android/forum/t...ava-code-and-the-itext-library.60845/#content

Then generate the Barcodes and load them as image in the page

 

[liulifeng77]

thanks.but qrcode stored in the pdf file yet.
i want to draw a qrcode from a string in the webpage, need not loading any file.
sorry for my poor english.

 

[alwaysbusy]

You will need to write your own ABMCustomComponent to do this. Search the internet for a good javascript library that can do this and I'll have a look at it and see if I can write the B4J code using an ABMCustomComponent similar as we wrote the Google Charts.

 

[liulifeng77]

thanks。i will try 。

 

[Harris]

write the B4J code using an ABMCustomComponent similar as we wrote the Google Charts.

Sorry? I must have missed this post...

Been busy with native b4j and jCharts trying to create what Chartist lacks.

Christ!!!, you turn your head for two seconds and you miss the boat... Not anyone's fault but mine.

Most interested in Google Charts... (and ABM custom component interface).

Thanks

 

[alwaysbusy]

@Harris Stay alert, you'll getting to much sleep!

https://www.b4x.com/android/forum/t...stion-about-abmcustomcomponent.71076/#content

 

[Harris]

@Harris Stay alert, you'll getting to much sleep!

https://www.b4x.com/android/forum/t...stion-about-abmcustomcomponent.71076/#content

Hey, you once instructed me to go to bed cause I was off the rails... (which I truly was)...

Now, guess I did and missed this entirely (while sleeping!).

I shall follow up and respond... - just not now - must sleep (and miss the action).

I shall follow so I don't miss out..

Thanks

 

[alwaysbusy]

Had 5 minutes to spare, so I created the QRCode component using ABMCustomComponent. It is using this javascript library: https://github.com/davidshimjs/qrcodejs

The component class CompQRCode:

'Class module
Sub Class_Globals
     Public ABMComp As ABMCustomComponent
     Public myText As String
   Public myWidth As Int
   Public myHeight As Int
   Public myColorDark As String
   Public myColorLight As String
   Public myCorrectLevel As String
End Sub
'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(InternalPage As ABMPage, ID As String, text As String, width As Int, height As Int, colorDark As String, colorLight As String, correctLevel As String)
     ABMComp.Initialize("ABMComp", Me, InternalPage, ID)
     myText = text
   myWidth = width
   myHeight = height
   myColorDark = colorDark
   myColorLight = colorLight
   myCorrectLevel = correctLevel
End Sub
Sub ABMComp_Build(internalID As String) As String
  Return $"<div id="${internalID}svg"/></div><script>var qrcode${internalID};</script>"$
End Sub
' Is useful to run some initalisation script.
Sub ABMComp_FirstRun(InternalPage As ABMPage, internalID As String)
   Dim script As String = $"qrcode${internalID} = new QRCode(document.getElementById("${internalID}svg"), {
  text: "${myText}",
  width: ${myWidth},
  height: ${myHeight},
  colorDark : "${myColorDark}",
  colorLight : "${myColorLight}",
  correctLevel : ${myCorrectLevel}
});"$
     InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
     ' flush not needed, it's done in the refresh method in the lib
End Sub
' runs when a refresh is called
Sub ABMComp_Refresh(InternalPage As ABMPage, internalID As String)
   Dim script As String = $"qrcode${internalID}.clear();
   qrcode${internalID}.makeCode("${myText}");"$
     InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
End Sub
' do the stuff needed when the object is removed
Sub ABMComp_CleanUp(InternalPage As ABMPage, internalID As String)
End Sub

Usage (if you want to change its text at run time, put the declaration in Class_globals):

Dim QRCode As CompQRCode

In BuildPage() load the javascript library:

page.AddExtraJavaScriptFile("custom/qrcode.min.js")

In ConnectPage():

QRCode.Initialize(page, "qrcode", "Alwaysbusy's ABMaterial", 128,128, "#000000", "transparent", "QRCode.CorrectLevel.H")
page.Cell(3,1).AddComponent(QRCode.ABMComp)

Et voila, another new component

Call for action: If you have created such a component using ABMCustomComponent, why don't you share it with the community? It will benefit everyone!

Alain

 

[liulifeng77]

wow,it's amazing, thanks!