Integration of the scanner into the IntraWeb application.

Integration of the scanner into the IntraWeb application. - Printable Version

+- Atozed Forums (https://www.atozed.com/forums)
+-- Forum: Atozed Software Products (https://www.atozed.com/forums/forum-1.html)
+--- Forum: IntraWeb (https://www.atozed.com/forums/forum-3.html)
+---- Forum: English (https://www.atozed.com/forums/forum-16.html)
+----- Forum: IntraWeb General Discussion (https://www.atozed.com/forums/forum-4.html)
+----- Thread: Integration of the scanner into the IntraWeb application. (/thread-3681.html)

Integration of the scanner into the IntraWeb application. - Сергей Александрович - 12-05-2023

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?

RE: Integration of the scanner into the IntraWeb application. - RenSword - 12-06-2023

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.

RE: Integration of the scanner into the IntraWeb application. - Сергей Александрович - 12-06-2023

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

RE: Integration of the scanner into the IntraWeb application. - Сергей Александрович - 12-08-2023

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

Thank you very much!!!