Forum > Integration of the scanner into the IntraWeb application.

12-05-2023, 12:43 PM:

Task: To embed a QR code scanner in the IntraWeb application.

We do it according to the recommendations https://blog.minhazav.dev/research/html5-qrcode

1. Enable the JavaScript script directly using

To do this, write in the JavaScript property in the project form: src ="html5-qrcode.min.js "

2. Further in the recommendation it is written :

[2] Add an empty div to the place where you want to place the qr code scanner

<<div style="width: 500px" id="header"></div>

How do I do this in IntraWeb?

12-06-2023, 10:13 AM:

Few ways can achieve that

1) If you are using template way

- You can directly write <div style="width: 500px" id="header"></div> in your template

2) Using TIWLabel

- Set RawText property to True

Code:

IWLabel1.Caption := '<div style="width: 500px" id="header"></div>'

3) Using TIWRegion

- TIWRegion will be rendered as <div>

- to get the html ID of IWRegion in delphi, you can call IWRegion1.HTMLName

- There may be style set by Intraweb that will conflict with what you want

To start qr code scanner you probably can do this in your form

Code:

CallbackResponse.AddJavaScriptToExecute(S); //S <= string that contain javascript needed to initiate qr code scanner

or if u are using template, u can directly go write <script></script> in the template

There may be other way to do this.

12-06-2023, 03:03 PM:

Thank you. So far I have found this way:

var elemDiv = document.createElement('div');

elemDiv.style = "width: 500px";

elemDiv.id="reader";

document.body.appendChild(elemDiv);

12-08-2023, 06:10 PM:

As a result, I use your

IWLabel1 option.Caption := '<div style="width: 500px" id="header"></div>'

Thank you very much!!!