Integration of the scanner into the IntraWeb application.

[Сергей Александрович]

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
<script src="html5-qrcode.min.js"></script>

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?

[RenSword]

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.

[Сергей Александрович]

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

[Сергей Александрович]

As a result, I use your
IWLabel1 option.Caption := '<div style="width: 500px" id="header"></div>'

Thank you very much!!!